@wordpress/block-library 7.1.1 → 7.2.0

package/build/comment-template/edit.js

@@ -30,10 +30,14 @@ var _hooks = require("./hooks");
 /**
  * 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']];
+const TEMPLATE = [['core/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.
  *
+ * Each comment has a `commentId` property that is always a negative number in
+ * case of the placeholders. This is to ensure that the comment does not
+ * conflict with the actual (real) comments.
+ *
  * @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.
@@ -58,15 +62,16 @@ const getCommentsPlaceholder = _ref => {
 
   if (!threadComments || defaultCommentsToShow === 1) {
     // If displaying threaded comments is disabled, we only show one comment
+    // A commentId is negative in order to avoid conflicts with the actual comments.
     return [{
-      commentId: null,
+      commentId: -1,
       children: []
     }];
   } else if (defaultCommentsToShow === 2) {
     return [{
-      commentId: null,
+      commentId: -1,
       children: [{
-        commentId: null,
+        commentId: -2,
         children: []
       }]
     }];
@@ -74,11 +79,11 @@ const getCommentsPlaceholder = _ref => {
 
 
   return [{
-    commentId: null,
+    commentId: -1,
     children: [{
-      commentId: null,
+      commentId: -2,
       children: [{
-        commentId: null,
+        commentId: -3,
         children: []
       }]
     }]
@@ -87,13 +92,13 @@ const getCommentsPlaceholder = _ref => {
 /**
  * Component which renders the inner blocks of the Comment Template.
  *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comment]          - A comment object.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.firstComment]     - First comment in the array.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
+ * @param {Object} props                      Component props.
+ * @param {Array}  [props.comment]            - A comment object.
+ * @param {Array}  [props.activeCommentId]    - The ID of the comment that is currently active.
+ * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.
+ * @param {Array}  [props.firstCommentId]     - ID of the first comment in the array.
+ * @param {Array}  [props.blocks]             - Array of blocks returned from
+ *                                            getBlocks() in parent .
  * @return {WPElement}                 		Inner blocks of the Comment Template
  */
 
