@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.3.0

package/build/group/transforms.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/group/transforms.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tcreateBlock,\n\t__experimentalCloneSanitizedBlock,\n} from '@wordpress/blocks';\n\nconst transforms = {\n\tfrom: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tisMultiBlock: true,\n\t\t\tblocks: [ '*' ],\n\t\t\t__experimentalConvert( blocks ) {\n\t\t\t\tconst alignments = [ 'wide', 'full' ];\n\n\t\t\t\t// Determine the widest setting of all the blocks to be grouped\n\t\t\t\tconst widestAlignment = blocks.reduce(\n\t\t\t\t\t( accumulator, block ) => {\n\t\t\t\t\t\tconst { align } = block.attributes;\n\t\t\t\t\t\treturn alignments.indexOf( align ) >\n\t\t\t\t\t\t\talignments.indexOf( accumulator )\n\t\t\t\t\t\t\t? align\n\t\t\t\t\t\t\t: accumulator;\n\t\t\t\t\t},\n\t\t\t\t\tundefined\n\t\t\t\t);\n\n\t\t\t\t// Clone the Blocks to be Grouped\n\t\t\t\t// Failing to create new block references causes the original blocks\n\t\t\t\t// to be replaced in the switchToBlockType call thereby meaning they\n\t\t\t\t// are removed both from their original location and within the\n\t\t\t\t// new group block.\n\t\t\t\tconst groupInnerBlocks = blocks.map( ( block ) =>\n\t\t\t\t\t__experimentalCloneSanitizedBlock( block )\n\t\t\t\t);\n\n\t\t\t\treturn createBlock(\n\t\t\t\t\t'core/group',\n\t\t\t\t\t{\n\t\t\t\t\t\talign: widestAlignment,\n\t\t\t\t\t\tlayout: { type: 'constrained' },\n\t\t\t\t\t},\n\t\t\t\t\tgroupInnerBlocks\n\t\t\t\t);\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport default transforms;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAGO;AAEP,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,IACL;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,QAAQ,CAAE,GAAI;AAAA,MACd,sBAAuB,QAAS;AAC/B,cAAM,aAAa,CAAE,QAAQ,MAAO;AAGpC,cAAM,kBAAkB,OAAO;AAAA,UAC9B,CAAE,aAAa,UAAW;AACzB,kBAAM,EAAE,MAAM,IAAI,MAAM;AACxB,mBAAO,WAAW,QAAS,KAAM,IAChC,WAAW,QAAS,WAAY,IAC9B,QACA;AAAA,UACJ;AAAA,UACA;AAAA,QACD;AAOA,cAAM,mBAAmB,OAAO;AAAA,UAAK,CAAE,cACtC,iDAAmC,KAAM;AAAA,QAC1C;AAEA,mBAAO;AAAA,UACN;AAAA,UACA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ,EAAE,MAAM,cAAc;AAAA,UAC/B;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createBlock, cloneSanitizedBlock } from '@wordpress/blocks';\n\nconst transforms = {\n\tfrom: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tisMultiBlock: true,\n\t\t\tblocks: [ '*' ],\n\t\t\t__experimentalConvert( blocks ) {\n\t\t\t\tconst alignments = [ 'wide', 'full' ];\n\n\t\t\t\t// Determine the widest setting of all the blocks to be grouped\n\t\t\t\tconst widestAlignment = blocks.reduce(\n\t\t\t\t\t( accumulator, block ) => {\n\t\t\t\t\t\tconst { align } = block.attributes;\n\t\t\t\t\t\treturn alignments.indexOf( align ) >\n\t\t\t\t\t\t\talignments.indexOf( accumulator )\n\t\t\t\t\t\t\t? align\n\t\t\t\t\t\t\t: accumulator;\n\t\t\t\t\t},\n\t\t\t\t\tundefined\n\t\t\t\t);\n\n\t\t\t\t// Clone the Blocks to be Grouped\n\t\t\t\t// Failing to create new block references causes the original blocks\n\t\t\t\t// to be replaced in the switchToBlockType call thereby meaning they\n\t\t\t\t// are removed both from their original location and within the\n\t\t\t\t// new group block.\n\t\t\t\tconst groupInnerBlocks = blocks.map( ( block ) =>\n\t\t\t\t\tcloneSanitizedBlock( block )\n\t\t\t\t);\n\n\t\t\t\treturn createBlock(\n\t\t\t\t\t'core/group',\n\t\t\t\t\t{\n\t\t\t\t\t\talign: widestAlignment,\n\t\t\t\t\t\tlayout: { type: 'constrained' },\n\t\t\t\t\t},\n\t\t\t\t\tgroupInnerBlocks\n\t\t\t\t);\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport default transforms;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAiD;AAEjD,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,IACL;AAAA,MACC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,QAAQ,CAAE,GAAI;AAAA,MACd,sBAAuB,QAAS;AAC/B,cAAM,aAAa,CAAE,QAAQ,MAAO;AAGpC,cAAM,kBAAkB,OAAO;AAAA,UAC9B,CAAE,aAAa,UAAW;AACzB,kBAAM,EAAE,MAAM,IAAI,MAAM;AACxB,mBAAO,WAAW,QAAS,KAAM,IAChC,WAAW,QAAS,WAAY,IAC9B,QACA;AAAA,UACJ;AAAA,UACA;AAAA,QACD;AAOA,cAAM,mBAAmB,OAAO;AAAA,UAAK,CAAE,cACtC,mCAAqB,KAAM;AAAA,QAC5B;AAEA,mBAAO;AAAA,UACN;AAAA,UACA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ,EAAE,MAAM,cAAc;AAAA,UAC/B;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
   "names": []
 }

package/build/heading/edit.cjs

@@ -99,7 +99,7 @@ function HeadingEdit(props) {
       onChange: onContentChange,
       onMerge: mergeBlocks,
       onReplace,
-      onRemove: () => onReplace([]),
+      onRemove: onReplace ? () => onReplace([]) : void 0,
       placeholder: placeholder || (0, import_i18n.__)("Heading"),
       ...blockProps
     }

package/build/heading/edit.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/heading/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tRichText,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { generateAnchor, setAnchor } from './autogenerate-anchors';\nimport useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';\n\nfunction HeadingEdit( props ) {\n\tconst {\n\t\tattributes,\n\t\tsetAttributes,\n\t\tmergeBlocks,\n\t\tonReplace,\n\t\tstyle,\n\t\tclientId,\n\t} = props;\n\tuseDeprecatedTextAlign( props );\n\tconst { content, level, placeholder, anchor } = attributes;\n\tconst tagName = 'h' + level;\n\tconst blockProps = useBlockProps( {\n\t\tstyle,\n\t} );\n\n\tconst { canGenerateAnchors } = useSelect( ( select ) => {\n\t\tconst { getGlobalBlockCount, getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\n\t\treturn {\n\t\t\tcanGenerateAnchors:\n\t\t\t\t!! settings.generateAnchors ||\n\t\t\t\tgetGlobalBlockCount( 'core/table-of-contents' ) > 0,\n\t\t};\n\t}, [] );\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Initially set anchor for headings that have content but no anchor set.\n\t// This is used when transforming a block to heading, or for legacy anchors.\n\tuseEffect( () => {\n\t\tif ( ! canGenerateAnchors ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! anchor && content ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tanchor: generateAnchor( clientId, content ),\n\t\t\t} );\n\t\t}\n\t\tsetAnchor( clientId, anchor );\n\n\t\t// Remove anchor map when block unmounts.\n\t\treturn () => setAnchor( clientId, null );\n\t}, [\n\t\tanchor,\n\t\tcontent,\n\t\tclientId,\n\t\tcanGenerateAnchors,\n\t\tsetAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n\n\tconst onContentChange = ( value ) => {\n\t\tconst newAttrs = { content: value };\n\t\tif (\n\t\t\tcanGenerateAnchors &&\n\t\t\t( ! anchor ||\n\t\t\t\t! value ||\n\t\t\t\tgenerateAnchor( clientId, content ) === anchor )\n\t\t) {\n\t\t\tnewAttrs.anchor = generateAnchor( clientId, value );\n\t\t}\n\t\tsetAttributes( newAttrs );\n\t};\n\n\treturn (\n\t\t<RichText\n\t\t\tidentifier=\"content\"\n\t\t\ttagName={ tagName }\n\t\t\tvalue={ content }\n\t\t\tonChange={ onContentChange }\n\t\t\tonMerge={ mergeBlocks }\n\t\t\tonReplace={ onReplace }\n\t\t\tonRemove={ () => onReplace( [] ) }\n\t\t\tplaceholder={ placeholder || __( 'Heading' ) }\n\t\t\t{ ...blockProps }\n\t\t/>\n\t);\n}\n\nexport default HeadingEdit;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAA0B;AAC1B,kBAAuC;AACvC,0BAIO;AAKP,kCAA0C;AAC1C,8CAAmC;AAyEjC;AAvEF,SAAS,YAAa,OAAQ;AAC7B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AACJ,8CAAAA,SAAwB,KAAM;AAC9B,QAAM,EAAE,SAAS,OAAO,aAAa,OAAO,IAAI;AAChD,QAAM,UAAU,MAAM;AACtB,QAAM,iBAAa,mCAAe;AAAA,IACjC;AAAA,EACD,CAAE;AAEF,QAAM,EAAE,mBAAmB,QAAI,uBAAW,CAAE,WAAY;AACvD,UAAM,EAAE,qBAAqB,YAAY,IAAI,OAAQ,oBAAAC,KAAiB;AACtE,UAAM,WAAW,YAAY;AAE7B,WAAO;AAAA,MACN,oBACC,CAAC,CAAE,SAAS,mBACZ,oBAAqB,wBAAyB,IAAI;AAAA,IACpD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,wCAAwC,QAC/C,yBAAa,oBAAAA,KAAiB;AAI/B,gCAAW,MAAM;AAChB,QAAK,CAAE,oBAAqB;AAC3B;AAAA,IACD;AAEA,QAAK,CAAE,UAAU,SAAU;AAE1B,8CAAwC;AACxC,oBAAe;AAAA,QACd,YAAQ,4CAAgB,UAAU,OAAQ;AAAA,MAC3C,CAAE;AAAA,IACH;AACA,+CAAW,UAAU,MAAO;AAG5B,WAAO,UAAM,uCAAW,UAAU,IAAK;AAAA,EACxC,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,QAAM,kBAAkB,CAAE,UAAW;AACpC,UAAM,WAAW,EAAE,SAAS,MAAM;AAClC,QACC,uBACE,CAAE,UACH,CAAE,aACF,4CAAgB,UAAU,OAAQ,MAAM,SACxC;AACD,eAAS,aAAS,4CAAgB,UAAU,KAAM;AAAA,IACnD;AACA,kBAAe,QAAS;AAAA,EACzB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,YAAW;AAAA,MACX;AAAA,MACA,OAAQ;AAAA,MACR,UAAW;AAAA,MACX,SAAU;AAAA,MACV;AAAA,MACA,UAAW,MAAM,UAAW,CAAC,CAAE;AAAA,MAC/B,aAAc,mBAAe,gBAAI,SAAU;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEF;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tRichText,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { generateAnchor, setAnchor } from './autogenerate-anchors';\nimport useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';\n\nfunction HeadingEdit( props ) {\n\tconst {\n\t\tattributes,\n\t\tsetAttributes,\n\t\tmergeBlocks,\n\t\tonReplace,\n\t\tstyle,\n\t\tclientId,\n\t} = props;\n\tuseDeprecatedTextAlign( props );\n\tconst { content, level, placeholder, anchor } = attributes;\n\tconst tagName = 'h' + level;\n\tconst blockProps = useBlockProps( {\n\t\tstyle,\n\t} );\n\n\tconst { canGenerateAnchors } = useSelect( ( select ) => {\n\t\tconst { getGlobalBlockCount, getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\n\t\treturn {\n\t\t\tcanGenerateAnchors:\n\t\t\t\t!! settings.generateAnchors ||\n\t\t\t\tgetGlobalBlockCount( 'core/table-of-contents' ) > 0,\n\t\t};\n\t}, [] );\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Initially set anchor for headings that have content but no anchor set.\n\t// This is used when transforming a block to heading, or for legacy anchors.\n\tuseEffect( () => {\n\t\tif ( ! canGenerateAnchors ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! anchor && content ) {\n\t\t\t// This side-effect should not create an undo level.\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tanchor: generateAnchor( clientId, content ),\n\t\t\t} );\n\t\t}\n\t\tsetAnchor( clientId, anchor );\n\n\t\t// Remove anchor map when block unmounts.\n\t\treturn () => setAnchor( clientId, null );\n\t}, [\n\t\tanchor,\n\t\tcontent,\n\t\tclientId,\n\t\tcanGenerateAnchors,\n\t\tsetAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n\n\tconst onContentChange = ( value ) => {\n\t\tconst newAttrs = { content: value };\n\t\tif (\n\t\t\tcanGenerateAnchors &&\n\t\t\t( ! anchor ||\n\t\t\t\t! value ||\n\t\t\t\tgenerateAnchor( clientId, content ) === anchor )\n\t\t) {\n\t\t\tnewAttrs.anchor = generateAnchor( clientId, value );\n\t\t}\n\t\tsetAttributes( newAttrs );\n\t};\n\n\treturn (\n\t\t<RichText\n\t\t\tidentifier=\"content\"\n\t\t\ttagName={ tagName }\n\t\t\tvalue={ content }\n\t\t\tonChange={ onContentChange }\n\t\t\tonMerge={ mergeBlocks }\n\t\t\tonReplace={ onReplace }\n\t\t\tonRemove={ onReplace ? () => onReplace( [] ) : undefined }\n\t\t\tplaceholder={ placeholder || __( 'Heading' ) }\n\t\t\t{ ...blockProps }\n\t\t/>\n\t);\n}\n\nexport default HeadingEdit;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAA0B;AAC1B,kBAAuC;AACvC,0BAIO;AAKP,kCAA0C;AAC1C,8CAAmC;AAyEjC;AAvEF,SAAS,YAAa,OAAQ;AAC7B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AACJ,8CAAAA,SAAwB,KAAM;AAC9B,QAAM,EAAE,SAAS,OAAO,aAAa,OAAO,IAAI;AAChD,QAAM,UAAU,MAAM;AACtB,QAAM,iBAAa,mCAAe;AAAA,IACjC;AAAA,EACD,CAAE;AAEF,QAAM,EAAE,mBAAmB,QAAI,uBAAW,CAAE,WAAY;AACvD,UAAM,EAAE,qBAAqB,YAAY,IAAI,OAAQ,oBAAAC,KAAiB;AACtE,UAAM,WAAW,YAAY;AAE7B,WAAO;AAAA,MACN,oBACC,CAAC,CAAE,SAAS,mBACZ,oBAAqB,wBAAyB,IAAI;AAAA,IACpD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,wCAAwC,QAC/C,yBAAa,oBAAAA,KAAiB;AAI/B,gCAAW,MAAM;AAChB,QAAK,CAAE,oBAAqB;AAC3B;AAAA,IACD;AAEA,QAAK,CAAE,UAAU,SAAU;AAE1B,8CAAwC;AACxC,oBAAe;AAAA,QACd,YAAQ,4CAAgB,UAAU,OAAQ;AAAA,MAC3C,CAAE;AAAA,IACH;AACA,+CAAW,UAAU,MAAO;AAG5B,WAAO,UAAM,uCAAW,UAAU,IAAK;AAAA,EACxC,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,QAAM,kBAAkB,CAAE,UAAW;AACpC,UAAM,WAAW,EAAE,SAAS,MAAM;AAClC,QACC,uBACE,CAAE,UACH,CAAE,aACF,4CAAgB,UAAU,OAAQ,MAAM,SACxC;AACD,eAAS,aAAS,4CAAgB,UAAU,KAAM;AAAA,IACnD;AACA,kBAAe,QAAS;AAAA,EACzB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,YAAW;AAAA,MACX;AAAA,MACA,OAAQ;AAAA,MACR,UAAW;AAAA,MACX,SAAU;AAAA,MACV;AAAA,MACA,UAAW,YAAY,MAAM,UAAW,CAAC,CAAE,IAAI;AAAA,MAC/C,aAAc,mBAAe,gBAAI,SAAU;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEF;AAEA,IAAO,eAAQ;",
   "names": ["useDeprecatedTextAlign", "blockEditorStore"]
 }

package/build/html/modal.cjs

@@ -45,12 +45,14 @@ var import_preview = __toESM(require("./preview.cjs"));
 var import_utils = require("./utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+var { useNativeUndo } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
 function HTMLEditModal({ onRequestClose, content, onUpdate }) {
   const { html, css, js } = (0, import_utils.parseContent)(content);
   const [editedHtml, setEditedHtml] = (0, import_element.useState)(html);
   const [editedCss, setEditedCss] = (0, import_element.useState)(css);
   const [editedJs, setEditedJs] = (0, import_element.useState)(js);
   const [isFullscreen, setIsFullscreen] = (0, import_element.useState)(false);
+  const nativeUndoRef = useNativeUndo();
   const isMobileViewport = (0, import_compose.useViewportMatch)("small", "<");
   const { canUserUseUnfilteredHTML } = (0, import_data.useSelect)((select) => {
     const settings = select(import_block_editor.store).getSettings();
@@ -132,67 +134,74 @@ function HTMLEditModal({ onRequestClose, content, onUpdate }) {
             align: "stretch",
             gap: 8,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-library-html__modal-content", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  Tabs.TabPanel,
-                  {
-                    tabId: "html",
-                    focusable: false,
-                    className: "block-library-html__modal-tab",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_block_editor.PlainText,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  ref: nativeUndoRef,
+                  className: "block-library-html__modal-content",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      Tabs.TabPanel,
                       {
-                        value: editedHtml,
-                        onChange: setEditedHtml,
-                        placeholder: (0, import_i18n.__)("Write HTML…"),
-                        "aria-label": (0, import_i18n.__)("HTML"),
-                        className: "block-library-html__modal-editor",
-                        async: true
+                        tabId: "html",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_block_editor.PlainText,
+                          {
+                            value: editedHtml,
+                            onChange: setEditedHtml,
+                            placeholder: (0, import_i18n.__)("Write HTML…"),
+                            "aria-label": (0, import_i18n.__)("HTML"),
+                            className: "block-library-html__modal-editor",
+                            async: true
+                          }
+                        )
                       }
-                    )
-                  }
-                ),
-                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  Tabs.TabPanel,
-                  {
-                    tabId: "css",
-                    focusable: false,
-                    className: "block-library-html__modal-tab",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_block_editor.PlainText,
+                    ),
+                    canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      Tabs.TabPanel,
                       {
-                        value: editedCss,
-                        onChange: setEditedCss,
-                        placeholder: (0, import_i18n.__)("Write CSS…"),
-                        "aria-label": (0, import_i18n.__)("CSS"),
-                        className: "block-library-html__modal-editor",
-                        async: true
+                        tabId: "css",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_block_editor.PlainText,
+                          {
+                            value: editedCss,
+                            onChange: setEditedCss,
+                            placeholder: (0, import_i18n.__)("Write CSS…"),
+                            "aria-label": (0, import_i18n.__)("CSS"),
+                            className: "block-library-html__modal-editor",
+                            async: true
+                          }
+                        )
                       }
-                    )
-                  }
-                ),
-                canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  Tabs.TabPanel,
-                  {
-                    tabId: "js",
-                    focusable: false,
-                    className: "block-library-html__modal-tab",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_block_editor.PlainText,
+                    ),
+                    canUserUseUnfilteredHTML && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      Tabs.TabPanel,
                       {
-                        value: editedJs,
-                        onChange: setEditedJs,
-                        placeholder: (0, import_i18n.__)(
-                          "Write JavaScript…"
-                        ),
-                        "aria-label": (0, import_i18n.__)("JavaScript"),
-                        className: "block-library-html__modal-editor",
-                        async: true
+                        tabId: "js",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_block_editor.PlainText,
+                          {
+                            value: editedJs,
+                            onChange: setEditedJs,
+                            placeholder: (0, import_i18n.__)(
+                              "Write JavaScript…"
+                            ),
+                            "aria-label": (0, import_i18n.__)("JavaScript"),
+                            className: "block-library-html__modal-editor",
+                            async: true
+                          }
+                        )
                       }
                     )
