@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/build/comment-reply-link/edit.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _i18n = require("@wordpress/i18n");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Renders the `core/comment-reply-link` block on the editor.
+ *
+ * @param {Object} props                      React props.
+ * @param {Object} props.setAttributes        Callback for updating block attributes.
+ * @param {Object} props.attributes           Block attributes.
+ * @param {string} props.attributes.textAlign The `textAlign` attribute.
+ *
+ * @return {JSX.Element} React element.
+ */
+function Edit({
+  setAttributes,
+  attributes: {
+    textAlign
+  }
+}) {
+  const blockProps = (0, _blockEditor.useBlockProps)({
+    className: (0, _classnames.default)({
+      [`has-text-align-${textAlign}`]: textAlign
+    })
+  });
+  const blockControls = (0, _element.createElement)(_blockEditor.BlockControls, {
+    group: "block"
+  }, (0, _element.createElement)(_blockEditor.AlignmentControl, {
+    value: textAlign,
+    onChange: newAlign => setAttributes({
+      textAlign: newAlign
+    })
+  }));
+  return (0, _element.createElement)(_element.Fragment, null, blockControls, (0, _element.createElement)("div", blockProps, (0, _element.createElement)("a", {
+    href: "#comment-reply-pseudo-link",
+    onClick: event => event.preventDefault()
+  }, (0, _i18n.__)('Reply'))));
+}
+
+var _default = Edit;
+exports.default = _default;
+//# sourceMappingURL=edit.js.map

package/build/comment-reply-link/edit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comment-reply-link/edit.js"],"names":["Edit","setAttributes","attributes","textAlign","blockProps","className","blockControls","newAlign","event","preventDefault"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,IAAT,CAAe;AAAEC,EAAAA,aAAF;AAAiBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA;AAAF;AAA7B,CAAf,EAA8D;AAC7D,QAAMC,UAAU,GAAG,gCAAe;AACjCC,IAAAA,SAAS,EAAE,yBAAY;AACtB,OAAG,kBAAkBF,SAAW,EAAhC,GAAqCA;AADf,KAAZ;AADsB,GAAf,CAAnB;AAMA,QAAMG,aAAa,GAClB,4BAAC,0BAAD;AAAe,IAAA,KAAK,EAAC;AAArB,KACC,4BAAC,6BAAD;AACC,IAAA,KAAK,EAAGH,SADT;AAEC,IAAA,QAAQ,EAAKI,QAAF,IACVN,aAAa,CAAE;AAAEE,MAAAA,SAAS,EAAEI;AAAb,KAAF;AAHf,IADD,CADD;AAWA,SACC,qDACGD,aADH,EAEC,mCAAUF,UAAV,EACC;AACC,IAAA,IAAI,EAAC,4BADN;AAEC,IAAA,OAAO,EAAKI,KAAF,IAAaA,KAAK,CAACC,cAAN;AAFxB,KAIG,cAAI,OAAJ,CAJH,CADD,CAFD,CADD;AAaA;;eAEcT,I","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tAlignmentControl,\n\tBlockControls,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\n\n/**\n * Renders the `core/comment-reply-link` block on the editor.\n *\n * @param {Object} props                      React props.\n * @param {Object} props.setAttributes        Callback for updating block attributes.\n * @param {Object} props.attributes           Block attributes.\n * @param {string} props.attributes.textAlign The `textAlign` attribute.\n *\n * @return {JSX.Element} React element.\n */\nfunction Edit( { setAttributes, attributes: { textAlign } } ) {\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classnames( {\n\t\t\t[ `has-text-align-${ textAlign }` ]: textAlign,\n\t\t} ),\n\t} );\n\n\tconst blockControls = (\n\t\t<BlockControls group=\"block\">\n\t\t\t<AlignmentControl\n\t\t\t\tvalue={ textAlign }\n\t\t\t\tonChange={ ( newAlign ) =>\n\t\t\t\t\tsetAttributes( { textAlign: newAlign } )\n\t\t\t\t}\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ blockControls }\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<a\n\t\t\t\t\thref=\"#comment-reply-pseudo-link\"\n\t\t\t\t\tonClick={ ( event ) => event.preventDefault() }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reply' ) }\n\t\t\t\t</a>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Edit;\n"]}

