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

package/build-module/group/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/group/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInnerBlocks,\n\tuseBlockProps,\n\tInspectorControls,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { View } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';\nimport { unlock } from '../lock-unlock';\n\nconst { HTMLElementControl } = unlock( blockEditorPrivateApis );\n\n/**\n * Render inspector controls for the Group block.\n *\n * @param {Object}   props                 Component props.\n * @param {string}   props.tagName         The HTML tag name.\n * @param {Function} props.onSelectTagName onChange function for the SelectControl.\n * @param {string}   props.clientId        The client ID of the current block.\n *\n * @return {React.JSX.Element}                The control group.\n */\nfunction GroupEditControls( { tagName, onSelectTagName, clientId } ) {\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<HTMLElementControl\n\t\t\t\ttagName={ tagName }\n\t\t\t\tonChange={ onSelectTagName }\n\t\t\t\tclientId={ clientId }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t{ label: '<header>', value: 'header' },\n\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t{ label: '<article>', value: 'article' },\n\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t{ label: '<footer>', value: 'footer' },\n\t\t\t\t] }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nfunction GroupEdit( { attributes, name, setAttributes, clientId } ) {\n\tconst { hasInnerBlocks, themeSupportsLayout } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getSettings } = select( blockEditorStore );\n\t\t\tconst block = getBlock( clientId );\n\t\t\treturn {\n\t\t\t\thasInnerBlocks: !! ( block && block.innerBlocks.length ),\n\t\t\t\tthemeSupportsLayout: getSettings()?.supportsLayout,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst {\n\t\ttagName: TagName = 'div',\n\t\ttemplateLock,\n\t\tallowedBlocks,\n\t\tlayout = {},\n\t} = attributes;\n\n\t// Layout settings.\n\tconst { type = 'default' } = layout;\n\tconst layoutSupportEnabled =\n\t\tthemeSupportsLayout || type === 'flex' || type === 'grid';\n\n\t// Hooks.\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps( { ref } );\n\n\tconst [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {\n\t\tattributes,\n\t\tusedLayoutType: type,\n\t\thasInnerBlocks,\n\t} );\n\n\t// Default to the regular appender being rendered.\n\tlet renderAppender;\n\tif ( showPlaceholder ) {\n\t\t// In the placeholder state, ensure the appender is not rendered.\n\t\t// This is needed because `...innerBlocksProps` is used in the placeholder\n\t\t// state so that blocks can dragged onto the placeholder area\n\t\t// from both the list view and in the editor canvas.\n\t\trenderAppender = false;\n\t} else if ( ! hasInnerBlocks ) {\n\t\t// When there is no placeholder, but the block is also empty,\n\t\t// use the larger button appender.\n\t\trenderAppender = InnerBlocks.ButtonBlockAppender;\n\t}\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\tlayoutSupportEnabled\n\t\t\t? blockProps\n\t\t\t: { className: 'wp-block-group__inner-container' },\n\t\t{\n\t\t\tdropZoneElement: ref.current,\n\t\t\ttemplateLock,\n\t\t\tallowedBlocks,\n\t\t\trenderAppender,\n\t\t}\n\t);\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst selectVariation = ( nextVariation ) => {\n\t\tsetAttributes( nextVariation.attributes );\n\t\tselectBlock( clientId, -1 );\n\t\tsetShowPlaceholder( false );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<GroupEditControls\n\t\t\t\ttagName={ TagName }\n\t\t\t\tonSelectTagName={ ( value ) =>\n\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t}\n\t\t\t\tclientId={ clientId }\n\t\t\t/>\n\t\t\t{ showPlaceholder && (\n\t\t\t\t<View>\n\t\t\t\t\t{ innerBlocksProps.children }\n\t\t\t\t\t<GroupPlaceHolder\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tonSelect={ selectVariation }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t\t{ layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...innerBlocksProps } />\n\t\t\t) }\n\t\t\t{ /* Ideally this is not needed but it's there for backward compatibility reason\n\t\t\t\tto keep this div for themes that might rely on its presence */ }\n\t\t\t{ ! layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...blockProps }>\n\t\t\t\t\t<div { ...innerBlocksProps } />\n\t\t\t\t</TagName>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default GroupEdit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInnerBlocks,\n\tuseBlockProps,\n\tInspectorControls,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';\nimport { unlock } from '../lock-unlock';\n\nconst { HTMLElementControl } = unlock( blockEditorPrivateApis );\n\n/**\n * Render inspector controls for the Group block.\n *\n * @param {Object}   props                 Component props.\n * @param {string}   props.tagName         The HTML tag name.\n * @param {Function} props.onSelectTagName onChange function for the SelectControl.\n * @param {string}   props.clientId        The client ID of the current block.\n *\n * @return {React.JSX.Element}                The control group.\n */\nfunction GroupEditControls( { tagName, onSelectTagName, clientId } ) {\n\treturn (\n\t\t<InspectorControls group=\"advanced\">\n\t\t\t<HTMLElementControl\n\t\t\t\ttagName={ tagName }\n\t\t\t\tonChange={ onSelectTagName }\n\t\t\t\tclientId={ clientId }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t{ label: '<header>', value: 'header' },\n\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t{ label: '<article>', value: 'article' },\n\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t{ label: '<footer>', value: 'footer' },\n\t\t\t\t] }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nfunction GroupEdit( { attributes, name, setAttributes, clientId } ) {\n\tconst { hasInnerBlocks, themeSupportsLayout } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getSettings } = select( blockEditorStore );\n\t\t\tconst block = getBlock( clientId );\n\t\t\treturn {\n\t\t\t\thasInnerBlocks: !! ( block && block.innerBlocks.length ),\n\t\t\t\tthemeSupportsLayout: getSettings()?.supportsLayout,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst {\n\t\ttagName: TagName = 'div',\n\t\ttemplateLock,\n\t\tallowedBlocks,\n\t\tlayout = {},\n\t} = attributes;\n\n\t// Layout settings.\n\tconst { type = 'default' } = layout;\n\tconst layoutSupportEnabled =\n\t\tthemeSupportsLayout || type === 'flex' || type === 'grid';\n\n\t// Hooks.\n\tconst ref = useRef();\n\tconst blockProps = useBlockProps( { ref } );\n\n\tconst [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {\n\t\tattributes,\n\t\tusedLayoutType: type,\n\t\thasInnerBlocks,\n\t} );\n\n\t// Default to the regular appender being rendered.\n\tlet renderAppender;\n\tif ( showPlaceholder ) {\n\t\t// In the placeholder state, ensure the appender is not rendered.\n\t\t// This is needed because `...innerBlocksProps` is used in the placeholder\n\t\t// state so that blocks can dragged onto the placeholder area\n\t\t// from both the list view and in the editor canvas.\n\t\trenderAppender = false;\n\t} else if ( ! hasInnerBlocks ) {\n\t\t// When there is no placeholder, but the block is also empty,\n\t\t// use the larger button appender.\n\t\trenderAppender = InnerBlocks.ButtonBlockAppender;\n\t}\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\tlayoutSupportEnabled\n\t\t\t? blockProps\n\t\t\t: { className: 'wp-block-group__inner-container' },\n\t\t{\n\t\t\tdropZoneElement: ref.current,\n\t\t\ttemplateLock,\n\t\t\tallowedBlocks,\n\t\t\trenderAppender,\n\t\t}\n\t);\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst selectVariation = ( nextVariation ) => {\n\t\tsetAttributes( nextVariation.attributes );\n\t\tselectBlock( clientId, -1 );\n\t\tsetShowPlaceholder( false );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<GroupEditControls\n\t\t\t\ttagName={ TagName }\n\t\t\t\tonSelectTagName={ ( value ) =>\n\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t}\n\t\t\t\tclientId={ clientId }\n\t\t\t/>\n\t\t\t{ showPlaceholder && (\n\t\t\t\t<div>\n\t\t\t\t\t{ innerBlocksProps.children }\n\t\t\t\t\t<GroupPlaceHolder\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tonSelect={ selectVariation }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...innerBlocksProps } />\n\t\t\t) }\n\t\t\t{ /* Ideally this is not needed but it's there for backward compatibility reason\n\t\t\t\tto keep this div for themes that might rely on its presence */ }\n\t\t\t{ ! layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...blockProps }>\n\t\t\t\t\t<div { ...innerBlocksProps } />\n\t\t\t\t</TagName>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default GroupEdit;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/group/transforms.mjs

