@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.0

package/build/comment-author-avatar/edit.js

@@ -17,6 +17,8 @@ var _components = require("@wordpress/components");
 
 var _coreData = require("@wordpress/core-data");
 
+var _data = require("@wordpress/data");
+
 var _i18n = require("@wordpress/i18n");
 
 /**
@@ -44,6 +46,17 @@ function Edit(_ref) {
   const blockProps = (0, _blockEditor.useBlockProps)();
   const spacingProps = (0, _blockEditor.__experimentalGetSpacingClassesAndStyles)(attributes);
   const maxSizeBuffer = Math.floor(maxSize * 2.5);
+  const {
+    avatarURL
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    const {
+      __experimentalDiscussionSettings
+    } = getSettings();
+    return __experimentalDiscussionSettings;
+  });
   const inspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Avatar Settings')
   }, (0, _element.createElement)(_components.RangeControl, {
@@ -57,7 +70,7 @@ function Edit(_ref) {
     initialPosition: width,
     value: width
   })));
-  const displayAvatar = avatarUrls ? (0, _element.createElement)(_components.ResizableBox, {
+  const resizableAvatar = (0, _element.createElement)(_components.ResizableBox, {
     size: {
       width,
       height
@@ -79,9 +92,9 @@ function Edit(_ref) {
     minWidth: minSize,
     maxWidth: maxSizeBuffer
   }, (0, _element.createElement)("img", (0, _extends2.default)({
-    src: avatarUrls[avatarUrls.length - 1],
+    src: avatarUrls ? avatarUrls[avatarUrls.length - 1] : avatarURL,
     alt: `${authorName} ${(0, _i18n.__)('Avatar')}`
-  }, blockProps))) : (0, _element.createElement)("p", blockProps, (0, _i18n._x)('Comment Author Avatar', 'block title'));
-  return (0, _element.createElement)(_element.Fragment, null, inspectorControls, (0, _element.createElement)("div", spacingProps, displayAvatar));
+  }, blockProps)));
+  return (0, _element.createElement)(_element.Fragment, null, inspectorControls, (0, _element.createElement)("div", spacingProps, resizableAvatar));
 }
 //# sourceMappingURL=edit.js.map

package/build/comment-author-avatar/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/comment-author-avatar/edit.js"],"names":["Edit","attributes","context","commentId","setAttributes","isSelected","height","width","avatars","authorName","avatarUrls","Object","values","sizes","keys","minSize","maxSize","length","blockProps","spacingProps","maxSizeBuffer","Math","floor","inspectorControls","newWidth","displayAvatar","event","direction","elt","delta","parseInt","top","right","bottom","left"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tInspectorControls,\n\tuseBlockProps,\n\t__experimentalGetSpacingClassesAndStyles as useSpacingProps,\n} from '@wordpress/block-editor';\nimport { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';\nimport { useEntityProp } from '@wordpress/core-data';\nimport { __, _x, isRTL } from '@wordpress/i18n';\n\nexport default function Edit( {\n\tattributes,\n\tcontext: { commentId },\n\tsetAttributes,\n\tisSelected,\n} ) {\n\tconst { height, width } = attributes;\n\n\tconst [ avatars ] = useEntityProp(\n\t\t'root',\n\t\t'comment',\n\t\t'author_avatar_urls',\n\t\tcommentId\n\t);\n\n\tconst [ authorName ] = useEntityProp(\n\t\t'root',\n\t\t'comment',\n\t\t'author_name',\n\t\tcommentId\n\t);\n\tconst avatarUrls = avatars ? Object.values( avatars ) : null;\n\tconst sizes = avatars ? Object.keys( avatars ) : null;\n\tconst minSize = sizes ? sizes[ 0 ] : 24;\n\tconst maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;\n\tconst blockProps = useBlockProps();\n\tconst spacingProps = useSpacingProps( attributes );\n\tconst maxSizeBuffer = Math.floor( maxSize * 2.5 );\n\n\tconst inspectorControls = (\n\t\t<InspectorControls>\n\t\t\t<PanelBody title={ __( 'Avatar Settings' ) }>\n\t\t\t\t<RangeControl\n\t\t\t\t\tlabel={ __( 'Image size' ) }\n\t\t\t\t\tonChange={ ( newWidth ) =>\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\theight: newWidth,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tmin={ minSize }\n\t\t\t\t\tmax={ maxSizeBuffer }\n\t\t\t\t\tinitialPosition={ width }\n\t\t\t\t\tvalue={ width }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</InspectorControls>\n\t);\n\n\tconst displayAvatar = avatarUrls ? (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tshowHandle={ isSelected }\n\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\theight: parseInt( height + delta.height, 10 ),\n\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tlockAspectRatio\n\t\t\tenable={ {\n\t\t\t\ttop: false,\n\t\t\t\tright: ! isRTL(),\n\t\t\t\tbottom: true,\n\t\t\t\tleft: isRTL(),\n\t\t\t} }\n\t\t\tminWidth={ minSize }\n\t\t\tmaxWidth={ maxSizeBuffer }\n\t\t>\n\t\t\t<img\n\t\t\t\tsrc={ avatarUrls[ avatarUrls.length - 1 ] }\n\t\t\t\talt={ `${ authorName } ${ __( 'Avatar' ) }` }\n\t\t\t\t{ ...blockProps }\n\t\t\t/>\n\t\t</ResizableBox>\n\t) : (\n\t\t<p { ...blockProps }>\n\t\t\t{ _x( 'Comment Author Avatar', 'block title' ) }\n\t\t</p>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ inspectorControls }\n\t\t\t<div { ...spacingProps }>{ displayAvatar }</div>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/comment-author-avatar/edit.js"],"names":["Edit","attributes","context","commentId","setAttributes","isSelected","height","width","avatars","authorName","avatarUrls","Object","values","sizes","keys","minSize","maxSize","length","blockProps","spacingProps","maxSizeBuffer","Math","floor","avatarURL","select","getSettings","blockEditorStore","__experimentalDiscussionSettings","inspectorControls","newWidth","resizableAvatar","event","direction","elt","delta","parseInt","top","right","bottom","left"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tInspectorControls,\n\tuseBlockProps,\n\t__experimentalGetSpacingClassesAndStyles as useSpacingProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';\nimport { useEntityProp } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { __, isRTL } from '@wordpress/i18n';\n\nexport default function Edit( {\n\tattributes,\n\tcontext: { commentId },\n\tsetAttributes,\n\tisSelected,\n} ) {\n\tconst { height, width } = attributes;\n\n\tconst [ avatars ] = useEntityProp(\n\t\t'root',\n\t\t'comment',\n\t\t'author_avatar_urls',\n\t\tcommentId\n\t);\n\n\tconst [ authorName ] = useEntityProp(\n\t\t'root',\n\t\t'comment',\n\t\t'author_name',\n\t\tcommentId\n\t);\n\tconst avatarUrls = avatars ? Object.values( avatars ) : null;\n\tconst sizes = avatars ? Object.keys( avatars ) : null;\n\tconst minSize = sizes ? sizes[ 0 ] : 24;\n\tconst maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;\n\tconst blockProps = useBlockProps();\n\tconst spacingProps = useSpacingProps( attributes );\n\tconst maxSizeBuffer = Math.floor( maxSize * 2.5 );\n\tconst { avatarURL } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\treturn __experimentalDiscussionSettings;\n\t} );\n\n\tconst inspectorControls = (\n\t\t<InspectorControls>\n\t\t\t<PanelBody title={ __( 'Avatar Settings' ) }>\n\t\t\t\t<RangeControl\n\t\t\t\t\tlabel={ __( 'Image size' ) }\n\t\t\t\t\tonChange={ ( newWidth ) =>\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\theight: newWidth,\n\t\t\t\t\t\t} )\n\t\t\t\t\t}\n\t\t\t\t\tmin={ minSize }\n\t\t\t\t\tmax={ maxSizeBuffer }\n\t\t\t\t\tinitialPosition={ width }\n\t\t\t\t\tvalue={ width }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</InspectorControls>\n\t);\n\n\tconst resizableAvatar = (\n\t\t<ResizableBox\n\t\t\tsize={ {\n\t\t\t\twidth,\n\t\t\t\theight,\n\t\t\t} }\n\t\t\tshowHandle={ isSelected }\n\t\t\tonResizeStop={ ( event, direction, elt, delta ) => {\n\t\t\t\tsetAttributes( {\n\t\t\t\t\theight: parseInt( height + delta.height, 10 ),\n\t\t\t\t\twidth: parseInt( width + delta.width, 10 ),\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tlockAspectRatio\n\t\t\tenable={ {\n\t\t\t\ttop: false,\n\t\t\t\tright: ! isRTL(),\n\t\t\t\tbottom: true,\n\t\t\t\tleft: isRTL(),\n\t\t\t} }\n\t\t\tminWidth={ minSize }\n\t\t\tmaxWidth={ maxSizeBuffer }\n\t\t>\n\t\t\t<img\n\t\t\t\tsrc={\n\t\t\t\t\tavatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : avatarURL\n\t\t\t\t}\n\t\t\t\talt={ `${ authorName } ${ __( 'Avatar' ) }` }\n\t\t\t\t{ ...blockProps }\n\t\t\t/>\n\t\t</ResizableBox>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ inspectorControls }\n\t\t\t<div { ...spacingProps }>{ resizableAvatar }</div>\n\t\t</>\n\t);\n}\n"]}

package/build/comment-template/edit.js

@@ -21,7 +21,7 @@ var _components = require("@wordpress/components");
 
 var _coreData = require("@wordpress/core-data");
 
-var _util = require("./util");
+var _hooks = require("./hooks");
 
 /**
  * WordPress dependencies
@@ -31,6 +31,59 @@ var _util = require("./util");
  * Internal 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 that returns a comment structure that will be rendered with default placehoders.
+ *
+ * @param {Object}  settings                       Discussion Settings.
+ * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.
+ * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.
+ * @param {number}  [settings.threadCommentsDepth] - Level deep of threaded comments.
+ *
+ * @typedef {{id: null, children: EmptyComment[]}} EmptyComment
+ * @return {EmptyComment[]}                 		Inner blocks of the Comment Template
+ */
+
+const getCommentsPlaceholder = _ref => {
+  let {
+    perPage,
+    threadComments,
+    threadCommentsDepth
+  } = _ref;
+  // In case that `threadCommentsDepth` is falsy, we default to a somewhat
+  // arbitrary value of 3.
+  // In case that the value is set but larger than 3 we truncate it to 3.
+  const commentsDepth = Math.min(threadCommentsDepth || 3, 3); // We set a limit in order not to overload the editor of empty comments.
+
+  const defaultCommentsToShow = perPage <= commentsDepth ? perPage : commentsDepth;
+
+  if (!threadComments || defaultCommentsToShow === 1) {
+    // If displaying threaded comments is disabled, we only show one comment
+    return [{
+      commentId: null,
+      children: []
+    }];
+  } else if (defaultCommentsToShow === 2) {
+    return [{
+      commentId: null,
+      children: [{
+        commentId: null,
+        children: []
+      }]
+    }];
+  } // In case that the value is set but larger than 3 we truncate it to 3.
+
+
+  return [{
+    commentId: null,
+    children: [{
+      commentId: null,
+      children: [{
+        commentId: null,
+        children: []
+      }]
+    }]
+  }];
+};
 /**
  * Component which renders the inner blocks of the Comment Template.
  *
@@ -44,7 +97,8 @@ const TEMPLATE = [['core/comment-author-avatar'], ['core/comment-author-name'],
  * @return {WPElement}                 		Inner blocks of the Comment Template
  */
 
