@wordpress/block-editor 15.8.1-next.dc3f6d3c1.0 → 15.9.1-next.8b30e05b0.0

package/build-module/components/content-only-controls/link/index.js

@@ -2,7 +2,6 @@
 import {
   Button,
   Icon,
-  __experimentalToolsPanelItem as ToolsPanelItem,
   __experimentalGrid as Grid,
   Popover
 } from "@wordpress/components";
@@ -43,124 +42,113 @@ function getUpdatedLinkAttributes({
     rel: updatedRel || void 0
   };
 }
-function Link({
-  clientId,
-  control,
-  blockType,
-  attributeValues,
-  updateAttributes
-}) {
+function Link({ data, field, config = {} }) {
   const [isLinkControlOpen, setIsLinkControlOpen] = useState(false);
   const { popoverProps } = useInspectorPopoverPlacement({
     isControl: true
   });
-  const hrefKey = control.mapping.href;
-  const relKey = control.mapping.rel;
-  const targetKey = control.mapping.target;
-  const destinationKey = control.mapping.destination;
-  const href = attributeValues[hrefKey];
-  const rel = attributeValues[relKey];
-  const target = attributeValues[targetKey];
-  const destination = attributeValues[destinationKey];
-  const hrefDefaultValue = blockType.attributes[href]?.defaultValue ?? void 0;
-  const relDefaultValue = blockType.attributes[rel]?.defaultValue ?? void 0;
-  const targetDefaultValue = blockType.attributes[target]?.defaultValue ?? void 0;
-  const destinationDefaultValue = blockType.attributes[destination]?.defaultValue ?? void 0;
+  const { clientId, updateBlockAttributes, fieldDef } = config;
+  const updateAttributes = (newValue) => {
+    const mappedChanges = field.setValue({ item: data, value: newValue });
+    updateBlockAttributes(clientId, mappedChanges);
+  };
+  const value = field.getValue({ item: data });
+  const url = value?.url;
+  const rel = value?.rel || "";
+  const target = value?.linkTarget;
   const opensInNewTab = target === NEW_TAB_TARGET;
   const nofollow = rel === NOFOLLOW_REL;
   const linkValue = useMemo(
-    () => ({ url: href, opensInNewTab, nofollow }),
-    [href, opensInNewTab, nofollow]
+    () => ({ url, opensInNewTab, nofollow }),
+    [url, opensInNewTab, nofollow]
   );
-  return /* @__PURE__ */ jsxs(
-    ToolsPanelItem,
-    {
-      panelId: clientId,
-      label: control.label,
-      hasValue: () => !!href,
-      onDeselect: () => {
-        updateAttributes({
-          [hrefKey]: hrefDefaultValue,
-          [relKey]: relDefaultValue,
-          [targetKey]: targetDefaultValue,
-          [destinationKey]: destinationDefaultValue
-        });
-      },
-      isShownByDefault: control.shownByDefault,
-      children: [
-        /* @__PURE__ */ jsx(
-          Button,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        className: "block-editor-content-only-controls__link",
+        onClick: () => {
+          setIsLinkControlOpen(true);
+        },
+        children: /* @__PURE__ */ jsxs(
+          Grid,
           {
-            __next40pxDefaultSize: true,
-            className: "block-editor-content-only-controls__link",
-            onClick: () => {
-              setIsLinkControlOpen(true);
-            },
-            children: /* @__PURE__ */ jsxs(
-              Grid,
-              {
-                rowGap: 0,
-                columnGap: 8,
-                templateColumns: "24px 1fr",
-                className: "block-editor-content-only-controls__link-row",
-                children: [
-                  href && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(Icon, { icon: link, size: 24 }),
-                    /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__link-title", children: href })
-                  ] }),
-                  !href && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        icon: link,
-                        size: 24,
-                        style: { opacity: 0.3 }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__link-title", children: __("Link") })
-                  ] })
-                ]
-              }
-            )
+            rowGap: 0,
+            columnGap: 8,
+            templateColumns: "24px 1fr",
+            className: "block-editor-content-only-controls__link-row",
+            children: [
+              url && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Icon, { icon: link, size: 24 }),
+                /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__link-title", children: url })
+              ] }),
+              !url && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: link,
+                    size: 24,
+                    style: { opacity: 0.3 }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__link-title", children: __("Link") })
+              ] })
+            ]
           }