package/build/comment-reply-link/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.settings = exports.name = exports.metadata = void 0;
+
+var _icons = require("@wordpress/icons");
+
+var _edit = _interopRequireDefault(require("./edit"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const metadata = {
+  apiVersion: 2,
+  name: "core/comment-reply-link",
+  title: "Comment Reply Link",
+  category: "theme",
+  parent: ["core/comment-template"],
+  description: "Displays a link to reply to a comment.",
+  textdomain: "default",
+  usesContext: ["commentId"],
+  attributes: {
+    textAlign: {
+      type: "string"
+    }
+  },
+  supports: {
+    color: {
+      gradients: true,
+      link: true,
+      text: false
+    },
+    typography: {
+      fontSize: true,
+      lineHeight: true,
+      __experimentalFontFamily: true,
+      __experimentalFontWeight: true,
+      __experimentalFontStyle: true,
+      __experimentalTextTransform: true,
+      __experimentalLetterSpacing: true
+    },
+    html: false
+  }
+};
+exports.metadata = metadata;
+const {
+  name
+} = metadata;
+exports.name = name;
+const settings = {
+  edit: _edit.default,
+  icon: _icons.commentReplyLink
+};
+exports.settings = settings;
+//# sourceMappingURL=index.js.map

package/build/comment-reply-link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comment-reply-link/index.js"],"names":["name","metadata","settings","edit","icon"],"mappings":";;;;;;;;;AAGA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,QAAjB;;AAGO,MAAMC,QAAQ,GAAG;AACvBC,EAAAA,IAAI,EAAJA,aADuB;AAEvBC,EAAAA,IAAI,EAAJA;AAFuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { commentReplyLink as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport metadata from './block.json';\nimport edit from './edit';\n\nconst { name } = metadata;\nexport { metadata, name };\n\nexport const settings = {\n\tedit,\n\ticon,\n};\n"]}

package/build/comment-template/edit.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CommentTemplateEdit;
+
+var _element = require("@wordpress/element");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _components = require("@wordpress/components");
+
+var _coreData = require("@wordpress/core-data");
+
+/**
+ * WordPress dependencies
+ */
+const TEMPLATE = [['core/comment-author-avatar'], ['core/comment-author-name'], ['core/comment-date'], ['core/comment-content'], ['core/comment-reply-link'], ['core/comment-edit-link']];
+
+function CommentTemplateInnerBlocks() {
+  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({}, {
+    template: TEMPLATE
+  });
+  return (0, _element.createElement)("li", innerBlocksProps);
+}
+
+function CommentTemplateEdit({
+  clientId,
+  context: {
+    postId,
+    queryPerPage
+  }
+}) {
+  const blockProps = (0, _blockEditor.useBlockProps)();
+  const [activeBlockContext, setActiveBlockContext] = (0, _element.useState)();
+  const {
+    comments,
+    blocks
+  } = (0, _data.useSelect)(select => {
+    const {
+      getEntityRecords
+    } = select(_coreData.store);
+    const {
+      getBlocks
+    } = select(_blockEditor.store);
+    return {
+      comments: getEntityRecords('root', 'comment', {
+        post: postId,
+        status: 'approve',
+        per_page: queryPerPage,
+        order: 'asc'
+      }),
+      blocks: getBlocks(clientId)
+    };
+  }, [queryPerPage, postId, clientId]);
+  const blockContexts = (0, _element.useMemo)(() => comments === null || comments === void 0 ? void 0 : comments.map(comment => ({
+    commentId: comment.id
+  })), [comments]);
+
+  if (!comments) {
+    return (0, _element.createElement)("p", blockProps, (0, _element.createElement)(_components.Spinner, null));
+  }
+
+  if (!comments.length) {
+    return (0, _element.createElement)("p", blockProps, " ", (0, _i18n.__)('No results found.'));
+  }
+
+  return (0, _element.createElement)("ul", blockProps, blockContexts && blockContexts.map(blockContext => (0, _element.createElement)(_blockEditor.BlockContextProvider, {
+    key: blockContext.commentId,
+    value: blockContext
+  }, blockContext === (activeBlockContext || blockContexts[0]) ? (0, _element.createElement)(CommentTemplateInnerBlocks, null) : (0, _element.createElement)("li", null, (0, _element.createElement)(_blockEditor.BlockPreview, {
+    blocks: blocks,
+    __experimentalLive: true,
+    __experimentalOnClick: () => setActiveBlockContext(blockContext)
+  })))));
+}
+//# sourceMappingURL=edit.js.map

package/build/comment-template/edit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/edit.js"],"names":["TEMPLATE","CommentTemplateInnerBlocks","innerBlocksProps","template","CommentTemplateEdit","clientId","context","postId","queryPerPage","blockProps","activeBlockContext","setActiveBlockContext","comments","blocks","select","getEntityRecords","coreStore","getBlocks","blockEditorStore","post","status","per_page","order","blockContexts","map","comment","commentId","id","length","blockContext"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAdA;AACA;AACA;AAcA,MAAMA,QAAQ,GAAG,CAChB,CAAE,4BAAF,CADgB,EAEhB,CAAE,0BAAF,CAFgB,EAGhB,CAAE,mBAAF,CAHgB,EAIhB,CAAE,sBAAF,CAJgB,EAKhB,CAAE,yBAAF,CALgB,EAMhB,CAAE,wBAAF,CANgB,CAAjB;;AASA,SAASC,0BAAT,GAAsC;AACrC,QAAMC,gBAAgB,GAAG,sCAAqB,EAArB,EAAyB;AAAEC,IAAAA,QAAQ,EAAEH;AAAZ,GAAzB,CAAzB;AACA,SAAO,kCAASE,gBAAT,CAAP;AACA;;AAEc,SAASE,mBAAT,CAA8B;AAC5CC,EAAAA,QAD4C;AAE5CC,EAAAA,OAAO,EAAE;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV;AAFmC,CAA9B,EAGX;AACH,QAAMC,UAAU,GAAG,iCAAnB;AAEA,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,wBAAtD;AAEA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAuB,qBAC1BC,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAuBD,MAAM,CAAEE,eAAF,CAAnC;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAgBH,MAAM,CAAEI,kBAAF,CAA5B;AAEA,WAAO;AACNN,MAAAA,QAAQ,EAAEG,gBAAgB,CAAE,MAAF,EAAU,SAAV,EAAqB;AAC9CI,QAAAA,IAAI,EAAEZ,MADwC;AAE9Ca,QAAAA,MAAM,EAAE,SAFsC;AAG9CC,QAAAA,QAAQ,EAAEb,YAHoC;AAI9Cc,QAAAA,KAAK,EAAE;AAJuC,OAArB,CADpB;AAONT,MAAAA,MAAM,EAAEI,SAAS,CAAEZ,QAAF;AAPX,KAAP;AASA,GAd2B,EAe5B,CAAEG,YAAF,EAAgBD,MAAhB,EAAwBF,QAAxB,CAf4B,CAA7B;AAkBA,QAAMkB,aAAa,GAAG,sBACrB,MAAMX,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAEY,GAAV,CAAiBC,OAAF,KAAiB;AAAEC,IAAAA,SAAS,EAAED,OAAO,CAACE;AAArB,GAAjB,CAAf,CADe,EAErB,CAAEf,QAAF,CAFqB,CAAtB;;AAKA,MAAK,CAAEA,QAAP,EAAkB;AACjB,WACC,iCAAQH,UAAR,EACC,4BAAC,mBAAD,OADD,CADD;AAKA;;AAED,MAAK,CAAEG,QAAQ,CAACgB,MAAhB,EAAyB;AACxB,WAAO,iCAAQnB,UAAR,OAAwB,cAAI,mBAAJ,CAAxB,CAAP;AACA;;AAED,SACC,kCAASA,UAAT,EACGc,aAAa,IACdA,aAAa,CAACC,GAAd,CAAqBK,YAAF,IAClB,4BAAC,iCAAD;AACC,IAAA,GAAG,EAAGA,YAAY,CAACH,SADpB;AAEC,IAAA,KAAK,EAAGG;AAFT,KAIGA,YAAY,MACZnB,kBAAkB,IAAIa,aAAa,CAAE,CAAF,CADvB,CAAZ,GAED,4BAAC,0BAAD,OAFC,GAID,wCACC,4BAAC,yBAAD;AACC,IAAA,MAAM,EAAGV,MADV;AAEC,IAAA,kBAAkB,MAFnB;AAGC,IAAA,qBAAqB,EAAG,MACvBF,qBAAqB,CAAEkB,YAAF;AAJvB,IADD,CARF,CADD,CAFF,CADD;AA0BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBlockContextProvider,\n\tBlockPreview,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { Spinner } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\n\nconst TEMPLATE = [\n\t[ 'core/comment-author-avatar' ],\n\t[ 'core/comment-author-name' ],\n\t[ 'core/comment-date' ],\n\t[ 'core/comment-content' ],\n\t[ 'core/comment-reply-link' ],\n\t[ 'core/comment-edit-link' ],\n];\n\nfunction CommentTemplateInnerBlocks() {\n\tconst innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );\n\treturn <li { ...innerBlocksProps } />;\n}\n\nexport default function CommentTemplateEdit( {\n\tclientId,\n\tcontext: { postId, queryPerPage },\n} ) {\n\tconst blockProps = useBlockProps();\n\n\tconst [ activeBlockContext, setActiveBlockContext ] = useState();\n\n\tconst { comments, blocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\n\t\t\treturn {\n\t\t\t\tcomments: getEntityRecords( 'root', 'comment', {\n\t\t\t\t\tpost: postId,\n\t\t\t\t\tstatus: 'approve',\n\t\t\t\t\tper_page: queryPerPage,\n\t\t\t\t\torder: 'asc',\n\t\t\t\t} ),\n\t\t\t\tblocks: getBlocks( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ queryPerPage, postId, clientId ]\n\t);\n\n\tconst blockContexts = useMemo(\n\t\t() => comments?.map( ( comment ) => ( { commentId: comment.id } ) ),\n\t\t[ comments ]\n\t);\n\n\tif ( ! comments ) {\n\t\treturn (\n\t\t\t<p { ...blockProps }>\n\t\t\t\t<Spinner />\n\t\t\t</p>\n\t\t);\n\t}\n\n\tif ( ! comments.length ) {\n\t\treturn <p { ...blockProps }> { __( 'No results found.' ) }</p>;\n\t}\n\n\treturn (\n\t\t<ul { ...blockProps }>\n\t\t\t{ blockContexts &&\n\t\t\t\tblockContexts.map( ( blockContext ) => (\n\t\t\t\t\t<BlockContextProvider\n\t\t\t\t\t\tkey={ blockContext.commentId }\n\t\t\t\t\t\tvalue={ blockContext }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ blockContext ===\n\t\t\t\t\t\t( activeBlockContext || blockContexts[ 0 ] ) ? (\n\t\t\t\t\t\t\t<CommentTemplateInnerBlocks />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<BlockPreview\n\t\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\t\t__experimentalLive\n\t\t\t\t\t\t\t\t\t__experimentalOnClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetActiveBlockContext( blockContext )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</BlockContextProvider>\n\t\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"]}

package/build/{post-comment-content → comment-template}/index.js

@@ -11,6 +11,8 @@ var _icons = require("@wordpress/icons");
 
 var _edit = _interopRequireDefault(require("./edit"));
 
+var _save = _interopRequireDefault(require("./save"));
+
 /**
  * WordPress dependencies
  */
@@ -20,15 +22,17 @@ var _edit = _interopRequireDefault(require("./edit"));
  */
 const metadata = {
   apiVersion: 2,
-  name: "core/post-comment-content",
-  title: "Post Comment Content",
+  name: "core/comment-template",
+  title: "Comment Template",
   category: "design",
-  parent: ["core/post-comment"],
-  description: "Post comment content",
+  parent: ["core/comments-query-loop"],
+  description: "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
   textdomain: "default",
-  usesContext: ["commentId"],
+  usesContext: ["queryId", "queryPerPage", "postId"],
   supports: {
-    html: false
+    reusable: false,
+    html: false,
+    align: true
   }
 };
 exports.metadata = metadata;
@@ -37,8 +41,9 @@ const {
 } = metadata;
 exports.name = name;
 const settings = {
-  icon: _icons.postContent,
-  edit: _edit.default
+  icon: _icons.layout,
+  edit: _edit.default,
+  save: _save.default
 };
 exports.settings = settings;
 //# sourceMappingURL=index.js.map

package/build/comment-template/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/index.js"],"names":["name","metadata","settings","icon","edit","save"],"mappings":";;;;;;;;;AAGA;;AAMA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;;;;;;;;;;;;;;;;AAKA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,QAAjB;;AAGO,MAAMC,QAAQ,GAAG;AACvBC,EAAAA,IAAI,EAAJA,aADuB;AAEvBC,EAAAA,IAAI,EAAJA,aAFuB;AAGvBC,EAAAA,IAAI,EAAJA;AAHuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { layout as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport metadata from './block.json';\nimport edit from './edit';\nimport save from './save';\n\nconst { name } = metadata;\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\tedit,\n\tsave,\n};\n"]}

package/build/comment-template/save.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CommentTemplateSave;
+
+var _element = require("@wordpress/element");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+/**
+ * WordPress dependencies
+ */
+function CommentTemplateSave() {
+  return (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null);
+}
+//# sourceMappingURL=save.js.map

package/build/comment-template/save.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/save.js"],"names":["CommentTemplateSave"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,mBAAT,GAA+B;AAC7C,SAAO,4BAAC,wBAAD,CAAa,OAAb,OAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { InnerBlocks } from '@wordpress/block-editor';\n\nexport default function CommentTemplateSave() {\n\treturn <InnerBlocks.Content />;\n}\n"]}

