@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.9.0

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

@@ -0,0 +1,242 @@
+// packages/block-editor/src/components/content-only-controls/media/index.js
+import {
+  Button,
+  Icon,
+  __experimentalGrid as Grid
+} from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
+import { __ } from "@wordpress/i18n";
+import {
+  audio as audioIcon,
+  image as imageIcon,
+  media as mediaIcon,
+  video as videoIcon
+} from "@wordpress/icons";
+import MediaReplaceFlow from "../../media-replace-flow";
+import MediaUploadCheck from "../../media-upload/check";
+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({ data, field, attachment }) {
+  const config = field.config || {};
+  const { allowedTypes = [], multiple = false } = config;
+  if (multiple) {
+    return "todo multiple";
+  }
+  if (attachment?.media_type === "image" || attachment?.poster) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: "block-editor-content-only-controls__media-thumbnail",
+        alt: "",
+        width: 24,
+        height: 24,
+        src: attachment.media_type === "image" ? attachment.source_url : attachment.poster
+      }
+    );
+  }
+  if (allowedTypes.length === 1) {
+    const value = field.getValue({ item: data });
+    const url = value?.url;
+    if (url) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "block-editor-content-only-controls__media-thumbnail",
+          alt: "",
+          width: 24,
+          height: 24,
+          src: url
+        }
+      );
+    }
+    let icon;
+    if (allowedTypes[0] === "image") {
+      icon = imageIcon;
+    } else if (allowedTypes[0] === "video") {
+      icon = videoIcon;
+    } else if (allowedTypes[0] === "audio") {
+      icon = audioIcon;
+    } else {
+      icon = mediaIcon;
+    }
+    if (icon) {
+      return /* @__PURE__ */ jsx(Icon, { icon, size: 24 });
+    }
+  }
+  return /* @__PURE__ */ jsx(Icon, { icon: mediaIcon, size: 24 });
+}
+function Media({ data, field, config = {} }) {
+  const { popoverProps } = useInspectorPopoverPlacement({
+    isControl: true
+  });
+  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) {
+        return;
+      }
+      const settings = select(blockEditorStore).getSettings();
+      const getMedia = settings[getMediaSelectKey];
+      if (!getMedia) {
+        return;
+      }
+      return getMedia(select, id);
+    },
+    [id]
+  );
+  let chooseItemLabel;
+  if (allowedTypes.length === 1) {
+    const allowedType = allowedTypes[0];
+    if (allowedType === "image") {
+      chooseItemLabel = __("Choose an image\u2026");
+    } else if (allowedType === "video") {
+      chooseItemLabel = __("Choose a video\u2026");
+    } else if (allowedType === "application") {
+      chooseItemLabel = __("Choose a file\u2026");
+    } else {
+      chooseItemLabel = __("Choose a media item\u2026");
+    }
+  } else {
+    chooseItemLabel = __("Choose a media item\u2026");
+  }
+  return /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsx(
+    MediaReplaceFlow,
+    {
+      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 });
+      },
+      ...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";
+            }
+          }
+          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 })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+export {
+  Media as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/content-only-controls/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 '../../media-replace-flow';\nimport MediaUploadCheck from '../../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 } ) {\n\tconst config = field.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<img\n\t\t\t\tclassName=\"block-editor-content-only-controls__media-thumbnail\"\n\t\t\t\talt=\"\"\n\t\t\t\twidth={ 24 }\n\t\t\t\theight={ 24 }\n\t\t\t\tsrc={\n\t\t\t\t\tattachment.media_type === 'image'\n\t\t\t\t\t\t? attachment.source_url\n\t\t\t\t\t\t: attachment.poster\n\t\t\t\t}\n\t\t\t/>\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 ( url ) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-thumbnail\"\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={ url }\n\t\t\t\t/>\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, config = {} } ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst value = field.getValue( { item: data } );\n\tconst { allowedTypes = [], multiple = false } = field.config || {};\n\tconst { clientId, updateBlockAttributes, fieldDef } = config;\n\tconst updateAttributes = ( newFieldValue ) => {\n\t\tconst mappedChanges = field.setValue( {\n\t\t\titem: data,\n\t\t\tvalue: newFieldValue,\n\t\t} );\n\t\tupdateBlockAttributes( clientId, mappedChanges );\n\t};\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\tif (\n\t\t\t\t\t\t\t\tkey === 'id' ||\n\t\t\t\t\t\t\t\tkey === 'src' ||\n\t\t\t\t\t\t\t\tkey === 'url'\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tresetValue[ key ] = undefined;\n\t\t\t\t\t\t\t} else if ( key === 'caption' || key === 'alt' ) {\n\t\t\t\t\t\t\t\tresetValue[ key ] = '';\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\t// Turn off featured image when resetting (only if it's in the mapping)\n\t\t\t\t\tif ( hasFeaturedImageSupport ) {\n\t\t\t\t\t\tresetValue.featuredImage = false;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Merge with existing value to preserve other field properties\n\t\t\t\t\tupdateAttributes( { ...value, ...resetValue } );\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\tupdateAttributes( {\n\t\t\t\t\t\t\t...value,\n\t\t\t\t\t\t\tfeaturedImage: ! value?.featuredImage,\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// Determine mediaType from MIME type, not from object type\n\t\t\t\t\t\tlet mediaType = 'image'; // default\n\t\t\t\t\t\tif ( selectedMedia.mime_type ) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tselectedMedia.mime_type.startsWith( 'video/' )\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tmediaType = 'video';\n\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\tselectedMedia.mime_type.startsWith( 'audio/' )\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tmediaType = 'audio';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\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\n\t\t\t\t\t\t// Iterate over mapping keys and set values for supported properties\n\t\t\t\t\t\tif ( fieldDef?.mapping ) {\n\t\t\t\t\t\t\tObject.keys( fieldDef.mapping ).forEach(\n\t\t\t\t\t\t\t\t( key ) => {\n\t\t\t\t\t\t\t\t\tif ( key === 'id' ) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.id;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'src' ||\n\t\t\t\t\t\t\t\t\t\tkey === 'url'\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.url;\n\t\t\t\t\t\t\t\t\t} else if ( key === 'type' ) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = mediaType;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'link' &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.link\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.link;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'caption' &&\n\t\t\t\t\t\t\t\t\t\t! value?.caption &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.caption\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.caption;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'alt' &&\n\t\t\t\t\t\t\t\t\t\t! value?.alt &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.alt\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.alt;\n\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\tkey === 'poster' &&\n\t\t\t\t\t\t\t\t\t\tselectedMedia.poster\n\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\tnewValue[ key ] = selectedMedia.poster;\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\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\t// Merge with existing value to preserve other field properties\n\t\t\t\t\t\tconst finalValue = { ...value, ...newValue };\n\t\t\t\t\t\tupdateAttributes( finalValue );\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/>\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/components/content-only-controls/rich-text/index.js

@@ -0,0 +1,160 @@
+// packages/block-editor/src/components/content-only-controls/rich-text/index.js
+import { BaseControl, useBaseControlProps } from "@wordpress/components";
+import { useMergeRefs } from "@wordpress/compose";
+import { useRegistry } from "@wordpress/data";
+import { useRef, useState } from "@wordpress/element";
+import {
+  __unstableUseRichText as useRichText,
+  removeFormat
+} from "@wordpress/rich-text";
+import { useFormatTypes } from "../../rich-text/use-format-types";
+import { getAllowedFormats } from "../../rich-text/utils";
+import { useEventListeners } from "../../rich-text/event-listeners";
+import FormatEdit from "../../rich-text/format-edit";
+import { keyboardShortcutContext, inputEventContext } from "../../rich-text";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RichTextControl({
+  data,
+  field,
+  hideLabelFromVision,
+  config = {}
+}) {
+  const registry = useRegistry();
+  const attrValue = field.getValue({ item: data });
+  const fieldConfig = field.config || {};
+  const { clientId, updateBlockAttributes } = config;
+  const updateAttributes = (html) => {
+    const mappedChanges = field.setValue({ item: data, value: html });
+    updateBlockAttributes(clientId, mappedChanges);
+  };
+  const [selection, setSelection] = useState({
+    start: void 0,
+    end: void 0
+  });
+  const [isSelected, setIsSelected] = useState(false);
+  const anchorRef = useRef();
+  const inputEvents = useRef(/* @__PURE__ */ new Set());
+  const keyboardShortcuts = useRef(/* @__PURE__ */ new Set());
+  const adjustedAllowedFormats = getAllowedFormats({
+    allowedFormats: fieldConfig?.allowedFormats,
+    disableFormats: fieldConfig?.disableFormats
+  });
+  const {
+    formatTypes,
+    prepareHandlers,
+    valueHandlers,
+    changeHandlers,
+    dependencies
+  } = useFormatTypes({
+    clientId,
+    identifier: field.id,
+    allowedFormats: adjustedAllowedFormats,
+    withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
+    disableNoneEssentialFormatting: true
+  });
+  function addEditorOnlyFormats(value2) {
+    return valueHandlers.reduce(
+      (accumulator, fn) => fn(accumulator, value2.text),
+      value2.formats
+    );
+  }
+  function removeEditorOnlyFormats(value2) {
+    formatTypes.forEach((formatType) => {
+      if (formatType.__experimentalCreatePrepareEditableTree) {
+        value2 = removeFormat(
+          value2,
+          formatType.name,
+          0,
+          value2.text.length
+        );
+      }
+    });
+    return value2.formats;
+  }
+  function addInvisibleFormats(value2) {
+    return prepareHandlers.reduce(
+      (accumulator, fn) => fn(accumulator, value2.text),
+      value2.formats
+    );
+  }
+  function onFocus() {
+    anchorRef.current?.focus();
+  }
+  const {
+    value,
+    getValue,
+    onChange: onRichTextChange,
+    ref: richTextRef
+  } = useRichText({
+    value: attrValue,
+    onChange(html, { __unstableFormats, __unstableText }) {
+      updateAttributes(html);
+      Object.values(changeHandlers).forEach((changeHandler) => {
+        changeHandler(__unstableFormats, __unstableText);
+      });
+    },
+    selectionStart: selection.start,
+    selectionEnd: selection.end,
+    onSelectionChange: (start, end) => setSelection({ start, end }),
+    __unstableIsSelected: isSelected,
+    preserveWhiteSpace: !!fieldConfig?.preserveWhiteSpace,
+    placeholder: fieldConfig?.placeholder,
+    __unstableDisableFormats: fieldConfig?.disableFormats,
+    __unstableDependencies: dependencies,
+    __unstableAfterParse: addEditorOnlyFormats,
+    __unstableBeforeSerialize: removeEditorOnlyFormats,
+    __unstableAddInvisibleFormats: addInvisibleFormats
+  });
+  const { baseControlProps, controlProps } = useBaseControlProps({
+    hideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,
+    label: field.label
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSelected && /* @__PURE__ */ jsx(keyboardShortcutContext.Provider, { value: keyboardShortcuts, children: /* @__PURE__ */ jsx(inputEventContext.Provider, { value: inputEvents, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      FormatEdit,
+      {
+        value,
+        onChange: onRichTextChange,
+        onFocus,
+        formatTypes,
+        forwardedRef: anchorRef,
+        isVisible: false
+      }
+    ) }) }) }),
+    /* @__PURE__ */ jsx(BaseControl, { __nextHasNoMarginBottom: true, ...baseControlProps, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "block-editor-content-only-controls__rich-text",
+        role: "textbox",
+        "aria-multiline": !fieldConfig?.disableLineBreaks,
+        ref: useMergeRefs([
+          richTextRef,
+          useEventListeners({
+            registry,
+            getValue,
+            onChange: onRichTextChange,
+            formatTypes,
+            selectionChange: setSelection,
+            isSelected,
+            disableFormats: fieldConfig?.disableFormats,
+            value,
+            tagName: "div",
+            removeEditorOnlyFormats,
+            disableLineBreaks: fieldConfig?.disableLineBreaks,
+            keyboardShortcuts,
+            inputEvents
+          }),
+          anchorRef
+        ]),
+        onFocus: () => setIsSelected(true),
+        onBlur: () => setIsSelected(false),
+        contentEditable: true,
+        ...controlProps
+      }
+    ) })
+  ] });
+}
+export {
+  RichTextControl as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/content-only-controls/rich-text/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BaseControl, useBaseControlProps } from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useRegistry } from '@wordpress/data';\nimport { useRef, useState } from '@wordpress/element';\nimport {\n\t__unstableUseRichText as useRichText,\n\tremoveFormat,\n} from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { useFormatTypes } from '../../rich-text/use-format-types';\nimport { getAllowedFormats } from '../../rich-text/utils';\nimport { useEventListeners } from '../../rich-text/event-listeners';\nimport FormatEdit from '../../rich-text/format-edit';\nimport { keyboardShortcutContext, inputEventContext } from '../../rich-text';\n\nexport default function RichTextControl( {\n\tdata,\n\tfield,\n\thideLabelFromVision,\n\tconfig = {},\n} ) {\n\tconst registry = useRegistry();\n\tconst attrValue = field.getValue( { item: data } );\n\tconst fieldConfig = field.config || {};\n\tconst { clientId, updateBlockAttributes } = config;\n\tconst updateAttributes = ( html ) => {\n\t\tconst mappedChanges = field.setValue( { item: data, value: html } );\n\t\tupdateBlockAttributes( clientId, mappedChanges );\n\t};\n\tconst [ selection, setSelection ] = useState( {\n\t\tstart: undefined,\n\t\tend: undefined,\n\t} );\n\tconst [ isSelected, setIsSelected ] = useState( false );\n\tconst anchorRef = useRef();\n\tconst inputEvents = useRef( new Set() );\n\tconst keyboardShortcuts = useRef( new Set() );\n\n\tconst adjustedAllowedFormats = getAllowedFormats( {\n\t\tallowedFormats: fieldConfig?.allowedFormats,\n\t\tdisableFormats: fieldConfig?.disableFormats,\n\t} );\n\n\tconst {\n\t\tformatTypes,\n\t\tprepareHandlers,\n\t\tvalueHandlers,\n\t\tchangeHandlers,\n\t\tdependencies,\n\t} = useFormatTypes( {\n\t\tclientId,\n\t\tidentifier: field.id,\n\t\tallowedFormats: adjustedAllowedFormats,\n\t\twithoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,\n\t\tdisableNoneEssentialFormatting: true,\n\t} );\n\n\tfunction addEditorOnlyFormats( value ) {\n\t\treturn valueHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction removeEditorOnlyFormats( value ) {\n\t\tformatTypes.forEach( ( formatType ) => {\n\t\t\t// Remove formats created by prepareEditableTree, because they are editor only.\n\t\t\tif ( formatType.__experimentalCreatePrepareEditableTree ) {\n\t\t\t\tvalue = removeFormat(\n\t\t\t\t\tvalue,\n\t\t\t\t\tformatType.name,\n\t\t\t\t\t0,\n\t\t\t\t\tvalue.text.length\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\treturn value.formats;\n\t}\n\n\tfunction addInvisibleFormats( value ) {\n\t\treturn prepareHandlers.reduce(\n\t\t\t( accumulator, fn ) => fn( accumulator, value.text ),\n\t\t\tvalue.formats\n\t\t);\n\t}\n\n\tfunction onFocus() {\n\t\tanchorRef.current?.focus();\n\t}\n\n\tconst {\n\t\tvalue,\n\t\tgetValue,\n\t\tonChange: onRichTextChange,\n\t\tref: richTextRef,\n\t} = useRichText( {\n\t\tvalue: attrValue,\n\t\tonChange( html, { __unstableFormats, __unstableText } ) {\n\t\t\tupdateAttributes( html );\n\t\t\tObject.values( changeHandlers ).forEach( ( changeHandler ) => {\n\t\t\t\tchangeHandler( __unstableFormats, __unstableText );\n\t\t\t} );\n\t\t},\n\t\tselectionStart: selection.start,\n\t\tselectionEnd: selection.end,\n\t\tonSelectionChange: ( start, end ) => setSelection( { start, end } ),\n\t\t__unstableIsSelected: isSelected,\n\t\tpreserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,\n\t\tplaceholder: fieldConfig?.placeholder,\n\t\t__unstableDisableFormats: fieldConfig?.disableFormats,\n\t\t__unstableDependencies: dependencies,\n\t\t__unstableAfterParse: addEditorOnlyFormats,\n\t\t__unstableBeforeSerialize: removeEditorOnlyFormats,\n\t\t__unstableAddInvisibleFormats: addInvisibleFormats,\n\t} );\n\n\tconst { baseControlProps, controlProps } = useBaseControlProps( {\n\t\thideLabelFromVision: hideLabelFromVision ?? field.hideLabelFromVision,\n\t\tlabel: field.label,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t{ isSelected && (\n\t\t\t\t<keyboardShortcutContext.Provider value={ keyboardShortcuts }>\n\t\t\t\t\t<inputEventContext.Provider value={ inputEvents }>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<FormatEdit\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t\tonChange={ onRichTextChange }\n\t\t\t\t\t\t\t\tonFocus={ onFocus }\n\t\t\t\t\t\t\t\tformatTypes={ formatTypes }\n\t\t\t\t\t\t\t\tforwardedRef={ anchorRef }\n\t\t\t\t\t\t\t\tisVisible={ false }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</inputEventContext.Provider>\n\t\t\t\t</keyboardShortcutContext.Provider>\n\t\t\t) }\n\t\t\t<BaseControl __nextHasNoMarginBottom { ...baseControlProps }>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__rich-text\"\n\t\t\t\t\trole=\"textbox\"\n\t\t\t\t\taria-multiline={ ! fieldConfig?.disableLineBreaks }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\trichTextRef,\n\t\t\t\t\t\tuseEventListeners( {\n\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\tgetValue,\n\t\t\t\t\t\t\tonChange: onRichTextChange,\n\t\t\t\t\t\t\tformatTypes,\n\t\t\t\t\t\t\tselectionChange: setSelection,\n\t\t\t\t\t\t\tisSelected,\n\t\t\t\t\t\t\tdisableFormats: fieldConfig?.disableFormats,\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t\ttagName: 'div',\n\t\t\t\t\t\t\tremoveEditorOnlyFormats,\n\t\t\t\t\t\t\tdisableLineBreaks: fieldConfig?.disableLineBreaks,\n\t\t\t\t\t\t\tkeyboardShortcuts,\n\t\t\t\t\t\t\tinputEvents,\n\t\t\t\t\t\t} ),\n\t\t\t\t\t\tanchorRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\tonFocus={ () => setIsSelected( true ) }\n\t\t\t\t\tonBlur={ () => setIsSelected( false ) }\n\t\t\t\t\tcontentEditable\n\t\t\t\t\t{ ...controlProps }\n\t\t\t\t/>\n\t\t\t</BaseControl>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["value"]
+}

package/build-module/components/content-only-controls/use-inspector-popover-placement.js

@@ -0,0 +1,16 @@
+// packages/block-editor/src/components/content-only-controls/use-inspector-popover-placement.js
+import { useViewportMatch } from "@wordpress/compose";
+function useInspectorPopoverPlacement({ isControl } = { isControl: false }) {
+  const isMobile = useViewportMatch("medium", "<");
+  return !isMobile ? {
+    popoverProps: {
+      placement: "left-start",
+      // For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+      offset: isControl ? 35 : 259
+    }
+  } : {};
+}
+export {
+  useInspectorPopoverPlacement
+};
+//# sourceMappingURL=use-inspector-popover-placement.js.map

package/build-module/components/content-only-controls/use-inspector-popover-placement.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/content-only-controls/use-inspector-popover-placement.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\n\nexport function useInspectorPopoverPlacement(\n\t{ isControl } = { isControl: false }\n) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn ! isMobile\n\t\t? {\n\t\t\t\tpopoverProps: {\n\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)\n\t\t\t\t\toffset: isControl ? 35 : 259,\n\t\t\t\t},\n\t\t  }\n\t\t: {};\n}\n"],
+  "mappings": ";AAGA,SAAS,wBAAwB;AAE1B,SAAS,6BACf,EAAE,UAAU,IAAI,EAAE,WAAW,MAAM,GAClC;AACD,QAAM,WAAW,iBAAkB,UAAU,GAAI;AACjD,SAAO,CAAE,WACN;AAAA,IACA,cAAc;AAAA,MACb,WAAW;AAAA;AAAA,MAEX,QAAQ,YAAY,KAAK;AAAA,IAC1B;AAAA,EACA,IACA,CAAC;AACL;",
+  "names": []
+}

package/build-module/components/font-family/index.js

@@ -8,8 +8,6 @@ import { jsx } from "react/jsx-runtime";
 function FontFamilyControl({
   /** Start opting into the larger default height that will become the default size in a future version. */
   __next40pxDefaultSize = false,
-  /** Start opting into the new margin-free styles that will become the default in a future version. */
-  __nextHasNoMarginBottom = false,
   value = "",
   onChange,
   fontFamilies,
@@ -34,16 +32,6 @@ function FontFamilyControl({
       style: { fontFamily }
     }))
   ];
-  if (!__nextHasNoMarginBottom) {
-    deprecated(
-      "Bottom margin styles for wp.blockEditor.FontFamilyControl",
-      {
-        since: "6.7",
-        version: "7.0",
-        hint: "Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version"
-      }
-    );
-  }
   if (!__next40pxDefaultSize && (props.size === void 0 || props.size === "default")) {
     deprecated(
       `36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
@@ -64,9 +52,7 @@ function FontFamilyControl({
       value: selectedValue,
       onChange: ({ selectedItem }) => onChange(selectedItem.key),
       options,
-      className: clsx("block-editor-font-family-control", className, {
-        "is-next-has-no-margin-bottom": __nextHasNoMarginBottom
-      }),
+      className: clsx("block-editor-font-family-control", className),
       ...props
     }
   );

package/build-module/components/font-family/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/font-family/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default function FontFamilyControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next40pxDefaultSize = false,\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tvalue = '',\n\tonChange,\n\tfontFamilies,\n\tclassName,\n\t...props\n} ) {\n\tconst [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );\n\tif ( ! fontFamilies ) {\n\t\tfontFamilies = blockLevelFontFamilies;\n\t}\n\n\tif ( ! fontFamilies || fontFamilies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst options = [\n\t\t{\n\t\t\tkey: '',\n\t\t\tname: __( 'Default' ),\n\t\t},\n\t\t...fontFamilies.map( ( { fontFamily, name } ) => ( {\n\t\t\tkey: fontFamily,\n\t\t\tname: name || fontFamily,\n\t\t\tstyle: { fontFamily },\n\t\t} ) ),\n\t];\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.blockEditor.FontFamilyControl',\n\t\t\t{\n\t\t\t\tsince: '6.7',\n\t\t\t\tversion: '7.0',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',\n\t\t\t}\n\t\t);\n\t}\n\n\tif (\n\t\t! __next40pxDefaultSize &&\n\t\t( props.size === undefined || props.size === 'default' )\n\t) {\n\t\tdeprecated(\n\t\t\t`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,\n\t\t\t{\n\t\t\t\tsince: '6.8',\n\t\t\t\tversion: '7.1',\n\t\t\t\thint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst selectedValue =\n\t\toptions.find( ( option ) => option.key === value ) ?? '';\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\tlabel={ __( 'Font' ) }\n\t\t\tvalue={ selectedValue }\n\t\t\tonChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }\n\t\t\toptions={ options }\n\t\t\tclassName={ clsx( 'block-editor-font-family-control', className, {\n\t\t\t\t'is-next-has-no-margin-bottom': __nextHasNoMarginBottom,\n\t\t\t} ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,2BAA2B;AACpC,OAAO,gBAAgB;AACvB,SAAS,UAAU;AAKnB,SAAS,mBAAmB;AA8D1B;AA5Da,SAAR,kBAAoC;AAAA;AAAA,EAE1C,wBAAwB;AAAA;AAAA,EAExB,0BAA0B;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM,CAAE,sBAAuB,IAAI,YAAa,yBAA0B;AAC1E,MAAK,CAAE,cAAe;AACrB,mBAAe;AAAA,EAChB;AAEA,MAAK,CAAE,gBAAgB,aAAa,WAAW,GAAI;AAClD,WAAO;AAAA,EACR;AAEA,QAAM,UAAU;AAAA,IACf;AAAA,MACC,KAAK;AAAA,MACL,MAAM,GAAI,SAAU;AAAA,IACrB;AAAA,IACA,GAAG,aAAa,IAAK,CAAE,EAAE,YAAY,KAAK,OAAS;AAAA,MAClD,KAAK;AAAA,MACL,MAAM,QAAQ;AAAA,MACd,OAAO,EAAE,WAAW;AAAA,IACrB,EAAI;AAAA,EACL;AAEA,MAAK,CAAE,yBAA0B;AAChC;AAAA,MACC;AAAA,MACA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,MACC,CAAE,0BACA,MAAM,SAAS,UAAa,MAAM,SAAS,YAC5C;AACD;AAAA,MACC;AAAA,MACA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,QAAM,gBACL,QAAQ,KAAM,CAAE,WAAY,OAAO,QAAQ,KAAM,KAAK;AACvD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,mCAAiC;AAAA,MACjC,OAAQ,GAAI,MAAO;AAAA,MACnB,OAAQ;AAAA,MACR,UAAW,CAAE,EAAE,aAAa,MAAO,SAAU,aAAa,GAAI;AAAA,MAC9D;AAAA,MACA,WAAY,KAAM,oCAAoC,WAAW;AAAA,QAChE,gCAAgC;AAAA,MACjC,CAAE;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useSettings } from '../use-settings';\n\nexport default function FontFamilyControl( {\n\t/** Start opting into the larger default height that will become the default size in a future version. */\n\t__next40pxDefaultSize = false,\n\tvalue = '',\n\tonChange,\n\tfontFamilies,\n\tclassName,\n\t...props\n} ) {\n\tconst [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );\n\tif ( ! fontFamilies ) {\n\t\tfontFamilies = blockLevelFontFamilies;\n\t}\n\n\tif ( ! fontFamilies || fontFamilies.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst options = [\n\t\t{\n\t\t\tkey: '',\n\t\t\tname: __( 'Default' ),\n\t\t},\n\t\t...fontFamilies.map( ( { fontFamily, name } ) => ( {\n\t\t\tkey: fontFamily,\n\t\t\tname: name || fontFamily,\n\t\t\tstyle: { fontFamily },\n\t\t} ) ),\n\t];\n\n\tif (\n\t\t! __next40pxDefaultSize &&\n\t\t( props.size === undefined || props.size === 'default' )\n\t) {\n\t\tdeprecated(\n\t\t\t`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,\n\t\t\t{\n\t\t\t\tsince: '6.8',\n\t\t\t\tversion: '7.1',\n\t\t\t\thint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst selectedValue =\n\t\toptions.find( ( option ) => option.key === value ) ?? '';\n\treturn (\n\t\t<CustomSelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t__shouldNotWarnDeprecated36pxSize\n\t\t\tlabel={ __( 'Font' ) }\n\t\t\tvalue={ selectedValue }\n\t\t\tonChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }\n\t\t\toptions={ options }\n\t\t\tclassName={ clsx( 'block-editor-font-family-control', className ) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,2BAA2B;AACpC,OAAO,gBAAgB;AACvB,SAAS,UAAU;AAKnB,SAAS,mBAAmB;AAiD1B;AA/Ca,SAAR,kBAAoC;AAAA;AAAA,EAE1C,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM,CAAE,sBAAuB,IAAI,YAAa,yBAA0B;AAC1E,MAAK,CAAE,cAAe;AACrB,mBAAe;AAAA,EAChB;AAEA,MAAK,CAAE,gBAAgB,aAAa,WAAW,GAAI;AAClD,WAAO;AAAA,EACR;AAEA,QAAM,UAAU;AAAA,IACf;AAAA,MACC,KAAK;AAAA,MACL,MAAM,GAAI,SAAU;AAAA,IACrB;AAAA,IACA,GAAG,aAAa,IAAK,CAAE,EAAE,YAAY,KAAK,OAAS;AAAA,MAClD,KAAK;AAAA,MACL,MAAM,QAAQ;AAAA,MACd,OAAO,EAAE,WAAW;AAAA,IACrB,EAAI;AAAA,EACL;AAEA,MACC,CAAE,0BACA,MAAM,SAAS,UAAa,MAAM,SAAS,YAC5C;AACD;AAAA,MACC;AAAA,MACA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,QAAM,gBACL,QAAQ,KAAM,CAAE,WAAY,OAAO,QAAQ,KAAM,KAAK;AACvD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,mCAAiC;AAAA,MACjC,OAAQ,GAAI,MAAO;AAAA,MACnB,OAAQ;AAAA,MACR,UAAW,CAAE,EAAE,aAAa,MAAO,SAAU,aAAa,GAAI;AAAA,MAC9D;AAAA,MACA,WAAY,KAAM,oCAAoC,SAAU;AAAA,MAC9D,GAAG;AAAA;AAAA,EACN;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/dimensions-panel.js

@@ -28,9 +28,10 @@ function useHasDimensionsPanel(settings) {
   const hasMargin = useHasMargin(settings);
   const hasGap = useHasGap(settings);
   const hasMinHeight = useHasMinHeight(settings);
+  const hasWidth = useHasWidth(settings);
   const hasAspectRatio = useHasAspectRatio(settings);
   const hasChildLayout = useHasChildLayout(settings);
-  return Platform.OS === "web" && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasAspectRatio || hasChildLayout);
+  return Platform.OS === "web" && (hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap || hasMinHeight || hasWidth || hasAspectRatio || hasChildLayout);
 }
 function useHasContentSize(settings) {
   return settings?.layout?.contentSize;
@@ -50,6 +51,9 @@ function useHasGap(settings) {
 function useHasMinHeight(settings) {
   return settings?.dimensions?.minHeight;
 }
+function useHasWidth(settings) {
+  return settings?.dimensions?.width;
+}
 function useHasAspectRatio(settings) {
   return settings?.dimensions?.aspectRatio;
 }
@@ -138,6 +142,7 @@ var DEFAULT_CONTROLS = {
   margin: true,
   blockGap: true,
   minHeight: true,
+  width: true,
   aspectRatio: true,
   childLayout: true
 };
@@ -280,6 +285,15 @@ function DimensionsPanel({
     setMinHeightValue(void 0);
   };
   const hasMinHeightValue = () => !!value?.dimensions?.minHeight;
+  const showWidthControl = useHasWidth(settings);
+  const widthValue = decodeValue(inheritedValue?.dimensions?.width);
+  const setWidthValue = (newValue) => {
+    onChange(setImmutably(value, ["dimensions", "width"], newValue));
+  };
+  const resetWidthValue = () => {
+    setWidthValue(void 0);
+  };
+  const hasWidthValue = () => !!value?.dimensions?.width;
   const showAspectRatioControl = useHasAspectRatio(settings);
   const aspectRatioValue = decodeValue(
     inheritedValue?.dimensions?.aspectRatio
@@ -328,7 +342,8 @@ function DimensionsPanel({
       dimensions: {
         ...previousValue?.dimensions,
         minHeight: void 0,
-        aspectRatio: void 0
+        aspectRatio: void 0,
+        width: void 0
       }
     };
   }, []);
@@ -571,6 +586,24 @@ function DimensionsPanel({
             )
           }
         ),
+        showWidthControl && /* @__PURE__ */ jsx(
+          ToolsPanelItem,
+          {
+            hasValue: hasWidthValue,
+            label: __("Width"),
+            onDeselect: resetWidthValue,
+            isShownByDefault: defaultControls.width ?? DEFAULT_CONTROLS.width,
+            panelId,
+            children: /* @__PURE__ */ jsx(
+              HeightControl,
+              {
+                label: __("Width"),
+                value: widthValue,
+                onChange: setWidthValue
+              }
+            )
+          }
+        ),
         showAspectRatioControl && /* @__PURE__ */ jsx(
           AspectRatioTool,
           {