-function CommentTemplateInnerBlocks(_ref) {
+
+function CommentTemplateInnerBlocks(_ref2) {
   var _comment$children;
 
   let {
@@ -53,7 +107,7 @@ function CommentTemplateInnerBlocks(_ref) {
     setActiveComment,
     firstComment,
     blocks
-  } = _ref;
+  } = _ref2;
   const {
     children,
     ...innerBlocksProps
@@ -73,13 +127,13 @@ function CommentTemplateInnerBlocks(_ref) {
   }) : null);
 }
 
-const CommentTemplatePreview = _ref2 => {
+const CommentTemplatePreview = _ref3 => {
   let {
     blocks,
     comment,
     setActiveComment,
     isHidden
-  } = _ref2;
+  } = _ref3;
   const blockPreviewProps = (0, _blockEditor.__experimentalUseBlockPreview)({
     blocks
   });
@@ -119,16 +173,16 @@ const MemoizedCommentTemplatePreview = (0, _element.memo)(CommentTemplatePreview
  * @return {WPElement}                 		List of comments.
  */
 
-const CommentsList = _ref3 => {
+const CommentsList = _ref4 => {
   let {
     comments,
     blockProps,
     activeComment,
     setActiveComment,
     blocks
-  } = _ref3;
-  return (0, _element.createElement)("ol", blockProps, comments && comments.map(comment => (0, _element.createElement)(_blockEditor.BlockContextProvider, {
-    key: comment.commentId,
+  } = _ref4;
+  return (0, _element.createElement)("ol", blockProps, comments && comments.map((comment, index) => (0, _element.createElement)(_blockEditor.BlockContextProvider, {
+    key: comment.commentId || index,
     value: comment
   }, (0, _element.createElement)(CommentTemplateInnerBlocks, {
     comment: comment,
@@ -139,28 +193,37 @@ const CommentsList = _ref3 => {
   }))));
 };
 
-function CommentTemplateEdit(_ref4) {
+function CommentTemplateEdit(_ref5) {
   let {
     clientId,
     context: {
       postId,
       'comments/perPage': perPage,
-      'comments/order': order
+      'comments/order': order,
+      'comments/defaultPage': defaultPage,
+      'comments/inherit': inherit
     }
-  } = _ref4;
+  } = _ref5;
   const blockProps = (0, _blockEditor.useBlockProps)();
   const [activeComment, setActiveComment] = (0, _element.useState)();
   const {
     commentOrder,
-    commentsPerPage
+    threadCommentsDepth,
+    threadComments
   } = (0, _data.useSelect)(select => {
     const {
       getSettings
     } = select(_blockEditor.store);
     return getSettings().__experimentalDiscussionSettings;
   });
+  const commentQuery = (0, _hooks.useCommentQueryArgs)({
+    postId,
+    perPage,
+    defaultPage,
+    inherit
+  });
   const {
-    rawComments,
+    topLevelComments,
     blocks
   } = (0, _data.useSelect)(select => {
     const {
@@ -169,40 +232,35 @@ function CommentTemplateEdit(_ref4) {
     const {
       getBlocks
     } = select(_blockEditor.store);
-    const commentQuery = {
-      post: postId,
-      status: 'approve',
-      context: 'embed',
-      order: order || commentOrder
-    };
-
-    if (order) {
-      commentQuery.order = order;
-    }
-
     return {
-      rawComments: getEntityRecords('root', 'comment', commentQuery),
+      // Request only top-level comments. Replies are embedded.
+      topLevelComments: commentQuery ? getEntityRecords('root', 'comment', commentQuery) : null,
       blocks: getBlocks(clientId)
     };
-  }, [postId, clientId, order]); // TODO: Replicate the logic used on the server.
+  }, [clientId, commentQuery]);
+  order = inherit || !order ? commentOrder : order; // Generate a tree structure of comment IDs.
 
-  perPage = perPage || commentsPerPage; // We convert the flat list of comments to tree.
-  // Then, we show only a maximum of `perPage` number of comments.
-  // This is because passing `per_page` to `getEntityRecords()` does not
-  // take into account nested comments.
+  let commentTree = (0, _hooks.useCommentTree)( // Reverse the order of top comments if needed.
+  order === 'desc' && topLevelComments ? [...topLevelComments].reverse() : topLevelComments);
 
-  const comments = (0, _element.useMemo)(() => (0, _util.convertToTree)(rawComments).slice(0, perPage), [rawComments, perPage]);
-
-  if (!rawComments) {
+  if (!topLevelComments) {
     return (0, _element.createElement)("p", blockProps, (0, _element.createElement)(_components.Spinner, null));
   }
 
-  if (!comments.length) {
+  if (!postId) {
+    commentTree = getCommentsPlaceholder({
+      perPage,
+      threadComments,
+      threadCommentsDepth
+    });
+  }
+
+  if (!commentTree.length) {
     return (0, _element.createElement)("p", blockProps, " ", (0, _i18n.__)('No results found.'));
   }
 
   return (0, _element.createElement)(CommentsList, {
-    comments: comments,
+    comments: commentTree,
     blockProps: blockProps,
     blocks: blocks,
     activeComment: activeComment,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/comment-template/edit.js"],"names":["TEMPLATE","CommentTemplateInnerBlocks","comment","activeComment","setActiveComment","firstComment","blocks","children","innerBlocksProps","template","length","CommentTemplatePreview","isHidden","blockPreviewProps","handleOnClick","style","display","undefined","MemoizedCommentTemplatePreview","CommentsList","comments","blockProps","map","commentId","CommentTemplateEdit","clientId","context","postId","perPage","order","commentOrder","commentsPerPage","select","getSettings","blockEditorStore","__experimentalDiscussionSettings","rawComments","getEntityRecords","coreStore","getBlocks","commentQuery","post","status","slice"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, memo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBlockContextProvider,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n\t__experimentalUseBlockPreview as useBlockPreview,\n} from '@wordpress/block-editor';\nimport { Spinner } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { convertToTree } from './util';\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\n/**\n * Component which renders the inner blocks of the Comment Template.\n *\n * @param {Object} props                    Component props.\n * @param {Array}  [props.comment]          - A comment object.\n * @param {Array}  [props.activeComment]    - The block that is currently active.\n * @param {Array}  [props.setActiveComment] - The setter for activeComment.\n * @param {Array}  [props.firstComment]     - First comment in the array.\n * @param {Array}  [props.blocks]           - Array of blocks returned from\n *                                          getBlocks() in parent .\n * @return {WPElement}                 \t\tInner blocks of the Comment Template\n */\nfunction CommentTemplateInnerBlocks( {\n\tcomment,\n\tactiveComment,\n\tsetActiveComment,\n\tfirstComment,\n\tblocks,\n} ) {\n\tconst { children, ...innerBlocksProps } = useInnerBlocksProps(\n\t\t{},\n\t\t{ template: TEMPLATE }\n\t);\n\treturn (\n\t\t<li { ...innerBlocksProps }>\n\t\t\t{ comment === ( activeComment || firstComment ) ? children : null }\n\n\t\t\t{ /* To avoid flicker when switching active block contexts, a preview\n\t\t\tis ALWAYS rendered and the preview for the active block is hidden. \n\t\t\tThis ensures that when switching the active block, the component is not \n\t\t\tmounted again but rather it only toggles the `isHidden` prop.\n\t\t\t\n\t\t\tThe same strategy is used for preventing the flicker in the Post Template\n\t\t\tblock. */ }\n\t\t\t<MemoizedCommentTemplatePreview\n\t\t\t\tblocks={ blocks }\n\t\t\t\tcomment={ comment }\n\t\t\t\tsetActiveComment={ setActiveComment }\n\t\t\t\tisHidden={ comment === ( activeComment || firstComment ) }\n\t\t\t/>\n\n\t\t\t{ comment?.children?.length > 0 ? (\n\t\t\t\t<CommentsList\n\t\t\t\t\tcomments={ comment.children }\n\t\t\t\t\tactiveComment={ activeComment }\n\t\t\t\t\tsetActiveComment={ setActiveComment }\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t/>\n\t\t\t) : null }\n\t\t</li>\n\t);\n}\n\nconst CommentTemplatePreview = ( {\n\tblocks,\n\tcomment,\n\tsetActiveComment,\n\tisHidden,\n} ) => {\n\tconst blockPreviewProps = useBlockPreview( {\n\t\tblocks,\n\t} );\n\n\tconst handleOnClick = () => {\n\t\tsetActiveComment( comment );\n\t};\n\n\t// We have to hide the preview block if the `comment` props points to\n\t// the curently active block!\n\n\t// Or, to put it differently, every preview block is visible unless it is the\n\t// currently active block - in this case we render its inner blocks.\n\tconst style = {\n\t\tdisplay: isHidden ? 'none' : undefined,\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...blockPreviewProps }\n\t\t\ttabIndex={ 0 }\n\t\t\trole=\"button\"\n\t\t\tstyle={ style }\n\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\tonClick={ handleOnClick }\n\t\t\tonKeyPress={ handleOnClick }\n\t\t/>\n\t);\n};\n\nconst MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );\n\n/**\n * Component that renders a list of (nested) comments. It is called recursively.\n *\n * @param {Object} props                    Component props.\n * @param {Array}  [props.comments]         - Array of comment objects.\n * @param {Array}  [props.blockProps]       - Props from parent's `useBlockProps()`.\n * @param {Array}  [props.activeComment]    - The block that is currently active.\n * @param {Array}  [props.setActiveComment] - The setter for activeComment.\n * @param {Array}  [props.blocks]           - Array of blocks returned from\n *                                          getBlocks() in parent .\n * @return {WPElement}                 \t\tList of comments.\n */\nconst CommentsList = ( {\n\tcomments,\n\tblockProps,\n\tactiveComment,\n\tsetActiveComment,\n\tblocks,\n} ) => (\n\t<ol { ...blockProps }>\n\t\t{ comments &&\n\t\t\tcomments.map( ( comment ) => (\n\t\t\t\t<BlockContextProvider\n\t\t\t\t\tkey={ comment.commentId }\n\t\t\t\t\tvalue={ comment }\n\t\t\t\t>\n\t\t\t\t\t<CommentTemplateInnerBlocks\n\t\t\t\t\t\tcomment={ comment }\n\t\t\t\t\t\tactiveComment={ activeComment }\n\t\t\t\t\t\tsetActiveComment={ setActiveComment }\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tfirstComment={ comments[ 0 ] }\n\t\t\t\t\t/>\n\t\t\t\t</BlockContextProvider>\n\t\t\t) ) }\n\t</ol>\n);\n\nexport default function CommentTemplateEdit( {\n\tclientId,\n\tcontext: { postId, 'comments/perPage': perPage, 'comments/order': order },\n} ) {\n\tconst blockProps = useBlockProps();\n\n\tconst [ activeComment, setActiveComment ] = useState();\n\tconst { commentOrder, commentsPerPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().__experimentalDiscussionSettings;\n\t} );\n\tconst { rawComments, blocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getEntityRecords } = select( coreStore );\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\n\t\t\tconst commentQuery = {\n\t\t\t\tpost: postId,\n\t\t\t\tstatus: 'approve',\n\t\t\t\tcontext: 'embed',\n\t\t\t\torder: order || commentOrder,\n\t\t\t};\n\n\t\t\tif ( order ) {\n\t\t\t\tcommentQuery.order = order;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\trawComments: getEntityRecords(\n\t\t\t\t\t'root',\n\t\t\t\t\t'comment',\n\t\t\t\t\tcommentQuery\n\t\t\t\t),\n\t\t\t\tblocks: getBlocks( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ postId, clientId, order ]\n\t);\n\n\t// TODO: Replicate the logic used on the server.\n\tperPage = perPage || commentsPerPage;\n\t// We convert the flat list of comments to tree.\n\t// Then, we show only a maximum of `perPage` number of comments.\n\t// This is because passing `per_page` to `getEntityRecords()` does not\n\t// take into account nested comments.\n\tconst comments = useMemo(\n\t\t() => convertToTree( rawComments ).slice( 0, perPage ),\n\t\t[ rawComments, perPage ]\n\t);\n\n\tif ( ! rawComments ) {\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<CommentsList\n\t\t\tcomments={ comments }\n\t\t\tblockProps={ blockProps }\n\t\t\tblocks={ blocks }\n\t\t\tactiveComment={ activeComment }\n\t\t\tsetActiveComment={ setActiveComment }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/edit.js"],"names":["TEMPLATE","getCommentsPlaceholder","perPage","threadComments","threadCommentsDepth","commentsDepth","Math","min","defaultCommentsToShow","commentId","children","CommentTemplateInnerBlocks","comment","activeComment","setActiveComment","firstComment","blocks","innerBlocksProps","template","length","CommentTemplatePreview","isHidden","blockPreviewProps","handleOnClick","style","display","undefined","MemoizedCommentTemplatePreview","CommentsList","comments","blockProps","map","index","CommentTemplateEdit","clientId","context","postId","order","defaultPage","inherit","commentOrder","select","getSettings","blockEditorStore","__experimentalDiscussionSettings","commentQuery","topLevelComments","getEntityRecords","coreStore","getBlocks","commentTree","reverse"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, memo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBlockContextProvider,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n\t__experimentalUseBlockPreview as useBlockPreview,\n} from '@wordpress/block-editor';\nimport { Spinner } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { useCommentQueryArgs, useCommentTree } from './hooks';\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\n/**\n * Function that returns a comment structure that will be rendered with default placehoders.\n *\n * @param {Object}  settings                       Discussion Settings.\n * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.\n * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.\n * @param {number}  [settings.threadCommentsDepth] - Level deep of threaded comments.\n *\n * @typedef {{id: null, children: EmptyComment[]}} EmptyComment\n * @return {EmptyComment[]}                 \t\tInner blocks of the Comment Template\n */\nconst getCommentsPlaceholder = ( {\n\tperPage,\n\tthreadComments,\n\tthreadCommentsDepth,\n} ) => {\n\t// In case that `threadCommentsDepth` is falsy, we default to a somewhat\n\t// arbitrary value of 3.\n\t// In case that the value is set but larger than 3 we truncate it to 3.\n\tconst commentsDepth = Math.min( threadCommentsDepth || 3, 3 );\n\n\t// We set a limit in order not to overload the editor of empty comments.\n\tconst defaultCommentsToShow =\n\t\tperPage <= commentsDepth ? perPage : commentsDepth;\n\tif ( ! threadComments || defaultCommentsToShow === 1 ) {\n\t\t// If displaying threaded comments is disabled, we only show one comment\n\t\treturn [ { commentId: null, children: [] } ];\n\t} else if ( defaultCommentsToShow === 2 ) {\n\t\treturn [\n\t\t\t{\n\t\t\t\tcommentId: null,\n\t\t\t\tchildren: [ { commentId: null, children: [] } ],\n\t\t\t},\n\t\t];\n\t}\n\n\t// In case that the value is set but larger than 3 we truncate it to 3.\n\treturn [\n\t\t{\n\t\t\tcommentId: null,\n\t\t\tchildren: [\n\t\t\t\t{\n\t\t\t\t\tcommentId: null,\n\t\t\t\t\tchildren: [ { commentId: null, children: [] } ],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n};\n\n/**\n * Component which renders the inner blocks of the Comment Template.\n *\n * @param {Object} props                    Component props.\n * @param {Array}  [props.comment]          - A comment object.\n * @param {Array}  [props.activeComment]    - The block that is currently active.\n * @param {Array}  [props.setActiveComment] - The setter for activeComment.\n * @param {Array}  [props.firstComment]     - First comment in the array.\n * @param {Array}  [props.blocks]           - Array of blocks returned from\n *                                          getBlocks() in parent .\n * @return {WPElement}                 \t\tInner blocks of the Comment Template\n */\nfunction CommentTemplateInnerBlocks( {\n\tcomment,\n\tactiveComment,\n\tsetActiveComment,\n\tfirstComment,\n\tblocks,\n} ) {\n\tconst { children, ...innerBlocksProps } = useInnerBlocksProps(\n\t\t{},\n\t\t{ template: TEMPLATE }\n\t);\n\treturn (\n\t\t<li { ...innerBlocksProps }>\n\t\t\t{ comment === ( activeComment || firstComment ) ? children : null }\n\n\t\t\t{ /* To avoid flicker when switching active block contexts, a preview\n\t\t\tis ALWAYS rendered and the preview for the active block is hidden.\n\t\t\tThis ensures that when switching the active block, the component is not\n\t\t\tmounted again but rather it only toggles the `isHidden` prop.\n\n\t\t\tThe same strategy is used for preventing the flicker in the Post Template\n\t\t\tblock. */ }\n\t\t\t<MemoizedCommentTemplatePreview\n\t\t\t\tblocks={ blocks }\n\t\t\t\tcomment={ comment }\n\t\t\t\tsetActiveComment={ setActiveComment }\n\t\t\t\tisHidden={ comment === ( activeComment || firstComment ) }\n\t\t\t/>\n\n\t\t\t{ comment?.children?.length > 0 ? (\n\t\t\t\t<CommentsList\n\t\t\t\t\tcomments={ comment.children }\n\t\t\t\t\tactiveComment={ activeComment }\n\t\t\t\t\tsetActiveComment={ setActiveComment }\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t/>\n\t\t\t) : null }\n\t\t</li>\n\t);\n}\n\nconst CommentTemplatePreview = ( {\n\tblocks,\n\tcomment,\n\tsetActiveComment,\n\tisHidden,\n} ) => {\n\tconst blockPreviewProps = useBlockPreview( {\n\t\tblocks,\n\t} );\n\n\tconst handleOnClick = () => {\n\t\tsetActiveComment( comment );\n\t};\n\n\t// We have to hide the preview block if the `comment` props points to\n\t// the curently active block!\n\n\t// Or, to put it differently, every preview block is visible unless it is the\n\t// currently active block - in this case we render its inner blocks.\n\tconst style = {\n\t\tdisplay: isHidden ? 'none' : undefined,\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...blockPreviewProps }\n\t\t\ttabIndex={ 0 }\n\t\t\trole=\"button\"\n\t\t\tstyle={ style }\n\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n\t\t\tonClick={ handleOnClick }\n\t\t\tonKeyPress={ handleOnClick }\n\t\t/>\n\t);\n};\n\nconst MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );\n\n/**\n * Component that renders a list of (nested) comments. It is called recursively.\n *\n * @param {Object} props                    Component props.\n * @param {Array}  [props.comments]         - Array of comment objects.\n * @param {Array}  [props.blockProps]       - Props from parent's `useBlockProps()`.\n * @param {Array}  [props.activeComment]    - The block that is currently active.\n * @param {Array}  [props.setActiveComment] - The setter for activeComment.\n * @param {Array}  [props.blocks]           - Array of blocks returned from\n *                                          getBlocks() in parent .\n * @return {WPElement}                 \t\tList of comments.\n */\nconst CommentsList = ( {\n\tcomments,\n\tblockProps,\n\tactiveComment,\n\tsetActiveComment,\n\tblocks,\n} ) => (\n\t<ol { ...blockProps }>\n\t\t{ comments &&\n\t\t\tcomments.map( ( comment, index ) => (\n\t\t\t\t<BlockContextProvider\n\t\t\t\t\tkey={ comment.commentId || index }\n\t\t\t\t\tvalue={ comment }\n\t\t\t\t>\n\t\t\t\t\t<CommentTemplateInnerBlocks\n\t\t\t\t\t\tcomment={ comment }\n\t\t\t\t\t\tactiveComment={ activeComment }\n\t\t\t\t\t\tsetActiveComment={ setActiveComment }\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tfirstComment={ comments[ 0 ] }\n\t\t\t\t\t/>\n\t\t\t\t</BlockContextProvider>\n\t\t\t) ) }\n\t</ol>\n);\n\nexport default function CommentTemplateEdit( {\n\tclientId,\n\tcontext: {\n\t\tpostId,\n\t\t'comments/perPage': perPage,\n\t\t'comments/order': order,\n\t\t'comments/defaultPage': defaultPage,\n\t\t'comments/inherit': inherit,\n\t},\n} ) {\n\tconst blockProps = useBlockProps();\n\n\tconst [ activeComment, setActiveComment ] = useState();\n\tconst { commentOrder, threadCommentsDepth, threadComments } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSettings } = select( blockEditorStore );\n\t\t\treturn getSettings().__experimentalDiscussionSettings;\n\t\t}\n\t);\n\n\tconst commentQuery = useCommentQueryArgs( {\n\t\tpostId,\n\t\tperPage,\n\t\tdefaultPage,\n\t\tinherit,\n\t} );\n\n\tconst { topLevelComments, 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\t// Request only top-level comments. Replies are embedded.\n\t\t\t\ttopLevelComments: commentQuery\n\t\t\t\t\t? getEntityRecords( 'root', 'comment', commentQuery )\n\t\t\t\t\t: null,\n\t\t\t\tblocks: getBlocks( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId, commentQuery ]\n\t);\n\n\torder = inherit || ! order ? commentOrder : order;\n\n\t// Generate a tree structure of comment IDs.\n\tlet commentTree = useCommentTree(\n\t\t// Reverse the order of top comments if needed.\n\t\torder === 'desc' && topLevelComments\n\t\t\t? [ ...topLevelComments ].reverse()\n\t\t\t: topLevelComments\n\t);\n\n\tif ( ! topLevelComments ) {\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 ( ! postId ) {\n\t\tcommentTree = getCommentsPlaceholder( {\n\t\t\tperPage,\n\t\t\tthreadComments,\n\t\t\tthreadCommentsDepth,\n\t\t} );\n\t}\n\n\tif ( ! commentTree.length ) {\n\t\treturn <p { ...blockProps }> { __( 'No results found.' ) }</p>;\n\t}\n\n\treturn (\n\t\t<CommentsList\n\t\t\tcomments={ commentTree }\n\t\t\tblockProps={ blockProps }\n\t\t\tblocks={ blocks }\n\t\t\tactiveComment={ activeComment }\n\t\t\tsetActiveComment={ setActiveComment }\n\t\t/>\n\t);\n}\n"]}

package/build/comment-template/hooks.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCommentTree = exports.useCommentQueryArgs = void 0;
+
+var _element = require("@wordpress/element");
+
+var _data = require("@wordpress/data");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _url = require("@wordpress/url");
+
+var _apiFetch = _interopRequireDefault(require("@wordpress/api-fetch"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Return an object with the query args needed to fetch the default page of
+ * comments.
+ *
+ * @param {Object}  props             Hook props.
+ * @param {number}  props.postId      ID of the post that contains the comments.
+ * @param {number}  props.perPage     The number of comments included per page.
+ * @param {string}  props.defaultPage Page shown by default (newest/oldest).
+ * @param {boolean} props.inherit     Overwrite props with values from WP
+ *                                    discussion settings.
+ *
+ * @return {Object} Query args to retrieve the comments.
+ */
+const useCommentQueryArgs = _ref => {
+  let {
+    postId,
+    perPage,
+    defaultPage,
+    inherit
+  } = _ref;
+  // Initialize the query args that are not going to change.
+  const queryArgs = {
+    status: 'approve',
+    order: 'asc',
+    context: 'embed',
+    parent: 0,
+    _embed: 'children'
+  }; // Get the Discussion settings that may be needed to query the comments.
+
+  const {
+    commentsPerPage,
+    defaultCommentsPage
+  } = (0, _data.useSelect)(select => {
+    const {
+      getSettings
+    } = select(_blockEditor.store);
+    const {
+      __experimentalDiscussionSettings
+    } = getSettings();
+    return __experimentalDiscussionSettings;
+  }); // Overwrite the received attributes if `inherit` is true.
+
+  if (inherit) {
+    perPage = commentsPerPage;
+    defaultPage = defaultCommentsPage;
+  } // If a block props is not set, use the settings value to generate the
+  // appropriate query arg.
+
+
+  perPage = perPage || commentsPerPage;
+  defaultPage = defaultPage || defaultCommentsPage; // Get the number of the default page.
+
+  const page = useDefaultPageIndex({
+    defaultPage,
+    postId,
+    perPage,
+    queryArgs
+  }); // Merge, memoize and return all query arguments, unless the default page's
+  // number is not known yet.
+
+  return (0, _element.useMemo)(() => {
+    return page ? { ...queryArgs,
+      post: postId,
+      per_page: perPage,
+      page
+    } : null;
+  }, [postId, perPage, page]);
+};
+/**
+ * Return the index of the default page, depending on whether `defaultPage` is
+ * `newest` or `oldest`. In the first case, the only way to know the page's
+ * index is by using the `X-WP-TotalPages` header, which forces to make an
+ * additional request.
+ *
+ * @param {Object} props             Hook props.
+ * @param {string} props.defaultPage Page shown by default (newest/oldest).
+ * @param {number} props.postId      ID of the post that contains the comments.
+ * @param {number} props.perPage     The number of comments included per page.
+ * @param {Object} props.queryArgs   Other query args.
+ *
+ * @return {number} Index of the default comments page.
+ */
+
+
+exports.useCommentQueryArgs = useCommentQueryArgs;
+
+const useDefaultPageIndex = _ref2 => {
+  let {
+    defaultPage,
+    postId,
+    perPage,
+    queryArgs
+  } = _ref2;
+  // Store the default page indices.
+  const [defaultPages, setDefaultPages] = (0, _element.useState)({});
+  const key = `${postId}_${perPage}`;
+  const page = defaultPages[key] || 0;
+  (0, _element.useEffect)(() => {
+    // Do nothing if the page is already known or not the newest page.
+    if (page || defaultPage !== 'newest') {
+      return;
+    } // We need to fetch comments to know the index. Use HEAD and limit
+    // fields just to ID, to make this call as light as possible.
+
+
+    (0, _apiFetch.default)({
+      path: (0, _url.addQueryArgs)('/wp/v2/comments', { ...queryArgs,
+        post: postId,
+        per_page: perPage,
+        _fields: 'id'
+      }),
+      method: 'HEAD',
+      parse: false
+    }).then(res => {
+      setDefaultPages({ ...defaultPages,
+        [key]: parseInt(res.headers.get('X-WP-TotalPages'))
+      });
+    });
+  }, [defaultPage, postId, perPage, setDefaultPages]); // The oldest one is always the first one.
+
+  return defaultPage === 'newest' ? page : 1;
+};
+/**
+ * Generate a tree structure of comment IDs from a list of comment entities. The
+ * children of each comment are obtained from `_embedded`.
+ *
+ * @typedef {{ commentId: number, children: CommentNode }} CommentNode
+ *
+ * @param {Object[]} topLevelComments List of comment entities.
+ * @return {{ commentTree: CommentNode[]}} Tree of comment IDs.
+ */
+
+
+const useCommentTree = topLevelComments => {
+  const commentTree = (0, _element.useMemo)(() => topLevelComments === null || topLevelComments === void 0 ? void 0 : topLevelComments.map(_ref3 => {
+    let {
+      id,
+      _embedded
+    } = _ref3;
+    const [children] = (_embedded === null || _embedded === void 0 ? void 0 : _embedded.children) || [[]];
+    return {
+      commentId: id,
+      children: children.map(child => ({
+        commentId: child.id
+      }))
+    };
+  }), [topLevelComments]);
+  return commentTree;
+};
+
+exports.useCommentTree = useCommentTree;
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/hooks.js"],"names":["useCommentQueryArgs","postId","perPage","defaultPage","inherit","queryArgs","status","order","context","parent","_embed","commentsPerPage","defaultCommentsPage","select","getSettings","blockEditorStore","__experimentalDiscussionSettings","page","useDefaultPageIndex","post","per_page","defaultPages","setDefaultPages","key","path","_fields","method","parse","then","res","parseInt","headers","get","useCommentTree","topLevelComments","commentTree","map","id","_embedded","children","commentId","child"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { addQueryArgs } from '@wordpress/url';\nimport apiFetch from '@wordpress/api-fetch';\n\n/**\n * Return an object with the query args needed to fetch the default page of\n * comments.\n *\n * @param {Object}  props             Hook props.\n * @param {number}  props.postId      ID of the post that contains the comments.\n * @param {number}  props.perPage     The number of comments included per page.\n * @param {string}  props.defaultPage Page shown by default (newest/oldest).\n * @param {boolean} props.inherit     Overwrite props with values from WP\n *                                    discussion settings.\n *\n * @return {Object} Query args to retrieve the comments.\n */\nexport const useCommentQueryArgs = ( {\n\tpostId,\n\tperPage,\n\tdefaultPage,\n\tinherit,\n} ) => {\n\t// Initialize the query args that are not going to change.\n\tconst queryArgs = {\n\t\tstatus: 'approve',\n\t\torder: 'asc',\n\t\tcontext: 'embed',\n\t\tparent: 0,\n\t\t_embed: 'children',\n\t};\n\n\t// Get the Discussion settings that may be needed to query the comments.\n\tconst { commentsPerPage, defaultCommentsPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\treturn __experimentalDiscussionSettings;\n\t} );\n\n\t// Overwrite the received attributes if `inherit` is true.\n\tif ( inherit ) {\n\t\tperPage = commentsPerPage;\n\t\tdefaultPage = defaultCommentsPage;\n\t}\n\n\t// If a block props is not set, use the settings value to generate the\n\t// appropriate query arg.\n\tperPage = perPage || commentsPerPage;\n\tdefaultPage = defaultPage || defaultCommentsPage;\n\n\t// Get the number of the default page.\n\tconst page = useDefaultPageIndex( {\n\t\tdefaultPage,\n\t\tpostId,\n\t\tperPage,\n\t\tqueryArgs,\n\t} );\n\n\t// Merge, memoize and return all query arguments, unless the default page's\n\t// number is not known yet.\n\treturn useMemo( () => {\n\t\treturn page\n\t\t\t? {\n\t\t\t\t\t...queryArgs,\n\t\t\t\t\tpost: postId,\n\t\t\t\t\tper_page: perPage,\n\t\t\t\t\tpage,\n\t\t\t  }\n\t\t\t: null;\n\t}, [ postId, perPage, page ] );\n};\n\n/**\n * Return the index of the default page, depending on whether `defaultPage` is\n * `newest` or `oldest`. In the first case, the only way to know the page's\n * index is by using the `X-WP-TotalPages` header, which forces to make an\n * additional request.\n *\n * @param {Object} props             Hook props.\n * @param {string} props.defaultPage Page shown by default (newest/oldest).\n * @param {number} props.postId      ID of the post that contains the comments.\n * @param {number} props.perPage     The number of comments included per page.\n * @param {Object} props.queryArgs   Other query args.\n *\n * @return {number} Index of the default comments page.\n */\nconst useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {\n\t// Store the default page indices.\n\tconst [ defaultPages, setDefaultPages ] = useState( {} );\n\tconst key = `${ postId }_${ perPage }`;\n\tconst page = defaultPages[ key ] || 0;\n\n\tuseEffect( () => {\n\t\t// Do nothing if the page is already known or not the newest page.\n\t\tif ( page || defaultPage !== 'newest' ) {\n\t\t\treturn;\n\t\t}\n\t\t// We need to fetch comments to know the index. Use HEAD and limit\n\t\t// fields just to ID, to make this call as light as possible.\n\t\tapiFetch( {\n\t\t\tpath: addQueryArgs( '/wp/v2/comments', {\n\t\t\t\t...queryArgs,\n\t\t\t\tpost: postId,\n\t\t\t\tper_page: perPage,\n\t\t\t\t_fields: 'id',\n\t\t\t} ),\n\t\t\tmethod: 'HEAD',\n\t\t\tparse: false,\n\t\t} ).then( ( res ) => {\n\t\t\tsetDefaultPages( {\n\t\t\t\t...defaultPages,\n\t\t\t\t[ key ]: parseInt( res.headers.get( 'X-WP-TotalPages' ) ),\n\t\t\t} );\n\t\t} );\n\t}, [ defaultPage, postId, perPage, setDefaultPages ] );\n\n\t// The oldest one is always the first one.\n\treturn defaultPage === 'newest' ? page : 1;\n};\n\n/**\n * Generate a tree structure of comment IDs from a list of comment entities. The\n * children of each comment are obtained from `_embedded`.\n *\n * @typedef {{ commentId: number, children: CommentNode }} CommentNode\n *\n * @param {Object[]} topLevelComments List of comment entities.\n * @return {{ commentTree: CommentNode[]}} Tree of comment IDs.\n */\nexport const useCommentTree = ( topLevelComments ) => {\n\tconst commentTree = useMemo(\n\t\t() =>\n\t\t\ttopLevelComments?.map( ( { id, _embedded } ) => {\n\t\t\t\tconst [ children ] = _embedded?.children || [ [] ];\n\t\t\t\treturn {\n\t\t\t\t\tcommentId: id,\n\t\t\t\t\tchildren: children.map( ( child ) => ( {\n\t\t\t\t\t\tcommentId: child.id,\n\t\t\t\t\t} ) ),\n\t\t\t\t};\n\t\t\t} ),\n\t\t[ topLevelComments ]\n\t);\n\n\treturn commentTree;\n};\n"]}

package/build/comment-template/index.js

@@ -29,7 +29,7 @@ const metadata = {
   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: ["comments/perPage", "postId", "comments/order"],
+  usesContext: ["comments/defaultPage", "comments/inherit", "comments/order", "comments/perPage", "postId"],
   supports: {
     reusable: false,
     html: false,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/comment-template/util.js"],"names":["convertToTree","data","table","forEach","item","id","commentId","children","tree","parent","push"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,IAAF,IAAY;AACxC,QAAMC,KAAK,GAAG,EAAd;AACA,MAAK,CAAED,IAAP,EAAc,OAAO,EAAP,CAF0B,CAIxC;;AACAA,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzBF,IAAAA,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAL,GAAmB;AAAEC,MAAAA,SAAS,EAAEF,IAAI,CAACC,EAAlB;AAAsBE,MAAAA,QAAQ,EAAE;AAAhC,KAAnB;AACA,GAFD;AAIA,QAAMC,IAAI,GAAG,EAAb,CATwC,CAWxC;;AACAP,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzB,QAAKA,IAAI,CAACK,MAAV,EAAmB;AAAA;;AAClB;AACA;AACA;AACA,4BAAAP,KAAK,CAAEE,IAAI,CAACK,MAAP,CAAL,0EAAsBF,QAAtB,CAA+BG,IAA/B,CAAqCR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAA1C;AACA,KALD,MAKO;AACN;AACA;AACA;AACAG,MAAAA,IAAI,CAACE,IAAL,CAAWR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAhB;AACA;AACD,GAZD;AAaA,SAAOG,IAAP;AACA,CA1BM","sourcesContent":["/**\n *\n * This function converts a flat list of comment objects with a `parent` property\n * to a nested list of comment objects with a `children` property. The `children`\n * property is itself a list of comment objects.\n *\n * @example\n * ```\n * const comments = [\n * \t{ id: 1, parent: 0 },\n * \t{ id: 2, parent: 1 },\n * \t{ id: 3, parent: 2 },\n * \t{ id: 4, parent: 1 },\n * ];\n * expect( convertToTree( comments ) ).toEqual( [\n * \t{\n * \t\tcommentId: 1,\n * \t\tchildren: [\n * \t\t\t{ commentId: 2, children: [ { commentId: 3, children: [] } ] },\n * \t\t\t{ commentId: 4, children: [] },\n * \t\t],\n * \t},\n * ] );\n * ```\n * @typedef {{id: number, parent: number}} Comment\n * @param {Comment[]} data - List of comment objects.\n *\n * @return {Object[]} Nested list of comment objects with a `children` property.\n */\nexport const convertToTree = ( data ) => {\n\tconst table = {};\n\tif ( ! data ) return [];\n\n\t// First create a hash table of { [id]: { ...comment, children: [] }}\n\tdata.forEach( ( item ) => {\n\t\ttable[ item.id ] = { commentId: item.id, children: [] };\n\t} );\n\n\tconst tree = [];\n\n\t// Iterate over the original comments again\n\tdata.forEach( ( item ) => {\n\t\tif ( item.parent ) {\n\t\t\t// If the comment has a \"parent\", then find that parent in the table that\n\t\t\t// we have created above and push the current comment to the array of its\n\t\t\t// children.\n\t\t\ttable[ item.parent ]?.children.push( table[ item.id ] );\n\t\t} else {\n\t\t\t// Otherwise, if the comment has no parent (also works if parent is 0)\n\t\t\t// that means that it's a top-level comment so we can find it in the table\n\t\t\t// and push it to the final tree.\n\t\t\ttree.push( table[ item.id ] );\n\t\t}\n\t} );\n\treturn tree;\n};\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/util.js"],"names":["convertToTree","data","table","forEach","item","id","commentId","children","tree","parent","push"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,IAAF,IAAY;AACxC,QAAMC,KAAK,GAAG,EAAd;AAEA,MAAK,CAAED,IAAP,EAAc,OAAO,EAAP,CAH0B,CAKxC;;AACAA,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzBF,IAAAA,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAL,GAAmB;AAAEC,MAAAA,SAAS,EAAEF,IAAI,CAACC,EAAlB;AAAsBE,MAAAA,QAAQ,EAAE;AAAhC,KAAnB;AACA,GAFD;AAIA,QAAMC,IAAI,GAAG,EAAb,CAVwC,CAYxC;;AACAP,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzB,QAAKA,IAAI,CAACK,MAAV,EAAmB;AAAA;;AAClB;AACA;AACA;AACA,4BAAAP,KAAK,CAAEE,IAAI,CAACK,MAAP,CAAL,0EAAsBF,QAAtB,CAA+BG,IAA/B,CAAqCR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAA1C;AACA,KALD,MAKO;AACN;AACA;AACA;AACAG,MAAAA,IAAI,CAACE,IAAL,CAAWR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAhB;AACA;AACD,GAZD;AAaA,SAAOG,IAAP;AACA,CA3BM","sourcesContent":["/**\n *\n * This function converts a flat list of comment objects with a `parent` property\n * to a nested list of comment objects with a `children` property. The `children`\n * property is itself a list of comment objects.\n *\n * @example\n * ```\n * const comments = [\n * \t{ id: 1, parent: 0 },\n * \t{ id: 2, parent: 1 },\n * \t{ id: 3, parent: 2 },\n * \t{ id: 4, parent: 1 },\n * ];\n * expect( convertToTree( comments ) ).toEqual( [\n * \t{\n * \t\tcommentId: 1,\n * \t\tchildren: [\n * \t\t\t{ commentId: 2, children: [ { commentId: 3, children: [] } ] },\n * \t\t\t{ commentId: 4, children: [] },\n * \t\t],\n * \t},\n * ] );\n * ```\n * @typedef {{id: number, parent: number}} Comment\n * @param {Comment[]} data - List of comment objects.\n *\n * @return {Object[]} Nested list of comment objects with a `children` property.\n */\nexport const convertToTree = ( data ) => {\n\tconst table = {};\n\n\tif ( ! data ) return [];\n\n\t// First create a hash table of { [id]: { ...comment, children: [] }}\n\tdata.forEach( ( item ) => {\n\t\ttable[ item.id ] = { commentId: item.id, children: [] };\n\t} );\n\n\tconst tree = [];\n\n\t// Iterate over the original comments again\n\tdata.forEach( ( item ) => {\n\t\tif ( item.parent ) {\n\t\t\t// If the comment has a \"parent\", then find that parent in the table that\n\t\t\t// we have created above and push the current comment to the array of its\n\t\t\t// children.\n\t\t\ttable[ item.parent ]?.children.push( table[ item.id ] );\n\t\t} else {\n\t\t\t// Otherwise, if the comment has no parent (also works if parent is 0)\n\t\t\t// that means that it's a top-level comment so we can find it in the table\n\t\t\t// and push it to the final tree.\n\t\t\ttree.push( table[ item.id ] );\n\t\t}\n\t} );\n\treturn tree;\n};\n"]}

package/build/comments-pagination-next/index.js

@@ -32,7 +32,7 @@ const metadata = {
       type: "string"
     }
   },
-  usesContext: ["postId", "comments/perPage", "comments/paginationArrow"],
+  usesContext: ["postId", "comments/perPage", "comments/order", "comments/inherit", "comments/defaultPage", "comments/paginationArrow"],
   supports: {
     reusable: false,
     html: false,

package/build/comments-pagination-numbers/index.js

@@ -27,7 +27,7 @@ const metadata = {
   parent: ["core/comments-pagination"],
   description: "Displays a list of page numbers for comments pagination.",
   textdomain: "default",
-  usesContext: ["comments/perPage", "postId", "comments/order"],
+  usesContext: ["postId", "comments/perPage", "comments/order", "comments/inherit", "comments/defaultPage"],
   supports: {
     reusable: false,
     html: false