@@ -103,9 +108,9 @@ function CommentTemplateInnerBlocks(_ref2) {
 
   let {
     comment,
-    activeComment,
-    setActiveComment,
-    firstComment,
+    activeCommentId,
+    setActiveCommentId,
+    firstCommentId,
     blocks
   } = _ref2;
   const {
@@ -114,24 +119,25 @@ function CommentTemplateInnerBlocks(_ref2) {
   } = (0, _blockEditor.useInnerBlocksProps)({}, {
     template: TEMPLATE
   });
-  return (0, _element.createElement)("li", innerBlocksProps, comment === (activeComment || firstComment) ? children : null, (0, _element.createElement)(MemoizedCommentTemplatePreview, {
+  return (0, _element.createElement)("li", innerBlocksProps, comment.commentId === (activeCommentId || firstCommentId) ? children : null, (0, _element.createElement)(MemoizedCommentTemplatePreview, {
     blocks: blocks,
-    comment: comment,
-    setActiveComment: setActiveComment,
-    isHidden: comment === (activeComment || firstComment)
+    commentId: comment.commentId,
+    setActiveCommentId: setActiveCommentId,
+    isHidden: comment.commentId === (activeCommentId || firstCommentId)
   }), (comment === null || comment === void 0 ? void 0 : (_comment$children = comment.children) === null || _comment$children === void 0 ? void 0 : _comment$children.length) > 0 ? (0, _element.createElement)(CommentsList, {
     comments: comment.children,
-    activeComment: activeComment,
-    setActiveComment: setActiveComment,
-    blocks: blocks
+    activeCommentId: activeCommentId,
+    setActiveCommentId: setActiveCommentId,
+    blocks: blocks,
+    firstCommentId: firstCommentId
   }) : null);
 }
 
 const CommentTemplatePreview = _ref3 => {
   let {
     blocks,
-    comment,
-    setActiveComment,
+    commentId,
+    setActiveCommentId,
     isHidden
   } = _ref3;
   const blockPreviewProps = (0, _blockEditor.__experimentalUseBlockPreview)({
@@ -139,7 +145,7 @@ const CommentTemplatePreview = _ref3 => {
   });
 
   const handleOnClick = () => {
-    setActiveComment(comment);
+    setActiveCommentId(commentId);
   }; // We have to hide the preview block if the `comment` props points to
   // the curently active block!
   // Or, to put it differently, every preview block is visible unless it is the
@@ -163,13 +169,14 @@ const MemoizedCommentTemplatePreview = (0, _element.memo)(CommentTemplatePreview
 /**
  * Component that renders a list of (nested) comments. It is called recursively.
  *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comments]         - Array of comment objects.
- * @param {Array}  [props.blockProps]       - Props from parent's `useBlockProps()`.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
+ * @param {Object} props                      Component props.
+ * @param {Array}  [props.comments]           - Array of comment objects.
+ * @param {Array}  [props.blockProps]         - Props from parent's `useBlockProps()`.
+ * @param {Array}  [props.activeCommentId]    - The ID of the comment that is currently active.
+ * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.
+ * @param {Array}  [props.blocks]             - Array of blocks returned from getBlocks() in parent.
+ * @param {Object} [props.firstCommentId]     - The ID of the first comment in the array of
+ *                                            comment objects.
  * @return {WPElement}                 		List of comments.
  */
 
@@ -177,23 +184,42 @@ const CommentsList = _ref4 => {
   let {
     comments,
     blockProps,
-    activeComment,
-    setActiveComment,
-    blocks
+    activeCommentId,
+    setActiveCommentId,
+    blocks,
+    firstCommentId
   } = _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,
-    activeComment: activeComment,
-    setActiveComment: setActiveComment,
-    blocks: blocks,
-    firstComment: comments[0]
-  }))));
+  return (0, _element.createElement)("ol", blockProps, comments && comments.map((_ref5, index) => {
+    let {
+      commentId,
+      ...comment
+    } = _ref5;
+    return (0, _element.createElement)(_blockEditor.BlockContextProvider, {
+      key: comment.commentId || index,
+      value: {
+        // If the commentId is negative it means that this comment is a
+        // "placeholder" and that the block is most likely being used in the
+        // site editor. In this case, we have to set the commentId to `null`
+        // because otherwise the (non-existent) comment with a negative ID
+        // would be reqested from the REST API.
+        commentId: commentId < 0 ? null : commentId
+      }
+    }, (0, _element.createElement)(CommentTemplateInnerBlocks, {
+      comment: {
+        commentId,
+        ...comment
+      },
+      activeCommentId: activeCommentId,
+      setActiveCommentId: setActiveCommentId,
+      blocks: blocks,
+      firstCommentId: firstCommentId
+    }));
+  }));
 };
 
-function CommentTemplateEdit(_ref5) {
+function CommentTemplateEdit(_ref6) {
+  var _commentTree$;
+
   let {
     clientId,
     context: {
@@ -203,9 +229,9 @@ function CommentTemplateEdit(_ref5) {
       'comments/defaultPage': defaultPage,
       'comments/inherit': inherit
     }
-  } = _ref5;
+  } = _ref6;
   const blockProps = (0, _blockEditor.useBlockProps)();
-  const [activeComment, setActiveComment] = (0, _element.useState)();
+  const [activeCommentId, setActiveCommentId] = (0, _element.useState)();
   const {
     commentOrder,
     threadCommentsDepth,
@@ -263,8 +289,9 @@ function CommentTemplateEdit(_ref5) {
     comments: commentTree,
     blockProps: blockProps,
     blocks: blocks,
-    activeComment: activeComment,
-    setActiveComment: setActiveComment
+    activeCommentId: activeCommentId,
+    setActiveCommentId: setActiveCommentId,
+    firstCommentId: (_commentTree$ = commentTree[0]) === null || _commentTree$ === void 0 ? void 0 : _commentTree$.commentId
   });
 }
 //# sourceMappingURL=edit.js.map

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

@@ -1 +1 @@
-{"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"]}
+{"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","activeCommentId","setActiveCommentId","firstCommentId","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":";;;;;;;;;AAGA;;;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAKA;;AAnBA;AACA;AACA;;AAcA;AACA;AACA;AAGA,MAAMA,QAAQ,GAAG,CAChB,CAAE,aAAF,CADgB,EAEhB,CAAE,0BAAF,CAFgB,EAGhB,CAAE,mBAAF,CAHgB,EAIhB,CAAE,sBAAF,CAJgB,EAKhB,CAAE,yBAAF,CALgB,EAMhB,CAAE,wBAAF,CANgB,CAAjB;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,sBAAsB,GAAG,QAIxB;AAAA,MAJ0B;AAChCC,IAAAA,OADgC;AAEhCC,IAAAA,cAFgC;AAGhCC,IAAAA;AAHgC,GAI1B;AACN;AACA;AACA;AACA,QAAMC,aAAa,GAAGC,IAAI,CAACC,GAAL,CAAUH,mBAAmB,IAAI,CAAjC,EAAoC,CAApC,CAAtB,CAJM,CAMN;;AACA,QAAMI,qBAAqB,GAC1BN,OAAO,IAAIG,aAAX,GAA2BH,OAA3B,GAAqCG,aADtC;;AAEA,MAAK,CAAEF,cAAF,IAAoBK,qBAAqB,KAAK,CAAnD,EAAuD;AACtD;AACA;AACA,WAAO,CAAE;AAAEC,MAAAA,SAAS,EAAE,CAAC,CAAd;AAAiBC,MAAAA,QAAQ,EAAE;AAA3B,KAAF,CAAP;AACA,GAJD,MAIO,IAAKF,qBAAqB,KAAK,CAA/B,EAAmC;AACzC,WAAO,CACN;AACCC,MAAAA,SAAS,EAAE,CAAC,CADb;AAECC,MAAAA,QAAQ,EAAE,CAAE;AAAED,QAAAA,SAAS,EAAE,CAAC,CAAd;AAAiBC,QAAAA,QAAQ,EAAE;AAA3B,OAAF;AAFX,KADM,CAAP;AAMA,GApBK,CAsBN;;;AACA,SAAO,CACN;AACCD,IAAAA,SAAS,EAAE,CAAC,CADb;AAECC,IAAAA,QAAQ,EAAE,CACT;AACCD,MAAAA,SAAS,EAAE,CAAC,CADb;AAECC,MAAAA,QAAQ,EAAE,CAAE;AAAED,QAAAA,SAAS,EAAE,CAAC,CAAd;AAAiBC,QAAAA,QAAQ,EAAE;AAA3B,OAAF;AAFX,KADS;AAFX,GADM,CAAP;AAWA,CAtCD;AAwCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,0BAAT,QAMI;AAAA;;AAAA,MANiC;AACpCC,IAAAA,OADoC;AAEpCC,IAAAA,eAFoC;AAGpCC,IAAAA,kBAHoC;AAIpCC,IAAAA,cAJoC;AAKpCC,IAAAA;AALoC,GAMjC;AACH,QAAM;AAAEN,IAAAA,QAAF;AAAY,OAAGO;AAAf,MAAoC,sCACzC,EADyC,EAEzC;AAAEC,IAAAA,QAAQ,EAAElB;AAAZ,GAFyC,CAA1C;AAKA,SACC,kCAASiB,gBAAT,EACGL,OAAO,CAACH,SAAR,MAAwBI,eAAe,IAAIE,cAA3C,IACCL,QADD,GAEC,IAHJ,EAYC,4BAAC,8BAAD;AACC,IAAA,MAAM,EAAGM,MADV;AAEC,IAAA,SAAS,EAAGJ,OAAO,CAACH,SAFrB;AAGC,IAAA,kBAAkB,EAAGK,kBAHtB;AAIC,IAAA,QAAQ,EACPF,OAAO,CAACH,SAAR,MAAwBI,eAAe,IAAIE,cAA3C;AALF,IAZD,EAqBG,CAAAH,OAAO,SAAP,IAAAA,OAAO,WAAP,iCAAAA,OAAO,CAAEF,QAAT,wEAAmBS,MAAnB,IAA4B,CAA5B,GACD,4BAAC,YAAD;AACC,IAAA,QAAQ,EAAGP,OAAO,CAACF,QADpB;AAEC,IAAA,eAAe,EAAGG,eAFnB;AAGC,IAAA,kBAAkB,EAAGC,kBAHtB;AAIC,IAAA,MAAM,EAAGE,MAJV;AAKC,IAAA,cAAc,EAAGD;AALlB,IADC,GAQE,IA7BL,CADD;AAiCA;;AAED,MAAMK,sBAAsB,GAAG,SAKxB;AAAA,MAL0B;AAChCJ,IAAAA,MADgC;AAEhCP,IAAAA,SAFgC;AAGhCK,IAAAA,kBAHgC;AAIhCO,IAAAA;AAJgC,GAK1B;AACN,QAAMC,iBAAiB,GAAG,gDAAiB;AAC1CN,IAAAA;AAD0C,GAAjB,CAA1B;;AAIA,QAAMO,aAAa,GAAG,MAAM;AAC3BT,IAAAA,kBAAkB,CAAEL,SAAF,CAAlB;AACA,GAFD,CALM,CASN;AACA;AAEA;AACA;;;AACA,QAAMe,KAAK,GAAG;AACbC,IAAAA,OAAO,EAAEJ,QAAQ,GAAG,MAAH,GAAYK;AADhB,GAAd;AAIA,SACC,8DACMJ,iBADN;AAEC,IAAA,QAAQ,EAAG,CAFZ;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,KAAK,EAAGE,KAJT,CAKC;AALD;AAMC,IAAA,OAAO,EAAGD,aANX;AAOC,IAAA,UAAU,EAAGA;AAPd,KADD;AAWA,CAlCD;;AAoCA,MAAMI,8BAA8B,GAAG,mBAAMP,sBAAN,CAAvC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMQ,YAAY,GAAG;AAAA,MAAE;AACtBC,IAAAA,QADsB;AAEtBC,IAAAA,UAFsB;AAGtBjB,IAAAA,eAHsB;AAItBC,IAAAA,kBAJsB;AAKtBE,IAAAA,MALsB;AAMtBD,IAAAA;AANsB,GAAF;AAAA,SAQpB,kCAASe,UAAT,EACGD,QAAQ,IACTA,QAAQ,CAACE,GAAT,CAAc,QAA6BC,KAA7B;AAAA,QAAE;AAAEvB,MAAAA,SAAF;AAAa,SAAGG;AAAhB,KAAF;AAAA,WACb,4BAAC,iCAAD;AACC,MAAA,GAAG,EAAGA,OAAO,CAACH,SAAR,IAAqBuB,KAD5B;AAEC,MAAA,KAAK,EAAG;AACP;AACA;AACA;AACA;AACA;AACAvB,QAAAA,SAAS,EAAEA,SAAS,GAAG,CAAZ,GAAgB,IAAhB,GAAuBA;AAN3B;AAFT,OAWC,4BAAC,0BAAD;AACC,MAAA,OAAO,EAAG;AAAEA,QAAAA,SAAF;AAAa,WAAGG;AAAhB,OADX;AAEC,MAAA,eAAe,EAAGC,eAFnB;AAGC,MAAA,kBAAkB,EAAGC,kBAHtB;AAIC,MAAA,MAAM,EAAGE,MAJV;AAKC,MAAA,cAAc,EAAGD;AALlB,MAXD,CADa;AAAA,GAAd,CAFF,CARoB;AAAA,CAArB;;AAkCe,SAASkB,mBAAT,QASX;AAAA;;AAAA,MATyC;AAC5CC,IAAAA,QAD4C;AAE5CC,IAAAA,OAAO,EAAE;AACRC,MAAAA,MADQ;AAER,0BAAoBlC,OAFZ;AAGR,wBAAkBmC,KAHV;AAIR,8BAAwBC,WAJhB;AAKR,0BAAoBC;AALZ;AAFmC,GASzC;AACH,QAAMT,UAAU,GAAG,iCAAnB;AAEA,QAAM,CAAEjB,eAAF,EAAmBC,kBAAnB,IAA0C,wBAAhD;AACA,QAAM;AAAE0B,IAAAA,YAAF;AAAgBpC,IAAAA,mBAAhB;AAAqCD,IAAAA;AAArC,MAAwD,qBAC3DsC,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,MAAM,CAAEE,kBAAF,CAA9B;AACA,WAAOD,WAAW,GAAGE,gCAArB;AACA,GAJ4D,CAA9D;AAOA,QAAMC,YAAY,GAAG,gCAAqB;AACzCT,IAAAA,MADyC;AAEzClC,IAAAA,OAFyC;AAGzCoC,IAAAA,WAHyC;AAIzCC,IAAAA;AAJyC,GAArB,CAArB;AAOA,QAAM;AAAEO,IAAAA,gBAAF;AAAoB9B,IAAAA;AAApB,MAA+B,qBAClCyB,MAAF,IAAc;AACb,UAAM;AAAEM,MAAAA;AAAF,QAAuBN,MAAM,CAAEO,eAAF,CAAnC;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAgBR,MAAM,CAAEE,kBAAF,CAA5B;AAEA,WAAO;AACN;AACAG,MAAAA,gBAAgB,EAAED,YAAY,GAC3BE,gBAAgB,CAAE,MAAF,EAAU,SAAV,EAAqBF,YAArB,CADW,GAE3B,IAJG;AAKN7B,MAAAA,MAAM,EAAEiC,SAAS,CAAEf,QAAF;AALX,KAAP;AAOA,GAZmC,EAapC,CAAEA,QAAF,EAAYW,YAAZ,CAboC,CAArC;AAgBAR,EAAAA,KAAK,GAAGE,OAAO,IAAI,CAAEF,KAAb,GAAqBG,YAArB,GAAoCH,KAA5C,CAlCG,CAoCH;;AACA,MAAIa,WAAW,GAAG,4BACjB;AACAb,EAAAA,KAAK,KAAK,MAAV,IAAoBS,gBAApB,GACG,CAAE,GAAGA,gBAAL,EAAwBK,OAAxB,EADH,GAEGL,gBAJc,CAAlB;;AAOA,MAAK,CAAEA,gBAAP,EAA0B;AACzB,WACC,iCAAQhB,UAAR,EACC,4BAAC,mBAAD,OADD,CADD;AAKA;;AAED,MAAK,CAAEM,MAAP,EAAgB;AACfc,IAAAA,WAAW,GAAGjD,sBAAsB,CAAE;AACrCC,MAAAA,OADqC;AAErCC,MAAAA,cAFqC;AAGrCC,MAAAA;AAHqC,KAAF,CAApC;AAKA;;AAED,MAAK,CAAE8C,WAAW,CAAC/B,MAAnB,EAA4B;AAC3B,WAAO,iCAAQW,UAAR,OAAwB,cAAI,mBAAJ,CAAxB,CAAP;AACA;;AAED,SACC,4BAAC,YAAD;AACC,IAAA,QAAQ,EAAGoB,WADZ;AAEC,IAAA,UAAU,EAAGpB,UAFd;AAGC,IAAA,MAAM,EAAGd,MAHV;AAIC,IAAA,eAAe,EAAGH,eAJnB;AAKC,IAAA,kBAAkB,EAAGC,kBALtB;AAMC,IAAA,cAAc,mBAAGoC,WAAW,CAAE,CAAF,CAAd,kDAAG,cAAkBzC;AANpC,IADD;AAUA","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/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 * Each comment has a `commentId` property that is always a negative number in\n * case of the placeholders. This is to ensure that the comment does not\n * conflict with the actual (real) comments.\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\t// A commentId is negative in order to avoid conflicts with the actual comments.\n\t\treturn [ { commentId: -1, children: [] } ];\n\t} else if ( defaultCommentsToShow === 2 ) {\n\t\treturn [\n\t\t\t{\n\t\t\t\tcommentId: -1,\n\t\t\t\tchildren: [ { commentId: -2, 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: -1,\n\t\t\tchildren: [\n\t\t\t\t{\n\t\t\t\t\tcommentId: -2,\n\t\t\t\t\tchildren: [ { commentId: -3, 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.activeCommentId]    - The ID of the comment that is currently active.\n * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.\n * @param {Array}  [props.firstCommentId]     - ID of the 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\tactiveCommentId,\n\tsetActiveCommentId,\n\tfirstCommentId,\n\tblocks,\n} ) {\n\tconst { children, ...innerBlocksProps } = useInnerBlocksProps(\n\t\t{},\n\t\t{ template: TEMPLATE }\n\t);\n\n\treturn (\n\t\t<li { ...innerBlocksProps }>\n\t\t\t{ comment.commentId === ( activeCommentId || firstCommentId )\n\t\t\t\t? children\n\t\t\t\t: 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\tcommentId={ comment.commentId }\n\t\t\t\tsetActiveCommentId={ setActiveCommentId }\n\t\t\t\tisHidden={\n\t\t\t\t\tcomment.commentId === ( activeCommentId || firstCommentId )\n\t\t\t\t}\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\tactiveCommentId={ activeCommentId }\n\t\t\t\t\tsetActiveCommentId={ setActiveCommentId }\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tfirstCommentId={ firstCommentId }\n\t\t\t\t/>\n\t\t\t) : null }\n\t\t</li>\n\t);\n}\n\nconst CommentTemplatePreview = ( {\n\tblocks,\n\tcommentId,\n\tsetActiveCommentId,\n\tisHidden,\n} ) => {\n\tconst blockPreviewProps = useBlockPreview( {\n\t\tblocks,\n\t} );\n\n\tconst handleOnClick = () => {\n\t\tsetActiveCommentId( commentId );\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.activeCommentId]    - The ID of the comment that is currently active.\n * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.\n * @param {Array}  [props.blocks]             - Array of blocks returned from getBlocks() in parent.\n * @param {Object} [props.firstCommentId]     - The ID of the first comment in the array of\n *                                            comment objects.\n * @return {WPElement}                 \t\tList of comments.\n */\nconst CommentsList = ( {\n\tcomments,\n\tblockProps,\n\tactiveCommentId,\n\tsetActiveCommentId,\n\tblocks,\n\tfirstCommentId,\n} ) => (\n\t<ol { ...blockProps }>\n\t\t{ comments &&\n\t\t\tcomments.map( ( { commentId, ...comment }, index ) => (\n\t\t\t\t<BlockContextProvider\n\t\t\t\t\tkey={ comment.commentId || index }\n\t\t\t\t\tvalue={ {\n\t\t\t\t\t\t// If the commentId is negative it means that this comment is a\n\t\t\t\t\t\t// \"placeholder\" and that the block is most likely being used in the\n\t\t\t\t\t\t// site editor. In this case, we have to set the commentId to `null`\n\t\t\t\t\t\t// because otherwise the (non-existent) comment with a negative ID\n\t\t\t\t\t\t// would be reqested from the REST API.\n\t\t\t\t\t\tcommentId: commentId < 0 ? null : commentId,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<CommentTemplateInnerBlocks\n\t\t\t\t\t\tcomment={ { commentId, ...comment } }\n\t\t\t\t\t\tactiveCommentId={ activeCommentId }\n\t\t\t\t\t\tsetActiveCommentId={ setActiveCommentId }\n\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\tfirstCommentId={ firstCommentId }\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 [ activeCommentId, setActiveCommentId ] = 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\tactiveCommentId={ activeCommentId }\n\t\t\tsetActiveCommentId={ setActiveCommentId }\n\t\t\tfirstCommentId={ commentTree[ 0 ]?.commentId }\n\t\t/>\n\t);\n}\n"]}

package/build/cover/edit.js

@@ -33,6 +33,8 @@ var _icons = require("@wordpress/icons");
 
 var _blob = require("@wordpress/blob");
 
+var _notices = require("@wordpress/notices");
+
 var _shared = require("./shared");
 
 /**
@@ -74,8 +76,7 @@ function CoverHeightInput(_ref) {
     unit = 'px',
     value = ''
   } = _ref;
-  const [temporaryInput, setTemporaryInput] = (0, _element.useState)(null);
-  const instanceId = (0, _compose.useInstanceId)(_blockEditor.__experimentalUnitControl);
+  const instanceId = (0, _compose.useInstanceId)(_components.__experimentalUnitControl);
   const inputId = `block-cover-height-input-${instanceId}`;
   const isPx = unit === 'px';
   const units = (0, _components.__experimentalUseCustomUnits)({
@@ -94,38 +95,31 @@ function CoverHeightInput(_ref) {
     const inputValue = unprocessedValue !== '' ? parseFloat(unprocessedValue) : undefined;
 
     if (isNaN(inputValue) && inputValue !== undefined) {
-      setTemporaryInput(unprocessedValue);
       return;
     }
 
-    setTemporaryInput(null);
     onChange(inputValue);
   };
 
-  const handleOnBlur = () => {
-    if (temporaryInput !== null) {
-      setTemporaryInput(null);
-    }
-  };
-
-  const inputValue = temporaryInput !== null ? temporaryInput : value;
+  const computedValue = (0, _element.useMemo)(() => {
+    const [parsedQuantity] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
+    return [parsedQuantity, unit].join('');
+  }, [unit, value]);
   const min = isPx ? _shared.COVER_MIN_HEIGHT : 0;
   return (0, _element.createElement)(_components.BaseControl, {
     label: (0, _i18n.__)('Minimum height of cover'),
     id: inputId
-  }, (0, _element.createElement)(_blockEditor.__experimentalUnitControl, {
+  }, (0, _element.createElement)(_components.__experimentalUnitControl, {
     id: inputId,
     isResetValueOnUnitChange: true,
     min: min,
-    onBlur: handleOnBlur,
     onChange: handleOnChange,
     onUnitChange: onUnitChange,
     style: {
       maxWidth: 80
     },
-    unit: unit,
     units: units,
-    value: inputValue
+    value: computedValue
   }));
 }
 
@@ -247,15 +241,10 @@ function CoverPlaceholder(_ref4) {
   let {
     disableMediaButtons = false,
     children,
-    noticeUI,
-    noticeOperations,
     onSelectMedia,
+    onError,
     style
   } = _ref4;
-  const {
-    removeAllNotices,
-    createErrorNotice
-  } = noticeOperations;
   return (0, _element.createElement)(_blockEditor.MediaPlaceholder, {
     icon: (0, _element.createElement)(_blockEditor.BlockIcon, {
       icon: _icons.cover
@@ -267,12 +256,8 @@ function CoverPlaceholder(_ref4) {
     onSelect: onSelectMedia,
     accept: "image/*,video/*",
     allowedTypes: _shared.ALLOWED_MEDIA_TYPES,
-    notices: noticeUI,
     disableMediaButtons: disableMediaButtons,
-    onError: message => {
-      removeAllNotices();
-      createErrorNotice(message);
-    },
+    onError: onError,
     style: style
   }, children);
 }
@@ -284,8 +269,6 @@ function CoverEdit(_ref5) {
     attributes,
     clientId,
     isSelected,
-    noticeUI,
-    noticeOperations,
     overlayColor,
     setAttributes,
     setOverlayColor,
@@ -311,6 +294,9 @@ function CoverEdit(_ref5) {
   const {
     __unstableMarkNextChangeAsNotPersistent
   } = (0, _data.useDispatch)(_blockEditor.store);
+  const {
+    createErrorNotice
+  } = (0, _data.useDispatch)(_notices.store);
   const {
     gradientClass,
     gradientValue,
@@ -363,6 +349,12 @@ function CoverEdit(_ref5) {
     });
   };
 
+  const onUploadError = message => {
+    createErrorNotice(Array.isArray(message) ? message[2] : message, {
+      type: 'snackbar'
+    });
+  };
+
   const isDarkElement = (0, _element.useRef)();
   const isCoverDark = useCoverIsDark(url, dimRatio, overlayColor.color, isDarkElement);
   (0, _element.useEffect)(() => {
@@ -526,9 +518,8 @@ function CoverEdit(_ref5) {
     return (0, _element.createElement)(_element.Fragment, null, controls, (0, _element.createElement)("div", (0, _extends2.default)({}, blockProps, {
       className: (0, _classnames.default)('is-placeholder', blockProps.className)
     }), (0, _element.createElement)(CoverPlaceholder, {
-      noticeUI: noticeUI,
       onSelectMedia: onSelectMedia,
-      noticeOperations: noticeOperations,
+      onError: onUploadError,
       style: {
         minHeight: minHeightWithUnit || undefined
       }
@@ -632,15 +623,14 @@ function CoverEdit(_ref5) {
     style: mediaStyle
   }), isUploadingMedia && (0, _element.createElement)(_components.Spinner, null), (0, _element.createElement)(CoverPlaceholder, {
     disableMediaButtons: true,
-    noticeUI: noticeUI,
     onSelectMedia: onSelectMedia,
-    noticeOperations: noticeOperations
+    onError: onUploadError
   }), (0, _element.createElement)("div", innerBlocksProps)));
 }
 
 var _default = (0, _compose.compose)([(0, _blockEditor.withColors)({
   overlayColor: 'background-color'
-}), _components.withNotices])(CoverEdit);
+})])(CoverEdit);
 
 exports.default = _default;
 //# sourceMappingURL=edit.js.map