@@ -1,5 +1,8 @@
 // packages/block-library/src/group/transforms.js
-import { createBlock } from "@wordpress/blocks";
+import {
+  createBlock,
+  __experimentalCloneSanitizedBlock
+} from "@wordpress/blocks";
 var transforms = {
   from: [
     {
@@ -15,13 +18,9 @@ var transforms = {
           },
           void 0
         );
-        const groupInnerBlocks = blocks.map((block) => {
-          return createBlock(
-            block.name,
-            block.attributes,
-            block.innerBlocks
-          );
-        });
+        const groupInnerBlocks = blocks.map(
+          (block) => __experimentalCloneSanitizedBlock(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 { createBlock } 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\treturn createBlock(\n\t\t\t\t\t\tblock.name,\n\t\t\t\t\t\tblock.attributes,\n\t\t\t\t\t\tblock.innerBlocks\n\t\t\t\t\t);\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,mBAAmB;AAE5B,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,IAAK,CAAE,UAAW;AACjD,iBAAO;AAAA,YACN,MAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM;AAAA,UACP;AAAA,QACD,CAAE;AAEF,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 {\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;",
   "names": []
 }

package/build-module/heading/edit.mjs

@@ -9,7 +9,7 @@ import {
 } from "@wordpress/block-editor";
 import { generateAnchor, setAnchor } from "./autogenerate-anchors.mjs";
 import useDeprecatedTextAlign from "../utils/deprecated-text-align-attributes.mjs";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function HeadingEdit(props) {
   const {
     attributes,
@@ -45,7 +45,14 @@ function HeadingEdit(props) {
     }
     setAnchor(clientId, anchor);
     return () => setAnchor(clientId, null);
-  }, [anchor, content, clientId, canGenerateAnchors]);
+  }, [
+    anchor,
+    content,
+    clientId,
+    canGenerateAnchors,
+    setAttributes,
+    __unstableMarkNextChangeAsNotPersistent
+  ]);
   const onContentChange = (value) => {
     const newAttrs = { content: value };
     if (canGenerateAnchors && (!anchor || !value || generateAnchor(clientId, content) === anchor)) {
@@ -53,7 +60,7 @@ function HeadingEdit(props) {
     }
     setAttributes(newAttrs);
   };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     RichText,
     {
       identifier: "content",
@@ -66,7 +73,7 @@ function HeadingEdit(props) {
       placeholder: placeholder || __("Heading"),
       ...blockProps
     }
-  ) });
+  );
 }
 var edit_default = HeadingEdit;
 export {

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}, [ anchor, content, clientId, canGenerateAnchors ] );\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<>\n\t\t\t<RichText\n\t\t\t\tidentifier=\"content\"\n\t\t\t\ttagName={ tagName }\n\t\t\t\tvalue={ content }\n\t\t\t\tonChange={ onContentChange }\n\t\t\t\tonMerge={ mergeBlocks }\n\t\t\t\tonReplace={ onReplace }\n\t\t\t\tonRemove={ () => onReplace( [] ) }\n\t\t\t\tplaceholder={ placeholder || __( 'Heading' ) }\n\t\t\t\t{ ...blockProps }\n\t\t\t/>\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;AAkEjC,mBACC,WADD;AAhEF,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,CAAE,QAAQ,SAAS,UAAU,kBAAmB,CAAE;AAErD,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,gCACC;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,GACD;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( [] ) }\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;",
   "names": []
 }

