@wordpress/block-editor 15.11.1-next.v.0 → 15.12.1-next.v.0

package/build/components/writing-flow/use-drag-selection.cjs

@@ -35,6 +35,7 @@ function setContentEditableWrapper(node, value) {
 function useDragSelection() {
   const { startMultiSelect, stopMultiSelect } = (0, import_data.useDispatch)(import_store.store);
   const {
+    getSettings,
     isSelectionEnabled,
     hasSelectedBlock,
     isDraggingBlocks,
@@ -90,7 +91,7 @@ function useDragSelection() {
         if (node === target) {
           return;
         }
-        if (target.getAttribute("contenteditable") !== "true") {
+        if (target.getAttribute("contenteditable") !== "true" && !getSettings().isPreviewMode) {
           return;
         }
         if (!isSelectionEnabled()) {

package/build/components/writing-flow/use-drag-selection.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-drag-selection.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Sets the `contenteditable` wrapper element to `value`.\n *\n * @param {HTMLElement} node  Block element.\n * @param {boolean}     value `contentEditable` value (true or false)\n */\nfunction setContentEditableWrapper( node, value ) {\n\tnode.contentEditable = value;\n\t// Firefox doesn't automatically move focus.\n\tif ( value ) {\n\t\tnode.focus();\n\t}\n}\n\n/**\n * Sets a multi-selection based on the native selection across blocks.\n */\nexport default function useDragSelection() {\n\tconst { startMultiSelect, stopMultiSelect } =\n\t\tuseDispatch( blockEditorStore );\n\tconst {\n\t\tisSelectionEnabled,\n\t\thasSelectedBlock,\n\t\tisDraggingBlocks,\n\t\tisMultiSelecting,\n\t} = useSelect( blockEditorStore );\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\n\t\t\tlet anchorElement;\n\t\t\tlet rafId;\n\n\t\t\tfunction onMouseUp() {\n\t\t\t\tstopMultiSelect();\n\t\t\t\t// Equivalent to attaching the listener once.\n\t\t\t\tdefaultView.removeEventListener( 'mouseup', onMouseUp );\n\t\t\t\t// The browser selection won't have updated yet at this point,\n\t\t\t\t// so wait until the next animation frame to get the browser\n\t\t\t\t// selection.\n\t\t\t\trafId = defaultView.requestAnimationFrame( () => {\n\t\t\t\t\tif ( ! hasSelectedBlock() ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the selection is complete (on mouse up), and no\n\t\t\t\t\t// multiple blocks have been selected, set focus back to the\n\t\t\t\t\t// anchor element. if the anchor element contains the\n\t\t\t\t\t// selection. Additionally, the contentEditable wrapper can\n\t\t\t\t\t// now be disabled again.\n\t\t\t\t\tsetContentEditableWrapper( node, false );\n\n\t\t\t\t\tconst selection = defaultView.getSelection();\n\n\t\t\t\t\tif ( selection.rangeCount ) {\n\t\t\t\t\t\tconst range = selection.getRangeAt( 0 );\n\t\t\t\t\t\tconst { commonAncestorContainer } = range;\n\t\t\t\t\t\tconst clonedRange = range.cloneRange();\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tanchorElement.contains( commonAncestorContainer )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tanchorElement.focus();\n\t\t\t\t\t\t\tselection.removeAllRanges();\n\t\t\t\t\t\t\tselection.addRange( clonedRange );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tlet lastMouseDownTarget;\n\n\t\t\tfunction onMouseDown( { target } ) {\n\t\t\t\tlastMouseDownTarget = target;\n\t\t\t}\n\n\t\t\tfunction onMouseLeave( { buttons, target, relatedTarget } ) {\n\t\t\t\tif ( ! target.contains( lastMouseDownTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// If we're moving into a child element, ignore. We're tracking\n\t\t\t\t// the mouse leaving the element to a parent, no a child.\n\t\t\t\tif ( target.contains( relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Avoid triggering a multi-selection if the user is already\n\t\t\t\t// dragging blocks.\n\t\t\t\tif ( isDraggingBlocks() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// The primary button must be pressed to initiate selection.\n\t\t\t\t// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n\t\t\t\tif ( buttons !== 1 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Abort if we are already multi-selecting.\n\t\t\t\tif ( isMultiSelecting() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Abort if selection is leaving writing flow.\n\t\t\t\tif ( node === target ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Check the attribute, not the contentEditable attribute. All\n\t\t\t\t// child elements of the content editable wrapper are editable\n\t\t\t\t// and return true for this property. We only want to start\n\t\t\t\t// multi selecting when the mouse leaves the wrapper.\n\t\t\t\tif ( target.getAttribute( 'contenteditable' ) !== 'true' ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( ! isSelectionEnabled() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Do not rely on the active element because it may change after\n\t\t\t\t// the mouse leaves for the first time. See\n\t\t\t\t// https://github.com/WordPress/gutenberg/issues/48747.\n\t\t\t\tanchorElement = target;\n\n\t\t\t\tstartMultiSelect();\n\n\t\t\t\t// `onSelectionStart` is called after `mousedown` and\n\t\t\t\t// `mouseleave` (from a block). The selection ends when\n\t\t\t\t// `mouseup` happens anywhere in the window.\n\t\t\t\tdefaultView.addEventListener( 'mouseup', onMouseUp );\n\n\t\t\t\t// Allow cross contentEditable selection by temporarily making\n\t\t\t\t// all content editable. We can't rely on using the store and\n\t\t\t\t// React because re-rending happens too slowly. We need to be\n\t\t\t\t// able to select across instances immediately.\n\t\t\t\tsetContentEditableWrapper( node, true );\n\t\t\t}\n\n\t\t\tnode.addEventListener( 'mouseout', onMouseLeave );\n\t\t\tnode.addEventListener( 'mousedown', onMouseDown );\n\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'mouseout', onMouseLeave );\n\t\t\t\tdefaultView.removeEventListener( 'mouseup', onMouseUp );\n\t\t\t\tdefaultView.cancelAnimationFrame( rafId );\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tstartMultiSelect,\n\t\t\tstopMultiSelect,\n\t\t\tisSelectionEnabled,\n\t\t\thasSelectedBlock,\n\t\t]\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuC;AACvC,qBAA6B;AAK7B,mBAA0C;AAQ1C,SAAS,0BAA2B,MAAM,OAAQ;AACjD,OAAK,kBAAkB;AAEvB,MAAK,OAAQ;AACZ,SAAK,MAAM;AAAA,EACZ;AACD;AAKe,SAAR,mBAAoC;AAC1C,QAAM,EAAE,kBAAkB,gBAAgB,QACzC,yBAAa,aAAAA,KAAiB;AAC/B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,uBAAW,aAAAA,KAAiB;AAChC,aAAO;AAAA,IACN,CAAE,SAAU;AACX,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,EAAE,YAAY,IAAI;AAExB,UAAI;AACJ,UAAI;AAEJ,eAAS,YAAY;AACpB,wBAAgB;AAEhB,oBAAY,oBAAqB,WAAW,SAAU;AAItD,gBAAQ,YAAY,sBAAuB,MAAM;AAChD,cAAK,CAAE,iBAAiB,GAAI;AAC3B;AAAA,UACD;AAOA,oCAA2B,MAAM,KAAM;AAEvC,gBAAM,YAAY,YAAY,aAAa;AAE3C,cAAK,UAAU,YAAa;AAC3B,kBAAM,QAAQ,UAAU,WAAY,CAAE;AACtC,kBAAM,EAAE,wBAAwB,IAAI;AACpC,kBAAM,cAAc,MAAM,WAAW;AAErC,gBACC,cAAc,SAAU,uBAAwB,GAC/C;AACD,4BAAc,MAAM;AACpB,wBAAU,gBAAgB;AAC1B,wBAAU,SAAU,WAAY;AAAA,YACjC;AAAA,UACD;AAAA,QACD,CAAE;AAAA,MACH;AAEA,UAAI;AAEJ,eAAS,YAAa,EAAE,OAAO,GAAI;AAClC,8BAAsB;AAAA,MACvB;AAEA,eAAS,aAAc,EAAE,SAAS,QAAQ,cAAc,GAAI;AAC3D,YAAK,CAAE,OAAO,SAAU,mBAAoB,GAAI;AAC/C;AAAA,QACD;AAIA,YAAK,OAAO,SAAU,aAAc,GAAI;AACvC;AAAA,QACD;AAIA,YAAK,iBAAiB,GAAI;AACzB;AAAA,QACD;AAIA,YAAK,YAAY,GAAI;AACpB;AAAA,QACD;AAGA,YAAK,iBAAiB,GAAI;AACzB;AAAA,QACD;AAGA,YAAK,SAAS,QAAS;AACtB;AAAA,QACD;AAMA,YAAK,OAAO,aAAc,iBAAkB,MAAM,QAAS;AAC1D;AAAA,QACD;AAEA,YAAK,CAAE,mBAAmB,GAAI;AAC7B;AAAA,QACD;AAKA,wBAAgB;AAEhB,yBAAiB;AAKjB,oBAAY,iBAAkB,WAAW,SAAU;AAMnD,kCAA2B,MAAM,IAAK;AAAA,MACvC;AAEA,WAAK,iBAAkB,YAAY,YAAa;AAChD,WAAK,iBAAkB,aAAa,WAAY;AAEhD,aAAO,MAAM;AACZ,aAAK,oBAAqB,YAAY,YAAa;AACnD,oBAAY,oBAAqB,WAAW,SAAU;AACtD,oBAAY,qBAAsB,KAAM;AAAA,MACzC;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Sets the `contenteditable` wrapper element to `value`.\n *\n * @param {HTMLElement} node  Block element.\n * @param {boolean}     value `contentEditable` value (true or false)\n */\nfunction setContentEditableWrapper( node, value ) {\n\tnode.contentEditable = value;\n\t// Firefox doesn't automatically move focus.\n\tif ( value ) {\n\t\tnode.focus();\n\t}\n}\n\n/**\n * Sets a multi-selection based on the native selection across blocks.\n */\nexport default function useDragSelection() {\n\tconst { startMultiSelect, stopMultiSelect } =\n\t\tuseDispatch( blockEditorStore );\n\tconst {\n\t\tgetSettings,\n\t\tisSelectionEnabled,\n\t\thasSelectedBlock,\n\t\tisDraggingBlocks,\n\t\tisMultiSelecting,\n\t} = useSelect( blockEditorStore );\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\n\t\t\tlet anchorElement;\n\t\t\tlet rafId;\n\n\t\t\tfunction onMouseUp() {\n\t\t\t\tstopMultiSelect();\n\t\t\t\t// Equivalent to attaching the listener once.\n\t\t\t\tdefaultView.removeEventListener( 'mouseup', onMouseUp );\n\t\t\t\t// The browser selection won't have updated yet at this point,\n\t\t\t\t// so wait until the next animation frame to get the browser\n\t\t\t\t// selection.\n\t\t\t\trafId = defaultView.requestAnimationFrame( () => {\n\t\t\t\t\tif ( ! hasSelectedBlock() ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// If the selection is complete (on mouse up), and no\n\t\t\t\t\t// multiple blocks have been selected, set focus back to the\n\t\t\t\t\t// anchor element. if the anchor element contains the\n\t\t\t\t\t// selection. Additionally, the contentEditable wrapper can\n\t\t\t\t\t// now be disabled again.\n\t\t\t\t\tsetContentEditableWrapper( node, false );\n\n\t\t\t\t\tconst selection = defaultView.getSelection();\n\n\t\t\t\t\tif ( selection.rangeCount ) {\n\t\t\t\t\t\tconst range = selection.getRangeAt( 0 );\n\t\t\t\t\t\tconst { commonAncestorContainer } = range;\n\t\t\t\t\t\tconst clonedRange = range.cloneRange();\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tanchorElement.contains( commonAncestorContainer )\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tanchorElement.focus();\n\t\t\t\t\t\t\tselection.removeAllRanges();\n\t\t\t\t\t\t\tselection.addRange( clonedRange );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tlet lastMouseDownTarget;\n\n\t\t\tfunction onMouseDown( { target } ) {\n\t\t\t\tlastMouseDownTarget = target;\n\t\t\t}\n\n\t\t\tfunction onMouseLeave( { buttons, target, relatedTarget } ) {\n\t\t\t\tif ( ! target.contains( lastMouseDownTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// If we're moving into a child element, ignore. We're tracking\n\t\t\t\t// the mouse leaving the element to a parent, no a child.\n\t\t\t\tif ( target.contains( relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Avoid triggering a multi-selection if the user is already\n\t\t\t\t// dragging blocks.\n\t\t\t\tif ( isDraggingBlocks() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// The primary button must be pressed to initiate selection.\n\t\t\t\t// See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons\n\t\t\t\tif ( buttons !== 1 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Abort if we are already multi-selecting.\n\t\t\t\tif ( isMultiSelecting() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Abort if selection is leaving writing flow.\n\t\t\t\tif ( node === target ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Check the attribute, not the contentEditable attribute. All\n\t\t\t\t// child elements of the content editable wrapper are editable\n\t\t\t\t// and return true for this property. We only want to start\n\t\t\t\t// multi selecting when the mouse leaves the wrapper.\n\t\t\t\t// In preview mode, allow drag selection from blocks since they\n\t\t\t\t// are not contenteditable.\n\t\t\t\tif (\n\t\t\t\t\ttarget.getAttribute( 'contenteditable' ) !== 'true' &&\n\t\t\t\t\t! getSettings().isPreviewMode\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( ! isSelectionEnabled() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Do not rely on the active element because it may change after\n\t\t\t\t// the mouse leaves for the first time. See\n\t\t\t\t// https://github.com/WordPress/gutenberg/issues/48747.\n\t\t\t\tanchorElement = target;\n\n\t\t\t\tstartMultiSelect();\n\n\t\t\t\t// `onSelectionStart` is called after `mousedown` and\n\t\t\t\t// `mouseleave` (from a block). The selection ends when\n\t\t\t\t// `mouseup` happens anywhere in the window.\n\t\t\t\tdefaultView.addEventListener( 'mouseup', onMouseUp );\n\n\t\t\t\t// Allow cross contentEditable selection by temporarily making\n\t\t\t\t// all content editable. We can't rely on using the store and\n\t\t\t\t// React because re-rending happens too slowly. We need to be\n\t\t\t\t// able to select across instances immediately.\n\t\t\t\tsetContentEditableWrapper( node, true );\n\t\t\t}\n\n\t\t\tnode.addEventListener( 'mouseout', onMouseLeave );\n\t\t\tnode.addEventListener( 'mousedown', onMouseDown );\n\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'mouseout', onMouseLeave );\n\t\t\t\tdefaultView.removeEventListener( 'mouseup', onMouseUp );\n\t\t\t\tdefaultView.cancelAnimationFrame( rafId );\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tstartMultiSelect,\n\t\t\tstopMultiSelect,\n\t\t\tisSelectionEnabled,\n\t\t\thasSelectedBlock,\n\t\t]\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAuC;AACvC,qBAA6B;AAK7B,mBAA0C;AAQ1C,SAAS,0BAA2B,MAAM,OAAQ;AACjD,OAAK,kBAAkB;AAEvB,MAAK,OAAQ;AACZ,SAAK,MAAM;AAAA,EACZ;AACD;AAKe,SAAR,mBAAoC;AAC1C,QAAM,EAAE,kBAAkB,gBAAgB,QACzC,yBAAa,aAAAA,KAAiB;AAC/B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,QAAI,uBAAW,aAAAA,KAAiB;AAChC,aAAO;AAAA,IACN,CAAE,SAAU;AACX,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,EAAE,YAAY,IAAI;AAExB,UAAI;AACJ,UAAI;AAEJ,eAAS,YAAY;AACpB,wBAAgB;AAEhB,oBAAY,oBAAqB,WAAW,SAAU;AAItD,gBAAQ,YAAY,sBAAuB,MAAM;AAChD,cAAK,CAAE,iBAAiB,GAAI;AAC3B;AAAA,UACD;AAOA,oCAA2B,MAAM,KAAM;AAEvC,gBAAM,YAAY,YAAY,aAAa;AAE3C,cAAK,UAAU,YAAa;AAC3B,kBAAM,QAAQ,UAAU,WAAY,CAAE;AACtC,kBAAM,EAAE,wBAAwB,IAAI;AACpC,kBAAM,cAAc,MAAM,WAAW;AAErC,gBACC,cAAc,SAAU,uBAAwB,GAC/C;AACD,4BAAc,MAAM;AACpB,wBAAU,gBAAgB;AAC1B,wBAAU,SAAU,WAAY;AAAA,YACjC;AAAA,UACD;AAAA,QACD,CAAE;AAAA,MACH;AAEA,UAAI;AAEJ,eAAS,YAAa,EAAE,OAAO,GAAI;AAClC,8BAAsB;AAAA,MACvB;AAEA,eAAS,aAAc,EAAE,SAAS,QAAQ,cAAc,GAAI;AAC3D,YAAK,CAAE,OAAO,SAAU,mBAAoB,GAAI;AAC/C;AAAA,QACD;AAIA,YAAK,OAAO,SAAU,aAAc,GAAI;AACvC;AAAA,QACD;AAIA,YAAK,iBAAiB,GAAI;AACzB;AAAA,QACD;AAIA,YAAK,YAAY,GAAI;AACpB;AAAA,QACD;AAGA,YAAK,iBAAiB,GAAI;AACzB;AAAA,QACD;AAGA,YAAK,SAAS,QAAS;AACtB;AAAA,QACD;AAQA,YACC,OAAO,aAAc,iBAAkB,MAAM,UAC7C,CAAE,YAAY,EAAE,eACf;AACD;AAAA,QACD;AAEA,YAAK,CAAE,mBAAmB,GAAI;AAC7B;AAAA,QACD;AAKA,wBAAgB;AAEhB,yBAAiB;AAKjB,oBAAY,iBAAkB,WAAW,SAAU;AAMnD,kCAA2B,MAAM,IAAK;AAAA,MACvC;AAEA,WAAK,iBAAkB,YAAY,YAAa;AAChD,WAAK,iBAAkB,aAAa,WAAY;AAEhD,aAAO,MAAM;AACZ,aAAK,oBAAqB,YAAY,YAAa;AACnD,oBAAY,oBAAqB,WAAW,SAAU;AACtD,oBAAY,qBAAsB,KAAM;AAAA,MACzC;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
   "names": ["blockEditorStore"]
 }

package/build/components/writing-flow/use-preview-mode-nav.cjs

@@ -0,0 +1,92 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/writing-flow/use-preview-mode-nav.js
+var use_preview_mode_nav_exports = {};
+__export(use_preview_mode_nav_exports, {
+  usePreviewModeNav: () => usePreviewModeNav
+});
+module.exports = __toCommonJS(use_preview_mode_nav_exports);
+var import_compose = require("@wordpress/compose");
+var import_data = require("@wordpress/data");
+var import_keycodes = require("@wordpress/keycodes");
+var import_store = require("../../store/index.cjs");
+function usePreviewModeNav() {
+  const isPreviewMode = (0, import_data.useSelect)(
+    (select) => select(import_store.store).getSettings().isPreviewMode,
+    []
+  );
+  return (0, import_compose.useRefEffect)(
+    (node) => {
+      if (!isPreviewMode) {
+        return;
+      }
+      function onKeyDown(event) {
+        const { keyCode, shiftKey, target } = event;
+        const isTab = keyCode === import_keycodes.TAB;
+        const isUp = keyCode === import_keycodes.UP;
+        const isDown = keyCode === import_keycodes.DOWN;
+        const isLeft = keyCode === import_keycodes.LEFT;
+        const isRight = keyCode === import_keycodes.RIGHT;
+        const isArrow = isUp || isDown || isLeft || isRight;
+        if (!isTab && !isArrow) {
+          return;
+        }
+        const isReverse = isTab ? shiftKey : isUp || isLeft;
+        const blocks = Array.from(
+          node.querySelectorAll("[data-block]")
+        );
+        if (!blocks.length) {
+          return;
+        }
+        const currentBlock = target.closest("[data-block]");
+        const currentIndex = currentBlock ? blocks.indexOf(currentBlock) : -1;
+        if (currentIndex === -1) {
+          return;
+        }
+        if (isTab) {
+          if (isReverse && currentIndex === 0) {
+            return;
+          }
+          if (!isReverse && currentIndex === blocks.length - 1) {
+            return;
+          }
+        }
+        let nextIndex;
+        if (isReverse) {
+          nextIndex = currentIndex <= 0 ? blocks.length - 1 : currentIndex - 1;
+        } else {
+          nextIndex = currentIndex === -1 || currentIndex >= blocks.length - 1 ? 0 : currentIndex + 1;
+        }
+        event.preventDefault();
+        blocks[nextIndex].focus();
+      }
+      node.addEventListener("keydown", onKeyDown);
+      return () => {
+        node.removeEventListener("keydown", onKeyDown);
+      };
+    },
+    [isPreviewMode]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePreviewModeNav
+});
+//# sourceMappingURL=use-preview-mode-nav.cjs.map

package/build/components/writing-flow/use-preview-mode-nav.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/writing-flow/use-preview-mode-nav.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { TAB, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * In preview mode, handles Tab and arrow key navigation to move only between\n * block elements, skipping all other focusable content.\n *\n * @return {Function} Ref callback.\n */\nexport function usePreviewModeNav() {\n\tconst isPreviewMode = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().isPreviewMode,\n\t\t[]\n\t);\n\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfunction onKeyDown( event ) {\n\t\t\t\tconst { keyCode, shiftKey, target } = event;\n\n\t\t\t\tconst isTab = keyCode === TAB;\n\t\t\t\tconst isUp = keyCode === UP;\n\t\t\t\tconst isDown = keyCode === DOWN;\n\t\t\t\tconst isLeft = keyCode === LEFT;\n\t\t\t\tconst isRight = keyCode === RIGHT;\n\t\t\t\tconst isArrow = isUp || isDown || isLeft || isRight;\n\n\t\t\t\tif ( ! isTab && ! isArrow ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst isReverse = isTab ? shiftKey : isUp || isLeft;\n\n\t\t\t\tconst blocks = Array.from(\n\t\t\t\t\tnode.querySelectorAll( '[data-block]' )\n\t\t\t\t);\n\n\t\t\t\tif ( ! blocks.length ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst currentBlock = target.closest( '[data-block]' );\n\t\t\t\tconst currentIndex = currentBlock\n\t\t\t\t\t? blocks.indexOf( currentBlock )\n\t\t\t\t\t: -1;\n\n\t\t\t\t// If focus is not on a block, don't intercept navigation.\n\t\t\t\tif ( currentIndex === -1 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// For Tab navigation, allow escaping the block list at boundaries.\n\t\t\t\t// For arrow keys, wrap around.\n\t\t\t\tif ( isTab ) {\n\t\t\t\t\tif ( isReverse && currentIndex === 0 ) {\n\t\t\t\t\t\t// At first block, Shift+Tab should exit the block list.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! isReverse && currentIndex === blocks.length - 1 ) {\n\t\t\t\t\t\t// At last block, Tab should exit the block list.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tlet nextIndex;\n\t\t\t\tif ( isReverse ) {\n\t\t\t\t\tnextIndex =\n\t\t\t\t\t\tcurrentIndex <= 0\n\t\t\t\t\t\t\t? blocks.length - 1\n\t\t\t\t\t\t\t: currentIndex - 1;\n\t\t\t\t} else {\n\t\t\t\t\tnextIndex =\n\t\t\t\t\t\tcurrentIndex === -1 || currentIndex >= blocks.length - 1\n\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t: currentIndex + 1;\n\t\t\t\t}\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tblocks[ nextIndex ].focus();\n\t\t\t}\n\n\t\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\t};\n\t\t},\n\t\t[ isPreviewMode ]\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA6B;AAC7B,kBAA0B;AAC1B,sBAA2C;AAK3C,mBAA0C;AAQnC,SAAS,oBAAoB;AACnC,QAAM,oBAAgB;AAAA,IACrB,CAAE,WAAY,OAAQ,aAAAA,KAAiB,EAAE,YAAY,EAAE;AAAA,IACvD,CAAC;AAAA,EACF;AAEA,aAAO;AAAA,IACN,CAAE,SAAU;AACX,UAAK,CAAE,eAAgB;AACtB;AAAA,MACD;AAEA,eAAS,UAAW,OAAQ;AAC3B,cAAM,EAAE,SAAS,UAAU,OAAO,IAAI;AAEtC,cAAM,QAAQ,YAAY;AAC1B,cAAM,OAAO,YAAY;AACzB,cAAM,SAAS,YAAY;AAC3B,cAAM,SAAS,YAAY;AAC3B,cAAM,UAAU,YAAY;AAC5B,cAAM,UAAU,QAAQ,UAAU,UAAU;AAE5C,YAAK,CAAE,SAAS,CAAE,SAAU;AAC3B;AAAA,QACD;AAEA,cAAM,YAAY,QAAQ,WAAW,QAAQ;AAE7C,cAAM,SAAS,MAAM;AAAA,UACpB,KAAK,iBAAkB,cAAe;AAAA,QACvC;AAEA,YAAK,CAAE,OAAO,QAAS;AACtB;AAAA,QACD;AAEA,cAAM,eAAe,OAAO,QAAS,cAAe;AACpD,cAAM,eAAe,eAClB,OAAO,QAAS,YAAa,IAC7B;AAGH,YAAK,iBAAiB,IAAK;AAC1B;AAAA,QACD;AAIA,YAAK,OAAQ;AACZ,cAAK,aAAa,iBAAiB,GAAI;AAEtC;AAAA,UACD;AACA,cAAK,CAAE,aAAa,iBAAiB,OAAO,SAAS,GAAI;AAExD;AAAA,UACD;AAAA,QACD;AAEA,YAAI;AACJ,YAAK,WAAY;AAChB,sBACC,gBAAgB,IACb,OAAO,SAAS,IAChB,eAAe;AAAA,QACpB,OAAO;AACN,sBACC,iBAAiB,MAAM,gBAAgB,OAAO,SAAS,IACpD,IACA,eAAe;AAAA,QACpB;AAEA,cAAM,eAAe;AACrB,eAAQ,SAAU,EAAE,MAAM;AAAA,MAC3B;AAEA,WAAK,iBAAkB,WAAW,SAAU;AAC5C,aAAO,MAAM;AACZ,aAAK,oBAAqB,WAAW,SAAU;AAAA,MAChD;AAAA,IACD;AAAA,IACA,CAAE,aAAc;AAAA,EACjB;AACD;",
+  "names": ["blockEditorStore"]
+}

package/build/hooks/anchor.cjs

@@ -62,7 +62,7 @@ function BlockEditAnchorControlPure({ anchor, setAttributes }) {
       label: (0, import_i18n.__)("HTML anchor"),
       help: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         (0, import_i18n.__)(
-          "Enter a word or two \u2014 without spaces \u2014 to make a unique web address just for this block, called an \u201Canchor\u201D. Then, you\u2019ll be able to link directly to this section of your page."
+          "Enter a word or two\u2014without spaces\u2014to make a unique web address just for this block, called an \u201Canchor\u201D. Then, you\u2019ll be able to link directly to this section of your page."
         ),
         isWeb && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           " ",

package/build/hooks/anchor.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/anchor.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockEditAnchorControlPure( { anchor, setAttributes } ) {\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\tconst isWeb = Platform.OS === 'web';\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\thelp={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Enter a word or two \u2014 without spaces \u2014 to make a unique web address just for this block, called an \u201Canchor\u201D. Then, you\u2019ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isWeb && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{ ' ' }\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/page-jumps/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tvalue={ anchor || '' }\n\t\t\t\tplaceholder={ ! isWeb ? __( 'Add an anchor' ) : null }\n\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tanchor: nextValue !== '' ? nextValue : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nexport default {\n\taddSaveProps,\n\tedit: BlockEditAnchorControlPure,\n\tattributeKeys: [ 'anchor' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'anchor' );\n\t},\n};\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( 'type' in ( settings.attributes?.anchor ?? {} ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockEditAnchorControlPure( { anchor, setAttributes } ) {\n\tconst blockEditingMode = useBlockEditingMode();\n\n\tif ( blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\tconst isWeb = Platform.OS === 'web';\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<TextControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\thelp={\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Enter a word or two\u2014without spaces\u2014to make a unique web address just for this block, called an \u201Canchor\u201D. Then, you\u2019ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isWeb && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{ ' ' }\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/page-jumps/'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t\t\t</ExternalLink>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t}\n\t\t\t\tvalue={ anchor || '' }\n\t\t\t\tplaceholder={ ! isWeb ? __( 'Add an anchor' ) : null }\n\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tanchor: nextValue !== '' ? nextValue : undefined,\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\tautoComplete=\"off\"\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nexport default {\n\taddSaveProps,\n\tedit: BlockEditAnchorControlPure,\n\tattributeKeys: [ 'anchor' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'anchor' );\n\t},\n};\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA0B;AAC1B,wBAA0C;AAC1C,kBAAmB;AACnB,oBAAgC;AAChC,qBAAyB;AAKzB,IAAAA,qBAAkC;AAClC,gCAAoC;AAwD7B;AAjDP,IAAM,eAAe;AAUd,SAAS,aAAc,UAAW;AAExC,MAAK,WAAY,SAAS,YAAY,UAAU,CAAC,IAAM;AACtD,WAAO;AAAA,EACR;AACA,UAAK,+BAAiB,UAAU,QAAS,GAAI;AAE5C,aAAS,aAAa;AAAA,MACrB,GAAG,SAAS;AAAA,MACZ,QAAQ;AAAA,QACP,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEA,SAAS,2BAA4B,EAAE,QAAQ,cAAc,GAAI;AAChE,QAAM,uBAAmB,+CAAoB;AAE7C,MAAK,qBAAqB,WAAY;AACrC,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,wBAAS,OAAO;AAE9B,SACC,4CAAC,wCAAkB,OAAM,YACxB;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,WAAU;AAAA,MACV,WAAQ,gBAAI,aAAc;AAAA,MAC1B,MACC,4EACG;AAAA;AAAA,UACD;AAAA,QACD;AAAA,QACE,SACD,4EACG;AAAA;AAAA,UACF;AAAA,YAAC;AAAA;AAAA,cACA,UAAO;AAAA,gBACN;AAAA,cACD;AAAA,cAEE,8BAAI,0BAA2B;AAAA;AAAA,UAClC;AAAA,WACD;AAAA,SAEF;AAAA,MAED,OAAQ,UAAU;AAAA,MAClB,aAAc,CAAE,YAAQ,gBAAI,eAAgB,IAAI;AAAA,MAChD,UAAW,CAAE,cAAe;AAC3B,oBAAY,UAAU,QAAS,cAAc,GAAI;AACjD,sBAAe;AAAA,UACd,QAAQ,cAAc,KAAK,YAAY;AAAA,QACxC,CAAE;AAAA,MACH;AAAA,MACA,gBAAe;AAAA,MACf,cAAa;AAAA;AAAA,EACd,GACD;AAEF;AAEA,IAAO,iBAAQ;AAAA,EACd;AAAA,EACA,MAAM;AAAA,EACN,eAAe,CAAE,QAAS;AAAA,EAC1B,WAAY,MAAO;AAClB,eAAO,+BAAiB,MAAM,QAAS;AAAA,EACxC;AACD;AAaO,SAAS,aAAc,YAAY,WAAW,YAAa;AACjE,UAAK,+BAAiB,WAAW,QAAS,GAAI;AAC7C,eAAW,KAAK,WAAW,WAAW,KAAK,OAAO,WAAW;AAAA,EAC9D;AAEA,SAAO;AACR;AAAA,IAEA,wBAAW,4BAA4B,yBAAyB,YAAa;",
   "names": ["import_components"]
 }

package/build/hooks/block-renaming.cjs

@@ -38,7 +38,7 @@ function addLabelCallback(settings) {
   if (supportsBlockNaming) {
     settings.__experimentalLabel = (attributes, { context }) => {
       const { metadata } = attributes;
-      if (context === "list-view" && metadata?.name) {
+      if ((context === "list-view" || context === "breadcrumb") && metadata?.name) {
         return metadata.name;
       }
     };

package/build/hooks/block-renaming.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/block-renaming.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addLabelCallback( settings ) {\n\t// If blocks provide their own label callback, do not override it.\n\tif ( settings.__experimentalLabel ) {\n\t\treturn settings;\n\t}\n\n\tconst supportsBlockNaming = hasBlockSupport(\n\t\tsettings,\n\t\t'renaming',\n\t\ttrue // default value\n\t);\n\n\t// Check whether block metadata is supported before using it.\n\tif ( supportsBlockNaming ) {\n\t\tsettings.__experimentalLabel = ( attributes, { context } ) => {\n\t\t\tconst { metadata } = attributes;\n\n\t\t\t// In the list view, use the block's name attribute as the label.\n\t\t\tif ( context === 'list-view' && metadata?.name ) {\n\t\t\t\treturn metadata.name;\n\t\t\t}\n\t\t};\n\t}\n\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/metadata/addLabelCallback',\n\taddLabelCallback\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA0B;AAC1B,oBAAgC;AASzB,SAAS,iBAAkB,UAAW;AAE5C,MAAK,SAAS,qBAAsB;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,0BAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EACD;AAGA,MAAK,qBAAsB;AAC1B,aAAS,sBAAsB,CAAE,YAAY,EAAE,QAAQ,MAAO;AAC7D,YAAM,EAAE,SAAS,IAAI;AAGrB,UAAK,YAAY,eAAe,UAAU,MAAO;AAChD,eAAO,SAAS;AAAA,MACjB;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAAA,IAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addLabelCallback( settings ) {\n\t// If blocks provide their own label callback, do not override it.\n\tif ( settings.__experimentalLabel ) {\n\t\treturn settings;\n\t}\n\n\tconst supportsBlockNaming = hasBlockSupport(\n\t\tsettings,\n\t\t'renaming',\n\t\ttrue // default value\n\t);\n\n\t// Check whether block metadata is supported before using it.\n\tif ( supportsBlockNaming ) {\n\t\tsettings.__experimentalLabel = ( attributes, { context } ) => {\n\t\t\tconst { metadata } = attributes;\n\n\t\t\t// In the list view and breadcrumb, use the block's name attribute as the label.\n\t\t\tif (\n\t\t\t\t( context === 'list-view' || context === 'breadcrumb' ) &&\n\t\t\t\tmetadata?.name\n\t\t\t) {\n\t\t\t\treturn metadata.name;\n\t\t\t}\n\t\t};\n\t}\n\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/metadata/addLabelCallback',\n\taddLabelCallback\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAA0B;AAC1B,oBAAgC;AASzB,SAAS,iBAAkB,UAAW;AAE5C,MAAK,SAAS,qBAAsB;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,0BAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EACD;AAGA,MAAK,qBAAsB;AAC1B,aAAS,sBAAsB,CAAE,YAAY,EAAE,QAAQ,MAAO;AAC7D,YAAM,EAAE,SAAS,IAAI;AAGrB,WACG,YAAY,eAAe,YAAY,iBACzC,UAAU,MACT;AACD,eAAO,SAAS;AAAA,MACjB;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAAA,IAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;",
   "names": []
 }

package/build/hooks/custom-css.cjs

@@ -113,7 +113,7 @@ function useBlockProps({ style }) {
     return {};
   }
   return {
-    className: customCSSIdentifier
+    className: `has-custom-css ${customCSSIdentifier}`
   };
 }
 function addSaveProps(props, blockType, attributes) {

package/build/hooks/custom-css.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/custom-css.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\nimport { getBlockType, hasBlockSupport } from '@wordpress/blocks';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { processCSSNesting } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport AdvancedPanel, {\n\tvalidateCSS,\n} from '../components/global-styles/advanced-panel';\nimport { cleanEmptyObject, useStyleOverride } from './utils';\nimport { store as blockEditorStore } from '../store';\n\n// Stable reference for useInstanceId.\nconst CUSTOM_CSS_INSTANCE_REFERENCE = {};\n\n// Stable empty object reference for useSelect.\nconst EMPTY_STYLE = {};\n\n/**\n * Inspector control for custom CSS.\n *\n * @param {Object}   props               Component props.\n * @param {string}   props.blockName     Block name.\n * @param {Function} props.setAttributes Function to set block attributes.\n * @param {Object}   props.style         Block style attribute.\n */\nfunction CustomCSSControl( { blockName, setAttributes, style } ) {\n\tconst blockType = getBlockType( blockName );\n\n\tfunction onChange( newStyle ) {\n\t\t// Normalize whitespace-only CSS to undefined so it gets cleaned up.\n\t\tconst css = newStyle?.css?.trim() ? newStyle.css : undefined;\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( { ...newStyle, css } ),\n\t\t} );\n\t}\n\n\tconst cssHelpText = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Quote'.\n\t\t__(\n\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value, e.g. color: red;.'\n\t\t),\n\t\tblockType?.title\n\t);\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<AdvancedPanel\n\t\t\t\tvalue={ style }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tinheritedValue={ style }\n\t\t\t\thelp={ cssHelpText }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nfunction CustomCSSEdit( { clientId, name, setAttributes } ) {\n\tconst { style, canEditCSS } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tstyle: getBlockAttributes( clientId )?.style || EMPTY_STYLE,\n\t\t\t\tcanEditCSS: getSettings().canEditCSS,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Don't render the panel if user lacks edit_css capability.\n\tif ( ! canEditCSS ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CustomCSSControl\n\t\t\tblockName={ name }\n\t\t\tsetAttributes={ setAttributes }\n\t\t\tstyle={ style }\n\t\t/>\n\t);\n}\n\n/**\n * Hook to handle custom CSS for a block in the editor.\n * Generates a unique class and applies scoped CSS via style override.\n *\n * @param {Object} props       Block props.\n * @param {Object} props.style Block style attribute.\n * @return {Object} Block props including className for custom CSS scoping.\n */\nfunction useBlockProps( { style } ) {\n\tconst customCSS = style?.css;\n\n\t// Validate CSS is non-empty and passes validation checks.\n\tconst isValidCSS =\n\t\ttypeof customCSS === 'string' &&\n\t\tcustomCSS.trim().length > 0 &&\n\t\tvalidateCSS( customCSS );\n\n\tconst customCSSIdentifier = useInstanceId(\n\t\tCUSTOM_CSS_INSTANCE_REFERENCE,\n\t\t'wp-custom-css'\n\t);\n\n\tconst customCSSSelector = `.${ customCSSIdentifier }`;\n\n\t// Transform the custom CSS using the same logic as global styles.\n\t// Only process if CSS is valid (doesn't contain HTML markup).\n\tconst transformedCSS = useMemo( () => {\n\t\tif ( ! isValidCSS ) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn processCSSNesting( customCSS, customCSSSelector );\n\t}, [ customCSS, customCSSSelector, isValidCSS ] );\n\n\t// Inject the CSS via style override.\n\tuseStyleOverride( { css: transformedCSS } );\n\n\t// Only add the class if there's valid custom CSS.\n\tif ( ! isValidCSS ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tclassName: customCSSIdentifier,\n\t};\n}\n\n/**\n * Adds a marker class to blocks with custom CSS for server-side rendering.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type definition.\n * @param {Object} attributes Block's attributes.\n * @return {Object} Filtered props applied to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, 'customCSS', true ) ) {\n\t\treturn props;\n\t}\n\n\tif ( ! attributes?.style?.css?.trim() ) {\n\t\treturn props;\n\t}\n\n\t// Add a class to indicate this block has custom CSS.\n\t// The actual CSS is rendered server-side using the render_block filter.\n\tconst className = props.className\n\t\t? `${ props.className } has-custom-css`\n\t\t: 'has-custom-css';\n\n\treturn {\n\t\t...props,\n\t\tclassName,\n\t};\n}\n\nexport default {\n\tedit: CustomCSSEdit,\n\tuseBlockProps,\n\taddSaveProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'customCSS', true );\n\t},\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AACxB,kBAA0B;AAC1B,qBAA8B;AAC9B,oBAA8C;AAC9C,kBAA4B;AAC5B,kCAAkC;AAKlC,gCAA8B;AAC9B,4BAEO;AACP,mBAAmD;AACnD,mBAA0C;AAqCvC;AAlCH,IAAM,gCAAgC,CAAC;AAGvC,IAAM,cAAc,CAAC;AAUrB,SAAS,iBAAkB,EAAE,WAAW,eAAe,MAAM,GAAI;AAChE,QAAM,gBAAY,4BAAc,SAAU;AAE1C,WAAS,SAAU,UAAW;AAE7B,UAAM,MAAM,UAAU,KAAK,KAAK,IAAI,SAAS,MAAM;AACnD,kBAAe;AAAA,MACd,WAAO,+BAAkB,EAAE,GAAG,UAAU,IAAI,CAAE;AAAA,IAC/C,CAAE;AAAA,EACH;AAEA,QAAM,kBAAc;AAAA;AAAA,QAEnB;AAAA,MACC;AAAA,IACD;AAAA,IACA,WAAW;AAAA,EACZ;AAEA,SACC,4CAAC,0BAAAA,SAAA,EAAkB,OAAM,YACxB;AAAA,IAAC,sBAAAC;AAAA,IAAA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA,gBAAiB;AAAA,MACjB,MAAO;AAAA;AAAA,EACR,GACD;AAEF;AAEA,SAAS,cAAe,EAAE,UAAU,MAAM,cAAc,GAAI;AAC3D,QAAM,EAAE,OAAO,WAAW,QAAI;AAAA,IAC7B,CAAE,WAAY;AACb,YAAM,EAAE,oBAAoB,YAAY,IACvC,OAAQ,aAAAC,KAAiB;AAC1B,aAAO;AAAA,QACN,OAAO,mBAAoB,QAAS,GAAG,SAAS;AAAA,QAChD,YAAY,YAAY,EAAE;AAAA,MAC3B;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAGA,MAAK,CAAE,YAAa;AACnB,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACD;AAEF;AAUA,SAAS,cAAe,EAAE,MAAM,GAAI;AACnC,QAAM,YAAY,OAAO;AAGzB,QAAM,aACL,OAAO,cAAc,YACrB,UAAU,KAAK,EAAE,SAAS,SAC1B,mCAAa,SAAU;AAExB,QAAM,0BAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AAEA,QAAM,oBAAoB,IAAK,mBAAoB;AAInD,QAAM,qBAAiB,wBAAS,MAAM;AACrC,QAAK,CAAE,YAAa;AACnB,aAAO;AAAA,IACR;AACA,eAAO,+CAAmB,WAAW,iBAAkB;AAAA,EACxD,GAAG,CAAE,WAAW,mBAAmB,UAAW,CAAE;AAGhD,qCAAkB,EAAE,KAAK,eAAe,CAAE;AAG1C,MAAK,CAAE,YAAa;AACnB,WAAO,CAAC;AAAA,EACT;AAEA,SAAO;AAAA,IACN,WAAW;AAAA,EACZ;AACD;AAUA,SAAS,aAAc,OAAO,WAAW,YAAa;AACrD,MAAK,KAAE,+BAAiB,WAAW,aAAa,IAAK,GAAI;AACxD,WAAO;AAAA,EACR;AAEA,MAAK,CAAE,YAAY,OAAO,KAAK,KAAK,GAAI;AACvC,WAAO;AAAA,EACR;AAIA,QAAM,YAAY,MAAM,YACrB,GAAI,MAAM,SAAU,oBACpB;AAEH,SAAO;AAAA,IACN,GAAG;AAAA,IACH;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,eAAe,CAAE,OAAQ;AAAA,EACzB,WAAY,MAAO;AAClB,eAAO,+BAAiB,MAAM,aAAa,IAAK;AAAA,EACjD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { useInstanceId } from '@wordpress/compose';\nimport { getBlockType, hasBlockSupport } from '@wordpress/blocks';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { processCSSNesting } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport AdvancedPanel, {\n\tvalidateCSS,\n} from '../components/global-styles/advanced-panel';\nimport { cleanEmptyObject, useStyleOverride } from './utils';\nimport { store as blockEditorStore } from '../store';\n\n// Stable reference for useInstanceId.\nconst CUSTOM_CSS_INSTANCE_REFERENCE = {};\n\n// Stable empty object reference for useSelect.\nconst EMPTY_STYLE = {};\n\n/**\n * Inspector control for custom CSS.\n *\n * @param {Object}   props               Component props.\n * @param {string}   props.blockName     Block name.\n * @param {Function} props.setAttributes Function to set block attributes.\n * @param {Object}   props.style         Block style attribute.\n */\nfunction CustomCSSControl( { blockName, setAttributes, style } ) {\n\tconst blockType = getBlockType( blockName );\n\n\tfunction onChange( newStyle ) {\n\t\t// Normalize whitespace-only CSS to undefined so it gets cleaned up.\n\t\tconst css = newStyle?.css?.trim() ? newStyle.css : undefined;\n\t\tsetAttributes( {\n\t\t\tstyle: cleanEmptyObject( { ...newStyle, css } ),\n\t\t} );\n\t}\n\n\tconst cssHelpText = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Quote'.\n\t\t__(\n\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value, e.g. color: red;.'\n\t\t),\n\t\tblockType?.title\n\t);\n\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<AdvancedPanel\n\t\t\t\tvalue={ style }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tinheritedValue={ style }\n\t\t\t\thelp={ cssHelpText }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nfunction CustomCSSEdit( { clientId, name, setAttributes } ) {\n\tconst { style, canEditCSS } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tstyle: getBlockAttributes( clientId )?.style || EMPTY_STYLE,\n\t\t\t\tcanEditCSS: getSettings().canEditCSS,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Don't render the panel if user lacks edit_css capability.\n\tif ( ! canEditCSS ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CustomCSSControl\n\t\t\tblockName={ name }\n\t\t\tsetAttributes={ setAttributes }\n\t\t\tstyle={ style }\n\t\t/>\n\t);\n}\n\n/**\n * Hook to handle custom CSS for a block in the editor.\n * Generates a unique class and applies scoped CSS via style override.\n *\n * @param {Object} props       Block props.\n * @param {Object} props.style Block style attribute.\n * @return {Object} Block props including className for custom CSS scoping.\n */\nfunction useBlockProps( { style } ) {\n\tconst customCSS = style?.css;\n\n\t// Validate CSS is non-empty and passes validation checks.\n\tconst isValidCSS =\n\t\ttypeof customCSS === 'string' &&\n\t\tcustomCSS.trim().length > 0 &&\n\t\tvalidateCSS( customCSS );\n\n\tconst customCSSIdentifier = useInstanceId(\n\t\tCUSTOM_CSS_INSTANCE_REFERENCE,\n\t\t'wp-custom-css'\n\t);\n\n\tconst customCSSSelector = `.${ customCSSIdentifier }`;\n\n\t// Transform the custom CSS using the same logic as global styles.\n\t// Only process if CSS is valid (doesn't contain HTML markup).\n\tconst transformedCSS = useMemo( () => {\n\t\tif ( ! isValidCSS ) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn processCSSNesting( customCSS, customCSSSelector );\n\t}, [ customCSS, customCSSSelector, isValidCSS ] );\n\n\t// Inject the CSS via style override.\n\tuseStyleOverride( { css: transformedCSS } );\n\n\t// Only add the class if there's valid custom CSS.\n\tif ( ! isValidCSS ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\tclassName: `has-custom-css ${ customCSSIdentifier }`,\n\t};\n}\n\n/**\n * Adds a marker class to blocks with custom CSS for server-side rendering.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type definition.\n * @param {Object} attributes Block's attributes.\n * @return {Object} Filtered props applied to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif ( ! hasBlockSupport( blockType, 'customCSS', true ) ) {\n\t\treturn props;\n\t}\n\n\tif ( ! attributes?.style?.css?.trim() ) {\n\t\treturn props;\n\t}\n\n\t// Add a class to indicate this block has custom CSS.\n\t// The actual CSS is rendered server-side using the render_block filter.\n\tconst className = props.className\n\t\t? `${ props.className } has-custom-css`\n\t\t: 'has-custom-css';\n\n\treturn {\n\t\t...props,\n\t\tclassName,\n\t};\n}\n\nexport default {\n\tedit: CustomCSSEdit,\n\tuseBlockProps,\n\taddSaveProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'customCSS', true );\n\t},\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwB;AACxB,kBAA0B;AAC1B,qBAA8B;AAC9B,oBAA8C;AAC9C,kBAA4B;AAC5B,kCAAkC;AAKlC,gCAA8B;AAC9B,4BAEO;AACP,mBAAmD;AACnD,mBAA0C;AAqCvC;AAlCH,IAAM,gCAAgC,CAAC;AAGvC,IAAM,cAAc,CAAC;AAUrB,SAAS,iBAAkB,EAAE,WAAW,eAAe,MAAM,GAAI;AAChE,QAAM,gBAAY,4BAAc,SAAU;AAE1C,WAAS,SAAU,UAAW;AAE7B,UAAM,MAAM,UAAU,KAAK,KAAK,IAAI,SAAS,MAAM;AACnD,kBAAe;AAAA,MACd,WAAO,+BAAkB,EAAE,GAAG,UAAU,IAAI,CAAE;AAAA,IAC/C,CAAE;AAAA,EACH;AAEA,QAAM,kBAAc;AAAA;AAAA,QAEnB;AAAA,MACC;AAAA,IACD;AAAA,IACA,WAAW;AAAA,EACZ;AAEA,SACC,4CAAC,0BAAAA,SAAA,EAAkB,OAAM,YACxB;AAAA,IAAC,sBAAAC;AAAA,IAAA;AAAA,MACA,OAAQ;AAAA,MACR;AAAA,MACA,gBAAiB;AAAA,MACjB,MAAO;AAAA;AAAA,EACR,GACD;AAEF;AAEA,SAAS,cAAe,EAAE,UAAU,MAAM,cAAc,GAAI;AAC3D,QAAM,EAAE,OAAO,WAAW,QAAI;AAAA,IAC7B,CAAE,WAAY;AACb,YAAM,EAAE,oBAAoB,YAAY,IACvC,OAAQ,aAAAC,KAAiB;AAC1B,aAAO;AAAA,QACN,OAAO,mBAAoB,QAAS,GAAG,SAAS;AAAA,QAChD,YAAY,YAAY,EAAE;AAAA,MAC3B;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAGA,MAAK,CAAE,YAAa;AACnB,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,MACZ;AAAA,MACA;AAAA;AAAA,EACD;AAEF;AAUA,SAAS,cAAe,EAAE,MAAM,GAAI;AACnC,QAAM,YAAY,OAAO;AAGzB,QAAM,aACL,OAAO,cAAc,YACrB,UAAU,KAAK,EAAE,SAAS,SAC1B,mCAAa,SAAU;AAExB,QAAM,0BAAsB;AAAA,IAC3B;AAAA,IACA;AAAA,EACD;AAEA,QAAM,oBAAoB,IAAK,mBAAoB;AAInD,QAAM,qBAAiB,wBAAS,MAAM;AACrC,QAAK,CAAE,YAAa;AACnB,aAAO;AAAA,IACR;AACA,eAAO,+CAAmB,WAAW,iBAAkB;AAAA,EACxD,GAAG,CAAE,WAAW,mBAAmB,UAAW,CAAE;AAGhD,qCAAkB,EAAE,KAAK,eAAe,CAAE;AAG1C,MAAK,CAAE,YAAa;AACnB,WAAO,CAAC;AAAA,EACT;AAEA,SAAO;AAAA,IACN,WAAW,kBAAmB,mBAAoB;AAAA,EACnD;AACD;AAUA,SAAS,aAAc,OAAO,WAAW,YAAa;AACrD,MAAK,KAAE,+BAAiB,WAAW,aAAa,IAAK,GAAI;AACxD,WAAO;AAAA,EACR;AAEA,MAAK,CAAE,YAAY,OAAO,KAAK,KAAK,GAAI;AACvC,WAAO;AAAA,EACR;AAIA,QAAM,YAAY,MAAM,YACrB,GAAI,MAAM,SAAU,oBACpB;AAEH,SAAO;AAAA,IACN,GAAG;AAAA,IACH;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,eAAe,CAAE,OAAQ;AAAA,EACzB,WAAY,MAAO;AAClB,eAAO,+BAAiB,MAAM,aAAa,IAAK;AAAA,EACjD;AACD;",
   "names": ["InspectorControls", "AdvancedPanel", "blockEditorStore"]
 }

package/build/hooks/grid-visualizer.cjs

@@ -1,4 +1,26 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 
 // packages/block-editor/src/hooks/grid-visualizer.js
 var import_compose = require("@wordpress/compose");
@@ -6,29 +28,44 @@ var import_hooks = require("@wordpress/hooks");
 var import_data = require("@wordpress/data");
 var import_grid = require("../components/grid/index.cjs");
 var import_store = require("../store/index.cjs");
+var import_use_block_visibility = __toESM(require("../components/block-visibility/use-block-visibility.cjs"));
+var import_private_keys = require("../store/private-keys.cjs");
+var import_constants = require("../components/block-visibility/constants.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function GridLayoutSync(props) {
   (0, import_grid.useGridLayoutSync)(props);
 }
 function GridTools({ clientId, layout }) {
-  const isVisible = (0, import_data.useSelect)(
+  const { isVisible, blockVisibility, deviceType } = (0, import_data.useSelect)(
     (select) => {
       const {
         isBlockSelected,
         isDraggingBlocks,
         getTemplateLock,
-        getBlockEditingMode
+        getBlockEditingMode,
+        getBlockAttributes,
+        getSettings
       } = select(import_store.store);
       if (!isDraggingBlocks() && !isBlockSelected(clientId) || getTemplateLock(clientId) || getBlockEditingMode(clientId) !== "default") {
-        return false;
+        return { isVisible: false };
       }
-      return true;
+      const attributes = getBlockAttributes(clientId);
+      const settings = getSettings();
+      return {
+        isVisible: true,
+        blockVisibility: attributes?.metadata?.blockVisibility,
+        deviceType: settings?.[import_private_keys.deviceTypeKey]?.toLowerCase() || import_constants.BLOCK_VISIBILITY_VIEWPORTS.desktop.value
+      };
     },
     [clientId]
   );
+  const { isBlockCurrentlyHidden } = (0, import_use_block_visibility.default)({
+    blockVisibility,
+    deviceType
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLayoutSync, { clientId }),
-    isVisible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_grid.GridVisualizer, { clientId, parentLayout: layout })
+    isVisible && !isBlockCurrentlyHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_grid.GridVisualizer, { clientId, parentLayout: layout })
   ] });
 }
 var addGridVisualizerToBlockEdit = (0, import_compose.createHigherOrderComponent)(

package/build/hooks/grid-visualizer.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/grid-visualizer.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { GridVisualizer, useGridLayoutSync } from '../components/grid';\nimport { store as blockEditorStore } from '../store';\n\nfunction GridLayoutSync( props ) {\n\tuseGridLayoutSync( props );\n}\n\nfunction GridTools( { clientId, layout } ) {\n\tconst isVisible = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tisBlockSelected,\n\t\t\t\tisDraggingBlocks,\n\t\t\t\tgetTemplateLock,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\t// These calls are purposely ordered from least expensive to most expensive.\n\t\t\t// Hides the visualizer in cases where the user is not or cannot interact with it.\n\t\t\tif (\n\t\t\t\t( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||\n\t\t\t\tgetTemplateLock( clientId ) ||\n\t\t\t\tgetBlockEditingMode( clientId ) !== 'default'\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\treturn true;\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<GridLayoutSync clientId={ clientId } />\n\t\t\t{ isVisible && (\n\t\t\t\t<GridVisualizer clientId={ clientId } parentLayout={ layout } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst addGridVisualizerToBlockEdit = createHigherOrderComponent(\n\t( BlockEdit ) =>\n\t\tfunction AddGridVisualizerToBlockEdit( props ) {\n\t\t\tif ( props.attributes.layout?.type !== 'grid' ) {\n\t\t\t\treturn <BlockEdit key=\"edit\" { ...props } />;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<GridTools\n\t\t\t\t\t\tclientId={ props.clientId }\n\t\t\t\t\t\tlayout={ props.attributes.layout }\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockEdit key=\"edit\" { ...props } />\n\t\t\t\t</>\n\t\t\t);\n\t\t},\n\t'addGridVisualizerToBlockEdit'\n);\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/grid-visualizer',\n\taddGridVisualizerToBlockEdit\n);\n"],
-  "mappings": ";;;AAGA,qBAA2C;AAC3C,mBAA0B;AAC1B,kBAA0B;AAK1B,kBAAkD;AAClD,mBAA0C;AAgCxC;AA9BF,SAAS,eAAgB,OAAQ;AAChC,qCAAmB,KAAM;AAC1B;AAEA,SAAS,UAAW,EAAE,UAAU,OAAO,GAAI;AAC1C,QAAM,gBAAY;AAAA,IACjB,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,aAAAA,KAAiB;AAI7B,UACG,CAAE,iBAAiB,KAAK,CAAE,gBAAiB,QAAS,KACtD,gBAAiB,QAAS,KAC1B,oBAAqB,QAAS,MAAM,WACnC;AACD,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,IACR;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,SACC,4EACC;AAAA,gDAAC,kBAAe,UAAsB;AAAA,IACpC,aACD,4CAAC,8BAAe,UAAsB,cAAe,QAAS;AAAA,KAEhE;AAEF;AAEA,IAAM,mCAA+B;AAAA,EACpC,CAAE,cACD,SAAS,6BAA8B,OAAQ;AAC9C,QAAK,MAAM,WAAW,QAAQ,SAAS,QAAS;AAC/C,aAAO,4CAAC,aAAuB,GAAG,SAAZ,MAAoB;AAAA,IAC3C;AAEA,WACC,4EACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,MAAM;AAAA,UACjB,QAAS,MAAM,WAAW;AAAA;AAAA,MAC3B;AAAA,MACA,4CAAC,aAAuB,GAAG,SAAZ,MAAoB;AAAA,OACpC;AAAA,EAEF;AAAA,EACD;AACD;AAAA,IAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;",
-  "names": ["blockEditorStore"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { addFilter } from '@wordpress/hooks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { GridVisualizer, useGridLayoutSync } from '../components/grid';\nimport { store as blockEditorStore } from '../store';\nimport useBlockVisibility from '../components/block-visibility/use-block-visibility';\nimport { deviceTypeKey } from '../store/private-keys';\nimport { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';\n\nfunction GridLayoutSync( props ) {\n\tuseGridLayoutSync( props );\n}\n\nfunction GridTools( { clientId, layout } ) {\n\tconst { isVisible, blockVisibility, deviceType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tisBlockSelected,\n\t\t\t\tisDraggingBlocks,\n\t\t\t\tgetTemplateLock,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetSettings,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\t// These calls are purposely ordered from least expensive to most expensive.\n\t\t\t// Hides the visualizer in cases where the user is not or cannot interact with it.\n\t\t\tif (\n\t\t\t\t( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||\n\t\t\t\tgetTemplateLock( clientId ) ||\n\t\t\t\tgetBlockEditingMode( clientId ) !== 'default'\n\t\t\t) {\n\t\t\t\treturn { isVisible: false };\n\t\t\t}\n\n\t\t\tconst attributes = getBlockAttributes( clientId );\n\t\t\tconst settings = getSettings();\n\n\t\t\treturn {\n\t\t\t\tisVisible: true,\n\t\t\t\tblockVisibility: attributes?.metadata?.blockVisibility,\n\t\t\t\tdeviceType:\n\t\t\t\t\tsettings?.[ deviceTypeKey ]?.toLowerCase() ||\n\t\t\t\t\tBLOCK_VISIBILITY_VIEWPORTS.desktop.value,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst { isBlockCurrentlyHidden } = useBlockVisibility( {\n\t\tblockVisibility,\n\t\tdeviceType,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<GridLayoutSync clientId={ clientId } />\n\t\t\t{ isVisible && ! isBlockCurrentlyHidden && (\n\t\t\t\t<GridVisualizer clientId={ clientId } parentLayout={ layout } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nconst addGridVisualizerToBlockEdit = createHigherOrderComponent(\n\t( BlockEdit ) =>\n\t\tfunction AddGridVisualizerToBlockEdit( props ) {\n\t\t\tif ( props.attributes.layout?.type !== 'grid' ) {\n\t\t\t\treturn <BlockEdit key=\"edit\" { ...props } />;\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<GridTools\n\t\t\t\t\t\tclientId={ props.clientId }\n\t\t\t\t\t\tlayout={ props.attributes.layout }\n\t\t\t\t\t/>\n\t\t\t\t\t<BlockEdit key=\"edit\" { ...props } />\n\t\t\t\t</>\n\t\t\t);\n\t\t},\n\t'addGridVisualizerToBlockEdit'\n);\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/grid-visualizer',\n\taddGridVisualizerToBlockEdit\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAGA,qBAA2C;AAC3C,mBAA0B;AAC1B,kBAA0B;AAK1B,kBAAkD;AAClD,mBAA0C;AAC1C,kCAA+B;AAC/B,0BAA8B;AAC9B,uBAA2C;AAgDzC;AA9CF,SAAS,eAAgB,OAAQ;AAChC,qCAAmB,KAAM;AAC1B;AAEA,SAAS,UAAW,EAAE,UAAU,OAAO,GAAI;AAC1C,QAAM,EAAE,WAAW,iBAAiB,WAAW,QAAI;AAAA,IAClD,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,aAAAA,KAAiB;AAI7B,UACG,CAAE,iBAAiB,KAAK,CAAE,gBAAiB,QAAS,KACtD,gBAAiB,QAAS,KAC1B,oBAAqB,QAAS,MAAM,WACnC;AACD,eAAO,EAAE,WAAW,MAAM;AAAA,MAC3B;AAEA,YAAM,aAAa,mBAAoB,QAAS;AAChD,YAAM,WAAW,YAAY;AAE7B,aAAO;AAAA,QACN,WAAW;AAAA,QACX,iBAAiB,YAAY,UAAU;AAAA,QACvC,YACC,WAAY,iCAAc,GAAG,YAAY,KACzC,4CAA2B,QAAQ;AAAA,MACrC;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,QAAM,EAAE,uBAAuB,QAAI,4BAAAC,SAAoB;AAAA,IACtD;AAAA,IACA;AAAA,EACD,CAAE;AAEF,SACC,4EACC;AAAA,gDAAC,kBAAe,UAAsB;AAAA,IACpC,aAAa,CAAE,0BAChB,4CAAC,8BAAe,UAAsB,cAAe,QAAS;AAAA,KAEhE;AAEF;AAEA,IAAM,mCAA+B;AAAA,EACpC,CAAE,cACD,SAAS,6BAA8B,OAAQ;AAC9C,QAAK,MAAM,WAAW,QAAQ,SAAS,QAAS;AAC/C,aAAO,4CAAC,aAAuB,GAAG,SAAZ,MAAoB;AAAA,IAC3C;AAEA,WACC,4EACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,MAAM;AAAA,UACjB,QAAS,MAAM,WAAW;AAAA;AAAA,MAC3B;AAAA,MACA,4CAAC,aAAuB,GAAG,SAAZ,MAAoB;AAAA,OACpC;AAAA,EAEF;AAAA,EACD;AACD;AAAA,IAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;",
+  "names": ["blockEditorStore", "useBlockVisibility"]
 }

package/build/hooks/index.cjs

@@ -75,7 +75,6 @@ var import_position = __toESM(require("./position.cjs"));
 var import_block_style_variation = __toESM(require("./block-style-variation.cjs"));
 var import_layout = __toESM(require("./layout.cjs"));
 var import_layout_child = __toESM(require("./layout-child.cjs"));
-var import_content_lock_ui = __toESM(require("./content-lock-ui.cjs"));
 var import_metadata = require("./metadata.cjs");
 var import_block_hooks = __toESM(require("./block-hooks.cjs"));
 var import_block_bindings = __toESM(require("./block-bindings.cjs"));
@@ -108,7 +107,6 @@ var import_utils2 = require("./utils.cjs");
     import_fit_text.default,
     import_position.default,
     import_layout.default,
-    import_content_lock_ui.default,
     import_block_hooks.default,
     import_block_bindings.default,
     import_layout_child.default,

package/build/hooks/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/index.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport {\n\tcreateBlockEditFilter,\n\tcreateBlockListBlockFilter,\n\tcreateBlockSaveFilter,\n} from './utils';\nimport './compat';\nimport './cross-origin-isolation';\nimport align from './align';\nimport background from './background';\nimport './lock';\nimport allowedBlocks from './allowed-blocks';\nimport anchor from './anchor';\nimport ariaLabel from './aria-label';\nimport blockFields from './block-fields';\nimport customClassName from './custom-class-name';\nimport './generated-class-name';\nimport style from './style';\nimport './settings';\nimport color from './color';\nimport dimensions from './dimensions';\nimport duotone from './duotone';\nimport fontFamily from './font-family';\nimport fontSize from './font-size';\nimport textAlign from './text-align';\nimport fitText from './fit-text';\nimport border from './border';\nimport customCSS from './custom-css';\nimport position from './position';\nimport blockStyleVariation from './block-style-variation';\nimport layout from './layout';\nimport childLayout from './layout-child';\nimport contentLockUI from './content-lock-ui';\nimport './metadata';\nimport blockHooks from './block-hooks';\nimport blockBindingsPanel from './block-bindings';\nimport listView from './list-view';\nimport './block-renaming';\nimport './grid-visualizer';\nimport autoInspectorControls from './auto-inspector-controls';\n\ncreateBlockEditFilter(\n\t[\n\t\talign,\n\t\ttextAlign,\n\t\tanchor,\n\t\tcustomClassName,\n\t\tstyle,\n\t\tcustomCSS,\n\t\tduotone,\n\t\tfitText,\n\t\tposition,\n\t\tlayout,\n\t\tcontentLockUI,\n\t\tblockHooks,\n\t\tblockBindingsPanel,\n\t\tchildLayout,\n\t\tallowedBlocks,\n\t\tblockFields,\n\t\tlistView,\n\t\tautoInspectorControls,\n\t].filter( Boolean )\n);\ncreateBlockListBlockFilter( [\n\talign,\n\ttextAlign,\n\tbackground,\n\tstyle,\n\tcolor,\n\tdimensions,\n\tduotone,\n\tfontFamily,\n\tfontSize,\n\tfitText,\n\tborder,\n\tcustomCSS,\n\tposition,\n\tblockStyleVariation,\n\tchildLayout,\n] );\ncreateBlockSaveFilter( [\n\talign,\n\ttextAlign,\n\tanchor,\n\tariaLabel,\n\tcustomClassName,\n\tborder,\n\tcustomCSS,\n\tfitText,\n\tcolor,\n\tstyle,\n\tfontFamily,\n\tfontSize,\n] );\n\nexport { useCustomSides } from './dimensions';\nexport { useLayoutClasses, useLayoutStyles } from './layout';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getShadowClassesAndStyles } from './use-shadow-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { getTypographyClassesAndStyles } from './use-typography-props';\nexport { getGapCSSValue } from './gap';\nexport { useCachedTruthy } from './use-cached-truthy';\nexport { setBackgroundStyleDefaults } from './background';\nexport { useZoomOut } from './use-zoom-out';\nexport { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';\nexport { useStyleOverride } from './utils';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAIO;AACP,oBAAO;AACP,oCAAO;AACP,mBAAkB;AAClB,wBAAuB;AACvB,kBAAO;AACP,4BAA0B;AAC1B,oBAAmB;AACnB,wBAAsB;AACtB,0BAAwB;AACxB,+BAA4B;AAC5B,kCAAO;AACP,mBAAkB;AAClB,sBAAO;AACP,mBAAkB;AAClB,wBAAuB;AACvB,qBAAoB;AACpB,yBAAuB;AACvB,uBAAqB;AACrB,wBAAsB;AACtB,sBAAoB;AACpB,oBAAmB;AACnB,wBAAsB;AACtB,sBAAqB;AACrB,mCAAgC;AAChC,oBAAmB;AACnB,0BAAwB;AACxB,6BAA0B;AAC1B,sBAAO;AACP,yBAAuB;AACvB,4BAA+B;AAC/B,uBAAqB;AACrB,4BAAO;AACP,6BAAO;AACP,qCAAkC;AAwDlC,IAAAA,qBAA+B;AAC/B,IAAAC,iBAAkD;AAClD,8BAA0D;AAC1D,8BAA0C;AAC1C,6BAAwD;AACxD,+BAA2C;AAC3C,kCAA8C;AAC9C,iBAA+B;AAC/B,+BAAgC;AAChC,IAAAC,qBAA2C;AAC3C,0BAA2B;AAC3B,IAAAC,gCAAiE;AACjE,IAAAC,gBAAiC;AAAA,IAlEjC;AAAA,EACC;AAAA,IACC,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,+BAAAC;AAAA,EACD,EAAE,OAAQ,OAAQ;AACnB;AAAA,IACA,yCAA4B;AAAA,EAC3B,aAAAjB;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAiB;AAAA,EACA,aAAAd;AAAA,EACA,aAAAe;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAd;AAAA,EACA,mBAAAe;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAf;AAAA,EACA,cAAAgB;AAAA,EACA,kBAAAlB;AAAA,EACA,gBAAAG;AAAA,EACA,6BAAAgB;AAAA,EACA,oBAAAX;AACD,CAAE;AAAA,IACF,oCAAuB;AAAA,EACtB,aAAAb;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAuB;AAAA,EACA,yBAAAtB;AAAA,EACA,cAAAoB;AAAA,EACA,kBAAAlB;AAAA,EACA,gBAAAE;AAAA,EACA,aAAAY;AAAA,EACA,aAAAf;AAAA,EACA,mBAAAiB;AAAA,EACA,iBAAAC;AACD,CAAE;",
-  "names": ["import_dimensions", "import_layout", "import_background", "import_block_style_variation", "import_utils", "align", "textAlign", "anchor", "customClassName", "style", "customCSS", "duotone", "fitText", "position", "layout", "contentLockUI", "blockHooks", "blockBindingsPanel", "childLayout", "allowedBlocks", "blockFields", "listView", "autoInspectorControls", "background", "color", "dimensions", "fontFamily", "fontSize", "border", "blockStyleVariation", "ariaLabel"]
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport {\n\tcreateBlockEditFilter,\n\tcreateBlockListBlockFilter,\n\tcreateBlockSaveFilter,\n} from './utils';\nimport './compat';\nimport './cross-origin-isolation';\nimport align from './align';\nimport background from './background';\nimport './lock';\nimport allowedBlocks from './allowed-blocks';\nimport anchor from './anchor';\nimport ariaLabel from './aria-label';\nimport blockFields from './block-fields';\nimport customClassName from './custom-class-name';\nimport './generated-class-name';\nimport style from './style';\nimport './settings';\nimport color from './color';\nimport dimensions from './dimensions';\nimport duotone from './duotone';\nimport fontFamily from './font-family';\nimport fontSize from './font-size';\nimport textAlign from './text-align';\nimport fitText from './fit-text';\nimport border from './border';\nimport customCSS from './custom-css';\nimport position from './position';\nimport blockStyleVariation from './block-style-variation';\nimport layout from './layout';\nimport childLayout from './layout-child';\nimport './metadata';\nimport blockHooks from './block-hooks';\nimport blockBindingsPanel from './block-bindings';\nimport listView from './list-view';\nimport './block-renaming';\nimport './grid-visualizer';\nimport autoInspectorControls from './auto-inspector-controls';\n\ncreateBlockEditFilter(\n\t[\n\t\talign,\n\t\ttextAlign,\n\t\tanchor,\n\t\tcustomClassName,\n\t\tstyle,\n\t\tcustomCSS,\n\t\tduotone,\n\t\tfitText,\n\t\tposition,\n\t\tlayout,\n\t\tblockHooks,\n\t\tblockBindingsPanel,\n\t\tchildLayout,\n\t\tallowedBlocks,\n\t\tblockFields,\n\t\tlistView,\n\t\tautoInspectorControls,\n\t].filter( Boolean )\n);\ncreateBlockListBlockFilter( [\n\talign,\n\ttextAlign,\n\tbackground,\n\tstyle,\n\tcolor,\n\tdimensions,\n\tduotone,\n\tfontFamily,\n\tfontSize,\n\tfitText,\n\tborder,\n\tcustomCSS,\n\tposition,\n\tblockStyleVariation,\n\tchildLayout,\n] );\ncreateBlockSaveFilter( [\n\talign,\n\ttextAlign,\n\tanchor,\n\tariaLabel,\n\tcustomClassName,\n\tborder,\n\tcustomCSS,\n\tfitText,\n\tcolor,\n\tstyle,\n\tfontFamily,\n\tfontSize,\n] );\n\nexport { useCustomSides } from './dimensions';\nexport { useLayoutClasses, useLayoutStyles } from './layout';\nexport { getBorderClassesAndStyles, useBorderProps } from './use-border-props';\nexport { getShadowClassesAndStyles } from './use-shadow-props';\nexport { getColorClassesAndStyles, useColorProps } from './use-color-props';\nexport { getSpacingClassesAndStyles } from './use-spacing-props';\nexport { getTypographyClassesAndStyles } from './use-typography-props';\nexport { getGapCSSValue } from './gap';\nexport { useCachedTruthy } from './use-cached-truthy';\nexport { setBackgroundStyleDefaults } from './background';\nexport { useZoomOut } from './use-zoom-out';\nexport { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';\nexport { useStyleOverride } from './utils';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAIO;AACP,oBAAO;AACP,oCAAO;AACP,mBAAkB;AAClB,wBAAuB;AACvB,kBAAO;AACP,4BAA0B;AAC1B,oBAAmB;AACnB,wBAAsB;AACtB,0BAAwB;AACxB,+BAA4B;AAC5B,kCAAO;AACP,mBAAkB;AAClB,sBAAO;AACP,mBAAkB;AAClB,wBAAuB;AACvB,qBAAoB;AACpB,yBAAuB;AACvB,uBAAqB;AACrB,wBAAsB;AACtB,sBAAoB;AACpB,oBAAmB;AACnB,wBAAsB;AACtB,sBAAqB;AACrB,mCAAgC;AAChC,oBAAmB;AACnB,0BAAwB;AACxB,sBAAO;AACP,yBAAuB;AACvB,4BAA+B;AAC/B,uBAAqB;AACrB,4BAAO;AACP,6BAAO;AACP,qCAAkC;AAuDlC,IAAAA,qBAA+B;AAC/B,IAAAC,iBAAkD;AAClD,8BAA0D;AAC1D,8BAA0C;AAC1C,6BAAwD;AACxD,+BAA2C;AAC3C,kCAA8C;AAC9C,iBAA+B;AAC/B,+BAAgC;AAChC,IAAAC,qBAA2C;AAC3C,0BAA2B;AAC3B,IAAAC,gCAAiE;AACjE,IAAAC,gBAAiC;AAAA,IAjEjC;AAAA,EACC;AAAA,IACC,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,+BAAAC;AAAA,EACD,EAAE,OAAQ,OAAQ;AACnB;AAAA,IACA,yCAA4B;AAAA,EAC3B,aAAAhB;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAgB;AAAA,EACA,aAAAb;AAAA,EACA,aAAAc;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAb;AAAA,EACA,mBAAAc;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAd;AAAA,EACA,cAAAe;AAAA,EACA,kBAAAjB;AAAA,EACA,gBAAAG;AAAA,EACA,6BAAAe;AAAA,EACA,oBAAAX;AACD,CAAE;AAAA,IACF,oCAAuB;AAAA,EACtB,aAAAZ;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAsB;AAAA,EACA,yBAAArB;AAAA,EACA,cAAAmB;AAAA,EACA,kBAAAjB;AAAA,EACA,gBAAAE;AAAA,EACA,aAAAW;AAAA,EACA,aAAAd;AAAA,EACA,mBAAAgB;AAAA,EACA,iBAAAC;AACD,CAAE;",
+  "names": ["import_dimensions", "import_layout", "import_background", "import_block_style_variation", "import_utils", "align", "textAlign", "anchor", "customClassName", "style", "customCSS", "duotone", "fitText", "position", "layout", "blockHooks", "blockBindingsPanel", "childLayout", "allowedBlocks", "blockFields", "listView", "autoInspectorControls", "background", "color", "dimensions", "fontFamily", "fontSize", "border", "blockStyleVariation", "ariaLabel"]
 }

package/build/hooks/layout-child.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // packages/block-editor/src/hooks/layout-child.js
@@ -30,6 +40,9 @@ var import_store = require("../store/index.cjs");
 var import_utils = require("./utils.cjs");
 var import_layout = require("../components/block-list/layout.cjs");
 var import_grid = require("../components/grid/index.cjs");
+var import_use_block_visibility = __toESM(require("../components/block-visibility/use-block-visibility.cjs"));
+var import_private_keys = require("../store/private-keys.cjs");
+var import_constants = require("../components/block-visibility/constants.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
 function useBlockPropsChildLayoutStyles({ style }) {
@@ -171,12 +184,20 @@ function GridTools({
   isManualPlacement,
   parentLayout
 }) {
-  const { rootClientId, isVisible } = (0, import_data.useSelect)(
+  const {
+    rootClientId,
+    isVisible,
+    parentBlockVisibility,
+    blockBlockVisibility,
+    deviceType
+  } = (0, import_data.useSelect)(
     (select) => {
       const {
         getBlockRootClientId,
         getBlockEditingMode,
-        getTemplateLock
+        getTemplateLock,
+        getBlockAttributes,
+        getSettings
       } = select(import_store.store);
       const _rootClientId = getBlockRootClientId(clientId);
       if (getTemplateLock(_rootClientId) || getBlockEditingMode(_rootClientId) !== "default") {
@@ -185,17 +206,32 @@ function GridTools({
           isVisible: false
         };
       }
+      const parentAttributes = getBlockAttributes(_rootClientId);
+      const blockAttributes = getBlockAttributes(clientId);
+      const settings = getSettings();
       return {
         rootClientId: _rootClientId,
-        isVisible: true
+        isVisible: true,
+        parentBlockVisibility: parentAttributes?.metadata?.blockVisibility,
+        blockBlockVisibility: blockAttributes?.metadata?.blockVisibility,
+        deviceType: settings?.[import_private_keys.deviceTypeKey]?.toLowerCase() || import_constants.BLOCK_VISIBILITY_VIEWPORTS.desktop.value
       };
     },
     [clientId]
   );
+  const { isBlockCurrentlyHidden: isParentBlockCurrentlyHidden } = (0, import_use_block_visibility.default)({
+    blockVisibility: parentBlockVisibility,
+    deviceType
+  });
+  const { isBlockCurrentlyHidden: isBlockItselfCurrentlyHidden } = (0, import_use_block_visibility.default)({
+    blockVisibility: blockBlockVisibility,
+    deviceType
+  });
   const [resizerBounds, setResizerBounds] = (0, import_element.useState)();
-  if (!isVisible) {
+  if (!isVisible || isParentBlockCurrentlyHidden) {
     return null;
   }
+  const showResizer = allowSizingOnChildren && !isBlockItselfCurrentlyHidden;
   function updateLayout(layout) {
     setAttributes({
       style: {
@@ -216,7 +252,7 @@ function GridTools({
         parentLayout
       }
     ),
-    allowSizingOnChildren && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    showResizer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_grid.GridItemResizer,
       {
         clientId,