@wordpress/block-editor 15.8.1-next.dc3f6d3c1.0 → 15.9.1-next.6deb34194.0

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

@@ -1,7 +1,9 @@
 // packages/block-editor/src/components/content-only-controls/index.js
-import { store as blocksStore } from "@wordpress/blocks";
 import {
-  __experimentalToolsPanel as ToolsPanel,
+  store as blocksStore,
+  privateApis as blocksPrivateApis
+} from "@wordpress/blocks";
+import {
   __experimentalHStack as HStack,
   Icon,
   Navigator
@@ -9,44 +11,99 @@ import {
 import { useDispatch, useSelect } from "@wordpress/data";
 import { __ } from "@wordpress/i18n";
 import { arrowLeft, arrowRight } from "@wordpress/icons";
+import { DataForm } from "@wordpress/dataviews";
+import { useState, useMemo } from "@wordpress/element";
 import { unlock } from "../../lock-unlock";
 import { store as blockEditorStore } from "../../store";
 import BlockIcon from "../block-icon";
 import useBlockDisplayTitle from "../block-title/use-block-display-title";
 import useBlockDisplayInformation from "../use-block-display-information";
-import { useInspectorPopoverPlacement } from "./use-inspector-popover-placement";
-import PlainText from "./plain-text";
+import FieldsDropdownMenu from "./fields-dropdown-menu";
 import RichText from "./rich-text";
 import Media from "./media";
 import Link from "./link";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var controls = {
-  PlainText,
-  RichText,
-  Media,
-  Link
+var { fieldsKey, formKey } = unlock(blocksPrivateApis);
+var CONTROLS = {
+  richtext: RichText,
+  media: Media,
+  link: Link
 };
-function BlockAttributeToolsPanelItem({
-  clientId,
-  control,
-  blockType,
-  attributeValues
-}) {
-  const { updateBlockAttributes } = useDispatch(blockEditorStore);
-  const ControlComponent = controls[control.type];
+function createConfiguredControl(config) {
+  const { control, ...controlConfig } = config;
+  const ControlComponent = CONTROLS[control];
   if (!ControlComponent) {
-    return null;
+    throw new Error(`Control type "${control}" not found`);
   }
-  return /* @__PURE__ */ jsx(
-    ControlComponent,
-    {
-      clientId,
-      control,
-      blockType,
-      attributeValues,
-      updateAttributes: (attributes) => updateBlockAttributes(clientId, attributes)
+  return function ConfiguredControl(props) {
+    return /* @__PURE__ */ jsx(ControlComponent, { ...props, config: controlConfig });
+  };
+}
+function normalizeMediaValue(value, fieldDef) {
+  const defaults = {
+    id: null,
+    url: "",
+    caption: "",
+    alt: "",
+    type: "image",
+    poster: "",
+    featuredImage: false,
+    link: ""
+  };
+  const result = {};
+  if (fieldDef?.mapping) {
+    Object.keys(fieldDef.mapping).forEach((key) => {
+      result[key] = value?.[key] ?? defaults[key] ?? "";
+    });
+    return result;
+  }
+  Object.keys(defaults).forEach((key) => {
+    result[key] = value?.[key] ?? defaults[key];
+  });
+  return result;
+}
+function denormalizeMediaValue(value, fieldDef) {
+  if (!fieldDef.mapping) {
+    return value;
+  }
+  const result = {};
+  Object.entries(fieldDef.mapping).forEach(([key]) => {
+    if (key in value) {
+      result[key] = value[key];
     }
-  );
+  });
+  return result;
+}
+function normalizeLinkValue(value, fieldDef) {
+  const defaults = {
+    url: "",
+    rel: "",
+    linkTarget: "",
+    destination: ""
+  };
+  const result = {};
+  if (fieldDef?.mapping) {
+    Object.keys(fieldDef.mapping).forEach((key) => {
+      result[key] = value?.[key] ?? defaults[key] ?? "";
+    });
+    return result;
+  }
+  Object.keys(defaults).forEach((key) => {
+    result[key] = value?.[key] ?? defaults[key];
+  });
+  return result;
+}
+function denormalizeLinkValue(value, fieldDef) {
+  if (!fieldDef.mapping) {
+    return value;
+  }
+  const result = {};
+  Object.entries(fieldDef.mapping).forEach(([key]) => {
+    if (key in value) {
+      result[key] = value[key];
+    }
+  });
+  return result;
 }
 function BlockFields({ clientId }) {
   const { attributes, blockType } = useSelect(
@@ -61,36 +118,139 @@ function BlockFields({ clientId }) {
     },
     [clientId]
   );
+  const { updateBlockAttributes } = useDispatch(blockEditorStore);
   const blockTitle = useBlockDisplayTitle({
     clientId,
     context: "list-view"
   });
   const blockInformation = useBlockDisplayInformation(clientId);
-  const popoverPlacementProps = useInspectorPopoverPlacement();
-  if (!blockType?.fields?.length) {
+  const blockTypeFields = blockType?.[fieldsKey];
+  const [form, setForm] = useState(() => {
+    return blockType?.[formKey];
+  });
+  const dataFormFields = useMemo(() => {
+    if (!blockTypeFields?.length) {
+      return [];
+    }
+    return blockTypeFields.map((fieldDef) => {
+      const ControlComponent = CONTROLS[fieldDef.type];
+      const defaultValues = {};
+      if (fieldDef.mapping && blockType?.attributes) {
+        Object.entries(fieldDef.mapping).forEach(
+          ([key, attrKey]) => {
+            defaultValues[key] = blockType.attributes[attrKey]?.defaultValue ?? void 0;
+          }
+        );
+      }
+      const field = {
+        id: fieldDef.id,
+        label: fieldDef.label,
+        type: fieldDef.type,
+        // Use the field's type; DataForm will use built-in or custom Edit
+        config: { ...fieldDef.args, defaultValues },
+        hideLabelFromVision: fieldDef.id === "content",
+        // getValue and setValue handle the mapping to block attributes
+        getValue: ({ item }) => {
+          if (fieldDef.mapping) {
+            const mappedValue = {};
+            Object.entries(fieldDef.mapping).forEach(
+              ([key, attrKey]) => {
+                mappedValue[key] = item[attrKey];
+              }
+            );
+            if (fieldDef.type === "media") {
+              return normalizeMediaValue(mappedValue, fieldDef);
+            }
+            if (fieldDef.type === "link") {
+              return normalizeLinkValue(mappedValue, fieldDef);
+            }
+            return mappedValue;
+          }
+          return item[fieldDef.id];
+        },
+        setValue: ({ item, value }) => {
+          if (fieldDef.mapping) {
+            let denormalizedValue = value;
+            if (fieldDef.type === "media") {
+              denormalizedValue = denormalizeMediaValue(
+                value,
+                fieldDef
+              );
+            } else if (fieldDef.type === "link") {
+              denormalizedValue = denormalizeLinkValue(
+                value,
+                fieldDef
+              );
+            }
+            const updates = {};
+            Object.entries(fieldDef.mapping).forEach(
+              ([key, attrKey]) => {
+                if (key in denormalizedValue) {
+                  updates[attrKey] = denormalizedValue[key];
+                } else {
+                  updates[attrKey] = item[attrKey];
+                }
+              }
+            );
+            return updates;
+          }
+          return { [fieldDef.id]: value };
+        }
+      };
+      if (ControlComponent) {
+        field.Edit = createConfiguredControl({
+          control: fieldDef.type,
+          clientId,
+          fieldDef
+        });
+      }
+      return field;
+    });
+  }, [blockTypeFields, blockType?.attributes, clientId]);
+  const handleToggleField = (fieldId) => {
+    setForm((prev) => {
+      if (prev.fields?.includes(fieldId)) {
+        return {
+          ...prev,
+          fields: prev.fields.filter((id) => id !== fieldId)
+        };
+      }
+      return {
+        ...prev,
+        fields: [...prev.fields || [], fieldId]
+      };
+    });
+  };
+  if (!blockTypeFields?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
-    ToolsPanel,
-    {
-      label: /* @__PURE__ */ jsxs(HStack, { spacing: 1, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "block-editor-content-only-controls__fields-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "block-editor-content-only-controls__fields-header", children: /* @__PURE__ */ jsxs(HStack, { spacing: 1, justify: "space-between", expanded: true, children: [
+      /* @__PURE__ */ jsxs(HStack, { spacing: 1, justify: "flex-start", children: [
         /* @__PURE__ */ jsx(BlockIcon, { icon: blockInformation?.icon }),
         /* @__PURE__ */ jsx("div", { children: blockTitle })
       ] }),
-      panelId: clientId,
-      dropdownMenuProps: popoverPlacementProps,
-      children: blockType?.fields?.map((field, index) => /* @__PURE__ */ jsx(
-        BlockAttributeToolsPanelItem,
+      /* @__PURE__ */ jsx(
+        FieldsDropdownMenu,
         {
-          clientId,
-          control: field,
-          blockType,
-          attributeValues: attributes
-        },
-        `${clientId}/${index}`
-      ))
-    }
-  );
+          fields: dataFormFields,
+          visibleFields: form.fields,
+          onToggleField: handleToggleField
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      DataForm,
+      {
+        data: attributes,
+        fields: dataFormFields,
+        form,
+        onChange: (changes) => {
+          updateBlockAttributes(clientId, changes);
+        }
+      }
+    )
+  ] });
 }
 function DrillDownButton({ clientId }) {
   const blockTitle = useBlockDisplayTitle({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/content-only-controls/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalHStack as HStack,\n\tIcon,\n\tNavigator,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport { useInspectorPopoverPlacement } from './use-inspector-popover-placement';\n\n// controls\nimport PlainText from './plain-text';\nimport RichText from './rich-text';\nimport Media from './media';\nimport Link from './link';\n\nconst controls = {\n\tPlainText,\n\tRichText,\n\tMedia,\n\tLink,\n};\n\nfunction BlockAttributeToolsPanelItem( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n} ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst ControlComponent = controls[ control.type ];\n\n\tif ( ! ControlComponent ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ControlComponent\n\t\t\tclientId={ clientId }\n\t\t\tcontrol={ control }\n\t\t\tblockType={ blockType }\n\t\t\tattributeValues={ attributeValues }\n\t\t\tupdateAttributes={ ( attributes ) =>\n\t\t\t\tupdateBlockAttributes( clientId, attributes )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction BlockFields( { clientId } ) {\n\tconst { attributes, blockType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\treturn {\n\t\t\t\tattributes: getBlockAttributes( clientId ),\n\t\t\t\tblockType: getBlockType( blockName ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst popoverPlacementProps = useInspectorPopoverPlacement();\n\n\tif ( ! blockType?.fields?.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\treturn (\n\t\t<ToolsPanel\n\t\t\tlabel={\n\t\t\t\t<HStack spacing={ 1 }>\n\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t\t<div>{ blockTitle }</div>\n\t\t\t\t</HStack>\n\t\t\t}\n\t\t\tpanelId={ clientId }\n\t\t\tdropdownMenuProps={ popoverPlacementProps }\n\t\t>\n\t\t\t{ blockType?.fields?.map( ( field, index ) => (\n\t\t\t\t<BlockAttributeToolsPanelItem\n\t\t\t\t\tkey={ `${ clientId }/${ index }` }\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tcontrol={ field }\n\t\t\t\t\tblockType={ blockType }\n\t\t\t\t\tattributeValues={ attributes }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</ToolsPanel>\n\t);\n}\n\nfunction DrillDownButton( { clientId } ) {\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\treturn (\n\t\t<div className=\"block-editor-content-only-controls__button-panel\">\n\t\t\t<Navigator.Button\n\t\t\t\tpath={ `/${ clientId }` }\n\t\t\t\tclassName=\"block-editor-content-only-controls__drill-down-button\"\n\t\t\t>\n\t\t\t\t<HStack expanded justify=\"space-between\">\n\t\t\t\t\t<HStack justify=\"flex-start\" spacing={ 1 }>\n\t\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t\t\t<div>{ blockTitle }</div>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Icon icon={ arrowRight } />\n\t\t\t\t</HStack>\n\t\t\t</Navigator.Button>\n\t\t</div>\n\t);\n}\n\nfunction ContentOnlyControlsScreen( {\n\trootClientId,\n\tcontentClientIds,\n\tparentClientIds,\n\tisNested,\n} ) {\n\tconst isRootContentBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockName } = select( blockEditorStore );\n\t\t\tconst blockName = getBlockName( rootClientId );\n\t\t\tconst { hasContentRoleAttribute } = unlock( select( blocksStore ) );\n\t\t\treturn hasContentRoleAttribute( blockName );\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tif ( ! isRootContentBlock && ! contentClientIds.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isNested && (\n\t\t\t\t<div className=\"block-editor-content-only-controls__button-panel\">\n\t\t\t\t\t<Navigator.BackButton className=\"block-editor-content-only-controls__back-button\">\n\t\t\t\t\t\t<HStack expanded spacing={ 1 } justify=\"flex-start\">\n\t\t\t\t\t\t\t<Icon icon={ arrowLeft } />\n\t\t\t\t\t\t\t<div>{ __( 'Back' ) }</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Navigator.BackButton>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isRootContentBlock && <BlockFields clientId={ rootClientId } /> }\n\t\t\t{ contentClientIds.map( ( clientId ) => {\n\t\t\t\tif ( parentClientIds?.[ clientId ] ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<DrillDownButton\n\t\t\t\t\t\t\tkey={ clientId }\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn <BlockFields key={ clientId } clientId={ clientId } />;\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nexport default function ContentOnlyControls( { rootClientId } ) {\n\tconst { updatedRootClientId, nestedContentClientIds, contentClientIds } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getClientIdsOfDescendants, getBlockEditingMode } =\n\t\t\t\t\tselect( blockEditorStore );\n\n\t\t\t\t// _nestedContentClientIds is for content blocks within 'drilldowns'.\n\t\t\t\t// It's an object where the key is the parent clientId, and the element is\n\t\t\t\t// an array of child clientIds whose controls are shown within the drilldown.\n\t\t\t\tconst _nestedContentClientIds = {};\n\n\t\t\t\t// _contentClientIds is the list of contentClientIds for blocks being\n\t\t\t\t// shown at the root level. Includes parent blocks that might have a drilldown,\n\t\t\t\t// but not the children of those blocks.\n\t\t\t\tconst _contentClientIds = [];\n\n\t\t\t\t// An array of all nested client ids. Used for ensuring blocks within drilldowns\n\t\t\t\t// don't appear at the root level.\n\t\t\t\tlet allNestedClientIds = [];\n\n\t\t\t\t// A flattened list of all content clientIds to arrange into the\n\t\t\t\t// groups above.\n\t\t\t\tconst allContentClientIds = getClientIdsOfDescendants(\n\t\t\t\t\trootClientId\n\t\t\t\t).filter(\n\t\t\t\t\t( clientId ) =>\n\t\t\t\t\t\tgetBlockEditingMode( clientId ) === 'contentOnly'\n\t\t\t\t);\n\n\t\t\t\tfor ( const clientId of allContentClientIds ) {\n\t\t\t\t\tconst childClientIds = getClientIdsOfDescendants(\n\t\t\t\t\t\tclientId\n\t\t\t\t\t).filter(\n\t\t\t\t\t\t( childClientId ) =>\n\t\t\t\t\t\t\tgetBlockEditingMode( childClientId ) ===\n\t\t\t\t\t\t\t'contentOnly'\n\t\t\t\t\t);\n\n\t\t\t\t\t// If there's more than one child block, use a drilldown.\n\t\t\t\t\tif (\n\t\t\t\t\t\tchildClientIds.length > 1 &&\n\t\t\t\t\t\t! allNestedClientIds.includes( clientId )\n\t\t\t\t\t) {\n\t\t\t\t\t\t_nestedContentClientIds[ clientId ] = childClientIds;\n\t\t\t\t\t\tallNestedClientIds = [\n\t\t\t\t\t\t\tallNestedClientIds,\n\t\t\t\t\t\t\t...childClientIds,\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! allNestedClientIds.includes( clientId ) ) {\n\t\t\t\t\t\t_contentClientIds.push( clientId );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Avoid showing only one drilldown block at the root.\n\t\t\t\tif (\n\t\t\t\t\t_contentClientIds.length === 1 &&\n\t\t\t\t\tObject.keys( _nestedContentClientIds ).length === 1\n\t\t\t\t) {\n\t\t\t\t\tconst onlyParentClientId = Object.keys(\n\t\t\t\t\t\t_nestedContentClientIds\n\t\t\t\t\t)[ 0 ];\n\t\t\t\t\treturn {\n\t\t\t\t\t\tupdatedRootClientId: onlyParentClientId,\n\t\t\t\t\t\tcontentClientIds:\n\t\t\t\t\t\t\t_nestedContentClientIds[ onlyParentClientId ],\n\t\t\t\t\t\tnestedContentClientIds: {},\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn {\n\t\t\t\t\tnestedContentClientIds: _nestedContentClientIds,\n\t\t\t\t\tcontentClientIds: _contentClientIds,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ rootClientId ]\n\t\t);\n\n\treturn (\n\t\t<Navigator initialPath=\"/\">\n\t\t\t<Navigator.Screen\n\t\t\t\tpath=\"/\"\n\t\t\t\tclassName=\"block-editor-content-only-controls__screen\"\n\t\t\t>\n\t\t\t\t<ContentOnlyControlsScreen\n\t\t\t\t\trootClientId={ updatedRootClientId ?? rootClientId }\n\t\t\t\t\tcontentClientIds={ contentClientIds }\n\t\t\t\t\tparentClientIds={ nestedContentClientIds }\n\t\t\t\t/>\n\t\t\t</Navigator.Screen>\n\t\t\t{ Object.keys( nestedContentClientIds ).map( ( clientId ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ clientId }\n\t\t\t\t\tpath={ `/${ clientId }` }\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__screen\"\n\t\t\t\t>\n\t\t\t\t\t<ContentOnlyControlsScreen\n\t\t\t\t\t\tisNested\n\t\t\t\t\t\trootClientId={ clientId }\n\t\t\t\t\t\tcontentClientIds={ nestedContentClientIds[ clientId ] }\n\t\t\t\t\t/>\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</Navigator>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tstore as blocksStore,\n\tprivateApis as blocksPrivateApis,\n} from '@wordpress/blocks';\nimport {\n\t__experimentalHStack as HStack,\n\tIcon,\n\tNavigator,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { arrowLeft, arrowRight } from '@wordpress/icons';\nimport { DataForm } from '@wordpress/dataviews';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport useBlockDisplayInformation from '../use-block-display-information';\nconst { fieldsKey, formKey } = unlock( blocksPrivateApis );\nimport FieldsDropdownMenu from './fields-dropdown-menu';\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 {Object} config         - The control configuration\n * @param {string} config.control - The control type (key in CONTROLS map)\n * @return {Function} A wrapped control component\n */\nfunction createConfiguredControl( config ) {\n\tconst { control, ...controlConfig } = config;\n\tconst ControlComponent = CONTROLS[ control ];\n\n\tif ( ! ControlComponent ) {\n\t\tthrow new Error( `Control type \"${ control }\" not found` );\n\t}\n\n\treturn function ConfiguredControl( props ) {\n\t\treturn <ControlComponent { ...props } config={ controlConfig } />;\n\t};\n}\n\n/**\n * Normalize a media value to a canonical structure.\n * Only includes properties that are present in the field's mapping (if provided).\n *\n * @param {Object} value    - The mapped value from the block attributes (with canonical keys)\n * @param {Object} fieldDef - Optional field definition containing the mapping\n * @return {Object} Normalized media value with canonical properties\n */\nfunction normalizeMediaValue( value, fieldDef ) {\n\tconst defaults = {\n\t\tid: null,\n\t\turl: '',\n\t\tcaption: '',\n\t\talt: '',\n\t\ttype: 'image',\n\t\tposter: '',\n\t\tfeaturedImage: false,\n\t\tlink: '',\n\t};\n\n\tconst result = {};\n\n\t// If there's a mapping, only include properties that are in it\n\tif ( fieldDef?.mapping ) {\n\t\tObject.keys( fieldDef.mapping ).forEach( ( key ) => {\n\t\t\tresult[ key ] = value?.[ key ] ?? defaults[ key ] ?? '';\n\t\t} );\n\t\treturn result;\n\t}\n\n\t// Without mapping, include all default properties\n\tObject.keys( defaults ).forEach( ( key ) => {\n\t\tresult[ key ] = value?.[ key ] ?? defaults[ key ];\n\t} );\n\treturn result;\n}\n\n/**\n * Denormalize a media value from canonical structure back to mapped keys.\n * Only includes properties that are present in the field's mapping.\n *\n * @param {Object} value    - The normalized media value\n * @param {Object} fieldDef - The field definition containing the mapping\n * @return {Object} Value with only mapped properties\n */\nfunction denormalizeMediaValue( value, fieldDef ) {\n\tif ( ! fieldDef.mapping ) {\n\t\treturn value;\n\t}\n\n\tconst result = {};\n\tObject.entries( fieldDef.mapping ).forEach( ( [ key ] ) => {\n\t\tif ( key in value ) {\n\t\t\tresult[ key ] = value[ key ];\n\t\t}\n\t} );\n\treturn result;\n}\n\n/**\n * Normalize a link value to a canonical structure.\n * Only includes properties that are present in the field's mapping (if provided).\n *\n * @param {Object} value    - The mapped value from the block attributes (with canonical keys)\n * @param {Object} fieldDef - Optional field definition containing the mapping\n * @return {Object} Normalized link value with canonical properties\n */\nfunction normalizeLinkValue( value, fieldDef ) {\n\tconst defaults = {\n\t\turl: '',\n\t\trel: '',\n\t\tlinkTarget: '',\n\t\tdestination: '',\n\t};\n\n\tconst result = {};\n\n\t// If there's a mapping, only include properties that are in it\n\tif ( fieldDef?.mapping ) {\n\t\tObject.keys( fieldDef.mapping ).forEach( ( key ) => {\n\t\t\tresult[ key ] = value?.[ key ] ?? defaults[ key ] ?? '';\n\t\t} );\n\t\treturn result;\n\t}\n\n\t// Without mapping, include all default properties\n\tObject.keys( defaults ).forEach( ( key ) => {\n\t\tresult[ key ] = value?.[ key ] ?? defaults[ key ];\n\t} );\n\treturn result;\n}\n\n/**\n * Denormalize a link value from canonical structure back to mapped keys.\n * Only includes properties that are present in the field's mapping.\n *\n * @param {Object} value    - The normalized link value\n * @param {Object} fieldDef - The field definition containing the mapping\n * @return {Object} Value with only mapped properties\n */\nfunction denormalizeLinkValue( value, fieldDef ) {\n\tif ( ! fieldDef.mapping ) {\n\t\treturn value;\n\t}\n\n\tconst result = {};\n\tObject.entries( fieldDef.mapping ).forEach( ( [ key ] ) => {\n\t\tif ( key in value ) {\n\t\t\tresult[ key ] = value[ key ];\n\t\t}\n\t} );\n\treturn result;\n}\n\nfunction BlockFields( { clientId } ) {\n\tconst { attributes, blockType } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\tconst blockName = getBlockName( clientId );\n\t\t\treturn {\n\t\t\t\tattributes: getBlockAttributes( clientId ),\n\t\t\t\tblockType: getBlockType( blockName ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\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 [ form, setForm ] = useState( () => {\n\t\treturn blockType?.[ formKey ];\n\t} );\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 ControlComponent = CONTROLS[ fieldDef.type ];\n\n\t\t\tconst defaultValues = {};\n\t\t\tif ( fieldDef.mapping && blockType?.attributes ) {\n\t\t\t\tObject.entries( fieldDef.mapping ).forEach(\n\t\t\t\t\t( [ key, attrKey ] ) => {\n\t\t\t\t\t\tdefaultValues[ key ] =\n\t\t\t\t\t\t\tblockType.attributes[ attrKey ]?.defaultValue ??\n\t\t\t\t\t\t\tundefined;\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\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\tconfig: { ...fieldDef.args, defaultValues },\n\t\t\t\thideLabelFromVision: fieldDef.id === 'content',\n\t\t\t\t// getValue and setValue handle the mapping to block attributes\n\t\t\t\tgetValue: ( { item } ) => {\n\t\t\t\t\tif ( fieldDef.mapping ) {\n\t\t\t\t\t\t// Extract mapped properties from the block attributes\n\t\t\t\t\t\tconst mappedValue = {};\n\t\t\t\t\t\tObject.entries( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t\t( [ key, attrKey ] ) => {\n\t\t\t\t\t\t\t\tmappedValue[ key ] = item[ attrKey ];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\t// Normalize to canonical structure based on field type\n\t\t\t\t\t\tif ( fieldDef.type === 'media' ) {\n\t\t\t\t\t\t\treturn normalizeMediaValue( mappedValue, fieldDef );\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( fieldDef.type === 'link' ) {\n\t\t\t\t\t\t\treturn normalizeLinkValue( mappedValue, fieldDef );\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// For other types, return as-is\n\t\t\t\t\t\treturn mappedValue;\n\t\t\t\t\t}\n\t\t\t\t\t// For simple id-based fields, use the id as the attribute key\n\t\t\t\t\treturn item[ fieldDef.id ];\n\t\t\t\t},\n\t\t\t\tsetValue: ( { item, value } ) => {\n\t\t\t\t\tif ( fieldDef.mapping ) {\n\t\t\t\t\t\t// Denormalize from canonical structure back to mapped keys\n\t\t\t\t\t\tlet denormalizedValue = value;\n\t\t\t\t\t\tif ( fieldDef.type === 'media' ) {\n\t\t\t\t\t\t\tdenormalizedValue = denormalizeMediaValue(\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\tfieldDef\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} else if ( fieldDef.type === 'link' ) {\n\t\t\t\t\t\t\tdenormalizedValue = denormalizeLinkValue(\n\t\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\t\tfieldDef\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Build an object with all mapped attributes\n\t\t\t\t\t\tconst updates = {};\n\t\t\t\t\t\tObject.entries( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t\t( [ key, attrKey ] ) => {\n\t\t\t\t\t\t\t\t// If key is explicitly in value, use it (even if undefined to allow clearing)\n\t\t\t\t\t\t\t\t// Otherwise, preserve the old value\n\t\t\t\t\t\t\t\tif ( key in denormalizedValue ) {\n\t\t\t\t\t\t\t\t\tupdates[ attrKey ] =\n\t\t\t\t\t\t\t\t\t\tdenormalizedValue[ key ];\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tupdates[ attrKey ] = item[ attrKey ];\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\treturn updates;\n\t\t\t\t\t}\n\t\t\t\t\t// For simple id-based fields, use the id as the attribute key\n\t\t\t\t\treturn { [ fieldDef.id ]: value };\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\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\tcontrol: fieldDef.type,\n\t\t\t\t\tclientId,\n\t\t\t\t\tfieldDef,\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\treturn field;\n\t\t} );\n\t}, [ blockTypeFields, blockType?.attributes, clientId ] );\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\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\treturn (\n\t\t<div className=\"block-editor-content-only-controls__fields-container\">\n\t\t\t<div className=\"block-editor-content-only-controls__fields-header\">\n\t\t\t\t<HStack spacing={ 1 } justify=\"space-between\" expanded>\n\t\t\t\t\t<HStack spacing={ 1 } justify=\"flex-start\">\n\t\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t\t\t<div>{ blockTitle }</div>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<FieldsDropdownMenu\n\t\t\t\t\t\tfields={ dataFormFields }\n\t\t\t\t\t\tvisibleFields={ form.fields }\n\t\t\t\t\t\tonToggleField={ handleToggleField }\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={ ( changes ) => {\n\t\t\t\t\tupdateBlockAttributes( clientId, changes );\n\t\t\t\t} }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction DrillDownButton( { clientId } ) {\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\treturn (\n\t\t<div className=\"block-editor-content-only-controls__button-panel\">\n\t\t\t<Navigator.Button\n\t\t\t\tpath={ `/${ clientId }` }\n\t\t\t\tclassName=\"block-editor-content-only-controls__drill-down-button\"\n\t\t\t>\n\t\t\t\t<HStack expanded justify=\"space-between\">\n\t\t\t\t\t<HStack justify=\"flex-start\" spacing={ 1 }>\n\t\t\t\t\t\t<BlockIcon icon={ blockInformation?.icon } />\n\t\t\t\t\t\t<div>{ blockTitle }</div>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Icon icon={ arrowRight } />\n\t\t\t\t</HStack>\n\t\t\t</Navigator.Button>\n\t\t</div>\n\t);\n}\n\nfunction ContentOnlyControlsScreen( {\n\trootClientId,\n\tcontentClientIds,\n\tparentClientIds,\n\tisNested,\n} ) {\n\tconst isRootContentBlock = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockName } = select( blockEditorStore );\n\t\t\tconst blockName = getBlockName( rootClientId );\n\t\t\tconst { hasContentRoleAttribute } = unlock( select( blocksStore ) );\n\t\t\treturn hasContentRoleAttribute( blockName );\n\t\t},\n\t\t[ rootClientId ]\n\t);\n\n\tif ( ! isRootContentBlock && ! contentClientIds.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isNested && (\n\t\t\t\t<div className=\"block-editor-content-only-controls__button-panel\">\n\t\t\t\t\t<Navigator.BackButton className=\"block-editor-content-only-controls__back-button\">\n\t\t\t\t\t\t<HStack expanded spacing={ 1 } justify=\"flex-start\">\n\t\t\t\t\t\t\t<Icon icon={ arrowLeft } />\n\t\t\t\t\t\t\t<div>{ __( 'Back' ) }</div>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Navigator.BackButton>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isRootContentBlock && <BlockFields clientId={ rootClientId } /> }\n\t\t\t{ contentClientIds.map( ( clientId ) => {\n\t\t\t\tif ( parentClientIds?.[ clientId ] ) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<DrillDownButton\n\t\t\t\t\t\t\tkey={ clientId }\n\t\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn <BlockFields key={ clientId } clientId={ clientId } />;\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nexport default function ContentOnlyControls( { rootClientId } ) {\n\tconst { updatedRootClientId, nestedContentClientIds, contentClientIds } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getClientIdsOfDescendants, getBlockEditingMode } =\n\t\t\t\t\tselect( blockEditorStore );\n\n\t\t\t\t// _nestedContentClientIds is for content blocks within 'drilldowns'.\n\t\t\t\t// It's an object where the key is the parent clientId, and the element is\n\t\t\t\t// an array of child clientIds whose controls are shown within the drilldown.\n\t\t\t\tconst _nestedContentClientIds = {};\n\n\t\t\t\t// _contentClientIds is the list of contentClientIds for blocks being\n\t\t\t\t// shown at the root level. Includes parent blocks that might have a drilldown,\n\t\t\t\t// but not the children of those blocks.\n\t\t\t\tconst _contentClientIds = [];\n\n\t\t\t\t// An array of all nested client ids. Used for ensuring blocks within drilldowns\n\t\t\t\t// don't appear at the root level.\n\t\t\t\tlet allNestedClientIds = [];\n\n\t\t\t\t// A flattened list of all content clientIds to arrange into the\n\t\t\t\t// groups above.\n\t\t\t\tconst allContentClientIds = getClientIdsOfDescendants(\n\t\t\t\t\trootClientId\n\t\t\t\t).filter(\n\t\t\t\t\t( clientId ) =>\n\t\t\t\t\t\tgetBlockEditingMode( clientId ) === 'contentOnly'\n\t\t\t\t);\n\n\t\t\t\tfor ( const clientId of allContentClientIds ) {\n\t\t\t\t\tconst childClientIds = getClientIdsOfDescendants(\n\t\t\t\t\t\tclientId\n\t\t\t\t\t).filter(\n\t\t\t\t\t\t( childClientId ) =>\n\t\t\t\t\t\t\tgetBlockEditingMode( childClientId ) ===\n\t\t\t\t\t\t\t'contentOnly'\n\t\t\t\t\t);\n\n\t\t\t\t\t// If there's more than one child block, use a drilldown.\n\t\t\t\t\tif (\n\t\t\t\t\t\tchildClientIds.length > 1 &&\n\t\t\t\t\t\t! allNestedClientIds.includes( clientId )\n\t\t\t\t\t) {\n\t\t\t\t\t\t_nestedContentClientIds[ clientId ] = childClientIds;\n\t\t\t\t\t\tallNestedClientIds = [\n\t\t\t\t\t\t\tallNestedClientIds,\n\t\t\t\t\t\t\t...childClientIds,\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! allNestedClientIds.includes( clientId ) ) {\n\t\t\t\t\t\t_contentClientIds.push( clientId );\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// Avoid showing only one drilldown block at the root.\n\t\t\t\tif (\n\t\t\t\t\t_contentClientIds.length === 1 &&\n\t\t\t\t\tObject.keys( _nestedContentClientIds ).length === 1\n\t\t\t\t) {\n\t\t\t\t\tconst onlyParentClientId = Object.keys(\n\t\t\t\t\t\t_nestedContentClientIds\n\t\t\t\t\t)[ 0 ];\n\t\t\t\t\treturn {\n\t\t\t\t\t\tupdatedRootClientId: onlyParentClientId,\n\t\t\t\t\t\tcontentClientIds:\n\t\t\t\t\t\t\t_nestedContentClientIds[ onlyParentClientId ],\n\t\t\t\t\t\tnestedContentClientIds: {},\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\treturn {\n\t\t\t\t\tnestedContentClientIds: _nestedContentClientIds,\n\t\t\t\t\tcontentClientIds: _contentClientIds,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ rootClientId ]\n\t\t);\n\n\treturn (\n\t\t<Navigator initialPath=\"/\">\n\t\t\t<Navigator.Screen\n\t\t\t\tpath=\"/\"\n\t\t\t\tclassName=\"block-editor-content-only-controls__screen\"\n\t\t\t>\n\t\t\t\t<ContentOnlyControlsScreen\n\t\t\t\t\trootClientId={ updatedRootClientId ?? rootClientId }\n\t\t\t\t\tcontentClientIds={ contentClientIds }\n\t\t\t\t\tparentClientIds={ nestedContentClientIds }\n\t\t\t\t/>\n\t\t\t</Navigator.Screen>\n\t\t\t{ Object.keys( nestedContentClientIds ).map( ( clientId ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ clientId }\n\t\t\t\t\tpath={ `/${ clientId }` }\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__screen\"\n\t\t\t\t>\n\t\t\t\t\t<ContentOnlyControlsScreen\n\t\t\t\t\t\tisNested\n\t\t\t\t\t\trootClientId={ clientId }\n\t\t\t\t\t\tcontentClientIds={ nestedContentClientIds[ clientId ] }\n\t\t\t\t\t/>\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</Navigator>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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, onChange, 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 { fieldDef } = config;
+  const updateAttributes = (newValue) => {
+    const mappedChanges = field.setValue({ item: data, value: newValue });
+    onChange(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,