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

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

@@ -0,0 +1,243 @@
+// packages/block-editor/src/components/content-only-controls/media/index.js
+import {
+  Button,
+  Icon,
+  __experimentalToolsPanelItem as ToolsPanelItem,
+  __experimentalGrid as Grid
+} from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
+import { useMemo } from "@wordpress/element";
+import { __ } from "@wordpress/i18n";
+import {
+  audio as audioIcon,
+  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({ 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__ */ 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__ */ jsx(
+        "img",
+        {
+          className: "block-editor-content-only-controls__media-thumbnail",
+          alt: "",
+          width: 24,
+          height: 24,
+          src
+        }
+      );
+    }
+    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({
+  clientId,
+  control,
+  blockType,
+  attributeValues,
+  updateAttributes
+}) {
+  const { popoverProps } = useInspectorPopoverPlacement({
+    isControl: true
+  });
+  const typeKey = control.mapping.type;
+  const idKey = control.mapping.id;
+  const srcKey = control.mapping.src;
+  const captionKey = control.mapping.caption;
+  const altKey = control.mapping.alt;
+  const posterKey = control.mapping.poster;
+  const featuredImageKey = control.mapping.featuredImage;
+  const id = attributeValues[idKey];
+  const src = attributeValues[srcKey];
+  const caption = attributeValues[captionKey];
+  const alt = attributeValues[altKey];
+  const useFeaturedImage = attributeValues[featuredImageKey];
+  const 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 (control.args.allowedTypes.length === 1) {
+    const allowedType = control.args.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");
+  }
+  const defaultValues = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(control.mapping).map(([, attributeKey]) => {
+        return [
+          attributeKey,
+          blockType.attributes[attributeKey]?.defaultValue ?? void 0
+        ];
+      })
+    );
+  }, [blockType.attributes, control.mapping]);
+  return /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsx(
+    ToolsPanelItem,
+    {
+      panelId: clientId,
+      label: control.label,
+      hasValue: () => !!src,
+      onDeselect: () => {
+        updateAttributes(defaultValues);
+      },
+      isShownByDefault: control.shownByDefault,
+      children: /* @__PURE__ */ jsx(
+        MediaReplaceFlow,
+        {
+          className: "block-editor-content-only-controls__media-replace-flow",
+          allowedTypes: control.args.allowedTypes,
+          mediaId: id,
+          mediaURL: src,
+          multiple: control.args.multiple,
+          popoverProps,
+          onReset: () => {
+            updateAttributes(defaultValues);
+          },
+          useFeaturedImage: !!useFeaturedImage,
+          onToggleFeaturedImage: !!featuredImageKey && (() => {
+            updateAttributes({
+              ...defaultValues,
+              [featuredImageKey]: !useFeaturedImage
+            });
+          }),
+          onSelect: (selectedMedia) => {
+            if (selectedMedia.id && selectedMedia.url) {
+              const optionalAttributes = {};
+              if (typeKey && selectedMedia.type) {
+                optionalAttributes[typeKey] = selectedMedia.type;
+              }
+              if (captionKey && !caption && selectedMedia.caption) {
+                optionalAttributes[captionKey] = selectedMedia.caption;
+              }
+              if (altKey && !alt && selectedMedia.alt) {
+                optionalAttributes[altKey] = selectedMedia.alt;
+              }
+              if (posterKey && selectedMedia.poster) {
+                optionalAttributes[posterKey] = selectedMedia.poster;
+              }
+              updateAttributes({
+                [idKey]: selectedMedia.id,
+                [srcKey]: selectedMedia.url,
+                ...optionalAttributes
+              });
+            }
+          },
+          renderToggle: (buttonProps) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              __next40pxDefaultSize: true,
+              className: "block-editor-content-only-controls__media",
+              ...buttonProps,
+              children: /* @__PURE__ */ jsxs(
+                Grid,
+                {
+                  rowGap: 0,
+                  columnGap: 8,
+                  templateColumns: "24px 1fr",
+                  className: "block-editor-content-only-controls__media-row",
+                  children: [
+                    src && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        MediaThumbnail,
+                        {
+                          attachment,
+                          control,
+                          attributeValues
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", {
+                        className: "block-editor-content-only-controls__media-title",
+                        // TODO - truncate long titles or url smartly (e.g. show filename).
+                        children: attachment?.title?.raw && attachment?.title?.raw !== "" ? attachment?.title?.raw : src
+                      })
+                    ] }),
+                    !src && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "block-editor-content-only-controls__media-placeholder",
+                          style: {
+                            width: "24px",
+                            height: "24px"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
+                    ] })
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+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__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": []
+}

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