package/build-module/html/block.json

@@ -10,8 +10,7 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "raw",
-			"role": "content"
+			"role": "local"
 		}
 	},
 	"supports": {
@@ -21,6 +20,7 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"listView": true,
 		"customCSS": false,
 		"visibility": false
 	},

package/build-module/html/edit.mjs

@@ -1,12 +1,17 @@
 // packages/block-library/src/html/edit.js
 import { __ } from "@wordpress/i18n";
-import { useState } from "@wordpress/element";
+import { useEffect, useState } from "@wordpress/element";
 import {
   BlockControls,
   BlockIcon,
   InspectorControls,
-  useBlockProps
+  useBlockProps,
+  store as blockEditorStore,
+  privateApis as blockEditorPrivateApis
 } from "@wordpress/block-editor";
+import { parse, serialize, getBlockContent } from "@wordpress/blocks";
+import { useSelect, useDispatch, useRegistry } from "@wordpress/data";
+import deprecated from "@wordpress/deprecated";
 import {
   ToolbarButton,
   ToolbarGroup,
@@ -15,15 +20,61 @@ import {
   __experimentalVStack as VStack
 } from "@wordpress/components";
 import { code } from "@wordpress/icons";
-import Preview from "./preview.mjs";
+import { unlock } from "../lock-unlock.mjs";
 import HTMLEditModal from "./modal.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-function HTMLEdit({ attributes, setAttributes, isSelected }) {
+var { InnerContent } = unlock(blockEditorPrivateApis);
+function HTMLEdit({ clientId, attributes }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const registry = useRegistry();
+  const { updateBlock, replaceInnerBlocks } = useDispatch(blockEditorStore);
+  const content = useSelect(
+    (select) => {
+      const block = select(blockEditorStore).getBlock(clientId);
+      return block ? getBlockContent(block) : "";
+    },
+    [clientId]
+  );
   const blockProps = useBlockProps({
     className: "block-library-html__edit"
   });
-  if (!attributes.content?.trim()) {
+  const onUpdate = (nextContent) => {
+    if (nextContent === content) {
+      return;
+    }
+    const [parsedBlock] = parse(
+      `<!-- wp:html -->
+${nextContent}
+<!-- /wp:html -->`
+    );
+    const nextInnerBlocks = parsedBlock?.innerBlocks ?? [];
+    const prevInnerBlocks = registry.select(blockEditorStore).getBlocks(clientId);
+    const innerBlocksUnchanged = prevInnerBlocks.length === nextInnerBlocks.length && prevInnerBlocks.every(
+      (block, index) => serialize(block) === serialize(nextInnerBlocks[index])
+    );
+    registry.batch(() => {
+      updateBlock(clientId, {
+        innerContent: parsedBlock?.innerContent ?? (nextContent ? [nextContent] : [])
+      });
+      if (!innerBlocksUnchanged) {
+        replaceInnerBlocks(clientId, nextInnerBlocks, false);
+      }
+    });
+  };
+  useEffect(() => {
+    if (!attributes.content) {
+      return;
+    }
+    deprecated("The content attribute on the Custom HTML block", {
+      since: "7.1",
+      alternative: "inner content"
+    });
+    updateBlock(clientId, {
+      attributes: { content: void 0 },
+      innerContent: [attributes.content]
+    });
+  }, [attributes.content]);
+  if (!content?.trim()) {
     return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
       /* @__PURE__ */ jsx(
         Placeholder,
@@ -48,38 +99,31 @@ function HTMLEdit({ attributes, setAttributes, isSelected }) {
         HTMLEditModal,
         {
           onRequestClose: () => setIsModalOpen(false),
-          content: attributes.content,
-          setAttributes
+          content,
+          onUpdate
         }
       )
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
     /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => setIsModalOpen(true), children: __("Edit code") }) }) }),
