@wordpress/block-library 9.41.1-next.v.202603102151.0 → 9.42.0

package/build-module/utils/media-control.mjs

@@ -2,7 +2,7 @@
 import {
   Button,
   DropZone,
-  FlexItem,
+  FlexBlock,
   Spinner,
   __experimentalItemGroup as ItemGroup,
   __experimentalHStack as HStack,
@@ -12,25 +12,45 @@ import {
   MediaReplaceFlow,
   store as blockEditorStore
 } from "@wordpress/block-editor";
+import { focus } from "@wordpress/dom";
+import { useRef } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import { useSelect } from "@wordpress/data";
+import { reset as resetIcon } from "@wordpress/icons";
+import { getFilename } from "@wordpress/url";
 import { jsx, jsxs } from "react/jsx-runtime";
+var focusToggleButton = (containerRef) => {
+  window.requestAnimationFrame(() => {
+    const [toggleButton] = focus.tabbable.find(containerRef?.current);
+    if (!toggleButton) {
+      return;
+    }
+    toggleButton.focus();
+  });
+};
 function MediaControlPreview({
   url,
-  alt,
   filename,
   itemGroupProps,
-  className
+  className,
+  label
 }) {
-  return /* @__PURE__ */ jsx(ItemGroup, { ...itemGroupProps, as: "span", children: /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", as: "span", children: [
-    /* @__PURE__ */ jsx("img", { src: url, alt }),
-    /* @__PURE__ */ jsx(FlexItem, { as: "span", children: /* @__PURE__ */ jsx(Truncate, { numberOfLines: 1, className, children: filename }) })
+  return /* @__PURE__ */ jsx(ItemGroup, { ...itemGroupProps, as: "span", children: /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "block-library-utils__media-control__inspector-image-indicator",
+        style: {
+          backgroundImage: url ? `url(${url})` : void 0
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(FlexBlock, { children: /* @__PURE__ */ jsx(Truncate, { numberOfLines: 1, className, children: filename ?? label }) })
   ] }) });
 }
 function MediaControl({
   mediaId,
   mediaUrl,
-  alt = "",
   filename,
   allowedTypes,
   onSelect,
@@ -38,7 +58,7 @@ function MediaControl({
   onError,
   onReset,
   isUploading = false,
-  emptyLabel = __("Add media")
+  emptyLabel = __("Media")
 }) {
   const { getSettings } = useSelect(blockEditorStore);
   const onFilesDrop = (filesList) => {
@@ -56,30 +76,53 @@ function MediaControl({
       multiple: false
     });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "block-library-utils__media-control", children: [
-    /* @__PURE__ */ jsx(
-      MediaReplaceFlow,
-      {
-        mediaId,
-        mediaURL: mediaUrl,
-        allowedTypes,
-        onSelect,
-        onSelectURL,
-        onError,
-        name: mediaUrl ? /* @__PURE__ */ jsx(
-          MediaControlPreview,
+  const containerRef = useRef();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "block-library-utils__media-control",
+      children: [
+        /* @__PURE__ */ jsx(
+          MediaReplaceFlow,
           {
-            url: mediaUrl,
-            alt,
-            filename
+            className: "block-library-utils__media-control__replace-flow",
+            mediaId,
+            mediaURL: mediaUrl,
+            allowedTypes,
+            onSelect,
+            onSelectURL,
+            onError,
+            name: /* @__PURE__ */ jsx(
+              MediaControlPreview,
+              {
+                url: mediaUrl,
+                filename,
+                className: "block-library-utils__media-control__inspector-media-replace-title",
+                label: mediaUrl ? getFilename(filename) : emptyLabel
+              }
+            ),
+            renderToggle: (props) => /* @__PURE__ */ jsx(Button, { ...props, __next40pxDefaultSize: true, children: isUploading ? /* @__PURE__ */ jsx(Spinner, {}) : props.children }),
+            onReset
           }
-        ) : emptyLabel,
-        renderToggle: (props) => /* @__PURE__ */ jsx(Button, { ...props, __next40pxDefaultSize: true, children: isUploading ? /* @__PURE__ */ jsx(Spinner, {}) : props.children }),
-        onReset
-      }
-    ),
-    /* @__PURE__ */ jsx(DropZone, { onFilesDrop })
-  ] });
+        ),
+        mediaUrl && onReset && /* @__PURE__ */ jsx(
+          Button,
+          {
+            label: __("Reset"),
+            className: "block-library-utils__media-control__reset",
+            size: "small",
+            icon: resetIcon,
+            onClick: () => {
+              onReset();
+              focusToggleButton(containerRef);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(DropZone, { onFilesDrop })
+      ]
+    }
+  );
 }
 export {
   MediaControl,

package/build-module/utils/media-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/media-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tDropZone,\n\tFlexItem,\n\tSpinner,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport {\n\tMediaReplaceFlow,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * MediaControlPreview - Preview component showing media thumbnail and filename\n *\n * @param {Object} props\n * @param {string} props.url            Media URL for thumbnail\n * @param {string} props.alt            Alt text for image\n * @param {string} props.filename       Filename to display\n * @param {Object} props.itemGroupProps Optional props to pass to ItemGroup\n * @param {string} props.className      Optional className for Truncate\n * @return {Element} Preview component\n */\nexport function MediaControlPreview( {\n\turl,\n\talt,\n\tfilename,\n\titemGroupProps,\n\tclassName,\n} ) {\n\treturn (\n\t\t<ItemGroup { ...itemGroupProps } as=\"span\">\n\t\t\t<HStack justify=\"flex-start\" as=\"span\">\n\t\t\t\t<img src={ url } alt={ alt } />\n\t\t\t\t<FlexItem as=\"span\">\n\t\t\t\t\t<Truncate numberOfLines={ 1 } className={ className }>\n\t\t\t\t\t\t{ filename }\n\t\t\t\t\t</Truncate>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\n/**\n * MediaControl - Complete media selection control for inspector panels\n *\n * @param {Object}   props\n * @param {number}   props.mediaId      Media attachment ID\n * @param {string}   props.mediaUrl     Media URL\n * @param {string}   props.alt          Alt text for preview\n * @param {string}   props.filename     Filename to display\n * @param {Array}    props.allowedTypes Allowed media types\n * @param {Function} props.onSelect     Callback when media selected\n * @param {Function} props.onSelectURL  Callback when URL entered\n * @param {Function} props.onError      Error callback\n * @param {Function} props.onReset      Reset/remove callback\n * @param {boolean}  props.isUploading  Whether upload in progress\n * @param {string}   props.emptyLabel   Label when no media (default: 'Add media')\n * @return {Element} Media control component\n */\nexport function MediaControl( {\n\tmediaId,\n\tmediaUrl,\n\talt = '',\n\tfilename,\n\tallowedTypes,\n\tonSelect,\n\tonSelectURL,\n\tonError,\n\tonReset,\n\tisUploading = false,\n\temptyLabel = __( 'Add media' ),\n} ) {\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst onFilesDrop = ( filesList ) => {\n\t\tconst { mediaUpload } = getSettings();\n\t\tif ( ! mediaUpload ) {\n\t\t\treturn;\n\t\t}\n\t\tmediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList,\n\t\t\tonFileChange( [ media ] ) {\n\t\t\t\tonSelect( media );\n\t\t\t},\n\t\t\tonError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<div className=\"block-library-utils__media-control\">\n\t\t\t<MediaReplaceFlow\n\t\t\t\tmediaId={ mediaId }\n\t\t\t\tmediaURL={ mediaUrl }\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\tonError={ onError }\n\t\t\t\tname={\n\t\t\t\t\tmediaUrl ? (\n\t\t\t\t\t\t<MediaControlPreview\n\t\t\t\t\t\t\turl={ mediaUrl }\n\t\t\t\t\t\t\talt={ alt }\n\t\t\t\t\t\t\tfilename={ filename }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\temptyLabel\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\trenderToggle={ ( props ) => (\n\t\t\t\t\t<Button { ...props } __next40pxDefaultSize>\n\t\t\t\t\t\t{ isUploading ? <Spinner /> : props.children }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\tonReset={ onReset }\n\t\t\t/>\n\t\t\t<DropZone onFilesDrop={ onFilesDrop } />\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,2BAA2B;AAAA,EAC3B,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,OACpB;AACP;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAsBvB,SACC,KADD;AATI,SAAS,oBAAqB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,oBAAC,aAAY,GAAG,gBAAiB,IAAG,QACnC,+BAAC,UAAO,SAAQ,cAAa,IAAG,QAC/B;AAAA,wBAAC,SAAI,KAAM,KAAM,KAAY;AAAA,IAC7B,oBAAC,YAAS,IAAG,QACZ,8BAAC,YAAS,eAAgB,GAAI,WAC3B,oBACH,GACD;AAAA,KACD,GACD;AAEF;AAmBO,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa,GAAI,WAAY;AAC9B,GAAI;AACH,QAAM,EAAE,YAAY,IAAI,UAAW,gBAAiB;AACpD,QAAM,cAAc,CAAE,cAAe;AACpC,UAAM,EAAE,YAAY,IAAI,YAAY;AACpC,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AACA,gBAAa;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAc,CAAE,KAAM,GAAI;AACzB,iBAAU,KAAM;AAAA,MACjB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACX,CAAE;AAAA,EACH;AAEA,SACC,qBAAC,SAAI,WAAU,sCACd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,UAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACC,WACC;AAAA,UAAC;AAAA;AAAA,YACA,KAAM;AAAA,YACN;AAAA,YACA;AAAA;AAAA,QACD,IAEA;AAAA,QAGF,cAAe,CAAE,UAChB,oBAAC,UAAS,GAAG,OAAQ,uBAAqB,MACvC,wBAAc,oBAAC,WAAQ,IAAK,MAAM,UACrC;AAAA,QAED;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,YAAS,aAA4B;AAAA,KACvC;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tDropZone,\n\tFlexBlock,\n\tSpinner,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport {\n\tMediaReplaceFlow,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { focus } from '@wordpress/dom';\nimport { useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { reset as resetIcon } from '@wordpress/icons';\nimport { getFilename } from '@wordpress/url';\n\n/**\n * Focuses the toggle button.\n *\n * @param {Object} containerRef - ref object containing current element\n */\nconst focusToggleButton = ( containerRef ) => {\n\t// Use requestAnimationFrame to ensure DOM updates are complete.\n\twindow.requestAnimationFrame( () => {\n\t\tconst [ toggleButton ] = focus.tabbable.find( containerRef?.current );\n\t\tif ( ! toggleButton ) {\n\t\t\treturn;\n\t\t}\n\n\t\ttoggleButton.focus();\n\t} );\n};\n\n/**\n * MediaControlPreview - Preview component showing media thumbnail and filename\n *\n * @param {Object} props\n * @param {string} props.url            Media URL for thumbnail\n * @param {string} props.filename       Filename to display\n * @param {Object} props.itemGroupProps Optional props to pass to ItemGroup\n * @param {string} props.className      Optional className for Truncate\n * @param {string} props.label          Optional label for accessibility\n * @return {Element} Preview component\n */\nexport function MediaControlPreview( {\n\turl,\n\tfilename,\n\titemGroupProps,\n\tclassName,\n\tlabel,\n} ) {\n\treturn (\n\t\t<ItemGroup { ...itemGroupProps } as=\"span\">\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"block-library-utils__media-control__inspector-image-indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tbackgroundImage: url ? `url(${ url })` : undefined,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t<FlexBlock>\n\t\t\t\t\t<Truncate numberOfLines={ 1 } className={ className }>\n\t\t\t\t\t\t{ filename ?? label }\n\t\t\t\t\t</Truncate>\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\n/**\n * MediaControl - Complete media selection control for inspector panels\n *\n * @param {Object}   props\n * @param {number}   props.mediaId      Media attachment ID\n * @param {string}   props.mediaUrl     Media URL\n * @param {string}   props.filename     Filename to display\n * @param {Array}    props.allowedTypes Allowed media types\n * @param {Function} props.onSelect     Callback when media selected\n * @param {Function} props.onSelectURL  Callback when URL entered\n * @param {Function} props.onError      Error callback\n * @param {Function} props.onReset      Reset/remove callback\n * @param {boolean}  props.isUploading  Whether upload in progress\n * @param {string}   props.emptyLabel   Label when no media (default: 'Add media')\n * @return {Element} Media control component\n */\nexport function MediaControl( {\n\tmediaId,\n\tmediaUrl,\n\tfilename,\n\tallowedTypes,\n\tonSelect,\n\tonSelectURL,\n\tonError,\n\tonReset,\n\tisUploading = false,\n\temptyLabel = __( 'Media' ),\n} ) {\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst onFilesDrop = ( filesList ) => {\n\t\tconst { mediaUpload } = getSettings();\n\t\tif ( ! mediaUpload ) {\n\t\t\treturn;\n\t\t}\n\t\tmediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList,\n\t\t\tonFileChange( [ media ] ) {\n\t\t\t\tonSelect( media );\n\t\t\t},\n\t\t\tonError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\tconst containerRef = useRef();\n\n\treturn (\n\t\t<div\n\t\t\tref={ containerRef }\n\t\t\tclassName=\"block-library-utils__media-control\"\n\t\t>\n\t\t\t<MediaReplaceFlow\n\t\t\t\tclassName=\"block-library-utils__media-control__replace-flow\"\n\t\t\t\tmediaId={ mediaId }\n\t\t\t\tmediaURL={ mediaUrl }\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\tonError={ onError }\n\t\t\t\tname={\n\t\t\t\t\t<MediaControlPreview\n\t\t\t\t\t\turl={ mediaUrl }\n\t\t\t\t\t\tfilename={ filename }\n\t\t\t\t\t\tclassName=\"block-library-utils__media-control__inspector-media-replace-title\"\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tmediaUrl ? getFilename( filename ) : emptyLabel\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\trenderToggle={ ( props ) => (\n\t\t\t\t\t<Button { ...props } __next40pxDefaultSize>\n\t\t\t\t\t\t{ isUploading ? <Spinner /> : props.children }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\tonReset={ onReset }\n\t\t\t/>\n\t\t\t{ mediaUrl && onReset && (\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\tclassName=\"block-library-utils__media-control__reset\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tonReset();\n\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<DropZone onFilesDrop={ onFilesDrop } />\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,2BAA2B;AAAA,EAC3B,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,OACpB;AACP;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,mBAAmB;AAuCzB,SACC,KADD;AAhCH,IAAM,oBAAoB,CAAE,iBAAkB;AAE7C,SAAO,sBAAuB,MAAM;AACnC,UAAM,CAAE,YAAa,IAAI,MAAM,SAAS,KAAM,cAAc,OAAQ;AACpE,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AAEA,iBAAa,MAAM;AAAA,EACpB,CAAE;AACH;AAaO,SAAS,oBAAqB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,oBAAC,aAAY,GAAG,gBAAiB,IAAG,QACnC,+BAAC,UAAO,SAAQ,cACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,iBAAiB,MAAM,OAAQ,GAAI,MAAM;AAAA,QAC1C;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,aACA,8BAAC,YAAS,eAAgB,GAAI,WAC3B,sBAAY,OACf,GACD;AAAA,KACD,GACD;AAEF;AAkBO,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa,GAAI,OAAQ;AAC1B,GAAI;AACH,QAAM,EAAE,YAAY,IAAI,UAAW,gBAAiB;AACpD,QAAM,cAAc,CAAE,cAAe;AACpC,UAAM,EAAE,YAAY,IAAI,YAAY;AACpC,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AACA,gBAAa;AAAA,MACZ;AAAA,MACA;AAAA,MACA,aAAc,CAAE,KAAM,GAAI;AACzB,iBAAU,KAAM;AAAA,MACjB;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACX,CAAE;AAAA,EACH;AACA,QAAM,eAAe,OAAO;AAE5B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,WAAU;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV;AAAA,YACA,UAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,MACC;AAAA,cAAC;AAAA;AAAA,gBACA,KAAM;AAAA,gBACN;AAAA,gBACA,WAAU;AAAA,gBACV,OACC,WAAW,YAAa,QAAS,IAAI;AAAA;AAAA,YAEvC;AAAA,YAED,cAAe,CAAE,UAChB,oBAAC,UAAS,GAAG,OAAQ,uBAAqB,MACvC,wBAAc,oBAAC,WAAQ,IAAK,MAAM,UACrC;AAAA,YAED;AAAA;AAAA,QACD;AAAA,QACE,YAAY,WACb;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ,GAAI,OAAQ;AAAA,YACpB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,MAAO;AAAA,YACP,SAAU,MAAM;AACf,sBAAQ;AACR,gCAAmB,YAAa;AAAA,YACjC;AAAA;AAAA,QACD;AAAA,QAED,oBAAC,YAAS,aAA4B;AAAA;AAAA;AAAA,EACvC;AAEF;",
   "names": []
 }

package/build-style/editor-rtl.css

@@ -93,29 +93,61 @@
 .block-library-utils__media-control .components-drop-zone__content-icon {
   display: none;
 }
-.block-library-utils__media-control button.components-button {
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow {
+  display: block;
+}
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button {
   color: #1e1e1e;
   box-shadow: inset 0 0 0 1px #ccc;
   width: 100%;
   display: block;
   height: 40px;
+  padding-left: 32px;
 }
-.block-library-utils__media-control button.components-button:hover {
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-library-utils__media-control button.components-button:focus {
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-library-utils__media-control .components-dropdown {
-  display: block;
+
+.block-library-utils__media-control__inspector-media-replace-title {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
 }
-.block-library-utils__media-control img {
+
+.block-library-utils__media-control__inspector-image-indicator {
   width: 20px;
-  min-width: 20px;
-  aspect-ratio: 1;
+  height: 20px;
+  border-radius: 2px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  background-size: cover;
+  outline: 1px solid transparent;
+}
+
+.block-library-utils__media-control__reset {
+  position: absolute;
+  left: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
   border-radius: 2px;
 }
+@media not (prefers-reduced-motion) {
+  .block-library-utils__media-control__reset {
+    transition: opacity 0.1s ease-in-out;
+  }
+}
+.block-library-utils__media-control:hover .block-library-utils__media-control__reset, .block-library-utils__media-control__reset:focus, .block-library-utils__media-control__reset:hover {
+  opacity: 1;
+}
+@media (hover: none) {
+  .block-library-utils__media-control__reset {
+    opacity: 1;
+  }
+}
 
 .wp-block-audio {
   margin-right: 0;
@@ -2333,9 +2365,11 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
   width: 112px;
 }
 
-.wp-block-tabs-menu .tabs__tab-label--placeholder {
-  opacity: 0.5;
-  font-style: italic;
+.wp-block-tabs-menu > .block-editor-block-list__layout {
+  display: contents;
+}
+.wp-block-tabs-menu .block-editor-block-list__block:has(> .wp-block-tabs-menu-item) {
+  display: contents;
 }
 
 .wp-block-tabs-menu-item.is-selected {

package/build-style/editor.css

@@ -93,29 +93,61 @@
 .block-library-utils__media-control .components-drop-zone__content-icon {
   display: none;
 }
-.block-library-utils__media-control button.components-button {
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow {
+  display: block;
+}
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button {
   color: #1e1e1e;
   box-shadow: inset 0 0 0 1px #ccc;
   width: 100%;
   display: block;
   height: 40px;
+  padding-right: 32px;
 }
-.block-library-utils__media-control button.components-button:hover {
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:hover {
   color: var(--wp-admin-theme-color);
 }
-.block-library-utils__media-control button.components-button:focus {
+.block-library-utils__media-control .block-library-utils__media-control__replace-flow button.components-button:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 }
-.block-library-utils__media-control .components-dropdown {
-  display: block;
+
+.block-library-utils__media-control__inspector-media-replace-title {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
 }
-.block-library-utils__media-control img {
+
+.block-library-utils__media-control__inspector-image-indicator {
   width: 20px;
-  min-width: 20px;
-  aspect-ratio: 1;
+  height: 20px;
+  border-radius: 2px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  background: #fff linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+  background-size: cover;
+  outline: 1px solid transparent;
+}
+
+.block-library-utils__media-control__reset {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
   border-radius: 2px;
 }
+@media not (prefers-reduced-motion) {
+  .block-library-utils__media-control__reset {
+    transition: opacity 0.1s ease-in-out;
+  }
+}
+.block-library-utils__media-control:hover .block-library-utils__media-control__reset, .block-library-utils__media-control__reset:focus, .block-library-utils__media-control__reset:hover {
+  opacity: 1;
+}
+@media (hover: none) {
+  .block-library-utils__media-control__reset {
+    opacity: 1;
+  }
+}
 
 .wp-block-audio {
   margin-left: 0;
@@ -2337,9 +2369,11 @@ html[dir=rtl] .has-drop-cap:not(:focus)::first-letter {
   width: 112px;
 }
 
-.wp-block-tabs-menu .tabs__tab-label--placeholder {
-  opacity: 0.5;
-  font-style: italic;
+.wp-block-tabs-menu > .block-editor-block-list__layout {
+  display: contents;
+}
+.wp-block-tabs-menu .block-editor-block-list__block:has(> .wp-block-tabs-menu-item) {
+  display: contents;
 }
 
 .wp-block-tabs-menu-item.is-selected {

package/build-style/navigation/style-rtl.css

@@ -574,6 +574,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  left: auto;
+  right: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;

package/build-style/navigation/style.css

@@ -574,6 +574,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  right: auto;
+  left: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;

package/build-style/navigation-overlay-close/style-rtl.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -13,8 +13,8 @@
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;

package/build-style/navigation-overlay-close/style.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -13,8 +13,8 @@
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;

package/build-style/style-rtl.css

@@ -2941,6 +2941,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  left: auto;
+  right: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;
@@ -3082,7 +3086,7 @@ html.has-modal-open {
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -3092,8 +3096,8 @@ html.has-modal-open {
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;

package/build-style/style.css

@@ -2971,6 +2971,10 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
   display: block;
 }
+.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
+  right: auto;
+  left: 0;
+}
 @media (min-width: 600px) {
   .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
     display: block;
@@ -3112,7 +3116,7 @@ html.has-modal-open {
   align-items: center;
   justify-content: center;
   gap: 0.5em;
-  padding: 0.5em;
+  padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
@@ -3122,8 +3126,8 @@ html.has-modal-open {
   outline-offset: 2px;
 }
 .wp-block-navigation-overlay-close svg {
-  width: 1.5em;
-  height: 1.5em;
+  width: 24px;
+  height: 24px;
   fill: currentColor;
   display: block;
   flex-shrink: 0;

package/build-style/tabs-menu/editor-rtl.css

@@ -1,4 +1,6 @@
-.wp-block-tabs-menu .tabs__tab-label--placeholder {
-  opacity: 0.5;
-  font-style: italic;
+.wp-block-tabs-menu > .block-editor-block-list__layout {
+  display: contents;
+}
+.wp-block-tabs-menu .block-editor-block-list__block:has(> .wp-block-tabs-menu-item) {
+  display: contents;
 }

package/build-style/tabs-menu/editor.css

@@ -1,4 +1,6 @@
-.wp-block-tabs-menu .tabs__tab-label--placeholder {
-  opacity: 0.5;
-  font-style: italic;
+.wp-block-tabs-menu > .block-editor-block-list__layout {
+  display: contents;
+}
+.wp-block-tabs-menu .block-editor-block-list__block:has(> .wp-block-tabs-menu-item) {
+  display: contents;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.41.1-next.v.202603102151.0+59e17f9ec",
+	"version": "9.42.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -95,42 +95,42 @@
 	],
 	"dependencies": {
 		"@arraypress/waveform-player": "1.2.1",
-		"@wordpress/a11y": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/api-fetch": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/autop": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/blob": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/block-editor": "^15.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/blocks": "^15.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/core-data": "^7.41.2-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/date": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/deprecated": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/dom": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/escape-html": "^3.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/hooks": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/html-entities": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/interactivity": "^6.41.2-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/interactivity-router": "^2.41.2-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/keyboard-shortcuts": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/keycodes": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/latex-to-mathml": "^1.9.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/notices": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/patterns": "^2.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/primitives": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/reusable-blocks": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/rich-text": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/server-side-render": "^6.17.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/upload-media": "^0.26.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/url": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/viewport": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/wordcount": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/a11y": "^4.42.0",
+		"@wordpress/api-fetch": "^7.42.0",
+		"@wordpress/autop": "^4.42.0",
+		"@wordpress/base-styles": "^6.18.0",
+		"@wordpress/blob": "^4.42.0",
+		"@wordpress/block-editor": "^15.15.0",
+		"@wordpress/blocks": "^15.15.0",
+		"@wordpress/components": "^32.4.0",
+		"@wordpress/compose": "^7.42.0",
+		"@wordpress/core-data": "^7.42.0",
+		"@wordpress/data": "^10.42.0",
+		"@wordpress/date": "^5.42.0",
+		"@wordpress/deprecated": "^4.42.0",
+		"@wordpress/dom": "^4.42.0",
+		"@wordpress/element": "^6.42.0",
+		"@wordpress/escape-html": "^3.42.0",
+		"@wordpress/hooks": "^4.42.0",
+		"@wordpress/html-entities": "^4.42.0",
+		"@wordpress/i18n": "^6.15.0",
+		"@wordpress/icons": "^12.0.0",
+		"@wordpress/interactivity": "^6.42.0",
+		"@wordpress/interactivity-router": "^2.42.0",
+		"@wordpress/keyboard-shortcuts": "^5.42.0",
+		"@wordpress/keycodes": "^4.42.0",
+		"@wordpress/latex-to-mathml": "^1.10.0",
+		"@wordpress/notices": "^5.42.0",
+		"@wordpress/patterns": "^2.42.0",
+		"@wordpress/primitives": "^4.42.0",
+		"@wordpress/private-apis": "^1.42.0",
+		"@wordpress/reusable-blocks": "^5.42.0",
+		"@wordpress/rich-text": "^7.42.0",
+		"@wordpress/server-side-render": "^6.18.0",
+		"@wordpress/upload-media": "^0.27.0",
+		"@wordpress/url": "^4.42.0",
+		"@wordpress/viewport": "^6.42.0",
+		"@wordpress/wordcount": "^4.42.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -151,5 +151,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

package/src/cover/edit/cover-placeholder.js

@@ -4,6 +4,7 @@
 import { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { cover as icon } from '@wordpress/icons';
+import { createBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -18,6 +19,12 @@ export default function CoverPlaceholder( {
 	style,
 	toggleUseFeaturedImage,
 } ) {
+	const onFilesPreUpload = ( files ) => {
+		if ( files.length === 1 ) {
+			onSelectMedia( { url: createBlobURL( files[ 0 ] ) } );
+		}
+	};
+
 	return (
 		<MediaPlaceholder
 			icon={ <BlockIcon icon={ icon } /> }
@@ -28,6 +35,7 @@ export default function CoverPlaceholder( {
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			disableMediaButtons={ disableMediaButtons }
 			onToggleFeaturedImage={ toggleUseFeaturedImage }
+			onFilesPreUpload={ onFilesPreUpload }
 			onError={ onError }
 			style={ style }
 		>