@@ -0,0 +1,50 @@
+// packages/block-editor/src/components/content-only-controls/plain-text/index.js
+import {
+  __experimentalToolsPanelItem as ToolsPanelItem,
+  TextControl
+} from "@wordpress/components";
+import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
+import { jsx } from "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__ */ jsx(
+    ToolsPanelItem,
+    {
+      panelId: clientId,
+      label: control.label,
+      hasValue: () => {
+        return value !== defaultValue && stripHTML(value)?.length !== 0;
+      },
+      onDeselect: () => {
+        updateAttributes({ [valueKey]: defaultValue });
+      },
+      isShownByDefault: control.shownByDefault,
+      children: /* @__PURE__ */ jsx(
+        TextControl,
+        {
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true,
+          label: control.label,
+          value: value ? stripHTML(value) : "",
+          onChange: (newValue) => {
+            updateAttributes({ [valueKey]: newValue });
+          },
+          autoComplete: "off",
+          hideLabelFromVision: control.shownByDefault
+        }
+      )
+    }
+  );
+}
+export {
+  PlainText as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/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": ";AAGA;AAAA,EACC,gCAAgC;AAAA,EAChC;AAAA,OACM;AACP,SAAS,uBAAuB,iBAAiB;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;AAAA;AAAA,MACA,SAAU;AAAA,MACV,OAAQ,QAAQ;AAAA,MAChB,UAAW,MAAM;AAChB,eACC,UAAU,gBAAgB,UAAW,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,QAAQ,UAAW,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": []
+}

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

@@ -0,0 +1,174 @@
+// packages/block-editor/src/components/content-only-controls/rich-text/index.js
+import {
+  BaseControl,
+  useBaseControlProps,
+  __experimentalToolsPanelItem as ToolsPanelItem
+} from "@wordpress/components";
+import { useMergeRefs } from "@wordpress/compose";
+import { useRegistry } from "@wordpress/data";
+import { useRef, useState } from "@wordpress/element";
+import {
+  __unstableUseRichText as useRichText,
+  isEmpty,
+  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 { jsx, jsxs } from "react/jsx-runtime";
+function RichTextControl({
+  clientId,
+  control,
+  blockType,
+  attributeValues,
+  updateAttributes
+}) {
+  const registry = useRegistry();
+  const valueKey = control.mapping.value;
+  const attrValue = attributeValues[valueKey];
+  const defaultValue = blockType.attributes[valueKey]?.defaultValue ?? void 0;
+  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: control.args?.allowedFormats,
+    disableFormats: control.args?.disableFormats
+  });
+  const {
+    formatTypes,
+    prepareHandlers,
+    valueHandlers,
+    changeHandlers,
+    dependencies
+  } = 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 = 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
+  } = useRichText({
+    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 } = useBaseControlProps({
+    hideLabelFromVision: control.shownByDefault,
+    label: control.label
+  });
+  return /* @__PURE__ */ jsxs(
+    ToolsPanelItem,
+    {
+      panelId: clientId,
+      label: control.label,
+      hasValue: () => {
+        return value?.text && !isEmpty(value);
+      },
+      onDeselect: () => updateAttributes({ [valueKey]: defaultValue }),
+      isShownByDefault: control.shownByDefault,
+      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,
+            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": !control.args?.disableLineBreaks,
+            ref: useMergeRefs([
+              richTextRef,
+              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
+          }
+        ) })
+      ]
+    }
+  );
+}
+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 {\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": ["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/inserter/media-tab/media-tab.js

@@ -2,49 +2,17 @@
 import { __ } from "@wordpress/i18n";
 import { useViewportMatch } from "@wordpress/compose";
 import { Button } from "@wordpress/components";
-import { useCallback, useMemo, useState } from "@wordpress/element";
-import { useSelect } from "@wordpress/data";
+import { useCallback, useMemo } from "@wordpress/element";
 import { MediaCategoryPanel } from "./media-panel";
 import MediaUploadCheck from "../../media-upload/check";
 import MediaUpload from "../../media-upload";
-import MediaUploadModal from "../../media-upload-modal";
 import { useMediaCategories } from "./hooks";
 import { getBlockAndPreviewFromMedia } from "./utils";
 import MobileTabNavigation from "../mobile-tab-navigation";
 import CategoryTabs from "../category-tabs";
 import InserterNoResults from "../no-results";
-import { store as blockEditorStore } from "../../../store";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ALLOWED_MEDIA_TYPES = ["image", "video", "audio"];
-function ConditionalMediaUpload({ render, ...props }) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const mediaUpload = useSelect((select) => {
-    const { getSettings } = select(blockEditorStore);
-    return getSettings().mediaUpload;
-  }, []);
-  if (window.__experimentalDataViewsMediaModal) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      render && render({ open: () => setIsModalOpen(true) }),
-      /* @__PURE__ */ jsx(
-        MediaUploadModal,
-        {
-          ...props,
-          isOpen: isModalOpen,
-          onClose: () => {
-            setIsModalOpen(false);
-            props.onClose?.();
-          },
-          onSelect: (media) => {
-            setIsModalOpen(false);
-            props.onSelect?.(media);
-          },
-          onUpload: mediaUpload
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsx(MediaUpload, { ...props, render });
-}
 function MediaTab({
   rootClientId,
   selectedCategory,
@@ -88,7 +56,7 @@ function MediaTab({
         }
       ),
       /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsx(
-        ConditionalMediaUpload,
+        MediaUpload,
         {
           multiple: false,
           onSelect: onSelectMedia,