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

package/build-module/hooks/block-fields/index.mjs

@@ -1,35 +1,30 @@
 // packages/block-editor/src/hooks/block-fields/index.js
-import { addFilter } from "@wordpress/hooks";
-import { privateApis as blocksPrivateApis } from "@wordpress/blocks";
+import {
+  privateApis as blocksPrivateApis,
+  getBlockType
+} from "@wordpress/blocks";
 import {
   __experimentalHStack as HStack,
   __experimentalTruncate as Truncate
 } from "@wordpress/components";
-import { createHigherOrderComponent } from "@wordpress/compose";
+import { useSelect } from "@wordpress/data";
 import { DataForm } from "@wordpress/dataviews";
 import { useContext, useState, useMemo } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
+import { store as blockEditorStore } from "../../store/index.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 import BlockIcon from "../../components/block-icon/index.mjs";
 import useBlockDisplayTitle from "../../components/block-title/use-block-display-title.mjs";
 import useBlockDisplayInformation from "../../components/use-block-display-information/index.mjs";
 import FieldsDropdownMenu from "./fields-dropdown-menu.mjs";
 import { PrivateBlockContext } from "../../components/block-list/private-block-context.mjs";
-import { PrivateInspectorControlsFill } from "../../components/inspector-controls/fill.mjs";
+import InspectorControls from "../../components/inspector-controls/fill.mjs";
 import RichText from "./rich-text/index.mjs";
 import Media from "./media/index.mjs";
 import Link from "./link/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var { fieldsKey, formKey } = unlock(blocksPrivateApis);