-        ),
-        isLinkControlOpen && /* @__PURE__ */ jsx(
-          Popover,
+        )
+      }
+    ),
+    isLinkControlOpen && /* @__PURE__ */ jsx(
+      Popover,
+      {
+        onClose: () => {
+          setIsLinkControlOpen(false);
+        },
+        ...popoverProps ?? {},
+        children: /* @__PURE__ */ jsx(
+          LinkControl,
           {
-            onClose: () => {
-              setIsLinkControlOpen(false);
+            value: linkValue,
+            onChange: (newValues) => {
+              const updatedAttrs = getUpdatedLinkAttributes({
+                rel,
+                ...newValues
+              });
+              const updateValue = { ...value };
+              if (fieldDef?.mapping) {
+                Object.keys(fieldDef.mapping).forEach(
+                  (key) => {
+                    if (key === "href" || key === "url") {
+                      updateValue[key] = updatedAttrs.url;
+                    } else if (key === "rel") {
+                      updateValue[key] = updatedAttrs.rel;
+                    } else if (key === "target" || key === "linkTarget") {
+                      updateValue[key] = updatedAttrs.linkTarget;
+                    }
+                  }
+                );
+              }
+              updateAttributes(updateValue);
             },
-            ...popoverProps ?? {},
-            children: /* @__PURE__ */ jsx(
-              LinkControl,
-              {
-                value: linkValue,
-                onChange: (newValues) => {
-                  const updatedAttrs = getUpdatedLinkAttributes({
-                    rel,
-                    ...newValues
-                  });
-                  updateAttributes({
-                    [hrefKey]: updatedAttrs.url,
-                    [relKey]: updatedAttrs.rel,
-                    [targetKey]: updatedAttrs.linkTarget
-                  });
-                },
-                onRemove: () => {
-                  updateAttributes({
-                    [hrefKey]: hrefDefaultValue,
-                    [relKey]: relDefaultValue,
-                    [targetKey]: targetDefaultValue,
-                    [destinationKey]: destinationDefaultValue
-                  });
-                }
+            onRemove: () => {
+              const removeValue = {};
+              if (fieldDef?.mapping) {
+                Object.keys(fieldDef.mapping).forEach(
+                  (key) => {
+                    if (key === "href" || key === "url" || key === "rel" || key === "target" || key === "linkTarget") {
+                      removeValue[key] = void 0;
+                    }
+                  }
+                );
               }
-            )
+              updateAttributes(removeValue);
+            }
           }
         )
-      ]
-    }
-  );
+      }
+    )
+  ] });
 }
 export {
   NEW_TAB_REL,

package/build-module/components/content-only-controls/link/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/content-only-controls/link/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\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 '../../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( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst hrefKey = control.mapping.href;\n\tconst relKey = control.mapping.rel;\n\tconst targetKey = control.mapping.target;\n\tconst destinationKey = control.mapping.destination;\n\n\tconst href = attributeValues[ hrefKey ];\n\tconst rel = attributeValues[ relKey ];\n\tconst target = attributeValues[ targetKey ];\n\tconst destination = attributeValues[ destinationKey ];\n\n\tconst hrefDefaultValue =\n\t\tblockType.attributes[ href ]?.defaultValue ?? undefined;\n\tconst relDefaultValue =\n\t\tblockType.attributes[ rel ]?.defaultValue ?? undefined;\n\tconst targetDefaultValue =\n\t\tblockType.attributes[ target ]?.defaultValue ?? undefined;\n\tconst destinationDefaultValue =\n\t\tblockType.attributes[ destination ]?.defaultValue ?? undefined;\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: href, opensInNewTab, nofollow } ),\n\t\t[ href, opensInNewTab, nofollow ]\n\t);\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tpanelId={ clientId }\n\t\t\tlabel={ control.label }\n\t\t\thasValue={ () => !! href }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateAttributes( {\n\t\t\t\t\t[ hrefKey ]: hrefDefaultValue,\n\t\t\t\t\t[ relKey ]: relDefaultValue,\n\t\t\t\t\t[ targetKey ]: targetDefaultValue,\n\t\t\t\t\t[ destinationKey ]: destinationDefaultValue,\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tisShownByDefault={ control.shownByDefault }\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{ href && (\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{ href }\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{ ! href && (\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\tupdateAttributes( {\n\t\t\t\t\t\t\t\t[ hrefKey ]: updatedAttrs.url,\n\t\t\t\t\t\t\t\t[ relKey ]: updatedAttrs.rel,\n\t\t\t\t\t\t\t\t[ targetKey ]: updatedAttrs.linkTarget,\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\tupdateAttributes( {\n\t\t\t\t\t\t\t\t[ hrefKey ]: hrefDefaultValue,\n\t\t\t\t\t\t\t\t[ relKey ]: relDefaultValue,\n\t\t\t\t\t\t\t\t[ targetKey ]: targetDefaultValue,\n\t\t\t\t\t\t\t\t[ destinationKey ]: destinationDefaultValue,\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</ToolsPanelItem>\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 '../../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, config = {} } ) {\n\tconst [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst { clientId, updateBlockAttributes, fieldDef } = config;\n\tconst updateAttributes = ( newValue ) => {\n\t\tconst mappedChanges = field.setValue( { item: data, value: newValue } );\n\t\tupdateBlockAttributes( clientId, mappedChanges );\n\t};\n\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\t// Build update object dynamically based on what's in the mapping\n\t\t\t\t\t\t\tconst updateValue = { ...value };\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\tif ( key === 'href' || key === 'url' ) {\n\t\t\t\t\t\t\t\t\t\t\tupdateValue[ key ] =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedAttrs.url;\n\t\t\t\t\t\t\t\t\t\t} else if ( key === 'rel' ) {\n\t\t\t\t\t\t\t\t\t\t\tupdateValue[ key ] =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedAttrs.rel;\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tkey === 'target' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'linkTarget'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tupdateValue[ key ] =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedAttrs.linkTarget;\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\n\t\t\t\t\t\t\tupdateAttributes( updateValue );\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\tif (\n\t\t\t\t\t\t\t\t\t\t\tkey === 'href' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'url' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'rel' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'target' ||\n\t\t\t\t\t\t\t\t\t\t\tkey === 'linkTarget'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tremoveValue[ key ] = undefined;\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\n\t\t\t\t\t\t\tupdateAttributes( removeValue );\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/components/content-only-controls/media/index.js

@@ -2,11 +2,9 @@
 import {
   Button,
   Icon,
-  __experimentalToolsPanelItem as ToolsPanelItem,
   __experimentalGrid as Grid
 } from "@wordpress/components";
 import { useSelect } from "@wordpress/data";
-import { useMemo } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import {
   audio as audioIcon,
@@ -20,9 +18,9 @@ import { useInspectorPopoverPlacement } from "../use-inspector-popover-placement
 import { getMediaSelectKey } from "../../../store/private-keys";
 import { store as blockEditorStore } from "../../../store";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function MediaThumbnail({ control, attributeValues, attachment }) {
-  const { allowedTypes, multiple } = control.args;
-  const mapping = control.mapping;
+function MediaThumbnail({ data, field, attachment }) {
+  const config = field.config || {};
+  const { allowedTypes = [], multiple = false } = config;
   if (multiple) {
     return "todo multiple";
   }
@@ -39,13 +37,9 @@ function MediaThumbnail({ control, attributeValues, attachment }) {
     );
   }
   if (allowedTypes.length === 1) {
-    let src;
-    if (allowedTypes[0] === "image" && mapping.src && attributeValues[mapping.src]) {
-      src = attributeValues[mapping.src];
-    } else if (allowedTypes[0] === "video" && mapping.poster && attributeValues[mapping.poster]) {
-      src = attributeValues[mapping.poster];
-    }
-    if (src) {
+    const value = field.getValue({ item: data });
+    const url = value?.url;
+    if (url) {
       return /* @__PURE__ */ jsx(
         "img",
         {
@@ -53,7 +47,7 @@ function MediaThumbnail({ control, attributeValues, attachment }) {
           alt: "",
           width: 24,
           height: 24,
-          src
+          src: url
         }
       );
     }
@@ -73,28 +67,23 @@ function MediaThumbnail({ control, attributeValues, attachment }) {
   }
   return /* @__PURE__ */ jsx(Icon, { icon: mediaIcon, size: 24 });
 }
-function Media({
-  clientId,
-  control,
-  blockType,
-  attributeValues,
-  updateAttributes
-}) {
+function Media({ data, field, config = {} }) {
   const { popoverProps } = useInspectorPopoverPlacement({
     isControl: true
   });
-  const typeKey = control.mapping.type;
-  const idKey = control.mapping.id;
-  const srcKey = control.mapping.src;
-  const captionKey = control.mapping.caption;
-  const altKey = control.mapping.alt;
-  const posterKey = control.mapping.poster;
-  const featuredImageKey = control.mapping.featuredImage;
-  const id = attributeValues[idKey];
-  const src = attributeValues[srcKey];
-  const caption = attributeValues[captionKey];
-  const alt = attributeValues[altKey];
-  const useFeaturedImage = attributeValues[featuredImageKey];
+  const value = field.getValue({ item: data });
+  const { allowedTypes = [], multiple = false } = field.config || {};
+  const { clientId, updateBlockAttributes, fieldDef } = config;
+  const updateAttributes = (newFieldValue) => {
+    const mappedChanges = field.setValue({
+      item: data,
+      value: newFieldValue
+    });
+    updateBlockAttributes(clientId, mappedChanges);
+  };
+  const hasFeaturedImageSupport = fieldDef?.mapping && "featuredImage" in fieldDef.mapping;
+  const id = value?.id;
+  const url = value?.url;
   const attachment = useSelect(
     (select) => {
       if (!id) {
@@ -110,8 +99,8 @@ function Media({
     [id]
   );
   let chooseItemLabel;
-  if (control.args.allowedTypes.length === 1) {
-    const allowedType = control.args.allowedTypes[0];
+  if (allowedTypes.length === 1) {
+    const allowedType = allowedTypes[0];
     if (allowedType === "image") {
       chooseItemLabel = __("Choose an image\u2026");
     } else if (allowedType === "video") {
@@ -124,112 +113,122 @@ function Media({
   } else {
     chooseItemLabel = __("Choose a media item\u2026");
   }
-  const defaultValues = useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(control.mapping).map(([, attributeKey]) => {
-        return [
-          attributeKey,
-          blockType.attributes[attributeKey]?.defaultValue ?? void 0
-        ];
-      })
-    );
-  }, [blockType.attributes, control.mapping]);
   return /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsx(
-    ToolsPanelItem,
+    MediaReplaceFlow,
     {
-      panelId: clientId,
-      label: control.label,
-      hasValue: () => !!src,
-      onDeselect: () => {
-        updateAttributes(defaultValues);
+      className: "block-editor-content-only-controls__media-replace-flow",
+      allowedTypes,
+      mediaId: id,
+      mediaURL: url,
+      multiple,
+      popoverProps,
+      onReset: () => {
+        const resetValue = {};
+        if (fieldDef?.mapping) {
+          Object.keys(fieldDef.mapping).forEach((key) => {
+            if (key === "id" || key === "src" || key === "url") {
+              resetValue[key] = void 0;
+            } else if (key === "caption" || key === "alt") {
+              resetValue[key] = "";
+            }
+          });
+        }
+        if (hasFeaturedImageSupport) {
+          resetValue.featuredImage = false;
+        }
+        updateAttributes({ ...value, ...resetValue });
       },
-      isShownByDefault: control.shownByDefault,
-      children: /* @__PURE__ */ jsx(
-        MediaReplaceFlow,
-        {
-          className: "block-editor-content-only-controls__media-replace-flow",
-          allowedTypes: control.args.allowedTypes,
-          mediaId: id,
-          mediaURL: src,
-          multiple: control.args.multiple,
-          popoverProps,
-          onReset: () => {
-            updateAttributes(defaultValues);
-          },
-          useFeaturedImage: !!useFeaturedImage,
-          onToggleFeaturedImage: !!featuredImageKey && (() => {
-            updateAttributes({
-              ...defaultValues,
-              [featuredImageKey]: !useFeaturedImage
-            });
-          }),
-          onSelect: (selectedMedia) => {
-            if (selectedMedia.id && selectedMedia.url) {
-              const optionalAttributes = {};
-              if (typeKey && selectedMedia.type) {
-                optionalAttributes[typeKey] = selectedMedia.type;
-              }
-              if (captionKey && !caption && selectedMedia.caption) {
-                optionalAttributes[captionKey] = selectedMedia.caption;
-              }
-              if (altKey && !alt && selectedMedia.alt) {
-                optionalAttributes[altKey] = selectedMedia.alt;
-              }
-              if (posterKey && selectedMedia.poster) {
-                optionalAttributes[posterKey] = selectedMedia.poster;
-              }
-              updateAttributes({
-                [idKey]: selectedMedia.id,
-                [srcKey]: selectedMedia.url,
-                ...optionalAttributes
-              });
+      ...hasFeaturedImageSupport && {
+        useFeaturedImage: !!value?.featuredImage,
+        onToggleFeaturedImage: () => {
+          updateAttributes({
+            ...value,
+            featuredImage: !value?.featuredImage
+          });
+        }
+      },
+      onSelect: (selectedMedia) => {
+        if (selectedMedia.id && selectedMedia.url) {
+          let mediaType = "image";
+          if (selectedMedia.mime_type) {
+            if (selectedMedia.mime_type.startsWith("video/")) {
+              mediaType = "video";
+            } else if (selectedMedia.mime_type.startsWith("audio/")) {
+              mediaType = "audio";
             }
-          },
-          renderToggle: (buttonProps) => /* @__PURE__ */ jsx(
-            Button,
-            {
-              __next40pxDefaultSize: true,
-              className: "block-editor-content-only-controls__media",
-              ...buttonProps,
-              children: /* @__PURE__ */ jsxs(
-                Grid,
-                {
-                  rowGap: 0,
-                  columnGap: 8,
-                  templateColumns: "24px 1fr",
-                  className: "block-editor-content-only-controls__media-row",
-                  children: [
-                    src && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
-                        MediaThumbnail,
-                        {
-                          attachment,
-                          control,
-                          attributeValues
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", {
-                        className: "block-editor-content-only-controls__media-title",
-                        // TODO - truncate long titles or url smartly (e.g. show filename).
-                        children: attachment?.title?.raw && attachment?.title?.raw !== "" ? attachment?.title?.raw : src
-                      })
-                    ] }),
-                    !src && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "block-editor-content-only-controls__media-placeholder",
-                          style: {
-                            width: "24px",
-                            height: "24px"
-                          }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
-                    ] })
-                  ]
+          }
+          const newValue = {};
+          if (fieldDef?.mapping) {
+            Object.keys(fieldDef.mapping).forEach(
+              (key) => {
+                if (key === "id") {
+                  newValue[key] = selectedMedia.id;
+                } else if (key === "src" || key === "url") {
+                  newValue[key] = selectedMedia.url;
+                } else if (key === "type") {
+                  newValue[key] = mediaType;
+                } else if (key === "link" && selectedMedia.link) {
+                  newValue[key] = selectedMedia.link;
+                } else if (key === "caption" && !value?.caption && selectedMedia.caption) {
+                  newValue[key] = selectedMedia.caption;
+                } else if (key === "alt" && !value?.alt && selectedMedia.alt) {
+                  newValue[key] = selectedMedia.alt;
+                } else if (key === "poster" && selectedMedia.poster) {
+                  newValue[key] = selectedMedia.poster;
                 }
-              )
+              }
+            );
+          }
+          if (hasFeaturedImageSupport) {
+            newValue.featuredImage = false;
+          }
+          const finalValue = { ...value, ...newValue };
+          updateAttributes(finalValue);
+        }
+      },
+      renderToggle: (buttonProps) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          __next40pxDefaultSize: true,
+          className: "block-editor-content-only-controls__media",
+          ...buttonProps,
+          children: /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              rowGap: 0,
+              columnGap: 8,
+              templateColumns: "24px 1fr",
+              className: "block-editor-content-only-controls__media-row",
+              children: [
+                url && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    MediaThumbnail,
+                    {
+                      attachment,
+                      field,
+                      data
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", {
+                    className: "block-editor-content-only-controls__media-title",
+                    // TODO - truncate long titles or url smartly (e.g. show filename).
+                    children: attachment?.title?.raw && attachment?.title?.raw !== "" ? attachment?.title?.raw : url
+                  })
+                ] }),
+                !url && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "block-editor-content-only-controls__media-placeholder",
+                      style: {
+                        width: "24px",
+                        height: "24px"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
+                ] })
+              ]
             }
           )
         }