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

package/build-module/group/transforms.mjs

@@ -1,8 +1,5 @@
 // packages/block-library/src/group/transforms.js
-import {
-  createBlock,
-  __experimentalCloneSanitizedBlock
-} from "@wordpress/blocks";
+import { createBlock, cloneSanitizedBlock } from "@wordpress/blocks";
 var transforms = {
   from: [
     {
@@ -19,7 +16,7 @@ var transforms = {
           void 0
         );
         const groupInnerBlocks = blocks.map(
-          (block) => __experimentalCloneSanitizedBlock(block)
+          (block) => cloneSanitizedBlock(block)
         );
         return createBlock(
           "core/group",

package/build-module/group/transforms.mjs.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": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,OACM;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,UACtC,kCAAmC,KAAM;AAAA,QAC1C;AAEA,eAAO;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": ";AAGA,SAAS,aAAa,2BAA2B;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,UACtC,oBAAqB,KAAM;AAAA,QAC5B;AAEA,eAAO;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-module/heading/edit.mjs

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

package/build-module/heading/edit.mjs.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": ";AAGA,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,aAAa,iBAAiB;AACvC;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AAKP,SAAS,gBAAgB,iBAAiB;AAC1C,OAAO,4BAA4B;AAyEjC;AAvEF,SAAS,YAAa,OAAQ;AAC7B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AACJ,yBAAwB,KAAM;AAC9B,QAAM,EAAE,SAAS,OAAO,aAAa,OAAO,IAAI;AAChD,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAe;AAAA,IACjC;AAAA,EACD,CAAE;AAEF,QAAM,EAAE,mBAAmB,IAAI,UAAW,CAAE,WAAY;AACvD,UAAM,EAAE,qBAAqB,YAAY,IAAI,OAAQ,gBAAiB;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,IAC/C,YAAa,gBAAiB;AAI/B,YAAW,MAAM;AAChB,QAAK,CAAE,oBAAqB;AAC3B;AAAA,IACD;AAEA,QAAK,CAAE,UAAU,SAAU;AAE1B,8CAAwC;AACxC,oBAAe;AAAA,QACd,QAAQ,eAAgB,UAAU,OAAQ;AAAA,MAC3C,CAAE;AAAA,IACH;AACA,cAAW,UAAU,MAAO;AAG5B,WAAO,MAAM,UAAW,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,SACF,eAAgB,UAAU,OAAQ,MAAM,SACxC;AACD,eAAS,SAAS,eAAgB,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,eAAe,GAAI,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": ";AAGA,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,aAAa,iBAAiB;AACvC;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AAKP,SAAS,gBAAgB,iBAAiB;AAC1C,OAAO,4BAA4B;AAyEjC;AAvEF,SAAS,YAAa,OAAQ;AAC7B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AACJ,yBAAwB,KAAM;AAC9B,QAAM,EAAE,SAAS,OAAO,aAAa,OAAO,IAAI;AAChD,QAAM,UAAU,MAAM;AACtB,QAAM,aAAa,cAAe;AAAA,IACjC;AAAA,EACD,CAAE;AAEF,QAAM,EAAE,mBAAmB,IAAI,UAAW,CAAE,WAAY;AACvD,UAAM,EAAE,qBAAqB,YAAY,IAAI,OAAQ,gBAAiB;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,IAC/C,YAAa,gBAAiB;AAI/B,YAAW,MAAM;AAChB,QAAK,CAAE,oBAAqB;AAC3B;AAAA,IACD;AAEA,QAAK,CAAE,UAAU,SAAU;AAE1B,8CAAwC;AACxC,oBAAe;AAAA,QACd,QAAQ,eAAgB,UAAU,OAAQ;AAAA,MAC3C,CAAE;AAAA,IACH;AACA,cAAW,UAAU,MAAO;AAG5B,WAAO,MAAM,UAAW,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,SACF,eAAgB,UAAU,OAAQ,MAAM,SACxC;AACD,eAAS,SAAS,eAAgB,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,eAAe,GAAI,SAAU;AAAA,MACzC,GAAG;AAAA;AAAA,EACN;AAEF;AAEA,IAAO,eAAQ;",
   "names": []
 }

package/build-module/html/modal.mjs

@@ -11,7 +11,11 @@ import {
   __experimentalVStack as VStack,
   __experimentalHStack as HStack
 } from "@wordpress/components";
-import { PlainText, store as blockEditorStore } from "@wordpress/block-editor";
+import {
+  PlainText,
+  store as blockEditorStore,
+  privateApis as blockEditorPrivateApis
+} from "@wordpress/block-editor";
 import { fullscreen, square } from "@wordpress/icons";
 import { useViewportMatch } from "@wordpress/compose";
 import { unlock } from "../lock-unlock.mjs";
@@ -19,12 +23,14 @@ import Preview from "./preview.mjs";
 import { parseContent, serializeContent } from "./utils.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { Tabs } = unlock(componentsPrivateApis);
+var { useNativeUndo } = unlock(blockEditorPrivateApis);
 function HTMLEditModal({ onRequestClose, content, onUpdate }) {
   const { html, css, js } = parseContent(content);
   const [editedHtml, setEditedHtml] = useState(html);
   const [editedCss, setEditedCss] = useState(css);
   const [editedJs, setEditedJs] = useState(js);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const nativeUndoRef = useNativeUndo();
   const isMobileViewport = useViewportMatch("small", "<");
   const { canUserUseUnfilteredHTML } = useSelect((select) => {
     const settings = select(blockEditorStore).getSettings();
@@ -106,67 +112,74 @@ function HTMLEditModal({ onRequestClose, content, onUpdate }) {
             align: "stretch",
             gap: 8,
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "block-library-html__modal-content", children: [
-                /* @__PURE__ */ jsx(
-                  Tabs.TabPanel,
-                  {
-                    tabId: "html",
-                    focusable: false,
-                    className: "block-library-html__modal-tab",
-                    children: /* @__PURE__ */ jsx(
-                      PlainText,
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: nativeUndoRef,
+                  className: "block-library-html__modal-content",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Tabs.TabPanel,
                       {
-                        value: editedHtml,
-                        onChange: setEditedHtml,
-                        placeholder: __("Write HTML…"),
-                        "aria-label": __("HTML"),
-                        className: "block-library-html__modal-editor",
-                        async: true
+                        tabId: "html",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ jsx(
+                          PlainText,
+                          {
+                            value: editedHtml,
+                            onChange: setEditedHtml,
+                            placeholder: __("Write HTML…"),
+                            "aria-label": __("HTML"),
+                            className: "block-library-html__modal-editor",
+                            async: true
+                          }
+                        )
                       }
-                    )
-                  }
-                ),
-                canUserUseUnfilteredHTML && /* @__PURE__ */ jsx(
-                  Tabs.TabPanel,
-                  {
-                    tabId: "css",
-                    focusable: false,
-                    className: "block-library-html__modal-tab",
-                    children: /* @__PURE__ */ jsx(
-                      PlainText,
+                    ),
+                    canUserUseUnfilteredHTML && /* @__PURE__ */ jsx(
+                      Tabs.TabPanel,
                       {
-                        value: editedCss,
-                        onChange: setEditedCss,
-                        placeholder: __("Write CSS…"),
-                        "aria-label": __("CSS"),
-                        className: "block-library-html__modal-editor",
-                        async: true
+                        tabId: "css",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ jsx(
+                          PlainText,
+                          {
+                            value: editedCss,
+                            onChange: setEditedCss,
+                            placeholder: __("Write CSS…"),
+                            "aria-label": __("CSS"),
+                            className: "block-library-html__modal-editor",
+                            async: true
+                          }
+                        )
                       }
-                    )
-                  }
-                ),
-                canUserUseUnfilteredHTML && /* @__PURE__ */ jsx(
-                  Tabs.TabPanel,
-                  {
-                    tabId: "js",
-                    focusable: false,
-                    className: "block-library-html__modal-tab",
-                    children: /* @__PURE__ */ jsx(
-                      PlainText,
+                    ),
+                    canUserUseUnfilteredHTML && /* @__PURE__ */ jsx(
+                      Tabs.TabPanel,
                       {
-                        value: editedJs,
-                        onChange: setEditedJs,
-                        placeholder: __(
-                          "Write JavaScript…"
-                        ),
-                        "aria-label": __("JavaScript"),
-                        className: "block-library-html__modal-editor",
-                        async: true
+                        tabId: "js",
+                        focusable: false,
+                        className: "block-library-html__modal-tab",
+                        children: /* @__PURE__ */ jsx(
+                          PlainText,
+                          {
+                            value: editedJs,
+                            onChange: setEditedJs,
+                            placeholder: __(
+                              "Write JavaScript…"
+                            ),
+                            "aria-label": __("JavaScript"),
+                            className: "block-library-html__modal-editor",
+                            async: true
+                          }
+                        )
                       }
                     )
-                  }
-                )
-              ] }),
+                  ]
+                }
+              ),
               /* @__PURE__ */ jsx("div", { className: "block-library-html__preview", children: /* @__PURE__ */ jsx(
                 Preview,
                 {

package/build-module/html/modal.mjs.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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",
+  "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": ";AAGA,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AACP;AAAA,EACC;AAAA,EACA,SAAS;AAAA,EACT,eAAe;AAAA,OACT;AACP,SAAS,YAAY,cAAc;AACnC,SAAS,wBAAwB;AAKjC,SAAS,cAAc;AACvB,OAAO,aAAa;AACpB,SAAS,cAAc,wBAAwB;AAmD7C,mBAmBO,KADD,YAlBN;AAjDF,IAAM,EAAE,KAAK,IAAI,OAAQ,qBAAsB;AAC/C,IAAM,EAAE,cAAc,IAAI,OAAQ,sBAAuB;AAE1C,SAAR,cAAgC,EAAE,gBAAgB,SAAS,SAAS,GAAI;AAE9E,QAAM,EAAE,MAAM,KAAK,GAAG,IAAI,aAAc,OAAQ;AAChD,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,IAAK;AACrD,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,GAAI;AAClD,QAAM,CAAE,UAAU,WAAY,IAAI,SAAU,EAAG;AAC/C,QAAM,CAAE,cAAc,eAAgB,IAAI,SAAU,KAAM;AAG1D,QAAM,gBAAgB,cAAc;AAEpC,QAAM,mBAAmB,iBAAkB,SAAS,GAAI;AAGxD,QAAM,EAAE,yBAAyB,IAAI,UAAW,CAAE,WAAY;AAC7D,UAAM,WAAW,OAAQ,gBAAiB,EAAE,YAAY;AACxD,WAAO;AAAA,MACN,0BACC,SAAS;AAAA,IACX;AAAA,EACD,GAAG,CAAC,CAAE;AAGN,QAAM,uBACL,CAAE,6BAA8B,IAAI,KAAK,KAAK,GAAG,KAAK;AAEvD,QAAM,eAAe,MAAM;AAG1B;AAAA,MACC,iBAAkB;AAAA,QACjB,MAAM;AAAA,QACN,KAAK,2BAA2B,YAAY;AAAA,QAC5C,IAAI,2BAA2B,WAAW;AAAA,MAC3C,CAAE;AAAA,IACH;AAAA,EACD;AACA,QAAM,uBAAuB,MAAM;AAClC,iBAAa;AACb,mBAAe;AAAA,EAChB;AACA,QAAM,mBAAmB,MAAM;AAC9B,oBAAiB,CAAE,cAAe,CAAE,SAAU;AAAA,EAC/C;AAEA,SACC,gCACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,GAAI,WAAY;AAAA,MACxB;AAAA,MACA,WAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAgB;AAAA,MAChB,2BAA4B;AAAA,MAC5B,cAAe;AAAA,MACf,0BAAwB;AAAA,MAExB,8BAAC,QAAK,aAAY,cAAa,cAAa,QAC3C,+BAAC,UAAO,UAAQ,MACf;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAEV;AAAA,kCAAC,SACA,+BAAC,KAAK,SAAL,EACA;AAAA,oCAAC,KAAK,KAAL,EAAS,OAAM,QAAO,kBAAI;AAAA,gBACzB,4BACD,oBAAC,KAAK,KAAL,EAAS,OAAM,OAAM,iBAAG;AAAA,gBAExB,4BACD,oBAAC,KAAK,KAAL,EAAS,OAAM,MACb,aAAI,YAAa,GACpB;AAAA,iBAEF,GACD;AAAA,cACE,CAAE,oBACH,oBAAC,SACA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,MACC,eAAe,SAAS;AAAA,kBAEzB,OAAQ;AAAA,oBACP;AAAA,kBACD;AAAA,kBACA,SAAU;AAAA,kBACV,SAAQ;AAAA;AAAA,cACT,GACD;AAAA;AAAA;AAAA,QAEF;AAAA,QACE,wBACD;AAAA,UAAC;AAAA;AAAA,YACA,QAAO;AAAA,YACP,eAAgB;AAAA,YAChB,WAAU;AAAA,YAER;AAAA,cACD;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACA,WAAY,mBAAmB,WAAW;AAAA,YAC1C,WAAU;AAAA,YACV,OAAM;AAAA,YACN,KAAM;AAAA,YAEN;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,KAAM;AAAA,kBACN,WAAU;AAAA,kBAEV;AAAA;AAAA,sBAAC,KAAK;AAAA,sBAAL;AAAA,wBACA,OAAM;AAAA,wBACN,WAAY;AAAA,wBACZ,WAAU;AAAA,wBAEV;AAAA,0BAAC;AAAA;AAAA,4BACA,OAAQ;AAAA,4BACR,UAAW;AAAA,4BACX,aAAc,GAAI,aAAc;AAAA,4BAChC,cAAa,GAAI,MAAO;AAAA,4BACxB,WAAU;AAAA,4BACV,OAAK;AAAA;AAAA,wBACN;AAAA;AAAA,oBACD;AAAA,oBACE,4BACD;AAAA,sBAAC,KAAK;AAAA,sBAAL;AAAA,wBACA,OAAM;AAAA,wBACN,WAAY;AAAA,wBACZ,WAAU;AAAA,wBAEV;AAAA,0BAAC;AAAA;AAAA,4BACA,OAAQ;AAAA,4BACR,UAAW;AAAA,4BACX,aAAc,GAAI,YAAa;AAAA,4BAC/B,cAAa,GAAI,KAAM;AAAA,4BACvB,WAAU;AAAA,4BACV,OAAK;AAAA;AAAA,wBACN;AAAA;AAAA,oBACD;AAAA,oBAEC,4BACD;AAAA,sBAAC,KAAK;AAAA,sBAAL;AAAA,wBACA,OAAM;AAAA,wBACN,WAAY;AAAA,wBACZ,WAAU;AAAA,wBAEV;AAAA,0BAAC;AAAA;AAAA,4BACA,OAAQ;AAAA,4BACR,UAAW;AAAA,4BACX,aAAc;AAAA,8BACb;AAAA,4BACD;AAAA,4BACA,cAAa,GAAI,YAAa;AAAA,4BAC9B,WAAU;AAAA,4BACV,OAAK;AAAA;AAAA,wBACN;AAAA;AAAA,oBACD;AAAA;AAAA;AAAA,cAEF;AAAA,cACA,oBAAC,SAAI,WAAU,+BACd;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAU,iBAAkB;AAAA,oBAC3B,MAAM;AAAA,oBACN,KAAK;AAAA,oBACL,IAAI;AAAA,kBACL,CAAE;AAAA;AAAA,cACH,GACD;AAAA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,SAAU;AAAA,YACV,WAAU;AAAA,YAEV;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,SAAU;AAAA,kBAER,aAAI,QAAS;AAAA;AAAA,cAChB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,SAAU;AAAA,kBAER,aAAI,QAAS;AAAA;AAAA,cAChB;AAAA;AAAA;AAAA,QACD;AAAA,SACD,GACD;AAAA;AAAA,EACD,GACD;AAEF;",
   "names": []
 }

package/build-module/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-module/icon/components/custom-inserter/icon-grid.mjs

@@ -1,32 +1,45 @@
 // packages/block-library/src/icon/components/custom-inserter/icon-grid.js
 import { __ } from "@wordpress/i18n";
 import { Button } from "@wordpress/components";
+import { useAsyncList } from "@wordpress/compose";
+import { useRef, useLayoutEffect } from "@wordpress/element";
+import { getScrollContainer } from "@wordpress/dom";
 import HtmlRenderer from "../../../utils/html-renderer.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function IconGrid({ icons, onChange, attributes }) {
+var BATCH_SIZE = 20;
+function IconGrid({ icons, onChange, value }) {
+  const shownIcons = useAsyncList(icons, {
+    step: BATCH_SIZE
+  });
+  const selectedIconRef = useRef();
+  const selectedIndex = icons?.findIndex((icon) => icon.name === value) ?? -1;
+  const isReadyToScroll = selectedIndex >= 0 && (shownIcons.length >= selectedIndex + BATCH_SIZE || shownIcons.length === icons.length);
+  useLayoutEffect(() => {
+    const node = selectedIconRef.current;
+    if (!isReadyToScroll || !node) {
+      return;
+    }
+    if (getScrollContainer(node)?.scrollTop) {
+      return;
+    }
+    node.scrollIntoView({ block: "center" });
+  }, [isReadyToScroll]);
   return /* @__PURE__ */ jsx("div", { className: "wp-block-icon__inserter-grid", children: !icons?.length ? /* @__PURE__ */ jsx("div", { className: "wp-block-icon__inserter-grid-no-results", children: /* @__PURE__ */ jsx("p", { children: __("No results found.") }) }) : /* @__PURE__ */ jsx(
     "div",
     {
       className: "wp-block-icon__inserter-grid-icons-list",
       "aria-label": __("Icon library"),
-      children: icons.map((icon) => {
+      children: shownIcons.map((icon) => {
         return /* @__PURE__ */ jsxs(
           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__ */ jsx("span", { className: "wp-block-icon__inserter-grid-icons-list-item-icon", children: /* @__PURE__ */ jsx(
-                HtmlRenderer,
-                {
-                  html: icon.content,
-                  wrapperProps: {
-                    style: { width: "24px" }
-                  }
-                }
-              ) }),
+              /* @__PURE__ */ jsx("span", { className: "wp-block-icon__inserter-grid-icons-list-item-icon", children: /* @__PURE__ */ jsx(HtmlRenderer, { html: icon.content }) }),
               /* @__PURE__ */ jsx("span", { className: "wp-block-icon__inserter-grid-icons-list-item-title", children: icon.label })
             ]
           },

package/build-module/icon/components/custom-inserter/icon-grid.mjs.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": ";AAGA,SAAS,UAAU;AACnB,SAAS,cAAc;AAKvB,OAAO,kBAAkB;AAOpB,cASE,YATF;AALU,SAAR,SAA2B,EAAE,OAAO,UAAU,WAAW,GAAI;AACnE,SACC,oBAAC,SAAI,WAAU,gCACZ,WAAE,OAAO,SACV,oBAAC,SAAI,WAAU,2CACd,8BAAC,OAAI,aAAI,mBAAoB,GAAG,GACjC,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAa,GAAI,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,kCAAC,UAAK,WAAU,qDACf;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAO,KAAK;AAAA,kBACZ,cAAe;AAAA,oBACd,OAAO,EAAE,OAAO,OAAO;AAAA,kBACxB;AAAA;AAAA,cACD,GACD;AAAA,cACA,oBAAC,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": ";AAGA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,uBAAuB;AACxC,SAAS,0BAA0B;AAKnC,OAAO,kBAAkB;AAmCpB,cASE,YATF;AAjCL,IAAM,aAAa;AAEJ,SAAR,SAA2B,EAAE,OAAO,UAAU,MAAM,GAAI;AAC9D,QAAM,aAAa,aAAc,OAAO;AAAA,IACvC,MAAM;AAAA,EACP,CAAE;AAKF,QAAM,kBAAkB,OAAO;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,kBAAiB,MAAM;AACtB,UAAM,OAAO,gBAAgB;AAC7B,QAAK,CAAE,mBAAmB,CAAE,MAAO;AAClC;AAAA,IACD;AACA,QAAK,mBAAoB,IAAK,GAAG,WAAY;AAC5C;AAAA,IACD;AACA,SAAK,eAAgB,EAAE,OAAO,SAAS,CAAE;AAAA,EAC1C,GAAG,CAAE,eAAgB,CAAE;AAEvB,SACC,oBAAC,SAAI,WAAU,gCACZ,WAAE,OAAO,SACV,oBAAC,SAAI,WAAU,2CACd,8BAAC,OAAI,aAAI,mBAAoB,GAAG,GACjC,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAa,GAAI,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,kCAAC,UAAK,WAAU,qDACf,8BAAC,gBAAa,MAAO,KAAK,SAAU,GACrC;AAAA,cACA,oBAAC,UAAK,WAAU,sDACb,eAAK,OACR;AAAA;AAAA;AAAA,UAlBM,KAAK;AAAA,QAmBZ;AAAA,MAEF,CAAE;AAAA;AAAA,EACH,GAEF;AAEF;",
   "names": []
 }

package/build-module/icon/components/custom-inserter/index.mjs

@@ -1,29 +1,49 @@
 // packages/block-library/src/icon/components/custom-inserter/index.js
 import { __ } from "@wordpress/i18n";
-import { Modal, SearchControl } from "@wordpress/components";
-import { useState, useMemo, useCallback } from "@wordpress/element";
+import { Modal, SearchControl, Spinner } from "@wordpress/components";
+import { Stack, Tabs } from "@wordpress/ui";
+import { useState, useMemo } from "@wordpress/element";
 import { useDebounce } from "@wordpress/compose";
+import { useSelect } from "@wordpress/data";
+import { store as coreDataStore } from "@wordpress/core-data";
 import IconGrid from "./icon-grid.mjs";
 import { normalizeSearchInput } from "../../../utils/search-patterns.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function CustomInserterModal({
-  icons = [],
-  setInserterOpen,
-  attributes,
-  setAttributes
-}) {
+function CustomInserterModal({ onClose, value, onChange }) {
   const [searchInput, setSearchInput] = useState("");
+  const [currentCollection, setCurrentCollection] = useState(null);
   const debouncedSetSearchInput = useDebounce(setSearchInput, 300);
-  const setIcon = useCallback(
-    (name) => {
-      setAttributes({
-        icon: name
-      });
-      setInserterOpen(false);
+  const collections = useSelect(
+    (select) => select(coreDataStore).getEntityRecords(
+      "root",
+      "iconCollection"
+    ),
+    []
+  );
+  const selectedCollection = value?.split("/")[0];
+  const collectionSlug = currentCollection ?? (collections?.some(({ slug }) => slug === selectedCollection) ? selectedCollection : collections?.[0]?.slug) ?? null;
+  const { icons, hasResolvedIcons } = useSelect(
+    (select) => {
+      if (collectionSlug === null) {
+        return { icons: null, hasResolvedIcons: false };
+      }
+      const query = collectionSlug === "" ? {} : { collection: collectionSlug };
+      const { getEntityRecords, hasFinishedResolution } = select(coreDataStore);
+      return {
+        icons: getEntityRecords("root", "icon", query),
+        hasResolvedIcons: hasFinishedResolution("getEntityRecords", [
+          "root",
+          "icon",
+          query
+        ])
+      };
     },
-    [setAttributes, setInserterOpen]
+    [collectionSlug]
   );
   const filteredIcons = useMemo(() => {
+    if (!icons) {
+      return [];
+    }
     if (searchInput) {
       const input = normalizeSearchInput(searchInput);
       return icons.filter((icon) => {
@@ -39,25 +59,74 @@ function CustomInserterModal({
     {
       className: "wp-block-icon__inserter-modal",
       title: __("Icon library"),
-      onRequestClose: () => setInserterOpen(false),
+      onRequestClose: onClose,
       isFullScreen: true,
-      children: /* @__PURE__ */ jsxs("div", { className: "wp-block-icon__inserter", children: [
-        /* @__PURE__ */ jsx("div", { className: "wp-block-icon__inserter-header", children: /* @__PURE__ */ jsx(
-          SearchControl,
-          {
-            value: searchInput,
-            onChange: debouncedSetSearchInput
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          IconGrid,
-          {
-            icons: filteredIcons,
-            onChange: setIcon,
-            attributes
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        Tabs.Root,
+        {
+          className: "wp-block-icon__inserter",
+          orientation: "vertical",
+          value: collectionSlug,
+          onValueChange: setCurrentCollection,
+          children: [
+            /* @__PURE__ */ jsxs(
+              Stack,
+              {
+                direction: "column",
+                gap: "lg",
+                className: "wp-block-icon__inserter-sidebar",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SearchControl,
+                    {
+                      value: searchInput,
+                      onChange: debouncedSetSearchInput
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Tabs.List, { children: [
+                    /* @__PURE__ */ jsx(Tabs.Tab, { value: "", children: __("All") }),
+                    collections?.map((collection) => /* @__PURE__ */ jsx(
+                      Tabs.Tab,
+                      {
+                        value: collection.slug,
+                        children: collection.label
+                      },
+                      collection.slug
+                    ))
+                  ] })
+                ]
+              }
+            ),
+            [{ slug: "" }, ...collections ?? []].map(
+              (collection) => /* @__PURE__ */ jsx(
+                Tabs.Panel,
+                {
+                  tabIndex: -1,
+                  value: collection.slug,
+                  className: "wp-block-icon__inserter-panel",
+                  children: !hasResolvedIcons ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "wp-block-icon__inserter-loading",
+                      role: "status",
+                      "aria-label": __("Loading…"),
+                      children: /* @__PURE__ */ jsx(Spinner, {})
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    IconGrid,
+                    {
+                      icons: filteredIcons,
+                      onChange,
+                      value
+                    }
+                  )
+                },
+                collection.slug
+              )
+            )
+          ]
+        }
+      )
     }
   );
 }

package/build-module/icon/components/custom-inserter/index.mjs.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": ";AAGA,SAAS,UAAU;AACnB,SAAS,OAAO,qBAAqB;AACrC,SAAS,UAAU,SAAS,mBAAmB;AAC/C,SAAS,mBAAmB;AAK5B,OAAO,cAAc;AACrB,SAAS,4BAA4B;AA6ClC,SAEE,KAFF;AA3CY,SAAR,oBAAsC;AAAA,EAC5C,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,EAAG;AAErD,QAAM,0BAA0B,YAAa,gBAAgB,GAAI;AAEjE,QAAM,UAAU;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,gBAAgB,QAAS,MAAM;AACpC,QAAK,aAAc;AAClB,YAAM,QAAQ,qBAAsB,WAAY;AAChD,aAAO,MAAM,OAAQ,CAAE,SAAU;AAChC,cAAM,WAAW,qBAAsB,KAAK,IAAK;AACjD,cAAM,YAAY,qBAAsB,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,OAAQ,GAAI,cAAe;AAAA,MAC3B,gBAAiB,MAAM,gBAAiB,KAAM;AAAA,MAC9C,cAAY;AAAA,MAEZ,+BAAC,SAAI,WAAU,2BACd;AAAA,4BAAC,SAAI,WAAU,kCACd;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ;AAAA,YACR,UAAW;AAAA;AAAA,QACZ,GACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ;AAAA,YACR,UAAW;AAAA,YACX;AAAA;AAAA,QACD;AAAA,SACD;AAAA;AAAA,EACD;AAEF;",
+  "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": "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",
   "names": []
 }