-var CONTROLS = {
-  richtext: RichText,
-  media: Media,
-  link: Link
-};
-function createConfiguredControl(ControlComponent, type, config) {
-  if (!ControlComponent) {
-    throw new Error(`Control type "${type}" not found`);
-  }
+function createConfiguredControl(ControlComponent, config = {}) {
   return function ConfiguredControl(props) {
     return /* @__PURE__ */ jsx(ControlComponent, { ...props, config });
   };
@@ -37,7 +32,6 @@ function createConfiguredControl(ControlComponent, type, config) {
 function BlockFields({
   clientId,
   blockType,
-  attributes,
   setAttributes,
   isCollapsed = false
 }) {
@@ -47,6 +41,10 @@ function BlockFields({
   });
   const blockInformation = useBlockDisplayInformation(clientId);
   const blockTypeFields = blockType?.[fieldsKey];
+  const attributes = useSelect(
+    (select) => select(blockEditorStore).getBlockAttributes(clientId),
+    [clientId]
+  );
   const computedForm = useMemo(() => {
     if (!isCollapsed) {
       return blockType?.[formKey];
@@ -63,41 +61,18 @@ function BlockFields({
     }
     return blockTypeFields.map((fieldDef) => {
       const field = {
-        id: fieldDef.id,
-        label: fieldDef.label,
-        type: fieldDef.type
-        // Use the field's type; DataForm will use built-in or custom Edit
+        ...fieldDef
       };
-      if (fieldDef.mapping) {
-        field.getValue = ({ item }) => {
-          const mappedValue = {};
-          Object.entries(fieldDef.mapping).forEach(
-            ([key, attrKey]) => {
-              mappedValue[key] = item[attrKey];
-            }
-          );
-          return mappedValue;
-        };
-        field.setValue = ({ value }) => {
-          const attributeUpdates = {};
-          Object.entries(fieldDef.mapping).forEach(
-            ([key, attrKey]) => {
-              attributeUpdates[attrKey] = value[key];
-            }
-          );
-          return attributeUpdates;
-        };
-      }
-      const ControlComponent = CONTROLS[fieldDef.type];
-      if (ControlComponent) {
-        field.Edit = createConfiguredControl(
-          ControlComponent,
-          fieldDef.type,
-          {
-            clientId,
-            fieldDef
-          }
-        );
+      if ("string" === typeof fieldDef.Edit && fieldDef.Edit === "rich-text") {
+        field.Edit = createConfiguredControl(RichText, {
+          clientId
+        });
+      } else if ("string" === typeof fieldDef.Edit && fieldDef.Edit === "link") {
+        field.Edit = createConfiguredControl(Link);
+      } else if ("object" === typeof fieldDef.Edit && fieldDef.Edit.control === "media") {
+        field.Edit = createConfiguredControl(Media, {
+          ...fieldDef.Edit
+        });
       }
       return field;
     });
@@ -152,45 +127,28 @@ function BlockFields({
     )
   ] });
 }
-var withBlockFields = createHigherOrderComponent(
-  (BlockEdit) => (props) => {
-    const {
+function hasBlockFieldsSupport(blockName) {
+  return !!(window?.__experimentalContentOnlyInspectorFields && getBlockType(blockName)?.[fieldsKey]);
+}
+function BlockFieldsPanel(props) {
+  const { blockType, isSelectionWithinCurrentSection } = useContext(PrivateBlockContext);
+  return /* @__PURE__ */ jsx(InspectorControls, { group: "content", children: /* @__PURE__ */ jsx(
+    BlockFields,
+    {
+      ...props,
       blockType,
-      isSelectionWithinCurrentSection,
-      isSectionBlock,
-      blockEditingMode,
-      isSelected
-    } = useContext(PrivateBlockContext);
-    const shouldShowBlockFields = window?.__experimentalContentOnlyInspectorFields;
-    const blockTypeFields = blockType?.[fieldsKey];
-    if (!shouldShowBlockFields || !blockTypeFields?.length) {
-      return /* @__PURE__ */ jsx(BlockEdit, { ...props }, "edit");
+      isCollapsed: isSelectionWithinCurrentSection
     }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(BlockEdit, { ...props }, "edit"),
-      // Display the controls of all inner blocks for section/pattern editing.
-      isSelectionWithinCurrentSection && (isSectionBlock || blockEditingMode === "contentOnly") && /* @__PURE__ */ jsx(
-        PrivateInspectorControlsFill,
-        {
-          group: "content",
-          forceDisplayControls: true,
-          children: /* @__PURE__ */ jsx(
-            BlockFields,
-            {
-              ...props,
-              blockType,
-              isCollapsed: true
-            }
-          )
-        }
-      ),
-      !isSelectionWithinCurrentSection && isSelected && /* @__PURE__ */ jsx(PrivateInspectorControlsFill, { group: "content", children: /* @__PURE__ */ jsx(BlockFields, { ...props, blockType }) })
-    ] });
-  }
-);
-addFilter(
-  "editor.BlockEdit",
-  "core/content-only-controls/block-fields",
-  withBlockFields
-);
+  ) });
+}
+var block_fields_default = {
+  edit: BlockFieldsPanel,
+  hasSupport: hasBlockFieldsSupport,
+  attributeKeys: [],
+  supportsPatternEditing: true
+};
+export {
+  BlockFieldsPanel,
+  block_fields_default as default
+};
 //# sourceMappingURL=index.mjs.map

package/build-module/hooks/block-fields/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/block-fields/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { privateApis as blocksPrivateApis } from '@wordpress/blocks';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { DataForm } from '@wordpress/dataviews';\nimport { useContext, useState, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport BlockIcon from '../../components/block-icon';\nimport useBlockDisplayTitle from '../../components/block-title/use-block-display-title';\nimport useBlockDisplayInformation from '../../components/use-block-display-information';\nconst { fieldsKey, formKey } = unlock( blocksPrivateApis );\nimport FieldsDropdownMenu from './fields-dropdown-menu';\nimport { PrivateBlockContext } from '../../components/block-list/private-block-context';\nimport { PrivateInspectorControlsFill } from '../../components/inspector-controls/fill';\n\n// controls\nimport RichText from './rich-text';\nimport Media from './media';\nimport Link from './link';\n\nconst CONTROLS = {\n\trichtext: RichText,\n\tmedia: Media,\n\tlink: Link,\n};\n\n/**\n * Creates a configured control component that wraps a custom control\n * and passes configuration as props.\n *\n * @param {Component} ControlComponent The React component for the control.\n * @param {string}    type             The type of control.\n * @param {Object}    config           The control configuration passed as a prop.\n *\n * @return {Function} A wrapped control component\n */\nfunction createConfiguredControl( ControlComponent, type, config ) {\n\tif ( ! ControlComponent ) {\n\t\tthrow new Error( `Control type \"${ type }\" not found` );\n\t}\n\n\treturn function ConfiguredControl( props ) {\n\t\treturn <ControlComponent { ...props } config={ config } />;\n\t};\n}\n\n/**\n * Component that renders a DataForm for a single block's attributes\n * @param {Object}   props\n * @param {string}   props.clientId      The clientId of the block.\n * @param {Object}   props.blockType     The blockType definition.\n * @param {Object}   props.attributes    The block's attribute values.\n * @param {Function} props.setAttributes Action to set the block's attributes.\n * @param {boolean}  props.isCollapsed   Whether the DataForm is rendered as 'collapsed' with only the first field\n *                                       displayed by default. When collapsed a dropdown is displayed to allow\n *                                       displaying additional fields. The block's title is displayed as the title.\n *                                       The collapsed mode is often used when multiple BlockForms are shown together.\n */\nfunction BlockFields( {\n\tclientId,\n\tblockType,\n\tattributes,\n\tsetAttributes,\n\tisCollapsed = false,\n} ) {\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\n\tconst blockTypeFields = blockType?.[ fieldsKey ];\n\n\tconst computedForm = useMemo( () => {\n\t\tif ( ! isCollapsed ) {\n\t\t\treturn blockType?.[ formKey ];\n\t\t}\n\n\t\t// For a collapsed form only show the first field by default.\n\t\treturn {\n\t\t\t...blockType?.[ formKey ],\n\t\t\tfields: [ blockType?.[ formKey ]?.fields?.[ 0 ] ],\n\t\t};\n\t}, [ blockType, isCollapsed ] );\n\n\tconst [ form, setForm ] = useState( computedForm );\n\n\t// Build DataForm fields with proper structure\n\tconst dataFormFields = useMemo( () => {\n\t\tif ( ! blockTypeFields?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn blockTypeFields.map( ( fieldDef ) => {\n\t\t\tconst field = {\n\t\t\t\tid: fieldDef.id,\n\t\t\t\tlabel: fieldDef.label,\n\t\t\t\ttype: fieldDef.type, // Use the field's type; DataForm will use built-in or custom Edit\n\t\t\t};\n\n\t\t\t// If the field defines a `mapping`, then custom `getValue` and `setValue`\n\t\t\t// implementations are provided.\n\t\t\t// These functions map from the inconsistent attribute keys found on blocks\n\t\t\t// to consistent keys that the field can use internally (and back again).\n\t\t\t// When `mapping` isn't provided, we can use the field API's default\n\t\t\t// implementation of these functions.\n\t\t\tif ( fieldDef.mapping ) {\n\t\t\t\tfield.getValue = ( { item } ) => {\n\t\t\t\t\t// Extract mapped properties from the block attributes\n\t\t\t\t\tconst mappedValue = {};\n\t\t\t\t\tObject.entries( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t( [ key, attrKey ] ) => {\n\t\t\t\t\t\t\tmappedValue[ key ] = item[ attrKey ];\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\treturn mappedValue;\n\t\t\t\t};\n\t\t\t\tfield.setValue = ( { value } ) => {\n\t\t\t\t\tconst attributeUpdates = {};\n\t\t\t\t\tObject.entries( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t( [ key, attrKey ] ) => {\n\t\t\t\t\t\t\tattributeUpdates[ attrKey ] = value[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\treturn attributeUpdates;\n\t\t\t\t};\n\t\t\t}\n\n\t\t\t// Only add custom Edit component if one exists for this type\n\t\t\tconst ControlComponent = CONTROLS[ fieldDef.type ];\n\t\t\tif ( ControlComponent ) {\n\t\t\t\t// Use EditConfig pattern: Edit is an object with control type and config props\n\t\t\t\tfield.Edit = createConfiguredControl(\n\t\t\t\t\tControlComponent,\n\t\t\t\t\tfieldDef.type,\n\t\t\t\t\t{\n\t\t\t\t\t\tclientId,\n\t\t\t\t\t\tfieldDef,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn field;\n\t\t} );\n\t}, [ blockTypeFields, clientId ] );\n\n\tif ( ! blockTypeFields?.length ) {\n\t\t// TODO - we might still want to show a placeholder for blocks with no fields.\n\t\t// for example, a way to select the block.\n\t\treturn null;\n\t}\n\n\tconst handleToggleField = ( fieldId ) => {\n\t\tsetForm( ( prev ) => {\n\t\t\tif ( prev.fields?.includes( fieldId ) ) {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\tfields: prev.fields.filter( ( id ) => id !== fieldId ),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...prev,\n\t\t\t\tfields: [ ...( prev.fields || [] ), fieldId ],\n\t\t\t};\n\t\t} );\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-block-fields__container\">\n\t\t\t<div className=\"block-editor-block-fields__header\">\n\t\t\t\t<HStack spacing={ 1 }>\n\t\t\t\t\t{ isCollapsed && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-fields__header-icon\"\n\t\t\t\t\t\t\t\ticon={ blockInformation?.icon }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<h2 className=\"block-editor-block-fields__header-title\">\n\t\t\t\t\t\t\t\t<Truncate numberOfLines={ 1 }>\n\t\t\t\t\t\t\t\t\t{ blockTitle }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t<FieldsDropdownMenu\n\t\t\t\t\t\t\t\tfields={ dataFormFields }\n\t\t\t\t\t\t\t\tvisibleFields={ form.fields }\n\t\t\t\t\t\t\t\tonToggleField={ handleToggleField }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isCollapsed && (\n\t\t\t\t\t\t<h2 className=\"block-editor-block-fields__header-title\">\n\t\t\t\t\t\t\t{ __( 'Content' ) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t\t<DataForm\n\t\t\t\tdata={ attributes }\n\t\t\t\tfields={ dataFormFields }\n\t\t\t\tform={ form }\n\t\t\t\tonChange={ setAttributes }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nconst withBlockFields = createHigherOrderComponent(\n\t( BlockEdit ) => ( props ) => {\n\t\tconst {\n\t\t\tblockType,\n\t\t\tisSelectionWithinCurrentSection,\n\t\t\tisSectionBlock,\n\t\t\tblockEditingMode,\n\t\t\tisSelected,\n\t\t} = useContext( PrivateBlockContext );\n\n\t\tconst shouldShowBlockFields =\n\t\t\twindow?.__experimentalContentOnlyInspectorFields;\n\t\tconst blockTypeFields = blockType?.[ fieldsKey ];\n\n\t\tif ( ! shouldShowBlockFields || ! blockTypeFields?.length ) {\n\t\t\treturn <BlockEdit key=\"edit\" { ...props } />;\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<BlockEdit key=\"edit\" { ...props } />\n\t\t\t\t{\n\t\t\t\t\t// Display the controls of all inner blocks for section/pattern editing.\n\t\t\t\t\tisSelectionWithinCurrentSection &&\n\t\t\t\t\t\t( isSectionBlock ||\n\t\t\t\t\t\t\tblockEditingMode === 'contentOnly' ) && (\n\t\t\t\t\t\t\t<PrivateInspectorControlsFill\n\t\t\t\t\t\t\t\tgroup=\"content\"\n\t\t\t\t\t\t\t\tforceDisplayControls\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BlockFields\n\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\tblockType={ blockType }\n\t\t\t\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</PrivateInspectorControlsFill>\n\t\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\t{ ! isSelectionWithinCurrentSection && isSelected && (\n\t\t\t\t\t<PrivateInspectorControlsFill group=\"content\">\n\t\t\t\t\t\t<BlockFields { ...props } blockType={ blockType } />\n\t\t\t\t\t</PrivateInspectorControlsFill>\n\t\t\t\t) }\n\t\t\t</>\n\t\t);\n\t}\n);\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/content-only-controls/block-fields',\n\twithBlockFields\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tprivateApis as blocksPrivateApis,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { DataForm } from '@wordpress/dataviews';\nimport { useContext, useState, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\nimport BlockIcon from '../../components/block-icon';\nimport useBlockDisplayTitle from '../../components/block-title/use-block-display-title';\nimport useBlockDisplayInformation from '../../components/use-block-display-information';\nconst { fieldsKey, formKey } = unlock( blocksPrivateApis );\nimport FieldsDropdownMenu from './fields-dropdown-menu';\nimport { PrivateBlockContext } from '../../components/block-list/private-block-context';\nimport InspectorControls from '../../components/inspector-controls/fill';\n\n// controls\nimport RichText from './rich-text';\nimport Media from './media';\nimport Link from './link';\n\n/**\n * Creates a configured control component that wraps a custom control\n * and passes configuration as props.\n *\n * @param {Component} ControlComponent The React component for the control.\n * @param {Object}    config           The control configuration passed as a prop.\n *\n * @return {Function} A wrapped control component\n */\nfunction createConfiguredControl( ControlComponent, config = {} ) {\n\treturn function ConfiguredControl( props ) {\n\t\treturn <ControlComponent { ...props } config={ config } />;\n\t};\n}\n\n/**\n * Component that renders a DataForm for a single block's attributes\n * @param {Object}   props\n * @param {string}   props.clientId      The clientId of the block.\n * @param {Object}   props.blockType     The blockType definition.\n * @param {Function} props.setAttributes Action to set the block's attributes.\n * @param {boolean}  props.isCollapsed   Whether the DataForm is rendered as 'collapsed' with only the first field\n *                                       displayed by default. When collapsed a dropdown is displayed to allow\n *                                       displaying additional fields. The block's title is displayed as the title.\n *                                       The collapsed mode is often used when multiple BlockForms are shown together.\n */\nfunction BlockFields( {\n\tclientId,\n\tblockType,\n\tsetAttributes,\n\tisCollapsed = false,\n} ) {\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\n\tconst blockTypeFields = blockType?.[ fieldsKey ];\n\n\tconst attributes = useSelect(\n\t\t( select ) => select( blockEditorStore ).getBlockAttributes( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tconst computedForm = useMemo( () => {\n\t\tif ( ! isCollapsed ) {\n\t\t\treturn blockType?.[ formKey ];\n\t\t}\n\n\t\t// For a collapsed form only show the first field by default.\n\t\treturn {\n\t\t\t...blockType?.[ formKey ],\n\t\t\tfields: [ blockType?.[ formKey ]?.fields?.[ 0 ] ],\n\t\t};\n\t}, [ blockType, isCollapsed ] );\n\n\tconst [ form, setForm ] = useState( computedForm );\n\n\t// Build DataForm fields with proper structure\n\tconst dataFormFields = useMemo( () => {\n\t\tif ( ! blockTypeFields?.length ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn blockTypeFields.map( ( fieldDef ) => {\n\t\t\tconst field = {\n\t\t\t\t...fieldDef,\n\t\t\t};\n\n\t\t\t// These should be custom Edit components, not replaced here.\n\t\t\t//\n\t\t\t// - rich-text control: it needs clientId\n\t\t\t// - link control: does not need anything extra\n\t\t\t// - media control: needs the Edit config\n\t\t\tif (\n\t\t\t\t'string' === typeof fieldDef.Edit &&\n\t\t\t\tfieldDef.Edit === 'rich-text'\n\t\t\t) {\n\t\t\t\tfield.Edit = createConfiguredControl( RichText, {\n\t\t\t\t\tclientId,\n\t\t\t\t} );\n\t\t\t} else if (\n\t\t\t\t'string' === typeof fieldDef.Edit &&\n\t\t\t\tfieldDef.Edit === 'link'\n\t\t\t) {\n\t\t\t\tfield.Edit = createConfiguredControl( Link );\n\t\t\t} else if (\n\t\t\t\t'object' === typeof fieldDef.Edit &&\n\t\t\t\tfieldDef.Edit.control === 'media'\n\t\t\t) {\n\t\t\t\tfield.Edit = createConfiguredControl( Media, {\n\t\t\t\t\t...fieldDef.Edit,\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\treturn field;\n\t\t} );\n\t}, [ blockTypeFields, clientId ] );\n\n\tif ( ! blockTypeFields?.length ) {\n\t\t// TODO - we might still want to show a placeholder for blocks with no fields.\n\t\t// for example, a way to select the block.\n\t\treturn null;\n\t}\n\n\tconst handleToggleField = ( fieldId ) => {\n\t\tsetForm( ( prev ) => {\n\t\t\tif ( prev.fields?.includes( fieldId ) ) {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\tfields: prev.fields.filter( ( id ) => id !== fieldId ),\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t...prev,\n\t\t\t\tfields: [ ...( prev.fields || [] ), fieldId ],\n\t\t\t};\n\t\t} );\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-block-fields__container\">\n\t\t\t<div className=\"block-editor-block-fields__header\">\n\t\t\t\t<HStack spacing={ 1 }>\n\t\t\t\t\t{ isCollapsed && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-fields__header-icon\"\n\t\t\t\t\t\t\t\ticon={ blockInformation?.icon }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<h2 className=\"block-editor-block-fields__header-title\">\n\t\t\t\t\t\t\t\t<Truncate numberOfLines={ 1 }>\n\t\t\t\t\t\t\t\t\t{ blockTitle }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t<FieldsDropdownMenu\n\t\t\t\t\t\t\t\tfields={ dataFormFields }\n\t\t\t\t\t\t\t\tvisibleFields={ form.fields }\n\t\t\t\t\t\t\t\tonToggleField={ handleToggleField }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! isCollapsed && (\n\t\t\t\t\t\t<h2 className=\"block-editor-block-fields__header-title\">\n\t\t\t\t\t\t\t{ __( 'Content' ) }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</div>\n\t\t\t<DataForm\n\t\t\t\tdata={ attributes }\n\t\t\t\tfields={ dataFormFields }\n\t\t\t\tform={ form }\n\t\t\t\tonChange={ setAttributes }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction hasBlockFieldsSupport( blockName ) {\n\treturn !! (\n\t\twindow?.__experimentalContentOnlyInspectorFields &&\n\t\tgetBlockType( blockName )?.[ fieldsKey ]\n\t);\n}\n\nexport function BlockFieldsPanel( props ) {\n\tconst { blockType, isSelectionWithinCurrentSection } =\n\t\tuseContext( PrivateBlockContext );\n\n\treturn (\n\t\t<InspectorControls group=\"content\">\n\t\t\t<BlockFields\n\t\t\t\t{ ...props }\n\t\t\t\tblockType={ blockType }\n\t\t\t\tisCollapsed={ isSelectionWithinCurrentSection }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Export block support definition.\n */\nexport default {\n\tedit: BlockFieldsPanel,\n\thasSupport: hasBlockFieldsSupport,\n\tattributeKeys: [],\n\tsupportsPatternEditing: true,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/hooks/block-fields/link/index.mjs

@@ -42,12 +42,11 @@ function getUpdatedLinkAttributes({
     rel: updatedRel || void 0
   };
 }
-function Link({ data, field, onChange, config = {} }) {
+function Link({ data, field, onChange }) {
   const [isLinkControlOpen, setIsLinkControlOpen] = useState(false);
   const { popoverProps } = useInspectorPopoverPlacement({
     isControl: true
   });
-  const { fieldDef } = config;
   const value = field.getValue({ item: data });
   const url = value?.url;
   const rel = value?.rel || "";
@@ -119,18 +118,10 @@ function Link({ data, field, onChange, config = {} }) {
               );
             },
             onRemove: () => {
-              const removeValue = {};
-              if (fieldDef?.mapping) {
-                Object.keys(fieldDef.mapping).forEach(
-                  (key) => {
-                    removeValue[key] = void 0;
-                  }
-                );
-              }
               onChange(
                 field.setValue({
                   item: data,
-                  value: removeValue
+                  value: {}
                 })
               );
             }

package/build-module/hooks/block-fields/link/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/hooks/block-fields/link/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalGrid as Grid,\n\tPopover,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { link } from '@wordpress/icons';\nimport { prependHTTP } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport LinkControl from '../../../components/link-control';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\n\nexport const NEW_TAB_REL = 'noreferrer noopener';\nexport const NEW_TAB_TARGET = '_blank';\nexport const NOFOLLOW_REL = 'nofollow';\n\n/**\n * Updates the link attributes.\n *\n * @param {Object}  attributes               The current block attributes.\n * @param {string}  attributes.rel           The current link rel attribute.\n * @param {string}  attributes.url           The current link url.\n * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.\n * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.\n */\nexport function getUpdatedLinkAttributes( {\n\trel = '',\n\turl = '',\n\topensInNewTab,\n\tnofollow,\n} ) {\n\tlet newLinkTarget;\n\t// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.\n\tlet updatedRel = rel;\n\n\tif ( opensInNewTab ) {\n\t\tnewLinkTarget = NEW_TAB_TARGET;\n\t\tupdatedRel = updatedRel?.includes( NEW_TAB_REL )\n\t\t\t? updatedRel\n\t\t\t: updatedRel + ` ${ NEW_TAB_REL }`;\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NEW_TAB_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\tif ( nofollow ) {\n\t\tupdatedRel = updatedRel?.includes( NOFOLLOW_REL )\n\t\t\t? updatedRel\n\t\t\t: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NOFOLLOW_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\treturn {\n\t\turl: prependHTTP( url ),\n\t\tlinkTarget: newLinkTarget,\n\t\trel: updatedRel || undefined,\n\t};\n}\n\nexport default function Link( { data, field, onChange, config = {} } ) {\n\tconst [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst { fieldDef } = config;\n\tconst value = field.getValue( { item: data } );\n\tconst url = value?.url;\n\tconst rel = value?.rel || '';\n\tconst target = value?.linkTarget;\n\n\tconst opensInNewTab = target === NEW_TAB_TARGET;\n\tconst nofollow = rel === NOFOLLOW_REL;\n\n\t// Memoize link value to avoid overriding the LinkControl's internal state.\n\t// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.\n\tconst linkValue = useMemo(\n\t\t() => ( { url, opensInNewTab, nofollow } ),\n\t\t[ url, opensInNewTab, nofollow ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"block-editor-content-only-controls__link\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsLinkControlOpen( true );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Grid\n\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__link-row\"\n\t\t\t\t>\n\t\t\t\t\t{ url && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon icon={ link } size={ 24 } />\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ url }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ link }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ { opacity: 0.3 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ __( 'Link' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</Grid>\n\t\t\t</Button>\n\t\t\t{ isLinkControlOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsLinkControlOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...( popoverProps ?? {} ) }\n\t\t\t\t>\n\t\t\t\t\t<LinkControl\n\t\t\t\t\t\tvalue={ linkValue }\n\t\t\t\t\t\tonChange={ ( newValues ) => {\n\t\t\t\t\t\t\tconst updatedAttrs = getUpdatedLinkAttributes( {\n\t\t\t\t\t\t\t\trel,\n\t\t\t\t\t\t\t\t...newValues,\n\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\t\tvalue: updatedAttrs,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\t// Remove all link-related properties based on what's in the mapping\n\t\t\t\t\t\t\tconst removeValue = {};\n\n\t\t\t\t\t\t\tif ( fieldDef?.mapping ) {\n\t\t\t\t\t\t\t\tObject.keys( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\t\t\t\tremoveValue[ key ] = undefined;\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}\n\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\t\tvalue: removeValue,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalGrid as Grid,\n\tPopover,\n} from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { link } from '@wordpress/icons';\nimport { prependHTTP } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport LinkControl from '../../../components/link-control';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\n\nexport const NEW_TAB_REL = 'noreferrer noopener';\nexport const NEW_TAB_TARGET = '_blank';\nexport const NOFOLLOW_REL = 'nofollow';\n\n/**\n * Updates the link attributes.\n *\n * @param {Object}  attributes               The current block attributes.\n * @param {string}  attributes.rel           The current link rel attribute.\n * @param {string}  attributes.url           The current link url.\n * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.\n * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.\n */\nexport function getUpdatedLinkAttributes( {\n\trel = '',\n\turl = '',\n\topensInNewTab,\n\tnofollow,\n} ) {\n\tlet newLinkTarget;\n\t// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.\n\tlet updatedRel = rel;\n\n\tif ( opensInNewTab ) {\n\t\tnewLinkTarget = NEW_TAB_TARGET;\n\t\tupdatedRel = updatedRel?.includes( NEW_TAB_REL )\n\t\t\t? updatedRel\n\t\t\t: updatedRel + ` ${ NEW_TAB_REL }`;\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NEW_TAB_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\tif ( nofollow ) {\n\t\tupdatedRel = updatedRel?.includes( NOFOLLOW_REL )\n\t\t\t? updatedRel\n\t\t\t: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();\n\t} else {\n\t\tconst relRegex = new RegExp( `\\\\b${ NOFOLLOW_REL }\\\\s*`, 'g' );\n\t\tupdatedRel = updatedRel?.replace( relRegex, '' ).trim();\n\t}\n\n\treturn {\n\t\turl: prependHTTP( url ),\n\t\tlinkTarget: newLinkTarget,\n\t\trel: updatedRel || undefined,\n\t};\n}\n\nexport default function Link( { data, field, onChange } ) {\n\tconst [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst value = field.getValue( { item: data } );\n\tconst url = value?.url;\n\tconst rel = value?.rel || '';\n\tconst target = value?.linkTarget;\n\n\tconst opensInNewTab = target === NEW_TAB_TARGET;\n\tconst nofollow = rel === NOFOLLOW_REL;\n\n\t// Memoize link value to avoid overriding the LinkControl's internal state.\n\t// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.\n\tconst linkValue = useMemo(\n\t\t() => ( { url, opensInNewTab, nofollow } ),\n\t\t[ url, opensInNewTab, nofollow ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"block-editor-content-only-controls__link\"\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tsetIsLinkControlOpen( true );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Grid\n\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__link-row\"\n\t\t\t\t>\n\t\t\t\t\t{ url && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon icon={ link } size={ 24 } />\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ url }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ link }\n\t\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\t\tstyle={ { opacity: 0.3 } }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__link-title\">\n\t\t\t\t\t\t\t\t{ __( 'Link' ) }\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</Grid>\n\t\t\t</Button>\n\t\t\t{ isLinkControlOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsLinkControlOpen( false );\n\t\t\t\t\t} }\n\t\t\t\t\t{ ...( popoverProps ?? {} ) }\n\t\t\t\t>\n\t\t\t\t\t<LinkControl\n\t\t\t\t\t\tvalue={ linkValue }\n\t\t\t\t\t\tonChange={ ( newValues ) => {\n\t\t\t\t\t\t\tconst updatedAttrs = getUpdatedLinkAttributes( {\n\t\t\t\t\t\t\t\trel,\n\t\t\t\t\t\t\t\t...newValues,\n\t\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\t\tvalue: updatedAttrs,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonRemove={ () => {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\t\tvalue: {},\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/hooks/block-fields/media/index.mjs

@@ -19,8 +19,7 @@ import { getMediaSelectKey } from "../../../store/private-keys.mjs";
 import { store as blockEditorStore } from "../../../store/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function MediaThumbnail({ data, field, attachment, config }) {
-  const { fieldDef } = config;
-  const { allowedTypes = [], multiple = false } = fieldDef.args || {};
+  const { allowedTypes = [], multiple = false } = config || {};
   if (multiple) {
     return "todo multiple";
   }
@@ -62,9 +61,11 @@ function Media({ data, field, onChange, config = {} }) {
     isControl: true
   });
   const value = field.getValue({ item: data });
-  const { fieldDef } = config;
-  const { allowedTypes = [], multiple = false } = fieldDef.args || {};
-  const hasFeaturedImageSupport = fieldDef?.mapping && "featuredImage" in fieldDef.mapping;
+  const {
+    allowedTypes = [],
+    multiple = false,
+    useFeaturedImage = false
+  } = config;
   const id = value?.id;
   const url = value?.url;
   const attachment = useSelect(
@@ -106,20 +107,14 @@ function Media({ data, field, onChange, config = {} }) {
       multiple,
       popoverProps,
       onReset: () => {
-        const resetValue = {};
-        if (fieldDef?.mapping) {
-          Object.keys(fieldDef.mapping).forEach((key) => {
-            resetValue[key] = void 0;
-          });
-        }
         onChange(
           field.setValue({
             item: data,
-            value: resetValue
+            value: {}
           })
         );
       },
-      ...hasFeaturedImageSupport && {
+      ...useFeaturedImage && {
         useFeaturedImage: !!value?.featuredImage,
         onToggleFeaturedImage: () => {
           onChange(
@@ -138,7 +133,7 @@ function Media({ data, field, onChange, config = {} }) {
             ...selectedMedia,
             mediaType: selectedMedia.media_type
           };
-          if (hasFeaturedImageSupport) {
+          if (useFeaturedImage) {
             newValue.featuredImage = false;
           }
           onChange(

package/build-module/hooks/block-fields/media/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/hooks/block-fields/media/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\taudio as audioIcon,\n\timage as imageIcon,\n\tmedia as mediaIcon,\n\tvideo as videoIcon,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport MediaReplaceFlow from '../../../components/media-replace-flow';\nimport MediaUploadCheck from '../../../components/media-upload/check';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\nimport { getMediaSelectKey } from '../../../store/private-keys';\nimport { store as blockEditorStore } from '../../../store';\n\nfunction MediaThumbnail( { data, field, attachment, config } ) {\n\tconst { fieldDef } = config;\n\tconst { allowedTypes = [], multiple = false } = fieldDef.args || {};\n\n\tif ( multiple ) {\n\t\treturn 'todo multiple';\n\t}\n\n\tif ( attachment?.media_type === 'image' || attachment?.poster ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-content-only-controls__media-thumbnail\">\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={ 24 }\n\t\t\t\t\theight={ 24 }\n\t\t\t\t\tsrc={\n\t\t\t\t\t\tattachment.media_type === 'image'\n\t\t\t\t\t\t\t? attachment.source_url\n\t\t\t\t\t\t\t: attachment.poster\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst value = field.getValue( { item: data } );\n\t\tconst url = value?.url;\n\n\t\tif ( allowedTypes[ 0 ] === 'image' && url ) {\n\t\t\treturn (\n\t\t\t\t<div className=\"block-editor-content-only-controls__media-thumbnail\">\n\t\t\t\t\t<img alt=\"\" width={ 24 } height={ 24 } src={ url } />\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\tlet icon;\n\t\tif ( allowedTypes[ 0 ] === 'image' ) {\n\t\t\ticon = imageIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'video' ) {\n\t\t\ticon = videoIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'audio' ) {\n\t\t\ticon = audioIcon;\n\t\t} else {\n\t\t\ticon = mediaIcon;\n\t\t}\n\n\t\tif ( icon ) {\n\t\t\treturn <Icon icon={ icon } size={ 24 } />;\n\t\t}\n\t}\n\n\treturn <Icon icon={ mediaIcon } size={ 24 } />;\n}\n\nexport default function Media( { data, field, onChange, config = {} } ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst value = field.getValue( { item: data } );\n\tconst { fieldDef } = config;\n\tconst { allowedTypes = [], multiple = false } = fieldDef.args || {};\n\n\t// Check if featured image is supported by checking if it's in the mapping\n\tconst hasFeaturedImageSupport =\n\t\tfieldDef?.mapping && 'featuredImage' in fieldDef.mapping;\n\n\tconst id = value?.id;\n\tconst url = value?.url;\n\n\tconst attachment = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst getMedia = settings[ getMediaSelectKey ];\n\n\t\t\tif ( ! getMedia ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\treturn getMedia( select, id );\n\t\t},\n\t\t[ id ]\n\t);\n\n\t// TODO - pluralize when multiple.\n\tlet chooseItemLabel;\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst allowedType = allowedTypes[ 0 ];\n\t\tif ( allowedType === 'image' ) {\n\t\t\tchooseItemLabel = __( 'Choose an image\u2026' );\n\t\t} else if ( allowedType === 'video' ) {\n\t\t\tchooseItemLabel = __( 'Choose a video\u2026' );\n\t\t} else if ( allowedType === 'application' ) {\n\t\t\tchooseItemLabel = __( 'Choose a file\u2026' );\n\t\t} else {\n\t\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t\t}\n\t} else {\n\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t}\n\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaReplaceFlow\n\t\t\t\tclassName=\"block-editor-content-only-controls__media-replace-flow\"\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\t// Build reset value dynamically based on mapping\n\t\t\t\t\tconst resetValue = {};\n\n\t\t\t\t\tif ( fieldDef?.mapping ) {\n\t\t\t\t\t\tObject.keys( fieldDef.mapping ).forEach( ( key ) => {\n\t\t\t\t\t\t\tresetValue[ key ] = undefined;\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\tvalue: resetValue,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\t{ ...( hasFeaturedImageSupport && {\n\t\t\t\t\tuseFeaturedImage: !! value?.featuredImage,\n\t\t\t\t\tonToggleFeaturedImage: () => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\tvalue: {\n\t\t\t\t\t\t\t\t\tfeaturedImage: ! value?.featuredImage,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t\tonSelect={ ( selectedMedia ) => {\n\t\t\t\t\tif ( selectedMedia.id && selectedMedia.url ) {\n\t\t\t\t\t\t// Build new value dynamically based on what's in the mapping\n\t\t\t\t\t\tconst newValue = {\n\t\t\t\t\t\t\t...selectedMedia,\n\t\t\t\t\t\t\tmediaType: selectedMedia.media_type,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\t// Turn off featured image when manually selecting media\n\t\t\t\t\t\tif ( hasFeaturedImageSupport ) {\n\t\t\t\t\t\t\tnewValue.featuredImage = false;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\trenderToggle={ ( buttonProps ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media\"\n\t\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-row\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<MediaThumbnail\n\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\t\tconfig={ config }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t// TODO - truncate long titles or url smartly (e.g. show filename).\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw &&\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t? attachment?.title?.raw\n\t\t\t\t\t\t\t\t\t\t\t\t: url\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-placeholder\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\theight: '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\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{ chooseItemLabel }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</MediaUploadCheck>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\taudio as audioIcon,\n\timage as imageIcon,\n\tmedia as mediaIcon,\n\tvideo as videoIcon,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport MediaReplaceFlow from '../../../components/media-replace-flow';\nimport MediaUploadCheck from '../../../components/media-upload/check';\nimport { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';\nimport { getMediaSelectKey } from '../../../store/private-keys';\nimport { store as blockEditorStore } from '../../../store';\n\nfunction MediaThumbnail( { data, field, attachment, config } ) {\n\tconst { allowedTypes = [], multiple = false } = config || {};\n\n\tif ( multiple ) {\n\t\treturn 'todo multiple';\n\t}\n\n\tif ( attachment?.media_type === 'image' || attachment?.poster ) {\n\t\treturn (\n\t\t\t<div className=\"block-editor-content-only-controls__media-thumbnail\">\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={ 24 }\n\t\t\t\t\theight={ 24 }\n\t\t\t\t\tsrc={\n\t\t\t\t\t\tattachment.media_type === 'image'\n\t\t\t\t\t\t\t? attachment.source_url\n\t\t\t\t\t\t\t: attachment.poster\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst value = field.getValue( { item: data } );\n\t\tconst url = value?.url;\n\n\t\tif ( allowedTypes[ 0 ] === 'image' && url ) {\n\t\t\treturn (\n\t\t\t\t<div className=\"block-editor-content-only-controls__media-thumbnail\">\n\t\t\t\t\t<img alt=\"\" width={ 24 } height={ 24 } src={ url } />\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\tlet icon;\n\t\tif ( allowedTypes[ 0 ] === 'image' ) {\n\t\t\ticon = imageIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'video' ) {\n\t\t\ticon = videoIcon;\n\t\t} else if ( allowedTypes[ 0 ] === 'audio' ) {\n\t\t\ticon = audioIcon;\n\t\t} else {\n\t\t\ticon = mediaIcon;\n\t\t}\n\n\t\tif ( icon ) {\n\t\t\treturn <Icon icon={ icon } size={ 24 } />;\n\t\t}\n\t}\n\n\treturn <Icon icon={ mediaIcon } size={ 24 } />;\n}\n\nexport default function Media( { data, field, onChange, config = {} } ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst value = field.getValue( { item: data } );\n\tconst {\n\t\tallowedTypes = [],\n\t\tmultiple = false,\n\t\tuseFeaturedImage = false,\n\t} = config;\n\n\tconst id = value?.id;\n\tconst url = value?.url;\n\n\tconst attachment = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\t\tconst getMedia = settings[ getMediaSelectKey ];\n\n\t\t\tif ( ! getMedia ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\treturn getMedia( select, id );\n\t\t},\n\t\t[ id ]\n\t);\n\n\t// TODO - pluralize when multiple.\n\tlet chooseItemLabel;\n\tif ( allowedTypes.length === 1 ) {\n\t\tconst allowedType = allowedTypes[ 0 ];\n\t\tif ( allowedType === 'image' ) {\n\t\t\tchooseItemLabel = __( 'Choose an image\u2026' );\n\t\t} else if ( allowedType === 'video' ) {\n\t\t\tchooseItemLabel = __( 'Choose a video\u2026' );\n\t\t} else if ( allowedType === 'application' ) {\n\t\t\tchooseItemLabel = __( 'Choose a file\u2026' );\n\t\t} else {\n\t\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t\t}\n\t} else {\n\t\tchooseItemLabel = __( 'Choose a media item\u2026' );\n\t}\n\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<MediaReplaceFlow\n\t\t\t\tclassName=\"block-editor-content-only-controls__media-replace-flow\"\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\tvalue: {},\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t\t{ ...( useFeaturedImage && {\n\t\t\t\t\tuseFeaturedImage: !! value?.featuredImage,\n\t\t\t\t\tonToggleFeaturedImage: () => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\tvalue: {\n\t\t\t\t\t\t\t\t\tfeaturedImage: ! value?.featuredImage,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t\tonSelect={ ( selectedMedia ) => {\n\t\t\t\t\tif ( selectedMedia.id && selectedMedia.url ) {\n\t\t\t\t\t\tconst newValue = {\n\t\t\t\t\t\t\t...selectedMedia,\n\t\t\t\t\t\t\tmediaType: selectedMedia.media_type,\n\t\t\t\t\t\t};\n\n\t\t\t\t\t\t// Turn off featured image when manually selecting media\n\t\t\t\t\t\tif ( useFeaturedImage ) {\n\t\t\t\t\t\t\tnewValue.featuredImage = false;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tfield.setValue( {\n\t\t\t\t\t\t\t\titem: data,\n\t\t\t\t\t\t\t\tvalue: newValue,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t\trenderToggle={ ( buttonProps ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media\"\n\t\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-row\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<MediaThumbnail\n\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\t\t\t\tconfig={ config }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t// TODO - truncate long titles or url smartly (e.g. show filename).\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw &&\n\t\t\t\t\t\t\t\t\t\t\tattachment?.title?.raw !== ''\n\t\t\t\t\t\t\t\t\t\t\t\t? attachment?.title?.raw\n\t\t\t\t\t\t\t\t\t\t\t\t: url\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ ! url && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-placeholder\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\theight: '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\t<span className=\"block-editor-content-only-controls__media-title\">\n\t\t\t\t\t\t\t\t\t\t{ chooseItemLabel }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</Grid>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</MediaUploadCheck>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/hooks/cross-origin-isolation.mjs

@@ -74,7 +74,7 @@ if (window.crossOriginIsolated) {
 if (window.crossOriginIsolated) {
   const supportsCredentialless = "credentialless" in window.HTMLIFrameElement.prototype;
   const disableEmbedPreviews = createHigherOrderComponent(
-    (BlockEdit) => (props) => {
+    (BlockEdit) => function DisableEmbedPreviews(props) {
       if ("core/embed" !== props.name) {
         return /* @__PURE__ */ jsx(BlockEdit, { ...props });
       }

package/build-module/hooks/cross-origin-isolation.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/hooks/cross-origin-isolation.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Adds crossorigin and credentialless attributes to elements as needed.\n *\n * @param {Element} el The element to modify.\n */\nfunction addCrossOriginAttributes( el ) {\n\t// Add the crossorigin attribute if missing.\n\tif ( ! el.hasAttribute( 'crossorigin' ) ) {\n\t\tel.setAttribute( 'crossorigin', 'anonymous' );\n\t}\n\n\t// For iframes, add the credentialless attribute.\n\tif ( el.nodeName === 'IFRAME' && ! el.hasAttribute( 'credentialless' ) ) {\n\t\t// Do not modify the iframed editor canvas.\n\t\tif ( el.getAttribute( 'src' )?.startsWith( 'blob:' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tel.setAttribute( 'credentialless', '' );\n\n\t\t// Reload the iframe to ensure the new attribute is taken into account.\n\t\tconst origSrc = el.getAttribute( 'src' ) || '';\n\t\tel.setAttribute( 'src', '' );\n\t\tel.setAttribute( 'src', origSrc );\n\t}\n}\n\n// Only add the mutation observer if the site is cross-origin isolated.\nif ( window.crossOriginIsolated ) {\n\t/*\n\t * Detects dynamically added DOM nodes that are missing the `crossorigin` attribute.\n\t */\n\tconst observer = new window.MutationObserver( ( mutations ) => {\n\t\tmutations.forEach( ( mutation ) => {\n\t\t\t[ mutation.addedNodes, mutation.target ].forEach( ( value ) => {\n\t\t\t\tconst nodes =\n\t\t\t\t\tvalue instanceof window.NodeList ? value : [ value ];\n\t\t\t\tnodes.forEach( ( node ) => {\n\t\t\t\t\tconst el = node;\n\n\t\t\t\t\tif ( ! el.querySelectorAll ) {\n\t\t\t\t\t\t// Most likely a text node.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tel.querySelectorAll(\n\t\t\t\t\t\t'img,source,script,video,link,iframe'\n\t\t\t\t\t).forEach( ( v ) => {\n\t\t\t\t\t\taddCrossOriginAttributes( v );\n\t\t\t\t\t} );\n\n\t\t\t\t\tif ( el.nodeName === 'IFRAME' ) {\n\t\t\t\t\t\tconst iframeNode = el;\n\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * Sandboxed iframes should not get modified. For example embedding a tweet served in a sandboxed\n\t\t\t\t\t\t * iframe, the tweet itself would not be modified.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst isEmbedSandboxIframe =\n\t\t\t\t\t\t\tiframeNode.classList.contains(\n\t\t\t\t\t\t\t\t'components-sandbox'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( ! isEmbedSandboxIframe ) {\n\t\t\t\t\t\t\tiframeNode.addEventListener( 'load', () => {\n\t\t\t\t\t\t\t\tif ( iframeNode.contentDocument ) {\n\t\t\t\t\t\t\t\t\tobserver.observe(\n\t\t\t\t\t\t\t\t\t\tiframeNode.contentDocument,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tchildList: true,\n\t\t\t\t\t\t\t\t\t\t\tattributes: true,\n\t\t\t\t\t\t\t\t\t\t\tsubtree: true,\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}\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t'IMG',\n\t\t\t\t\t\t\t'SOURCE',\n\t\t\t\t\t\t\t'SCRIPT',\n\t\t\t\t\t\t\t'VIDEO',\n\t\t\t\t\t\t\t'LINK',\n\t\t\t\t\t\t\t'IFRAME',\n\t\t\t\t\t\t].includes( el.nodeName )\n\t\t\t\t\t) {\n\t\t\t\t\t\taddCrossOriginAttributes( el );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t} );\n\t\t} );\n\t} );\n\n\tobserver.observe( document.body, {\n\t\tchildList: true,\n\t\tattributes: true,\n\t\tsubtree: true,\n\t} );\n}\n\n// Only apply the embed preview filter when cross-origin isolated.\nif ( window.crossOriginIsolated ) {\n\tconst supportsCredentialless =\n\t\t'credentialless' in window.HTMLIFrameElement.prototype;\n\n\tconst disableEmbedPreviews = createHigherOrderComponent(\n\t\t( BlockEdit ) => ( props ) => {\n\t\t\tif ( 'core/embed' !== props.name ) {\n\t\t\t\treturn <BlockEdit { ...props } />;\n\t\t\t}\n\n\t\t\t// List of embeds that do not support a preview is from packages/block-library/src/embed/variations.js.\n\t\t\tconst previewable =\n\t\t\t\tsupportsCredentialless &&\n\t\t\t\t! [ 'facebook', 'smugmug' ].includes(\n\t\t\t\t\tprops.attributes.providerNameSlug\n\t\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<BlockEdit\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tattributes={ { ...props.attributes, previewable } }\n\t\t\t\t/>\n\t\t\t);\n\t\t},\n\t\t'withDisabledEmbedPreview'\n\t);\n\n\taddFilter(\n\t\t'editor.BlockEdit',\n\t\t'media-experiments/disable-embed-previews',\n\t\tdisableEmbedPreviews\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAiHhC;AA1GX,SAAS,yBAA0B,IAAK;AAEvC,MAAK,CAAE,GAAG,aAAc,aAAc,GAAI;AACzC,OAAG,aAAc,eAAe,WAAY;AAAA,EAC7C;AAGA,MAAK,GAAG,aAAa,YAAY,CAAE,GAAG,aAAc,gBAAiB,GAAI;AAExE,QAAK,GAAG,aAAc,KAAM,GAAG,WAAY,OAAQ,GAAI;AACtD;AAAA,IACD;AAEA,OAAG,aAAc,kBAAkB,EAAG;AAGtC,UAAM,UAAU,GAAG,aAAc,KAAM,KAAK;AAC5C,OAAG,aAAc,OAAO,EAAG;AAC3B,OAAG,aAAc,OAAO,OAAQ;AAAA,EACjC;AACD;AAGA,IAAK,OAAO,qBAAsB;AAIjC,QAAM,WAAW,IAAI,OAAO,iBAAkB,CAAE,cAAe;AAC9D,cAAU,QAAS,CAAE,aAAc;AAClC,OAAE,SAAS,YAAY,SAAS,MAAO,EAAE,QAAS,CAAE,UAAW;AAC9D,cAAM,QACL,iBAAiB,OAAO,WAAW,QAAQ,CAAE,KAAM;AACpD,cAAM,QAAS,CAAE,SAAU;AAC1B,gBAAM,KAAK;AAEX,cAAK,CAAE,GAAG,kBAAmB;AAE5B;AAAA,UACD;AAEA,aAAG;AAAA,YACF;AAAA,UACD,EAAE,QAAS,CAAE,MAAO;AACnB,qCAA0B,CAAE;AAAA,UAC7B,CAAE;AAEF,cAAK,GAAG,aAAa,UAAW;AAC/B,kBAAM,aAAa;AAMnB,kBAAM,uBACL,WAAW,UAAU;AAAA,cACpB;AAAA,YACD;AAED,gBAAK,CAAE,sBAAuB;AAC7B,yBAAW,iBAAkB,QAAQ,MAAM;AAC1C,oBAAK,WAAW,iBAAkB;AACjC,2BAAS;AAAA,oBACR,WAAW;AAAA,oBACX;AAAA,sBACC,WAAW;AAAA,sBACX,YAAY;AAAA,sBACZ,SAAS;AAAA,oBACV;AAAA,kBACD;AAAA,gBACD;AAAA,cACD,CAAE;AAAA,YACH;AAAA,UACD;AAEA,cACC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD,EAAE,SAAU,GAAG,QAAS,GACvB;AACD,qCAA0B,EAAG;AAAA,UAC9B;AAAA,QACD,CAAE;AAAA,MACH,CAAE;AAAA,IACH,CAAE;AAAA,EACH,CAAE;AAEF,WAAS,QAAS,SAAS,MAAM;AAAA,IAChC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,EACV,CAAE;AACH;AAGA,IAAK,OAAO,qBAAsB;AACjC,QAAM,yBACL,oBAAoB,OAAO,kBAAkB;AAE9C,QAAM,uBAAuB;AAAA,IAC5B,CAAE,cAAe,CAAE,UAAW;AAC7B,UAAK,iBAAiB,MAAM,MAAO;AAClC,eAAO,oBAAC,aAAY,GAAG,OAAQ;AAAA,MAChC;AAGA,YAAM,cACL,0BACA,CAAE,CAAE,YAAY,SAAU,EAAE;AAAA,QAC3B,MAAM,WAAW;AAAA,MAClB;AAED,aACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACL,YAAa,EAAE,GAAG,MAAM,YAAY,YAAY;AAAA;AAAA,MACjD;AAAA,IAEF;AAAA,IACA;AAAA,EACD;AAEA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\n/**\n * Adds crossorigin and credentialless attributes to elements as needed.\n *\n * @param {Element} el The element to modify.\n */\nfunction addCrossOriginAttributes( el ) {\n\t// Add the crossorigin attribute if missing.\n\tif ( ! el.hasAttribute( 'crossorigin' ) ) {\n\t\tel.setAttribute( 'crossorigin', 'anonymous' );\n\t}\n\n\t// For iframes, add the credentialless attribute.\n\tif ( el.nodeName === 'IFRAME' && ! el.hasAttribute( 'credentialless' ) ) {\n\t\t// Do not modify the iframed editor canvas.\n\t\tif ( el.getAttribute( 'src' )?.startsWith( 'blob:' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tel.setAttribute( 'credentialless', '' );\n\n\t\t// Reload the iframe to ensure the new attribute is taken into account.\n\t\tconst origSrc = el.getAttribute( 'src' ) || '';\n\t\tel.setAttribute( 'src', '' );\n\t\tel.setAttribute( 'src', origSrc );\n\t}\n}\n\n// Only add the mutation observer if the site is cross-origin isolated.\nif ( window.crossOriginIsolated ) {\n\t/*\n\t * Detects dynamically added DOM nodes that are missing the `crossorigin` attribute.\n\t */\n\tconst observer = new window.MutationObserver( ( mutations ) => {\n\t\tmutations.forEach( ( mutation ) => {\n\t\t\t[ mutation.addedNodes, mutation.target ].forEach( ( value ) => {\n\t\t\t\tconst nodes =\n\t\t\t\t\tvalue instanceof window.NodeList ? value : [ value ];\n\t\t\t\tnodes.forEach( ( node ) => {\n\t\t\t\t\tconst el = node;\n\n\t\t\t\t\tif ( ! el.querySelectorAll ) {\n\t\t\t\t\t\t// Most likely a text node.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tel.querySelectorAll(\n\t\t\t\t\t\t'img,source,script,video,link,iframe'\n\t\t\t\t\t).forEach( ( v ) => {\n\t\t\t\t\t\taddCrossOriginAttributes( v );\n\t\t\t\t\t} );\n\n\t\t\t\t\tif ( el.nodeName === 'IFRAME' ) {\n\t\t\t\t\t\tconst iframeNode = el;\n\n\t\t\t\t\t\t/*\n\t\t\t\t\t\t * Sandboxed iframes should not get modified. For example embedding a tweet served in a sandboxed\n\t\t\t\t\t\t * iframe, the tweet itself would not be modified.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst isEmbedSandboxIframe =\n\t\t\t\t\t\t\tiframeNode.classList.contains(\n\t\t\t\t\t\t\t\t'components-sandbox'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( ! isEmbedSandboxIframe ) {\n\t\t\t\t\t\t\tiframeNode.addEventListener( 'load', () => {\n\t\t\t\t\t\t\t\tif ( iframeNode.contentDocument ) {\n\t\t\t\t\t\t\t\t\tobserver.observe(\n\t\t\t\t\t\t\t\t\t\tiframeNode.contentDocument,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tchildList: true,\n\t\t\t\t\t\t\t\t\t\t\tattributes: true,\n\t\t\t\t\t\t\t\t\t\t\tsubtree: true,\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}\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t'IMG',\n\t\t\t\t\t\t\t'SOURCE',\n\t\t\t\t\t\t\t'SCRIPT',\n\t\t\t\t\t\t\t'VIDEO',\n\t\t\t\t\t\t\t'LINK',\n\t\t\t\t\t\t\t'IFRAME',\n\t\t\t\t\t\t].includes( el.nodeName )\n\t\t\t\t\t) {\n\t\t\t\t\t\taddCrossOriginAttributes( el );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t} );\n\t\t} );\n\t} );\n\n\tobserver.observe( document.body, {\n\t\tchildList: true,\n\t\tattributes: true,\n\t\tsubtree: true,\n\t} );\n}\n\n// Only apply the embed preview filter when cross-origin isolated.\nif ( window.crossOriginIsolated ) {\n\tconst supportsCredentialless =\n\t\t'credentialless' in window.HTMLIFrameElement.prototype;\n\n\tconst disableEmbedPreviews = createHigherOrderComponent(\n\t\t( BlockEdit ) =>\n\t\t\tfunction DisableEmbedPreviews( props ) {\n\t\t\t\tif ( 'core/embed' !== props.name ) {\n\t\t\t\t\treturn <BlockEdit { ...props } />;\n\t\t\t\t}\n\n\t\t\t\t// List of embeds that do not support a preview is from packages/block-library/src/embed/variations.js.\n\t\t\t\tconst previewable =\n\t\t\t\t\tsupportsCredentialless &&\n\t\t\t\t\t! [ 'facebook', 'smugmug' ].includes(\n\t\t\t\t\t\tprops.attributes.providerNameSlug\n\t\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<BlockEdit\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tattributes={ { ...props.attributes, previewable } }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t},\n\t\t'withDisabledEmbedPreview'\n\t);\n\n\taddFilter(\n\t\t'editor.BlockEdit',\n\t\t'media-experiments/disable-embed-previews',\n\t\tdisableEmbedPreviews\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAkH/B;AA3GZ,SAAS,yBAA0B,IAAK;AAEvC,MAAK,CAAE,GAAG,aAAc,aAAc,GAAI;AACzC,OAAG,aAAc,eAAe,WAAY;AAAA,EAC7C;AAGA,MAAK,GAAG,aAAa,YAAY,CAAE,GAAG,aAAc,gBAAiB,GAAI;AAExE,QAAK,GAAG,aAAc,KAAM,GAAG,WAAY,OAAQ,GAAI;AACtD;AAAA,IACD;AAEA,OAAG,aAAc,kBAAkB,EAAG;AAGtC,UAAM,UAAU,GAAG,aAAc,KAAM,KAAK;AAC5C,OAAG,aAAc,OAAO,EAAG;AAC3B,OAAG,aAAc,OAAO,OAAQ;AAAA,EACjC;AACD;AAGA,IAAK,OAAO,qBAAsB;AAIjC,QAAM,WAAW,IAAI,OAAO,iBAAkB,CAAE,cAAe;AAC9D,cAAU,QAAS,CAAE,aAAc;AAClC,OAAE,SAAS,YAAY,SAAS,MAAO,EAAE,QAAS,CAAE,UAAW;AAC9D,cAAM,QACL,iBAAiB,OAAO,WAAW,QAAQ,CAAE,KAAM;AACpD,cAAM,QAAS,CAAE,SAAU;AAC1B,gBAAM,KAAK;AAEX,cAAK,CAAE,GAAG,kBAAmB;AAE5B;AAAA,UACD;AAEA,aAAG;AAAA,YACF;AAAA,UACD,EAAE,QAAS,CAAE,MAAO;AACnB,qCAA0B,CAAE;AAAA,UAC7B,CAAE;AAEF,cAAK,GAAG,aAAa,UAAW;AAC/B,kBAAM,aAAa;AAMnB,kBAAM,uBACL,WAAW,UAAU;AAAA,cACpB;AAAA,YACD;AAED,gBAAK,CAAE,sBAAuB;AAC7B,yBAAW,iBAAkB,QAAQ,MAAM;AAC1C,oBAAK,WAAW,iBAAkB;AACjC,2BAAS;AAAA,oBACR,WAAW;AAAA,oBACX;AAAA,sBACC,WAAW;AAAA,sBACX,YAAY;AAAA,sBACZ,SAAS;AAAA,oBACV;AAAA,kBACD;AAAA,gBACD;AAAA,cACD,CAAE;AAAA,YACH;AAAA,UACD;AAEA,cACC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD,EAAE,SAAU,GAAG,QAAS,GACvB;AACD,qCAA0B,EAAG;AAAA,UAC9B;AAAA,QACD,CAAE;AAAA,MACH,CAAE;AAAA,IACH,CAAE;AAAA,EACH,CAAE;AAEF,WAAS,QAAS,SAAS,MAAM;AAAA,IAChC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,EACV,CAAE;AACH;AAGA,IAAK,OAAO,qBAAsB;AACjC,QAAM,yBACL,oBAAoB,OAAO,kBAAkB;AAE9C,QAAM,uBAAuB;AAAA,IAC5B,CAAE,cACD,SAAS,qBAAsB,OAAQ;AACtC,UAAK,iBAAiB,MAAM,MAAO;AAClC,eAAO,oBAAC,aAAY,GAAG,OAAQ;AAAA,MAChC;AAGA,YAAM,cACL,0BACA,CAAE,CAAE,YAAY,SAAU,EAAE;AAAA,QAC3B,MAAM,WAAW;AAAA,MAClB;AAED,aACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACL,YAAa,EAAE,GAAG,MAAM,YAAY,YAAY;AAAA;AAAA,MACjD;AAAA,IAEF;AAAA,IACD;AAAA,EACD;AAEA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/hooks/custom-css.mjs

@@ -0,0 +1,112 @@
+// packages/block-editor/src/hooks/custom-css.js
+import { useMemo } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { useInstanceId } from "@wordpress/compose";
+import { getBlockType, hasBlockSupport } from "@wordpress/blocks";
+import { __, sprintf } from "@wordpress/i18n";
+import { processCSSNesting } from "@wordpress/global-styles-engine";
+import InspectorControls from "../components/inspector-controls/index.mjs";
+import AdvancedPanel, {
+  validateCSS
+} from "../components/global-styles/advanced-panel.mjs";
+import { cleanEmptyObject, useStyleOverride } from "./utils.mjs";
+import { store as blockEditorStore } from "../store/index.mjs";
+import { jsx } from "react/jsx-runtime";
+var CUSTOM_CSS_INSTANCE_REFERENCE = {};
+var EMPTY_STYLE = {};
+function CustomCSSControl({ blockName, setAttributes, style }) {
+  const blockType = getBlockType(blockName);
+  function onChange(newStyle) {
+    const css = newStyle?.css?.trim() ? newStyle.css : void 0;
+    setAttributes({
+      style: cleanEmptyObject({ ...newStyle, css })
+    });
+  }
+  const cssHelpText = sprintf(
+    // translators: %s: is the name of a block e.g., 'Image' or 'Quote'.
+    __(
+      "Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value, e.g. color: red;."
+    ),
+    blockType?.title
+  );
+  return /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
+    AdvancedPanel,
+    {
+      value: style,
+      onChange,
+      inheritedValue: style,
+      help: cssHelpText
+    }
+  ) });
+}
+function CustomCSSEdit({ clientId, name, setAttributes }) {
+  const { style, canEditCSS } = useSelect(
+    (select) => {
+      const { getBlockAttributes, getSettings } = select(blockEditorStore);
+      return {
+        style: getBlockAttributes(clientId)?.style || EMPTY_STYLE,
+        canEditCSS: getSettings().canEditCSS
+      };
+    },
+    [clientId]
+  );
+  if (!canEditCSS) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    CustomCSSControl,
+    {
+      blockName: name,
+      setAttributes,
+      style
+    }
+  );
+}
+function useBlockProps({ style }) {
+  const customCSS = style?.css;
+  const isValidCSS = typeof customCSS === "string" && customCSS.trim().length > 0 && validateCSS(customCSS);
+  const customCSSIdentifier = useInstanceId(
+    CUSTOM_CSS_INSTANCE_REFERENCE,
+    "wp-custom-css"
+  );
+  const customCSSSelector = `.${customCSSIdentifier}`;
+  const transformedCSS = useMemo(() => {
+    if (!isValidCSS) {
+      return void 0;
+    }
+    return processCSSNesting(customCSS, customCSSSelector);
+  }, [customCSS, customCSSSelector, isValidCSS]);
+  useStyleOverride({ css: transformedCSS });
+  if (!isValidCSS) {
+    return {};
+  }
+  return {
+    className: customCSSIdentifier
+  };
+}
+function addSaveProps(props, blockType, attributes) {
+  if (!hasBlockSupport(blockType, "customCSS", true)) {
+    return props;
+  }
+  if (!attributes?.style?.css?.trim()) {
+    return props;
+  }
+  const className = props.className ? `${props.className} has-custom-css` : "has-custom-css";
+  return {
+    ...props,
+    className
+  };
+}
+var custom_css_default = {
+  edit: CustomCSSEdit,
+  useBlockProps,
+  addSaveProps,
+  attributeKeys: ["style"],
+  hasSupport(name) {
+    return hasBlockSupport(name, "customCSS", true);
+  }
+};
+export {
+  custom_css_default as default
+};
+//# sourceMappingURL=custom-css.mjs.map