package/build/comments-query-loop/edit.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CommentsQueryLoopEdit;
+
+var _element = require("@wordpress/element");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _toolbar = _interopRequireDefault(require("./toolbar"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const TEMPLATE = [['core/comment-template']];
+
+function CommentsQueryLoopEdit({
+  attributes,
+  setAttributes
+}) {
+  const {
+    queryPerPage,
+    tagName: TagName
+  } = attributes;
+  const blockProps = (0, _blockEditor.useBlockProps)();
+  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
+    template: TEMPLATE
+  });
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_toolbar.default, {
+    queryPerPage: queryPerPage,
+    setQuery: setAttributes
+  })), (0, _element.createElement)(_blockEditor.InspectorControls, {
+    __experimentalGroup: "advanced"
+  }, (0, _element.createElement)(_components.SelectControl, {
+    label: (0, _i18n.__)('HTML element'),
+    options: [{
+      label: (0, _i18n.__)('Default (<div>)'),
+      value: 'div'
+    }, {
+      label: '<section>',
+      value: 'section'
+    }, {
+      label: '<aside>',
+      value: 'aside'
+    }],
+    value: TagName,
+    onChange: value => setAttributes({
+      tagName: value
+    })
+  })), (0, _element.createElement)(TagName, innerBlocksProps));
+}
+//# sourceMappingURL=edit.js.map