-    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
-      VStack,
+    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(VStack, { className: "block-library-html__edit-code", expanded: true, children: /* @__PURE__ */ jsx(
+      Button,
       {
-        className: "block-editor-block-inspector-edit-contents",
-        expanded: true,
-        children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            className: "block-editor-block-inspector-edit-contents__button",
-            __next40pxDefaultSize: true,
-            variant: "secondary",
-            onClick: () => setIsModalOpen(true),
-            children: __("Edit code")
-          }
-        )
+        className: "block-library-html__edit-code-button",
+        __next40pxDefaultSize: true,
+        variant: "secondary",
+        onClick: () => setIsModalOpen(true),
+        children: __("Edit code")
       }
-    ) }),
-    /* @__PURE__ */ jsx(Preview, { content: attributes.content, isSelected }),
+    ) }) }),
+    /* @__PURE__ */ jsx(InnerContent, { clientId }),
     isModalOpen && /* @__PURE__ */ jsx(
       HTMLEditModal,
       {
         onRequestClose: () => setIsModalOpen(false),
-        content: attributes.content,
-        setAttributes
+        content,
+        onUpdate
       }
     )
   ] });

package/build-module/html/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/html/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInspectorControls,\n\tuseBlockProps,\n} from '@wordpress/block-editor';\nimport {\n\tToolbarButton,\n\tToolbarGroup,\n\tPlaceholder,\n\tButton,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { code } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Preview from './preview';\nimport HTMLEditModal from './modal';\n\nexport default function HTMLEdit( { attributes, setAttributes, isSelected } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'block-library-html__edit',\n\t} );\n\n\t// Show placeholder when content is empty\n\tif ( ! attributes.content?.trim() ) {\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<Placeholder\n\t\t\t\t\ticon={ <BlockIcon icon={ code } /> }\n\t\t\t\t\tlabel={ __( 'Custom HTML' ) }\n\t\t\t\t\tinstructions={ __(\n\t\t\t\t\t\t'Add custom HTML code and preview how it looks.'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Edit HTML' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</Placeholder>\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<HTMLEditModal\n\t\t\t\t\t\tonRequestClose={ () => setIsModalOpen( false ) }\n\t\t\t\t\t\tcontent={ attributes.content }\n\t\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton onClick={ () => setIsModalOpen( true ) }>\n\t\t\t\t\t\t{ __( 'Edit code' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<VStack\n\t\t\t\t\tclassName=\"block-editor-block-inspector-edit-contents\"\n\t\t\t\t\texpanded\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"block-editor-block-inspector-edit-contents__button\"\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Edit code' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</VStack>\n\t\t\t</InspectorControls>\n\t\t\t<Preview content={ attributes.content } isSelected={ isSelected } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<HTMLEditModal\n\t\t\t\t\tonRequestClose={ () => setIsModalOpen( false ) }\n\t\t\t\t\tcontent={ attributes.content }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,gBAAgB;AACzB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,YAAY;AAKrB,OAAO,aAAa;AACpB,OAAO,mBAAmB;AAWvB,SAES,KAFT;AATY,SAAR,SAA2B,EAAE,YAAY,eAAe,WAAW,GAAI;AAC7E,QAAM,CAAE,aAAa,cAAe,IAAI,SAAU,KAAM;AACxD,QAAM,aAAa,cAAe;AAAA,IACjC,WAAW;AAAA,EACZ,CAAE;AAGF,MAAK,CAAE,WAAW,SAAS,KAAK,GAAI;AACnC,WACC,qBAAC,SAAM,GAAG,YACT;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,MAAO,oBAAC,aAAU,MAAO,MAAO;AAAA,UAChC,OAAQ,GAAI,aAAc;AAAA,UAC1B,cAAe;AAAA,YACd;AAAA,UACD;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAQ;AAAA,cACR,SAAU,MAAM,eAAgB,IAAK;AAAA,cAEnC,aAAI,WAAY;AAAA;AAAA,UACnB;AAAA;AAAA,MACD;AAAA,MACE,eACD;AAAA,QAAC;AAAA;AAAA,UACA,gBAAiB,MAAM,eAAgB,KAAM;AAAA,UAC7C,SAAU,WAAW;AAAA,UACrB;AAAA;AAAA,MACD;AAAA,OAEF;AAAA,EAEF;AAEA,SACC,qBAAC,SAAM,GAAG,YACT;AAAA,wBAAC,iBACA,8BAAC,gBACA,8BAAC,iBAAc,SAAU,MAAM,eAAgB,IAAK,GACjD,aAAI,WAAY,GACnB,GACD,GACD;AAAA,IACA,oBAAC,qBACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,UAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,uBAAqB;AAAA,YACrB,SAAQ;AAAA,YACR,SAAU,MAAM,eAAgB,IAAK;AAAA,YAEnC,aAAI,WAAY;AAAA;AAAA,QACnB;AAAA;AAAA,IACD,GACD;AAAA,IACA,oBAAC,WAAQ,SAAU,WAAW,SAAU,YAA0B;AAAA,IAChE,eACD;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB,MAAM,eAAgB,KAAM;AAAA,QAC7C,SAAU,WAAW;AAAA,QACrB;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useState } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInspectorControls,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { parse, serialize, getBlockContent } from '@wordpress/blocks';\nimport { useSelect, useDispatch, useRegistry } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport {\n\tToolbarButton,\n\tToolbarGroup,\n\tPlaceholder,\n\tButton,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { code } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport HTMLEditModal from './modal';\n\nconst { InnerContent } = unlock( blockEditorPrivateApis );\n\nexport default function HTMLEdit( { clientId, attributes } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst registry = useRegistry();\n\tconst { updateBlock, replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst content = useSelect(\n\t\t( select ) => {\n\t\t\tconst block = select( blockEditorStore ).getBlock( clientId );\n\t\t\treturn block ? getBlockContent( block ) : '';\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'block-library-html__edit',\n\t} );\n\n\t// Re-parse the edited content: static HTML becomes the block's\n\t// `innerContent` fragments and `<!-- wp:* -->` delimited segments become\n\t// inner blocks mounted at their positions within the static markup.\n\tconst onUpdate = ( nextContent ) => {\n\t\tif ( nextContent === content ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst [ parsedBlock ] = parse(\n\t\t\t`<!-- wp:html -->\\n${ nextContent }\\n<!-- /wp:html -->`\n\t\t);\n\t\tconst nextInnerBlocks = parsedBlock?.innerBlocks ?? [];\n\t\tconst prevInnerBlocks = registry\n\t\t\t.select( blockEditorStore )\n\t\t\t.getBlocks( clientId );\n\t\t// Keep the existing inner blocks, and thereby their client IDs and\n\t\t// selection, when their markup is unchanged — e.g. when only the\n\t\t// surrounding static HTML was edited.\n\t\tconst innerBlocksUnchanged =\n\t\t\tprevInnerBlocks.length === nextInnerBlocks.length &&\n\t\t\tprevInnerBlocks.every(\n\t\t\t\t( block, index ) =>\n\t\t\t\t\tserialize( block ) === serialize( nextInnerBlocks[ index ] )\n\t\t\t);\n\n\t\tregistry.batch( () => {\n\t\t\tupdateBlock( clientId, {\n\t\t\t\tinnerContent:\n\t\t\t\t\tparsedBlock?.innerContent ??\n\t\t\t\t\t( nextContent ? [ nextContent ] : [] ),\n\t\t\t} );\n\t\t\tif ( ! innerBlocksUnchanged ) {\n\t\t\t\treplaceInnerBlocks( clientId, nextInnerBlocks, false );\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Migrate the deprecated `content` attribute. The block's markup now lives\n\t// in its inner content, but a block created via `createBlock( 'core/html',\n\t// { content } )` still arrives with a `content` attribute. As soon as it\n\t// loads, move that markup into the block's inner content and clear the\n\t// attribute.\n\tuseEffect( () => {\n\t\tif ( ! attributes.content ) {\n\t\t\treturn;\n\t\t}\n\n\t\tdeprecated( 'The content attribute on the Custom HTML block', {\n\t\t\tsince: '7.1',\n\t\t\talternative: 'inner content',\n\t\t} );\n\n\t\tupdateBlock( clientId, {\n\t\t\tattributes: { content: undefined },\n\t\t\tinnerContent: [ attributes.content ],\n\t\t} );\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ attributes.content ] );\n\n\t// Show placeholder when content is empty\n\tif ( ! content?.trim() ) {\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<Placeholder\n\t\t\t\t\ticon={ <BlockIcon icon={ code } /> }\n\t\t\t\t\tlabel={ __( 'Custom HTML' ) }\n\t\t\t\t\tinstructions={ __(\n\t\t\t\t\t\t'Add custom HTML code and preview how it looks.'\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Edit HTML' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</Placeholder>\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<HTMLEditModal\n\t\t\t\t\t\tonRequestClose={ () => setIsModalOpen( false ) }\n\t\t\t\t\t\tcontent={ content }\n\t\t\t\t\t\tonUpdate={ onUpdate }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t<ToolbarButton onClick={ () => setIsModalOpen( true ) }>\n\t\t\t\t\t\t{ __( 'Edit code' ) }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<VStack className=\"block-library-html__edit-code\" expanded>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"block-library-html__edit-code-button\"\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Edit code' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</VStack>\n\t\t\t</InspectorControls>\n\t\t\t<InnerContent clientId={ clientId } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<HTMLEditModal\n\t\t\t\t\tonRequestClose={ () => setIsModalOpen( false ) }\n\t\t\t\t\tcontent={ content }\n\t\t\t\t\tonUpdate={ onUpdate }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/html/index.mjs