-                  }
-                )
-              ] }),
+                  ]
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-library-html__preview", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_preview.default,
                 {

package/build/html/modal.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/html/modal.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tModal,\n\tButton,\n\tFlex,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { PlainText, store as blockEditorStore } from '@wordpress/block-editor';\nimport { fullscreen, square } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport Preview from './preview';\nimport { parseContent, serializeContent } from './utils';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nexport default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {\n\t// Parse content into separate sections and use as initial state\n\tconst { html, css, js } = parseContent( content );\n\tconst [ editedHtml, setEditedHtml ] = useState( html );\n\tconst [ editedCss, setEditedCss ] = useState( css );\n\tconst [ editedJs, setEditedJs ] = useState( js );\n\tconst [ isFullscreen, setIsFullscreen ] = useState( false );\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\n\t// Check if user has permission to save scripts and get editor styles\n\tconst { canUserUseUnfilteredHTML } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tcanUserUseUnfilteredHTML:\n\t\t\t\tsettings.__experimentalCanUserUseUnfilteredHTML,\n\t\t};\n\t}, [] );\n\n\t// Determine if we should show a warning about CSS/JS content being stripped\n\tconst hasRestrictedContent =\n\t\t! canUserUseUnfilteredHTML && ( css.trim() || js.trim() );\n\n\tconst handleUpdate = () => {\n\t\t// For users without unfiltered_html capability, strip CSS and JS content\n\t\t// to prevent kses from leaving broken content\n\t\tonUpdate(\n\t\t\tserializeContent( {\n\t\t\t\thtml: editedHtml,\n\t\t\t\tcss: canUserUseUnfilteredHTML ? editedCss : '',\n\t\t\t\tjs: canUserUseUnfilteredHTML ? editedJs : '',\n\t\t\t} )\n\t\t);\n\t};\n\tconst handleUpdateAndClose = () => {\n\t\thandleUpdate();\n\t\tonRequestClose();\n\t};\n\tconst toggleFullscreen = () => {\n\t\tsetIsFullscreen( ( prevState ) => ! prevState );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Modal\n\t\t\t\ttitle={ __( 'Edit HTML' ) }\n\t\t\t\tonRequestClose={ onRequestClose }\n\t\t\t\tclassName=\"block-library-html__modal\"\n\t\t\t\tsize=\"large\"\n\t\t\t\tisDismissible={ false }\n\t\t\t\tshouldCloseOnClickOutside={ false }\n\t\t\t\tisFullScreen={ isFullscreen }\n\t\t\t\t__experimentalHideHeader\n\t\t\t>\n\t\t\t\t<Tabs orientation=\"horizontal\" defaultTabId=\"html\">\n\t\t\t\t\t<VStack expanded>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"html\">HTML</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"css\">CSS</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"js\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisFullscreen ? square : fullscreen\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Enable/disable fullscreen'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleFullscreen }\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ hasRestrictedContent && (\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-notice\"\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\t'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tdirection={ isMobileViewport ? 'column' : 'row' }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tabs\"\n\t\t\t\t\t\t\talign=\"stretch\"\n\t\t\t\t\t\t\tgap={ 8 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"block-library-html__modal-content\">\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId=\"html\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\tvalue={ editedHtml }\n\t\t\t\t\t\t\t\t\t\tonChange={ setEditedHtml }\n\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write HTML…' ) }\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'HTML' ) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\tasync\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"css\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedCss }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ setEditedCss }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write CSS…' ) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'CSS' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t\tasync\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"js\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedJs }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ setEditedJs }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Write JavaScript…'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t\tasync\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"block-library-html__preview\">\n\t\t\t\t\t\t\t\t<Preview\n\t\t\t\t\t\t\t\t\tcontent={ serializeContent( {\n\t\t\t\t\t\t\t\t\t\thtml: editedHtml,\n\t\t\t\t\t\t\t\t\t\tcss: editedCss,\n\t\t\t\t\t\t\t\t\t\tjs: editedJs,\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</div>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleUpdateAndClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Tabs>\n\t\t\t</Modal>\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
-  "names": ["componentsPrivateApis", "blockEditorStore", "VStack", "HStack", "Preview"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tModal,\n\tButton,\n\tFlex,\n\tNotice,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport {\n\tPlainText,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { fullscreen, square } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport Preview from './preview';\nimport { parseContent, serializeContent } from './utils';\n\nconst { Tabs } = unlock( componentsPrivateApis );\nconst { useNativeUndo } = unlock( blockEditorPrivateApis );\n\nexport default function HTMLEditModal( { onRequestClose, content, onUpdate } ) {\n\t// Parse content into separate sections and use as initial state\n\tconst { html, css, js } = parseContent( content );\n\tconst [ editedHtml, setEditedHtml ] = useState( html );\n\tconst [ editedCss, setEditedCss ] = useState( css );\n\tconst [ editedJs, setEditedJs ] = useState( js );\n\tconst [ isFullscreen, setIsFullscreen ] = useState( false );\n\t// The fields hold local state that is only committed when the dialog is\n\t// saved, so undo and redo within them must remain the browser's own.\n\tconst nativeUndoRef = useNativeUndo();\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\n\t// Check if user has permission to save scripts and get editor styles\n\tconst { canUserUseUnfilteredHTML } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tcanUserUseUnfilteredHTML:\n\t\t\t\tsettings.__experimentalCanUserUseUnfilteredHTML,\n\t\t};\n\t}, [] );\n\n\t// Determine if we should show a warning about CSS/JS content being stripped\n\tconst hasRestrictedContent =\n\t\t! canUserUseUnfilteredHTML && ( css.trim() || js.trim() );\n\n\tconst handleUpdate = () => {\n\t\t// For users without unfiltered_html capability, strip CSS and JS content\n\t\t// to prevent kses from leaving broken content\n\t\tonUpdate(\n\t\t\tserializeContent( {\n\t\t\t\thtml: editedHtml,\n\t\t\t\tcss: canUserUseUnfilteredHTML ? editedCss : '',\n\t\t\t\tjs: canUserUseUnfilteredHTML ? editedJs : '',\n\t\t\t} )\n\t\t);\n\t};\n\tconst handleUpdateAndClose = () => {\n\t\thandleUpdate();\n\t\tonRequestClose();\n\t};\n\tconst toggleFullscreen = () => {\n\t\tsetIsFullscreen( ( prevState ) => ! prevState );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Modal\n\t\t\t\ttitle={ __( 'Edit HTML' ) }\n\t\t\t\tonRequestClose={ onRequestClose }\n\t\t\t\tclassName=\"block-library-html__modal\"\n\t\t\t\tsize=\"large\"\n\t\t\t\tisDismissible={ false }\n\t\t\t\tshouldCloseOnClickOutside={ false }\n\t\t\t\tisFullScreen={ isFullscreen }\n\t\t\t\t__experimentalHideHeader\n\t\t\t>\n\t\t\t\t<Tabs orientation=\"horizontal\" defaultTabId=\"html\">\n\t\t\t\t\t<VStack expanded>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"html\">HTML</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"css\">CSS</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t\t<Tabs.Tab tabId=\"js\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tisFullscreen ? square : fullscreen\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Enable/disable fullscreen'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tonClick={ toggleFullscreen }\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ hasRestrictedContent && (\n\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\tstatus=\"warning\"\n\t\t\t\t\t\t\t\tisDismissible={ false }\n\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-notice\"\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\t'This block contains CSS or JavaScript that will be removed when you save because you do not have permission to use unfiltered HTML.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tdirection={ isMobileViewport ? 'column' : 'row' }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tabs\"\n\t\t\t\t\t\t\talign=\"stretch\"\n\t\t\t\t\t\t\tgap={ 8 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tref={ nativeUndoRef }\n\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-content\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\ttabId=\"html\"\n\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\tvalue={ editedHtml }\n\t\t\t\t\t\t\t\t\t\tonChange={ setEditedHtml }\n\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write HTML…' ) }\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'HTML' ) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\tasync\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"css\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedCss }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ setEditedCss }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Write CSS…' ) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'CSS' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t\tasync\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ canUserUseUnfilteredHTML && (\n\t\t\t\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\t\t\t\ttabId=\"js\"\n\t\t\t\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-tab\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\t\t\t\tvalue={ editedJs }\n\t\t\t\t\t\t\t\t\t\t\tonChange={ setEditedJs }\n\t\t\t\t\t\t\t\t\t\t\tplaceholder={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Write JavaScript…'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __( 'JavaScript' ) }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-library-html__modal-editor\"\n\t\t\t\t\t\t\t\t\t\t\tasync\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"block-library-html__preview\">\n\t\t\t\t\t\t\t\t<Preview\n\t\t\t\t\t\t\t\t\tcontent={ serializeContent( {\n\t\t\t\t\t\t\t\t\t\thtml: editedHtml,\n\t\t\t\t\t\t\t\t\t\tcss: editedCss,\n\t\t\t\t\t\t\t\t\t\tjs: editedJs,\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</div>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tspacing={ 4 }\n\t\t\t\t\t\t\tclassName=\"block-library-html__modal-footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleUpdateAndClose }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Update' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Tabs>\n\t\t\t</Modal>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["componentsPrivateApis", "blockEditorPrivateApis", "blockEditorStore", "VStack", "HStack", "Preview"]
 }

package/build/icon/block.json

@@ -33,9 +33,11 @@
 		"align": [ "left", "center", "right" ],
 		"html": false,
 		"color": {
-			"background": true,
-			"text": true,
-			"__experimentalSkipSerialization": true
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"interactivity": {
 			"clientNavigation": true

package/build/icon/components/custom-inserter/icon-grid.cjs

@@ -35,32 +35,45 @@ __export(icon_grid_exports, {
 module.exports = __toCommonJS(icon_grid_exports);
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
+var import_dom = require("@wordpress/dom");
 var import_html_renderer = __toESM(require("../../../utils/html-renderer.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-function IconGrid({ icons, onChange, attributes }) {
+var BATCH_SIZE = 20;
+function IconGrid({ icons, onChange, value }) {
+  const shownIcons = (0, import_compose.useAsyncList)(icons, {
+    step: BATCH_SIZE
+  });
+  const selectedIconRef = (0, import_element.useRef)();
+  const selectedIndex = icons?.findIndex((icon) => icon.name === value) ?? -1;
+  const isReadyToScroll = selectedIndex >= 0 && (shownIcons.length >= selectedIndex + BATCH_SIZE || shownIcons.length === icons.length);
+  (0, import_element.useLayoutEffect)(() => {
+    const node = selectedIconRef.current;
+    if (!isReadyToScroll || !node) {
+      return;
+    }
+    if ((0, import_dom.getScrollContainer)(node)?.scrollTop) {
+      return;
+    }
+    node.scrollIntoView({ block: "center" });
+  }, [isReadyToScroll]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-icon__inserter-grid", children: !icons?.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-icon__inserter-grid-no-results", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)("No results found.") }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       className: "wp-block-icon__inserter-grid-icons-list",
       "aria-label": (0, import_i18n.__)("Icon library"),
-      children: icons.map((icon) => {
+      children: shownIcons.map((icon) => {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_components.Button,
           {
+            ref: icon.name === value ? selectedIconRef : void 0,
             className: "wp-block-icon__inserter-grid-icons-list-item",
             onClick: () => onChange(icon.name),
-            variant: icon.name === attributes?.icon ? "primary" : void 0,
+            variant: icon.name === value ? "primary" : void 0,
             __next40pxDefaultSize: true,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "wp-block-icon__inserter-grid-icons-list-item-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_html_renderer.default,
-                {
-                  html: icon.content,
-                  wrapperProps: {
-                    style: { width: "24px" }
-                  }
-                }
-              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "wp-block-icon__inserter-grid-icons-list-item-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_html_renderer.default, { html: icon.content }) }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "wp-block-icon__inserter-grid-icons-list-item-title", children: icon.label })
             ]
           },

package/build/icon/components/custom-inserter/icon-grid.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/icon/components/custom-inserter/icon-grid.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport HtmlRenderer from '../../../utils/html-renderer';\n\nexport default function IconGrid( { icons, onChange, attributes } ) {\n\treturn (\n\t\t<div className=\"wp-block-icon__inserter-grid\">\n\t\t\t{ ! icons?.length ? (\n\t\t\t\t<div className=\"wp-block-icon__inserter-grid-no-results\">\n\t\t\t\t\t<p>{ __( 'No results found.' ) }</p>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-icon__inserter-grid-icons-list\"\n\t\t\t\t\taria-label={ __( 'Icon library' ) }\n\t\t\t\t>\n\t\t\t\t\t{ icons.map( ( icon ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey={ icon.name }\n\t\t\t\t\t\t\t\tclassName=\"wp-block-icon__inserter-grid-icons-list-item\"\n\t\t\t\t\t\t\t\tonClick={ () => onChange( icon.name ) }\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\ticon.name === attributes?.icon\n\t\t\t\t\t\t\t\t\t\t? 'primary'\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"wp-block-icon__inserter-grid-icons-list-item-icon\">\n\t\t\t\t\t\t\t\t\t<HtmlRenderer\n\t\t\t\t\t\t\t\t\t\thtml={ icon.content }\n\t\t\t\t\t\t\t\t\t\twrapperProps={ {\n\t\t\t\t\t\t\t\t\t\t\tstyle: { width: '24px' },\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span className=\"wp-block-icon__inserter-grid-icons-list-item-title\">\n\t\t\t\t\t\t\t\t\t{ icon.label }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAuB;AAKvB,2BAAyB;AAOpB;AALU,SAAR,SAA2B,EAAE,OAAO,UAAU,WAAW,GAAI;AACnE,SACC,4CAAC,SAAI,WAAU,gCACZ,WAAE,OAAO,SACV,4CAAC,SAAI,WAAU,2CACd,sDAAC,OAAI,8BAAI,mBAAoB,GAAG,GACjC,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,kBAAa,gBAAI,cAAe;AAAA,MAE9B,gBAAM,IAAK,CAAE,SAAU;AACxB,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YACV,SAAU,MAAM,SAAU,KAAK,IAAK;AAAA,YACpC,SACC,KAAK,SAAS,YAAY,OACvB,YACA;AAAA,YAEJ,uBAAqB;AAAA,YAErB;AAAA,0DAAC,UAAK,WAAU,qDACf;AAAA,gBAAC,qBAAAA;AAAA,gBAAA;AAAA,kBACA,MAAO,KAAK;AAAA,kBACZ,cAAe;AAAA,oBACd,OAAO,EAAE,OAAO,OAAO;AAAA,kBACxB;AAAA;AAAA,cACD,GACD;AAAA,cACA,4CAAC,UAAK,WAAU,sDACb,eAAK,OACR;AAAA;AAAA;AAAA,UApBM,KAAK;AAAA,QAqBZ;AAAA,MAEF,CAAE;AAAA;AAAA,EACH,GAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Button } from '@wordpress/components';\nimport { useAsyncList } from '@wordpress/compose';\nimport { useRef, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport HtmlRenderer from '../../../utils/html-renderer';\n\nconst BATCH_SIZE = 20;\n\nexport default function IconGrid( { icons, onChange, value } ) {\n\tconst shownIcons = useAsyncList( icons, {\n\t\tstep: BATCH_SIZE,\n\t} );\n\n\t// Scroll the selected icon into view, but wait until enough icons render\n\t// below it so it can be centered rather than stuck at the bottom. Skip it\n\t// if the user has already scrolled the list.\n\tconst selectedIconRef = useRef();\n\tconst selectedIndex =\n\t\ticons?.findIndex( ( icon ) => icon.name === value ) ?? -1;\n\tconst isReadyToScroll =\n\t\tselectedIndex >= 0 &&\n\t\t( shownIcons.length >= selectedIndex + BATCH_SIZE ||\n\t\t\tshownIcons.length === icons.length );\n\n\tuseLayoutEffect( () => {\n\t\tconst node = selectedIconRef.current;\n\t\tif ( ! isReadyToScroll || ! node ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( getScrollContainer( node )?.scrollTop ) {\n\t\t\treturn;\n\t\t}\n\t\tnode.scrollIntoView( { block: 'center' } );\n\t}, [ isReadyToScroll ] );\n\n\treturn (\n\t\t<div className=\"wp-block-icon__inserter-grid\">\n\t\t\t{ ! icons?.length ? (\n\t\t\t\t<div className=\"wp-block-icon__inserter-grid-no-results\">\n\t\t\t\t\t<p>{ __( 'No results found.' ) }</p>\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-icon__inserter-grid-icons-list\"\n\t\t\t\t\taria-label={ __( 'Icon library' ) }\n\t\t\t\t>\n\t\t\t\t\t{ shownIcons.map( ( icon ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkey={ icon.name }\n\t\t\t\t\t\t\t\tref={\n\t\t\t\t\t\t\t\t\ticon.name === value\n\t\t\t\t\t\t\t\t\t\t? selectedIconRef\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclassName=\"wp-block-icon__inserter-grid-icons-list-item\"\n\t\t\t\t\t\t\t\tonClick={ () => onChange( icon.name ) }\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\ticon.name === value ? 'primary' : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"wp-block-icon__inserter-grid-icons-list-item-icon\">\n\t\t\t\t\t\t\t\t\t<HtmlRenderer html={ icon.content } />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span className=\"wp-block-icon__inserter-grid-icons-list-item-title\">\n\t\t\t\t\t\t\t\t\t{ icon.label }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAuB;AACvB,qBAA6B;AAC7B,qBAAwC;AACxC,iBAAmC;AAKnC,2BAAyB;AAmCpB;AAjCL,IAAM,aAAa;AAEJ,SAAR,SAA2B,EAAE,OAAO,UAAU,MAAM,GAAI;AAC9D,QAAM,iBAAa,6BAAc,OAAO;AAAA,IACvC,MAAM;AAAA,EACP,CAAE;AAKF,QAAM,sBAAkB,uBAAO;AAC/B,QAAM,gBACL,OAAO,UAAW,CAAE,SAAU,KAAK,SAAS,KAAM,KAAK;AACxD,QAAM,kBACL,iBAAiB,MACf,WAAW,UAAU,gBAAgB,cACtC,WAAW,WAAW,MAAM;AAE9B,sCAAiB,MAAM;AACtB,UAAM,OAAO,gBAAgB;AAC7B,QAAK,CAAE,mBAAmB,CAAE,MAAO;AAClC;AAAA,IACD;AACA,YAAK,+BAAoB,IAAK,GAAG,WAAY;AAC5C;AAAA,IACD;AACA,SAAK,eAAgB,EAAE,OAAO,SAAS,CAAE;AAAA,EAC1C,GAAG,CAAE,eAAgB,CAAE;AAEvB,SACC,4CAAC,SAAI,WAAU,gCACZ,WAAE,OAAO,SACV,4CAAC,SAAI,WAAU,2CACd,sDAAC,OAAI,8BAAI,mBAAoB,GAAG,GACjC,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,kBAAa,gBAAI,cAAe;AAAA,MAE9B,qBAAW,IAAK,CAAE,SAAU;AAC7B,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,KACC,KAAK,SAAS,QACX,kBACA;AAAA,YAEJ,WAAU;AAAA,YACV,SAAU,MAAM,SAAU,KAAK,IAAK;AAAA,YACpC,SACC,KAAK,SAAS,QAAQ,YAAY;AAAA,YAEnC,uBAAqB;AAAA,YAErB;AAAA,0DAAC,UAAK,WAAU,qDACf,sDAAC,qBAAAA,SAAA,EAAa,MAAO,KAAK,SAAU,GACrC;AAAA,cACA,4CAAC,UAAK,WAAU,sDACb,eAAK,OACR;AAAA;AAAA;AAAA,UAlBM,KAAK;AAAA,QAmBZ;AAAA,MAEF,CAAE;AAAA;AAAA,EACH,GAEF;AAEF;",
   "names": ["HtmlRenderer"]
 }

package/build/icon/components/custom-inserter/index.cjs

@@ -35,29 +35,49 @@ __export(custom_inserter_exports, {
 module.exports = __toCommonJS(custom_inserter_exports);
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
+var import_ui = require("@wordpress/ui");
 var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
 var import_icon_grid = __toESM(require("./icon-grid.cjs"));
 var import_search_patterns = require("../../../utils/search-patterns.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-function CustomInserterModal({
-  icons = [],
-  setInserterOpen,
-  attributes,
-  setAttributes
-}) {
+function CustomInserterModal({ onClose, value, onChange }) {
   const [searchInput, setSearchInput] = (0, import_element.useState)("");
+  const [currentCollection, setCurrentCollection] = (0, import_element.useState)(null);
   const debouncedSetSearchInput = (0, import_compose.useDebounce)(setSearchInput, 300);
-  const setIcon = (0, import_element.useCallback)(
-    (name) => {
-      setAttributes({
-        icon: name
-      });
-      setInserterOpen(false);
+  const collections = (0, import_data.useSelect)(
+    (select) => select(import_core_data.store).getEntityRecords(
+      "root",
+      "iconCollection"
+    ),
+    []
+  );
+  const selectedCollection = value?.split("/")[0];
+  const collectionSlug = currentCollection ?? (collections?.some(({ slug }) => slug === selectedCollection) ? selectedCollection : collections?.[0]?.slug) ?? null;
+  const { icons, hasResolvedIcons } = (0, import_data.useSelect)(
+    (select) => {
+      if (collectionSlug === null) {
+        return { icons: null, hasResolvedIcons: false };
+      }
+      const query = collectionSlug === "" ? {} : { collection: collectionSlug };
+      const { getEntityRecords, hasFinishedResolution } = select(import_core_data.store);
+      return {
+        icons: getEntityRecords("root", "icon", query),
+        hasResolvedIcons: hasFinishedResolution("getEntityRecords", [
+          "root",
+          "icon",
+          query
+        ])
+      };
     },
-    [setAttributes, setInserterOpen]
+    [collectionSlug]
   );
   const filteredIcons = (0, import_element.useMemo)(() => {
+    if (!icons) {
+      return [];
+    }
     if (searchInput) {
       const input = (0, import_search_patterns.normalizeSearchInput)(searchInput);
       return icons.filter((icon) => {
@@ -73,25 +93,74 @@ function CustomInserterModal({
     {
       className: "wp-block-icon__inserter-modal",
       title: (0, import_i18n.__)("Icon library"),
-      onRequestClose: () => setInserterOpen(false),
+      onRequestClose: onClose,
       isFullScreen: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "wp-block-icon__inserter", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-icon__inserter-header", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.SearchControl,
-          {
-            value: searchInput,
-            onChange: debouncedSetSearchInput
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_icon_grid.default,
-          {
-            icons: filteredIcons,
-            onChange: setIcon,
-            attributes
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_ui.Tabs.Root,
+        {
+          className: "wp-block-icon__inserter",
+          orientation: "vertical",
+          value: collectionSlug,
+          onValueChange: setCurrentCollection,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_ui.Stack,
+              {
+                direction: "column",
+                gap: "lg",
+                className: "wp-block-icon__inserter-sidebar",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_components.SearchControl,
+                    {
+                      value: searchInput,
+                      onChange: debouncedSetSearchInput
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Tabs.List, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Tabs.Tab, { value: "", children: (0, import_i18n.__)("All") }),
+                    collections?.map((collection) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_ui.Tabs.Tab,
+                      {
+                        value: collection.slug,
+                        children: collection.label
+                      },
+                      collection.slug
+                    ))
+                  ] })
+                ]
+              }
+            ),
+            [{ slug: "" }, ...collections ?? []].map(
+              (collection) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_ui.Tabs.Panel,
+                {
+                  tabIndex: -1,
+                  value: collection.slug,
+                  className: "wp-block-icon__inserter-panel",
+                  children: !hasResolvedIcons ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: "wp-block-icon__inserter-loading",
+                      role: "status",
+                      "aria-label": (0, import_i18n.__)("Loading…"),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {})
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_icon_grid.default,
+                    {
+                      icons: filteredIcons,
+                      onChange,
+                      value
+                    }
+                  )
+                },
+                collection.slug
+              )
+            )
+          ]
+        }
+      )
     }
   );
 }

package/build/icon/components/custom-inserter/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/icon/components/custom-inserter/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, SearchControl } from '@wordpress/components';\nimport { useState, useMemo, useCallback } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport IconGrid from './icon-grid';\nimport { normalizeSearchInput } from '../../../utils/search-patterns';\n\nexport default function CustomInserterModal( {\n\ticons = [],\n\tsetInserterOpen,\n\tattributes,\n\tsetAttributes,\n} ) {\n\tconst [ searchInput, setSearchInput ] = useState( '' );\n\n\tconst debouncedSetSearchInput = useDebounce( setSearchInput, 300 );\n\n\tconst setIcon = useCallback(\n\t\t( name ) => {\n\t\t\tsetAttributes( {\n\t\t\t\ticon: name,\n\t\t\t} );\n\t\t\tsetInserterOpen( false );\n\t\t},\n\t\t[ setAttributes, setInserterOpen ]\n\t);\n\n\tconst filteredIcons = useMemo( () => {\n\t\tif ( searchInput ) {\n\t\t\tconst input = normalizeSearchInput( searchInput );\n\t\t\treturn icons.filter( ( icon ) => {\n\t\t\t\tconst iconName = normalizeSearchInput( icon.name );\n\t\t\t\tconst iconLabel = normalizeSearchInput( icon.label );\n\n\t\t\t\treturn (\n\t\t\t\t\ticonName.includes( input ) || iconLabel.includes( input )\n\t\t\t\t);\n\t\t\t} );\n\t\t}\n\n\t\treturn icons;\n\t}, [ searchInput, icons ] );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"wp-block-icon__inserter-modal\"\n\t\t\ttitle={ __( 'Icon library' ) }\n\t\t\tonRequestClose={ () => setInserterOpen( false ) }\n\t\t\tisFullScreen\n\t\t>\n\t\t\t<div className=\"wp-block-icon__inserter\">\n\t\t\t\t<div className=\"wp-block-icon__inserter-header\">\n\t\t\t\t\t<SearchControl\n\t\t\t\t\t\tvalue={ searchInput }\n\t\t\t\t\t\tonChange={ debouncedSetSearchInput }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<IconGrid\n\t\t\t\t\ticons={ filteredIcons }\n\t\t\t\t\tonChange={ setIcon }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Modal>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAAqC;AACrC,qBAA+C;AAC/C,qBAA4B;AAK5B,uBAAqB;AACrB,6BAAqC;AA6ClC;AA3CY,SAAR,oBAAsC;AAAA,EAC5C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,aAAa,cAAe,QAAI,yBAAU,EAAG;AAErD,QAAM,8BAA0B,4BAAa,gBAAgB,GAAI;AAEjE,QAAM,cAAU;AAAA,IACf,CAAE,SAAU;AACX,oBAAe;AAAA,QACd,MAAM;AAAA,MACP,CAAE;AACF,sBAAiB,KAAM;AAAA,IACxB;AAAA,IACA,CAAE,eAAe,eAAgB;AAAA,EAClC;AAEA,QAAM,oBAAgB,wBAAS,MAAM;AACpC,QAAK,aAAc;AAClB,YAAM,YAAQ,6CAAsB,WAAY;AAChD,aAAO,MAAM,OAAQ,CAAE,SAAU;AAChC,cAAM,eAAW,6CAAsB,KAAK,IAAK;AACjD,cAAM,gBAAY,6CAAsB,KAAK,KAAM;AAEnD,eACC,SAAS,SAAU,KAAM,KAAK,UAAU,SAAU,KAAM;AAAA,MAE1D,CAAE;AAAA,IACH;AAEA,WAAO;AAAA,EACR,GAAG,CAAE,aAAa,KAAM,CAAE;AAE1B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,cAAe;AAAA,MAC3B,gBAAiB,MAAM,gBAAiB,KAAM;AAAA,MAC9C,cAAY;AAAA,MAEZ,uDAAC,SAAI,WAAU,2BACd;AAAA,oDAAC,SAAI,WAAU,kCACd;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ;AAAA,YACR,UAAW;AAAA;AAAA,QACZ,GACD;AAAA,QACA;AAAA,UAAC,iBAAAA;AAAA,UAAA;AAAA,YACA,OAAQ;AAAA,YACR,UAAW;AAAA,YACX;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
-  "names": ["IconGrid"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Modal, SearchControl, Spinner } from '@wordpress/components';\nimport { Stack, Tabs } from '@wordpress/ui';\nimport { useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport IconGrid from './icon-grid';\nimport { normalizeSearchInput } from '../../../utils/search-patterns';\n\nexport default function CustomInserterModal( { onClose, value, onChange } ) {\n\tconst [ searchInput, setSearchInput ] = useState( '' );\n\tconst [ currentCollection, setCurrentCollection ] = useState( null );\n\n\tconst debouncedSetSearchInput = useDebounce( setSearchInput, 300 );\n\n\tconst collections = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreDataStore ).getEntityRecords(\n\t\t\t\t'root',\n\t\t\t\t'iconCollection'\n\t\t\t),\n\t\t[]\n\t);\n\n\t// Default to the collection the selected icon belongs to, otherwise the\n\t// first collection.\n\tconst selectedCollection = value?.split( '/' )[ 0 ];\n\tconst collectionSlug =\n\t\tcurrentCollection ??\n\t\t( collections?.some( ( { slug } ) => slug === selectedCollection )\n\t\t\t? selectedCollection\n\t\t\t: collections?.[ 0 ]?.slug ) ??\n\t\tnull;\n\n\tconst { icons, hasResolvedIcons } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( collectionSlug === null ) {\n\t\t\t\treturn { icons: null, hasResolvedIcons: false };\n\t\t\t}\n\t\t\tconst query =\n\t\t\t\tcollectionSlug === '' ? {} : { collection: collectionSlug };\n\t\t\tconst { getEntityRecords, hasFinishedResolution } =\n\t\t\t\tselect( coreDataStore );\n\t\t\treturn {\n\t\t\t\ticons: getEntityRecords( 'root', 'icon', query ),\n\t\t\t\thasResolvedIcons: hasFinishedResolution( 'getEntityRecords', [\n\t\t\t\t\t'root',\n\t\t\t\t\t'icon',\n\t\t\t\t\tquery,\n\t\t\t\t] ),\n\t\t\t};\n\t\t},\n\t\t[ collectionSlug ]\n\t);\n\n\tconst filteredIcons = useMemo( () => {\n\t\tif ( ! icons ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( searchInput ) {\n\t\t\tconst input = normalizeSearchInput( searchInput );\n\t\t\treturn icons.filter( ( icon ) => {\n\t\t\t\tconst iconName = normalizeSearchInput( icon.name );\n\t\t\t\tconst iconLabel = normalizeSearchInput( icon.label );\n\n\t\t\t\treturn (\n\t\t\t\t\ticonName.includes( input ) || iconLabel.includes( input )\n\t\t\t\t);\n\t\t\t} );\n\t\t}\n\n\t\treturn icons;\n\t}, [ searchInput, icons ] );\n\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"wp-block-icon__inserter-modal\"\n\t\t\ttitle={ __( 'Icon library' ) }\n\t\t\tonRequestClose={ onClose }\n\t\t\tisFullScreen\n\t\t>\n\t\t\t<Tabs.Root\n\t\t\t\tclassName=\"wp-block-icon__inserter\"\n\t\t\t\torientation=\"vertical\"\n\t\t\t\tvalue={ collectionSlug }\n\t\t\t\tonValueChange={ setCurrentCollection }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\tclassName=\"wp-block-icon__inserter-sidebar\"\n\t\t\t\t>\n\t\t\t\t\t<SearchControl\n\t\t\t\t\t\tvalue={ searchInput }\n\t\t\t\t\t\tonChange={ debouncedSetSearchInput }\n\t\t\t\t\t/>\n\t\t\t\t\t<Tabs.List>\n\t\t\t\t\t\t<Tabs.Tab value=\"\">{ __( 'All' ) }</Tabs.Tab>\n\t\t\t\t\t\t{ collections?.map( ( collection ) => (\n\t\t\t\t\t\t\t<Tabs.Tab\n\t\t\t\t\t\t\t\tkey={ collection.slug }\n\t\t\t\t\t\t\t\tvalue={ collection.slug }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ collection.label }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.List>\n\t\t\t\t</Stack>\n\t\t\t\t{ [ { slug: '' }, ...( collections ?? [] ) ].map(\n\t\t\t\t\t( collection ) => (\n\t\t\t\t\t\t<Tabs.Panel\n\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\tkey={ collection.slug }\n\t\t\t\t\t\t\tvalue={ collection.slug }\n\t\t\t\t\t\t\tclassName=\"wp-block-icon__inserter-panel\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ! hasResolvedIcons ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"wp-block-icon__inserter-loading\"\n\t\t\t\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Loading…' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<IconGrid\n\t\t\t\t\t\t\t\t\ticons={ filteredIcons }\n\t\t\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Tabs.Panel>\n\t\t\t\t\t)\n\t\t\t\t) }\n\t\t\t</Tabs.Root>\n\t\t</Modal>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAA8C;AAC9C,gBAA4B;AAC5B,qBAAkC;AAClC,qBAA4B;AAC5B,kBAA0B;AAC1B,uBAAuC;AAKvC,uBAAqB;AACrB,6BAAqC;AAqFhC;AAnFU,SAAR,oBAAsC,EAAE,SAAS,OAAO,SAAS,GAAI;AAC3E,QAAM,CAAE,aAAa,cAAe,QAAI,yBAAU,EAAG;AACrD,QAAM,CAAE,mBAAmB,oBAAqB,QAAI,yBAAU,IAAK;AAEnE,QAAM,8BAA0B,4BAAa,gBAAgB,GAAI;AAEjE,QAAM,kBAAc;AAAA,IACnB,CAAE,WACD,OAAQ,iBAAAA,KAAc,EAAE;AAAA,MACvB;AAAA,MACA;AAAA,IACD;AAAA,IACD,CAAC;AAAA,EACF;AAIA,QAAM,qBAAqB,OAAO,MAAO,GAAI,EAAG,CAAE;AAClD,QAAM,iBACL,sBACE,aAAa,KAAM,CAAE,EAAE,KAAK,MAAO,SAAS,kBAAmB,IAC9D,qBACA,cAAe,CAAE,GAAG,SACvB;AAED,QAAM,EAAE,OAAO,iBAAiB,QAAI;AAAA,IACnC,CAAE,WAAY;AACb,UAAK,mBAAmB,MAAO;AAC9B,eAAO,EAAE,OAAO,MAAM,kBAAkB,MAAM;AAAA,MAC/C;AACA,YAAM,QACL,mBAAmB,KAAK,CAAC,IAAI,EAAE,YAAY,eAAe;AAC3D,YAAM,EAAE,kBAAkB,sBAAsB,IAC/C,OAAQ,iBAAAA,KAAc;AACvB,aAAO;AAAA,QACN,OAAO,iBAAkB,QAAQ,QAAQ,KAAM;AAAA,QAC/C,kBAAkB,sBAAuB,oBAAoB;AAAA,UAC5D;AAAA,UACA;AAAA,UACA;AAAA,QACD,CAAE;AAAA,MACH;AAAA,IACD;AAAA,IACA,CAAE,cAAe;AAAA,EAClB;AAEA,QAAM,oBAAgB,wBAAS,MAAM;AACpC,QAAK,CAAE,OAAQ;AACd,aAAO,CAAC;AAAA,IACT;AACA,QAAK,aAAc;AAClB,YAAM,YAAQ,6CAAsB,WAAY;AAChD,aAAO,MAAM,OAAQ,CAAE,SAAU;AAChC,cAAM,eAAW,6CAAsB,KAAK,IAAK;AACjD,cAAM,gBAAY,6CAAsB,KAAK,KAAM;AAEnD,eACC,SAAS,SAAU,KAAM,KAAK,UAAU,SAAU,KAAM;AAAA,MAE1D,CAAE;AAAA,IACH;AAEA,WAAO;AAAA,EACR,GAAG,CAAE,aAAa,KAAM,CAAE;AAE1B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAQ,gBAAI,cAAe;AAAA,MAC3B,gBAAiB;AAAA,MACjB,cAAY;AAAA,MAEZ;AAAA,QAAC,eAAK;AAAA,QAAL;AAAA,UACA,WAAU;AAAA,UACV,aAAY;AAAA,UACZ,OAAQ;AAAA,UACR,eAAgB;AAAA,UAEhB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,KAAI;AAAA,gBACJ,WAAU;AAAA,gBAEV;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACA,OAAQ;AAAA,sBACR,UAAW;AAAA;AAAA,kBACZ;AAAA,kBACA,6CAAC,eAAK,MAAL,EACA;AAAA,gEAAC,eAAK,KAAL,EAAS,OAAM,IAAK,8BAAI,KAAM,GAAG;AAAA,oBAChC,aAAa,IAAK,CAAE,eACrB;AAAA,sBAAC,eAAK;AAAA,sBAAL;AAAA,wBAEA,OAAQ,WAAW;AAAA,wBAEjB,qBAAW;AAAA;AAAA,sBAHP,WAAW;AAAA,oBAIlB,CACC;AAAA,qBACH;AAAA;AAAA;AAAA,YACD;AAAA,YACE,CAAE,EAAE,MAAM,GAAG,GAAG,GAAK,eAAe,CAAC,CAAI,EAAE;AAAA,cAC5C,CAAE,eACD;AAAA,gBAAC,eAAK;AAAA,gBAAL;AAAA,kBACA,UAAW;AAAA,kBAEX,OAAQ,WAAW;AAAA,kBACnB,WAAU;AAAA,kBAER,WAAE,mBACH;AAAA,oBAAC;AAAA;AAAA,sBACA,WAAU;AAAA,sBACV,MAAK;AAAA,sBACL,kBAAa,gBAAI,UAAW;AAAA,sBAE5B,sDAAC,6BAAQ;AAAA;AAAA,kBACV,IAEA;AAAA,oBAAC,iBAAAC;AAAA,oBAAA;AAAA,sBACA,OAAQ;AAAA,sBACR;AAAA,sBACA;AAAA;AAAA,kBACD;AAAA;AAAA,gBAjBK,WAAW;AAAA,cAmBlB;AAAA,YAEF;AAAA;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
+  "names": ["coreDataStore", "IconGrid"]
 }

package/build/icon/edit.cjs

@@ -79,15 +79,12 @@ function Edit({ attributes, setAttributes }) {
   const spacingProps = (0, import_block_editor.__experimentalGetSpacingClassesAndStyles)(attributes);
   const borderProps = (0, import_block_editor.__experimentalUseBorderProps)(attributes);
   const dimensionsProps = (0, import_block_editor.getDimensionsClassesAndStyles)(attributes);
-  const { selectedIcon, allIcons = [] } = (0, import_data.useSelect)(
+  const selectedIcon = (0, import_data.useSelect)(
     (select) => {
-      const { getEntityRecord, getEntityRecords } = select(import_core_data.store);
-      return {
-        selectedIcon: icon ? getEntityRecord("root", "icon", icon) : null,
-        allIcons: isInserterOpen ? getEntityRecords("root", "icon") : void 0
-      };
+      const { getEntityRecord } = select(import_core_data.store);
+      return icon ? getEntityRecord("root", "icon", icon) : null;
     },
-    [isInserterOpen, icon]
+    [icon]
   );
   const iconToDisplay = selectedIcon?.content || "";
   const flipClasses = {
@@ -206,7 +203,7 @@ function Edit({ attributes, setAttributes }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     blockControls,
     inspectorControls,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...(0, import_block_editor.useBlockProps)(), children: icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...(0, import_block_editor.useBlockProps)(), children: iconToDisplay ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_html_renderer.default,
       {
         html: iconToDisplay,
@@ -248,10 +245,12 @@ function Edit({ attributes, setAttributes }) {
     isInserterOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_components2.CustomInserterModal,
       {
-        icons: allIcons,
-        setInserterOpen,
-        attributes,
-        setAttributes
+        onClose: () => setInserterOpen(false),
+        value: attributes.icon,
+        onChange: (name) => {
+          setAttributes({ icon: name });
+          setInserterOpen(false);
+        }
       }
     )
   ] });