package/build/comments-query-loop/edit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/edit.js"],"names":["TEMPLATE","CommentsQueryLoopEdit","attributes","setAttributes","queryPerPage","tagName","TagName","blockProps","innerBlocksProps","template","label","value"],"mappings":";;;;;;;;;;;AAGA;;AAMA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAUA;AACA;AACA;AAGA,MAAMA,QAAQ,GAAG,CAAE,CAAE,uBAAF,CAAF,CAAjB;;AAEe,SAASC,qBAAT,CAAgC;AAAEC,EAAAA,UAAF;AAAcC,EAAAA;AAAd,CAAhC,EAAgE;AAC9E,QAAM;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,OAAO,EAAEC;AAAzB,MAAqCJ,UAA3C;AAEA,QAAMK,UAAU,GAAG,iCAAnB;AACA,QAAMC,gBAAgB,GAAG,sCAAqBD,UAArB,EAAiC;AACzDE,IAAAA,QAAQ,EAAET;AAD+C,GAAjC,CAAzB;AAIA,SACC,qDACC,4BAAC,0BAAD,QACC,4BAAC,gBAAD;AACC,IAAA,YAAY,EAAGI,YADhB;AAEC,IAAA,QAAQ,EAAGD;AAFZ,IADD,CADD,EAOC,4BAAC,8BAAD;AAAmB,IAAA,mBAAmB,EAAC;AAAvC,KACC,4BAAC,yBAAD;AACC,IAAA,KAAK,EAAG,cAAI,cAAJ,CADT;AAEC,IAAA,OAAO,EAAG,CACT;AAAEO,MAAAA,KAAK,EAAE,cAAI,iBAAJ,CAAT;AAAkCC,MAAAA,KAAK,EAAE;AAAzC,KADS,EAET;AAAED,MAAAA,KAAK,EAAE,WAAT;AAAsBC,MAAAA,KAAK,EAAE;AAA7B,KAFS,EAGT;AAAED,MAAAA,KAAK,EAAE,SAAT;AAAoBC,MAAAA,KAAK,EAAE;AAA3B,KAHS,CAFX;AAOC,IAAA,KAAK,EAAGL,OAPT;AAQC,IAAA,QAAQ,EAAKK,KAAF,IACVR,aAAa,CAAE;AAAEE,MAAAA,OAAO,EAAEM;AAAX,KAAF;AATf,IADD,CAPD,EAqBC,4BAAC,OAAD,EAAcH,gBAAd,CArBD,CADD;AAyBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n} from '@wordpress/block-editor';\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport QueryToolbar from './toolbar';\n\nconst TEMPLATE = [ [ 'core/comment-template' ] ];\n\nexport default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {\n\tconst { queryPerPage, tagName: TagName } = attributes;\n\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<QueryToolbar\n\t\t\t\t\tqueryPerPage={ queryPerPage }\n\t\t\t\t\tsetQuery={ setAttributes }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t] }\n\t\t\t\t\tvalue={ TagName }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"]}