@@ -10,9 +10,9 @@ var { name } = metadata;
 var settings = {
   icon,
   example: {
-    attributes: {
-      content: "<marquee>" + __("Welcome to the wonderful world of blocks…") + "</marquee>"
-    }
+    innerContent: [
+      "<marquee>" + __("Welcome to the wonderful world of blocks…") + "</marquee>"
+    ]
   },
   edit,
   save,

package/build-module/html/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/html/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { html as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\tcontent:\n\t\t\t\t'<marquee>' +\n\t\t\t\t__( 'Welcome to the wonderful world of blocks…' ) +\n\t\t\t\t'</marquee>',\n\t\t},\n\t},\n\tedit,\n\tsave,\n\ttransforms,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,QAAQ,YAAY;AAK7B,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AAEvB,IAAM,EAAE,KAAK,IAAI;AAIV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACR,YAAY;AAAA,MACX,SACC,cACA,GAAI,2CAA4C,IAChD;AAAA,IACF;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { html as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tinnerContent: [\n\t\t\t'<marquee>' +\n\t\t\t\t__( 'Welcome to the wonderful world of blocks…' ) +\n\t\t\t\t'</marquee>',\n\t\t],\n\t},\n\tedit,\n\tsave,\n\ttransforms,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,QAAQ,YAAY;AAK7B,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AAEvB,IAAM,EAAE,KAAK,IAAI;AAIV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACR,cAAc;AAAA,MACb,cACC,GAAI,2CAA4C,IAChD;AAAA,IACF;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
   "names": []
 }

