@wordpress/block-editor 15.8.0 → 15.8.1-next.dc3f6d3c1.0

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

@@ -0,0 +1,264 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/content-only-controls/media/index.js
+var media_exports = {};
+__export(media_exports, {
+  default: () => Media
+});
+module.exports = __toCommonJS(media_exports);
+var import_components = require("@wordpress/components");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_media_replace_flow = __toESM(require("../../media-replace-flow"));
+var import_check = __toESM(require("../../media-upload/check"));
+var import_use_inspector_popover_placement = require("../use-inspector-popover-placement");
+var import_private_keys = require("../../../store/private-keys");
+var import_store = require("../../../store");
+var import_jsx_runtime = require("react/jsx-runtime");
+function MediaThumbnail({ control, attributeValues, attachment }) {
+  const { allowedTypes, multiple } = control.args;
+  const mapping = control.mapping;
+  if (multiple) {
+    return "todo multiple";
+  }
+  if (attachment?.media_type === "image" || attachment?.poster) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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) {
+    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) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          className: "block-editor-content-only-controls__media-thumbnail",
+          alt: "",
+          width: 24,
+          height: 24,
+          src
+        }
+      );
+    }
+    let icon;
+    if (allowedTypes[0] === "image") {
+      icon = import_icons.image;
+    } else if (allowedTypes[0] === "video") {
+      icon = import_icons.video;
+    } else if (allowedTypes[0] === "audio") {
+      icon = import_icons.audio;
+    } else {
+      icon = import_icons.media;
+    }
+    if (icon) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon, size: 24 });
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: import_icons.media, size: 24 });
+}
+function Media({
+  clientId,
+  control,
+  blockType,
+  attributeValues,
+  updateAttributes
+}) {
+  const { popoverProps } = (0, import_use_inspector_popover_placement.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 attachment = (0, import_data.useSelect)(
+    (select) => {
+      if (!id) {
+        return;
+      }
+      const settings = select(import_store.store).getSettings();
+      const getMedia = settings[import_private_keys.getMediaSelectKey];
+      if (!getMedia) {
+        return;
+      }
+      return getMedia(select, id);
+    },
+    [id]
+  );
+  let chooseItemLabel;
+  if (control.args.allowedTypes.length === 1) {
+    const allowedType = control.args.allowedTypes[0];
+    if (allowedType === "image") {
+      chooseItemLabel = (0, import_i18n.__)("Choose an image\u2026");
+    } else if (allowedType === "video") {
+      chooseItemLabel = (0, import_i18n.__)("Choose a video\u2026");
+    } else if (allowedType === "application") {
+      chooseItemLabel = (0, import_i18n.__)("Choose a file\u2026");
+    } else {
+      chooseItemLabel = (0, import_i18n.__)("Choose a media item\u2026");
+    }
+  } else {
+    chooseItemLabel = (0, import_i18n.__)("Choose a media item\u2026");
+  }
+  const defaultValues = (0, import_element.useMemo)(() => {
+    return Object.fromEntries(
+      Object.entries(control.mapping).map(([, attributeKey]) => {
+        return [
+          attributeKey,
+          blockType.attributes[attributeKey]?.defaultValue ?? void 0
+        ];
+      })
+    );
+  }, [blockType.attributes, control.mapping]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_check.default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanelItem,
+    {
+      panelId: clientId,
+      label: control.label,
+      hasValue: () => !!src,
+      onDeselect: () => {
+        updateAttributes(defaultValues);
+      },
+      isShownByDefault: control.shownByDefault,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_media_replace_flow.default,
+        {
+          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
+              });
+            }
+          },
+          renderToggle: (buttonProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              __next40pxDefaultSize: true,
+              className: "block-editor-content-only-controls__media",
+              ...buttonProps,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_components.__experimentalGrid,
+                {
+                  rowGap: 0,
+                  columnGap: 8,
+                  templateColumns: "24px 1fr",
+                  className: "block-editor-content-only-controls__media-row",
+                  children: [
+                    src && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        MediaThumbnail,
+                        {
+                          attachment,
+                          control,
+                          attributeValues
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          className: "block-editor-content-only-controls__media-placeholder",
+                          style: {
+                            width: "24px",
+                            height: "24px"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
+                    ] })
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+//# sourceMappingURL=index.js.map

package/build/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__experimentalToolsPanelItem as ToolsPanelItem,\n\t__experimentalGrid as Grid,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\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( { control, attributeValues, attachment } ) {\n\tconst { allowedTypes, multiple } = control.args;\n\tconst mapping = control.mapping;\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\tlet src;\n\t\tif (\n\t\t\tallowedTypes[ 0 ] === 'image' &&\n\t\t\tmapping.src &&\n\t\t\tattributeValues[ mapping.src ]\n\t\t) {\n\t\t\tsrc = attributeValues[ mapping.src ];\n\t\t} else if (\n\t\t\tallowedTypes[ 0 ] === 'video' &&\n\t\t\tmapping.poster &&\n\t\t\tattributeValues[ mapping.poster ]\n\t\t) {\n\t\t\tsrc = attributeValues[ mapping.poster ];\n\t\t}\n\n\t\tif ( src ) {\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={ src }\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( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst { popoverProps } = useInspectorPopoverPlacement( {\n\t\tisControl: true,\n\t} );\n\tconst typeKey = control.mapping.type;\n\tconst idKey = control.mapping.id;\n\tconst srcKey = control.mapping.src;\n\tconst captionKey = control.mapping.caption;\n\tconst altKey = control.mapping.alt;\n\tconst posterKey = control.mapping.poster;\n\tconst featuredImageKey = control.mapping.featuredImage;\n\n\tconst id = attributeValues[ idKey ];\n\tconst src = attributeValues[ srcKey ];\n\tconst caption = attributeValues[ captionKey ];\n\tconst alt = attributeValues[ altKey ];\n\tconst useFeaturedImage = attributeValues[ featuredImageKey ];\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 ( control.args.allowedTypes.length === 1 ) {\n\t\tconst allowedType = control.args.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\tconst defaultValues = useMemo( () => {\n\t\treturn Object.fromEntries(\n\t\t\tObject.entries( control.mapping ).map( ( [ , attributeKey ] ) => {\n\t\t\t\treturn [\n\t\t\t\t\tattributeKey,\n\t\t\t\t\tblockType.attributes[ attributeKey ]?.defaultValue ??\n\t\t\t\t\t\tundefined,\n\t\t\t\t];\n\t\t\t} )\n\t\t);\n\t}, [ blockType.attributes, control.mapping ] );\n\n\treturn (\n\t\t<MediaUploadCheck>\n\t\t\t<ToolsPanelItem\n\t\t\t\tpanelId={ clientId }\n\t\t\t\tlabel={ control.label }\n\t\t\t\thasValue={ () => !! src }\n\t\t\t\tonDeselect={ () => {\n\t\t\t\t\tupdateAttributes( defaultValues );\n\t\t\t\t} }\n\t\t\t\tisShownByDefault={ control.shownByDefault }\n\t\t\t>\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-replace-flow\"\n\t\t\t\t\tallowedTypes={ control.args.allowedTypes }\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ src }\n\t\t\t\t\tmultiple={ control.args.multiple }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\tonReset={ () => {\n\t\t\t\t\t\tupdateAttributes( defaultValues );\n\t\t\t\t\t} }\n\t\t\t\t\tuseFeaturedImage={ !! useFeaturedImage }\n\t\t\t\t\tonToggleFeaturedImage={\n\t\t\t\t\t\t!! featuredImageKey &&\n\t\t\t\t\t\t( () => {\n\t\t\t\t\t\t\tupdateAttributes( {\n\t\t\t\t\t\t\t\t...defaultValues,\n\t\t\t\t\t\t\t\t[ featuredImageKey ]: ! useFeaturedImage,\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\tonSelect={ ( selectedMedia ) => {\n\t\t\t\t\t\tif ( selectedMedia.id && selectedMedia.url ) {\n\t\t\t\t\t\t\tconst optionalAttributes = {};\n\n\t\t\t\t\t\t\tif ( typeKey && selectedMedia.type ) {\n\t\t\t\t\t\t\t\toptionalAttributes[ typeKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.type;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcaptionKey &&\n\t\t\t\t\t\t\t\t! caption &&\n\t\t\t\t\t\t\t\tselectedMedia.caption\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\toptionalAttributes[ captionKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.caption;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( altKey && ! alt && selectedMedia.alt ) {\n\t\t\t\t\t\t\t\toptionalAttributes[ altKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.alt;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( posterKey && selectedMedia.poster ) {\n\t\t\t\t\t\t\t\toptionalAttributes[ posterKey ] =\n\t\t\t\t\t\t\t\t\tselectedMedia.poster;\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[ idKey ]: selectedMedia.id,\n\t\t\t\t\t\t\t\t[ srcKey ]: selectedMedia.url,\n\t\t\t\t\t\t\t\t...optionalAttributes,\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\trenderToggle={ ( buttonProps ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media\"\n\t\t\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Grid\n\t\t\t\t\t\t\t\trowGap={ 0 }\n\t\t\t\t\t\t\t\tcolumnGap={ 8 }\n\t\t\t\t\t\t\t\ttemplateColumns=\"24px 1fr\"\n\t\t\t\t\t\t\t\tclassName=\"block-editor-content-only-controls__media-row\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ src && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<MediaThumbnail\n\t\t\t\t\t\t\t\t\t\t\tattachment={ attachment }\n\t\t\t\t\t\t\t\t\t\t\tcontrol={ control }\n\t\t\t\t\t\t\t\t\t\t\tattributeValues={ attributeValues }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\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\t{\n\t\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\t\tattachment?.title?.raw &&\n\t\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\t? attachment?.title?.raw\n\t\t\t\t\t\t\t\t\t\t\t\t\t: src\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t</span>\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\t{ ! src && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<span\n\t\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\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\theight: '24px',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\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\t{ chooseItemLabel }\n\t\t\t\t\t\t\t\t\t\t</span>\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</Grid>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToolsPanelItem>\n\t\t</MediaUploadCheck>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["imageIcon", "videoIcon", "audioIcon", "mediaIcon", "blockEditorStore", "MediaUploadCheck", "ToolsPanelItem", "MediaReplaceFlow", "Grid"]
+}

package/build/components/content-only-controls/plain-text/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/content-only-controls/plain-text/index.js
+var plain_text_exports = {};
+__export(plain_text_exports, {
+  default: () => PlainText
+});
+module.exports = __toCommonJS(plain_text_exports);
+var import_components = require("@wordpress/components");
+var import_dom = require("@wordpress/dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PlainText({
+  clientId,
+  control,
+  blockType,
+  attributeValues,
+  updateAttributes
+}) {
+  const valueKey = control.mapping.value;
+  const value = attributeValues[valueKey];
+  const defaultValue = blockType.attributes[valueKey]?.defaultValue ?? void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanelItem,
+    {
+      panelId: clientId,
+      label: control.label,
+      hasValue: () => {
+        return value !== defaultValue && (0, import_dom.__unstableStripHTML)(value)?.length !== 0;
+      },
+      onDeselect: () => {
+        updateAttributes({ [valueKey]: defaultValue });
+      },
+      isShownByDefault: control.shownByDefault,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.TextControl,
+        {
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true,
+          label: control.label,
+          value: value ? (0, import_dom.__unstableStripHTML)(value) : "",
+          onChange: (newValue) => {
+            updateAttributes({ [valueKey]: newValue });
+          },
+          autoComplete: "off",
+          hideLabelFromVision: control.shownByDefault
+        }
+      )
+    }
+  );
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/content-only-controls/plain-text/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tTextControl,\n} from '@wordpress/components';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\nexport default function PlainText( {\n\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst valueKey = control.mapping.value;\n\tconst value = attributeValues[ valueKey ];\n\tconst defaultValue =\n\t\tblockType.attributes[ valueKey ]?.defaultValue ?? undefined;\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tpanelId={ clientId }\n\t\t\tlabel={ control.label }\n\t\t\thasValue={ () => {\n\t\t\t\treturn (\n\t\t\t\t\tvalue !== defaultValue && stripHTML( value )?.length !== 0\n\t\t\t\t);\n\t\t\t} }\n\t\t\tonDeselect={ () => {\n\t\t\t\tupdateAttributes( { [ valueKey ]: defaultValue } );\n\t\t\t} }\n\t\t\tisShownByDefault={ control.shownByDefault }\n\t\t>\n\t\t\t<TextControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ control.label }\n\t\t\t\tvalue={ value ? stripHTML( value ) : '' }\n\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\tupdateAttributes( { [ valueKey ]: newValue } );\n\t\t\t\t} }\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\thideLabelFromVision={ control.shownByDefault }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,iBAAiD;AA4B9C;AA1BY,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,WAAW,QAAQ,QAAQ;AACjC,QAAM,QAAQ,gBAAiB,QAAS;AACxC,QAAM,eACL,UAAU,WAAY,QAAS,GAAG,gBAAgB;AAEnD,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,SAAU;AAAA,MACV,OAAQ,QAAQ;AAAA,MAChB,UAAW,MAAM;AAChB,eACC,UAAU,oBAAgB,WAAAC,qBAAW,KAAM,GAAG,WAAW;AAAA,MAE3D;AAAA,MACA,YAAa,MAAM;AAClB,yBAAkB,EAAE,CAAE,QAAS,GAAG,aAAa,CAAE;AAAA,MAClD;AAAA,MACA,kBAAmB,QAAQ;AAAA,MAE3B;AAAA,QAAC;AAAA;AAAA,UACA,yBAAuB;AAAA,UACvB,uBAAqB;AAAA,UACrB,OAAQ,QAAQ;AAAA,UAChB,OAAQ,YAAQ,WAAAA,qBAAW,KAAM,IAAI;AAAA,UACrC,UAAW,CAAE,aAAc;AAC1B,6BAAkB,EAAE,CAAE,QAAS,GAAG,SAAS,CAAE;AAAA,UAC9C;AAAA,UACA,cAAa;AAAA,UACb,qBAAsB,QAAQ;AAAA;AAAA,MAC/B;AAAA;AAAA,EACD;AAEF;",
+  "names": ["ToolsPanelItem", "stripHTML"]
+}

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

@@ -0,0 +1,197 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/content-only-controls/rich-text/index.js
+var rich_text_exports = {};
+__export(rich_text_exports, {
+  default: () => RichTextControl
+});
+module.exports = __toCommonJS(rich_text_exports);
+var import_components = require("@wordpress/components");
+var import_compose = require("@wordpress/compose");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_rich_text = require("@wordpress/rich-text");
+var import_use_format_types = require("../../rich-text/use-format-types");
+var import_utils = require("../../rich-text/utils");
+var import_event_listeners = require("../../rich-text/event-listeners");
+var import_format_edit = __toESM(require("../../rich-text/format-edit"));
+var import_rich_text2 = require("../../rich-text");
+var import_jsx_runtime = require("react/jsx-runtime");
+function RichTextControl({
+  clientId,
+  control,
+  blockType,
+  attributeValues,
+  updateAttributes
+}) {
+  const registry = (0, import_data.useRegistry)();
+  const valueKey = control.mapping.value;
+  const attrValue = attributeValues[valueKey];
+  const defaultValue = blockType.attributes[valueKey]?.defaultValue ?? void 0;
+  const [selection, setSelection] = (0, import_element.useState)({
+    start: void 0,
+    end: void 0
+  });
+  const [isSelected, setIsSelected] = (0, import_element.useState)(false);
+  const anchorRef = (0, import_element.useRef)();
+  const inputEvents = (0, import_element.useRef)(/* @__PURE__ */ new Set());
+  const keyboardShortcuts = (0, import_element.useRef)(/* @__PURE__ */ new Set());
+  const adjustedAllowedFormats = (0, import_utils.getAllowedFormats)({
+    allowedFormats: control.args?.allowedFormats,
+    disableFormats: control.args?.disableFormats
+  });
+  const {
+    formatTypes,
+    prepareHandlers,
+    valueHandlers,
+    changeHandlers,
+    dependencies
+  } = (0, import_use_format_types.useFormatTypes)({
+    clientId,
+    identifier: valueKey,
+    allowedFormats: adjustedAllowedFormats,
+    withoutInteractiveFormatting: control.args?.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 = (0, import_rich_text.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,
+    ref: richTextRef
+  } = (0, import_rich_text.__unstableUseRichText)({
+    value: attrValue,
+    onChange(html, { __unstableFormats, __unstableText }) {
+      updateAttributes({ [valueKey]: html });
+      Object.values(changeHandlers).forEach((changeHandler) => {
+        changeHandler(__unstableFormats, __unstableText);
+      });
+    },
+    selectionStart: selection.start,
+    selectionEnd: selection.end,
+    onSelectionChange: (start, end) => setSelection({ start, end }),
+    __unstableIsSelected: isSelected,
+    preserveWhiteSpace: !!control.args?.preserveWhiteSpace,
+    placeholder: control.args?.placeholder,
+    __unstableDisableFormats: control.args?.disableFormats,
+    __unstableDependencies: dependencies,
+    __unstableAfterParse: addEditorOnlyFormats,
+    __unstableBeforeSerialize: removeEditorOnlyFormats,
+    __unstableAddInvisibleFormats: addInvisibleFormats
+  });
+  const { baseControlProps, controlProps } = (0, import_components.useBaseControlProps)({
+    hideLabelFromVision: control.shownByDefault,
+    label: control.label
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalToolsPanelItem,
+    {
+      panelId: clientId,
+      label: control.label,
+      hasValue: () => {
+        return value?.text && !(0, import_rich_text.isEmpty)(value);
+      },
+      onDeselect: () => updateAttributes({ [valueKey]: defaultValue }),
+      isShownByDefault: control.shownByDefault,
+      children: [
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rich_text2.keyboardShortcutContext.Provider, { value: keyboardShortcuts, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rich_text2.inputEventContext.Provider, { value: inputEvents, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_format_edit.default,
+          {
+            value,
+            onChange,
+            onFocus,
+            formatTypes,
+            forwardedRef: anchorRef,
+            isVisible: false
+          }
+        ) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.BaseControl, { __nextHasNoMarginBottom: true, ...baseControlProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "block-editor-content-only-controls__rich-text",
+            role: "textbox",
+            "aria-multiline": !control.args?.disableLineBreaks,
+            ref: (0, import_compose.useMergeRefs)([
+              richTextRef,
+              (0, import_event_listeners.useEventListeners)({
+                registry,
+                getValue,
+                onChange,
+                formatTypes,
+                selectionChange: setSelection,
+                isSelected,
+                disableFormats: control.args?.disableFormats,
+                value,
+                tagName: "div",
+                removeEditorOnlyFormats,
+                disableLineBreaks: control.args?.disableLineBreaks,
+                keyboardShortcuts,
+                inputEvents
+              }),
+              anchorRef
+            ]),
+            onFocus: () => setIsSelected(true),
+            onBlur: () => setIsSelected(false),
+            contentEditable: true,
+            ...controlProps
+          }
+        ) })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=index.js.map

package/build/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 {\n\tBaseControl,\n\tuseBaseControlProps,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} 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\tisEmpty,\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\tclientId,\n\tcontrol,\n\tblockType,\n\tattributeValues,\n\tupdateAttributes,\n} ) {\n\tconst registry = useRegistry();\n\tconst valueKey = control.mapping.value;\n\tconst attrValue = attributeValues[ valueKey ];\n\tconst defaultValue =\n\t\tblockType.attributes[ valueKey ]?.defaultValue ?? undefined;\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: control.args?.allowedFormats,\n\t\tdisableFormats: control.args?.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: valueKey,\n\t\tallowedFormats: adjustedAllowedFormats,\n\t\twithoutInteractiveFormatting:\n\t\t\tcontrol.args?.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,\n\t\tref: richTextRef,\n\t} = useRichText( {\n\t\tvalue: attrValue,\n\t\tonChange( html, { __unstableFormats, __unstableText } ) {\n\t\t\tupdateAttributes( { [ valueKey ]: 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: !! control.args?.preserveWhiteSpace,\n\t\tplaceholder: control.args?.placeholder,\n\t\t__unstableDisableFormats: control.args?.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: control.shownByDefault,\n\t\tlabel: control.label,\n\t} );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tpanelId={ clientId }\n\t\t\tlabel={ control.label }\n\t\t\thasValue={ () => {\n\t\t\t\treturn value?.text && ! isEmpty( value );\n\t\t\t} }\n\t\t\tonDeselect={ () =>\n\t\t\t\tupdateAttributes( { [ valueKey ]: defaultValue } )\n\t\t\t}\n\t\t\tisShownByDefault={ control.shownByDefault }\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={ onChange }\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={ ! control.args?.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,\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: control.args?.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: control.args?.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</ToolsPanelItem>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["import_rich_text", "value", "useRichText", "ToolsPanelItem", "FormatEdit"]
+}

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

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-editor/src/components/content-only-controls/use-inspector-popover-placement.js
+var use_inspector_popover_placement_exports = {};
+__export(use_inspector_popover_placement_exports, {
+  useInspectorPopoverPlacement: () => useInspectorPopoverPlacement
+});
+module.exports = __toCommonJS(use_inspector_popover_placement_exports);
+var import_compose = require("@wordpress/compose");
+function useInspectorPopoverPlacement({ isControl } = { isControl: false }) {
+  const isMobile = (0, import_compose.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
+    }
+  } : {};
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useInspectorPopoverPlacement
+});
+//# sourceMappingURL=use-inspector-popover-placement.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AAE1B,SAAS,6BACf,EAAE,UAAU,IAAI,EAAE,WAAW,MAAM,GAClC;AACD,QAAM,eAAW,iCAAkB,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": []
+}