package/build/comments-query-loop/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.settings = exports.name = exports.metadata = void 0;
+
+var _icons = require("@wordpress/icons");
+
+var _edit = _interopRequireDefault(require("./edit"));
+
+var _save = _interopRequireDefault(require("./save"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const metadata = {
+  apiVersion: 2,
+  name: "core/comments-query-loop",
+  title: "Comments Query Loop",
+  category: "theme",
+  description: "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
+  textdomain: "default",
+  attributes: {
+    queryId: {
+      type: "number"
+    },
+    queryPerPage: {
+      type: "number",
+      "default": 4
+    },
+    tagName: {
+      type: "string",
+      "default": "div"
+    }
+  },
+  providesContext: {
+    queryId: "queryId",
+    queryPerPage: "queryPerPage"
+  },
+  supports: {
+    align: ["wide", "full"],
+    html: false,
+    color: {
+      gradients: true,
+      link: true
+    }
+  }
+};
+exports.metadata = metadata;
+const {
+  name
+} = metadata;
+exports.name = name;
+const settings = {
+  icon: _icons.postComments,
+  edit: _edit.default,
+  save: _save.default
+};
+exports.settings = settings;
+//# sourceMappingURL=index.js.map

package/build/comments-query-loop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/index.js"],"names":["name","metadata","settings","icon","edit","save"],"mappings":";;;;;;;;;AAGA;;AAMA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,QAAjB;;AAGO,MAAMC,QAAQ,GAAG;AACvBC,EAAAA,IAAI,EAAJA,mBADuB;AAEvBC,EAAAA,IAAI,EAAJA,aAFuB;AAGvBC,EAAAA,IAAI,EAAJA;AAHuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { postComments as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport metadata from './block.json';\nimport edit from './edit';\nimport save from './save';\n\nconst { name } = metadata;\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\tedit,\n\tsave,\n};\n"]}

package/build/comments-query-loop/save.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CommentsQueryLoopSave;
+
+var _element = require("@wordpress/element");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+/**
+ * WordPress dependencies
+ */
+function CommentsQueryLoopSave({
+  attributes: {
+    tagName: Tag
+  }
+}) {
+  return (0, _element.createElement)(Tag, _blockEditor.useBlockProps.save(), (0, _element.createElement)(_blockEditor.InnerBlocks.Content, null));
+}
+//# sourceMappingURL=save.js.map

package/build/comments-query-loop/save.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/save.js"],"names":["CommentsQueryLoopSave","attributes","tagName","Tag","useBlockProps","save"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,qBAAT,CAAgC;AAC9CC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,OAAO,EAAEC;AAAX;AADkC,CAAhC,EAEX;AACH,SACC,4BAAC,GAAD,EAAUC,2BAAcC,IAAd,EAAV,EACC,4BAAC,wBAAD,CAAa,OAAb,OADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { InnerBlocks, useBlockProps } from '@wordpress/block-editor';\n\nexport default function CommentsQueryLoopSave( {\n\tattributes: { tagName: Tag },\n} ) {\n\treturn (\n\t\t<Tag { ...useBlockProps.save() }>\n\t\t\t<InnerBlocks.Content />\n\t\t</Tag>\n\t);\n}\n"]}