package/build-module/html/modal.mjs

@@ -19,11 +19,7 @@ import Preview from "./preview.mjs";
 import { parseContent, serializeContent } from "./utils.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { Tabs } = unlock(componentsPrivateApis);
-function HTMLEditModal({
-  onRequestClose,
-  content,
-  setAttributes
-}) {
+function HTMLEditModal({ onRequestClose, content, onUpdate }) {
   const { html, css, js } = parseContent(content);
   const [editedHtml, setEditedHtml] = useState(html);
   const [editedCss, setEditedCss] = useState(css);
@@ -38,13 +34,13 @@ function HTMLEditModal({
   }, []);
   const hasRestrictedContent = !canUserUseUnfilteredHTML && (css.trim() || js.trim());
   const handleUpdate = () => {
-    setAttributes({
-      content: serializeContent({
+    onUpdate(
+      serializeContent({
         html: editedHtml,
         css: canUserUseUnfilteredHTML ? editedCss : "",
         js: canUserUseUnfilteredHTML ? editedJs : ""
       })
-    });
+    );
   };
   const handleUpdateAndClose = () => {
     handleUpdate();

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( {\n\tonRequestClose,\n\tcontent,\n\tsetAttributes,\n} ) {\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\tsetAttributes( {\n\t\t\tcontent: serializeContent( {\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 { 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": []
 }

package/build-module/html/save.mjs

@@ -1,8 +1,6 @@
 // packages/block-library/src/html/save.js
-import { RawHTML } from "@wordpress/element";
-import { jsx } from "react/jsx-runtime";
-function save({ attributes }) {
-  return /* @__PURE__ */ jsx(RawHTML, { children: attributes.content });
+function save() {
+  return null;
 }
 export {
   save as default

package/build-module/html/save.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/html/save.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { RawHTML } from '@wordpress/element';\n\nexport default function save( { attributes } ) {\n\treturn <RawHTML>{ attributes.content }</RawHTML>;\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe;AAGhB;AADO,SAAR,KAAuB,EAAE,WAAW,GAAI;AAC9C,SAAO,oBAAC,WAAU,qBAAW,SAAS;AACvC;",
+  "sourcesContent": ["// The block's markup is serialized from its `innerContent` (static HTML\n// fragments interleaved with inner blocks), not from a save implementation.\nexport default function save() {\n\treturn null;\n}\n"],
+  "mappings": ";AAEe,SAAR,OAAwB;AAC9B,SAAO;AACR;",
   "names": []
 }

package/build-module/html/transforms.mjs

@@ -1,5 +1,5 @@
 // packages/block-library/src/html/transforms.js
-import { createBlock } from "@wordpress/blocks";
+import { createBlock, parse } from "@wordpress/blocks";
 import { create } from "@wordpress/rich-text";
 var transforms = {
   from: [
@@ -7,11 +7,13 @@ var transforms = {
       type: "block",
       blocks: ["core/code"],
       transform: ({ content: html }) => {
-        return createBlock("core/html", {
-          // The code block may output HTML formatting, so convert it
-          // to plain text.
-          content: create({ html }).text
-        });
+        const text = create({ html }).text;
+        const [block] = parse(
+          `<!-- wp:html -->
+${text}
+<!-- /wp:html -->`
+        );
+        return block ?? createBlock("core/html", {}, [], [text]);
       }
     }
   ]

package/build-module/html/transforms.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/html/transforms.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\nimport { create } from '@wordpress/rich-text';\n\nconst transforms = {\n\tfrom: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/code' ],\n\t\t\ttransform: ( { content: html } ) => {\n\t\t\t\treturn createBlock( 'core/html', {\n\t\t\t\t\t// The code block may output HTML formatting, so convert it\n\t\t\t\t\t// to plain text.\n\t\t\t\t\tcontent: create( { html } ).text,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport default transforms;\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,IACL;AAAA,MACC,MAAM;AAAA,MACN,QAAQ,CAAE,WAAY;AAAA,MACtB,WAAW,CAAE,EAAE,SAAS,KAAK,MAAO;AACnC,eAAO,YAAa,aAAa;AAAA;AAAA;AAAA,UAGhC,SAAS,OAAQ,EAAE,KAAK,CAAE,EAAE;AAAA,QAC7B,CAAE;AAAA,MACH;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createBlock, parse } from '@wordpress/blocks';\nimport { create } from '@wordpress/rich-text';\n\nconst transforms = {\n\tfrom: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/code' ],\n\t\t\ttransform: ( { content: html } ) => {\n\t\t\t\t// The code block may output HTML formatting, so convert it\n\t\t\t\t// to plain text, then parse it so any block delimiters become\n\t\t\t\t// editable inner blocks at their positions within the static\n\t\t\t\t// HTML, rather than inert comment text.\n\t\t\t\tconst text = create( { html } ).text;\n\t\t\t\tconst [ block ] = parse(\n\t\t\t\t\t`<!-- wp:html -->\\n${ text }\\n<!-- /wp:html -->`\n\t\t\t\t);\n\n\t\t\t\treturn block ?? createBlock( 'core/html', {}, [], [ text ] );\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport default transforms;\n"],
+  "mappings": ";AAGA,SAAS,aAAa,aAAa;AACnC,SAAS,cAAc;AAEvB,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,IACL;AAAA,MACC,MAAM;AAAA,MACN,QAAQ,CAAE,WAAY;AAAA,MACtB,WAAW,CAAE,EAAE,SAAS,KAAK,MAAO;AAKnC,cAAM,OAAO,OAAQ,EAAE,KAAK,CAAE,EAAE;AAChC,cAAM,CAAE,KAAM,IAAI;AAAA,UACjB;AAAA,EAAsB,IAAK;AAAA;AAAA,QAC5B;AAEA,eAAO,SAAS,YAAa,aAAa,CAAC,GAAG,CAAC,GAAG,CAAE,IAAK,CAAE;AAAA,MAC5D;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
   "names": []
 }