package/build/comments-query-loop/toolbar.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CommentsQueryLoopToolbar;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _icons = require("@wordpress/icons");
+
+/**
+ * WordPress dependencies
+ */
+function CommentsQueryLoopToolbar({
+  queryPerPage,
+  setQuery
+}) {
+  return (0, _element.createElement)(_components.ToolbarGroup, null, (0, _element.createElement)(_components.Dropdown, {
+    renderToggle: ({
+      onToggle
+    }) => (0, _element.createElement)(_components.ToolbarButton, {
+      icon: _icons.settings,
+      label: (0, _i18n.__)('Display settings'),
+      onClick: onToggle
+    }),
+    renderContent: () => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.BaseControl, null, (0, _element.createElement)(_components.__experimentalNumberControl, {
+      __unstableInputWidth: "60px",
+      label: (0, _i18n.__)('Items per Page'),
+      labelPosition: "edge",
+      min: 1,
+      max: 100,
+      onChange: value => {
+        const num = parseInt(value, 10);
+
+        if (isNaN(num) || num < 1 || num > 100) {
+          return;
+        }
+
+        setQuery({
+          queryPerPage: num
+        });
+      },
+      step: "1",
+      value: queryPerPage,
+      isDragEnabled: false
+    })))
+  }));
+}
+//# sourceMappingURL=toolbar.js.map

package/build/comments-query-loop/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/toolbar.js"],"names":["CommentsQueryLoopToolbar","queryPerPage","setQuery","onToggle","settings","value","num","parseInt","isNaN"],"mappings":";;;;;;;;;AAGA;;AAOA;;AACA;;AAXA;AACA;AACA;AAWe,SAASA,wBAAT,CAAmC;AAAEC,EAAAA,YAAF;AAAgBC,EAAAA;AAAhB,CAAnC,EAAgE;AAC9E,SACC,4BAAC,wBAAD,QACC,4BAAC,oBAAD;AACC,IAAA,YAAY,EAAG,CAAE;AAAEC,MAAAA;AAAF,KAAF,KACd,4BAAC,yBAAD;AACC,MAAA,IAAI,EAAGC,eADR;AAEC,MAAA,KAAK,EAAG,cAAI,kBAAJ,CAFT;AAGC,MAAA,OAAO,EAAGD;AAHX,MAFF;AAQC,IAAA,aAAa,EAAG,MACf,qDACC,4BAAC,uBAAD,QACC,4BAAC,uCAAD;AACC,MAAA,oBAAoB,EAAC,MADtB;AAEC,MAAA,KAAK,EAAG,cAAI,gBAAJ,CAFT;AAGC,MAAA,aAAa,EAAC,MAHf;AAIC,MAAA,GAAG,EAAG,CAJP;AAKC,MAAA,GAAG,EAAG,GALP;AAMC,MAAA,QAAQ,EAAKE,KAAF,IAAa;AACvB,cAAMC,GAAG,GAAGC,QAAQ,CAAEF,KAAF,EAAS,EAAT,CAApB;;AACA,YACCG,KAAK,CAAEF,GAAF,CAAL,IACAA,GAAG,GAAG,CADN,IAEAA,GAAG,GAAG,GAHP,EAIE;AACD;AACA;;AACDJ,QAAAA,QAAQ,CAAE;AACTD,UAAAA,YAAY,EAAEK;AADL,SAAF,CAAR;AAGA,OAlBF;AAmBC,MAAA,IAAI,EAAC,GAnBN;AAoBC,MAAA,KAAK,EAAGL,YApBT;AAqBC,MAAA,aAAa,EAAG;AArBjB,MADD,CADD;AATF,IADD,CADD;AA0CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tToolbarGroup,\n\tDropdown,\n\tToolbarButton,\n\tBaseControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\n\nexport default function CommentsQueryLoopToolbar( { queryPerPage, setQuery } ) {\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<Dropdown\n\t\t\t\trenderToggle={ ( { onToggle } ) => (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\ticon={ settings }\n\t\t\t\t\t\tlabel={ __( 'Display settings' ) }\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BaseControl>\n\t\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t\t__unstableInputWidth=\"60px\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Items per Page' ) }\n\t\t\t\t\t\t\t\tlabelPosition=\"edge\"\n\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\tconst num = parseInt( value, 10 );\n\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\tisNaN( num ) ||\n\t\t\t\t\t\t\t\t\t\tnum < 1 ||\n\t\t\t\t\t\t\t\t\t\tnum > 100\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsetQuery( {\n\t\t\t\t\t\t\t\t\t\tqueryPerPage: num,\n\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t\t\t\tvalue={ queryPerPage }\n\t\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</BaseControl>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n}\n"]}