npm - @wordpress/block-editor - Versions diffs - 16.0.0 → 16.1.0 - Mend

@wordpress/block-editor 16.0.0 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (368) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,24 @@
 ## Unreleased
+## 16.1.0 (2026-07-29)
+### Enhancements
+-   Inspector controls in the standard block-supports panels (Typography, Dimensions, Border, Color, Background, Filters) now reflect the value a block inherits from Global Styles when no local override is set. Inherited controls show that value at rest (as a placeholder, preselected option, or resolved value) and mark the label with a dotted underline; setting a local override reveals a reset affordance that clears the override back to the inherited value ([#77894](https://github.com/WordPress/gutenberg/pull/77894)).
+-   Inherited Global Styles now resolve per-level heading element styles for the heading-family blocks (`core/heading`, `core/site-title`, `core/post-title`, `core/query-title`, `core/comments-title`, `core/term-name`, `core/site-tagline`, `core/accordion-heading`), so inspector controls reflect values set on a specific heading level (`styles.elements.h1`–`h6`) in addition to the shared `heading` element. A block rendered at level 0 (a paragraph) folds no heading element styles; `core/accordion-heading` has no level-0 state and takes its level from the parent Accordion's block context ([#80495](https://github.com/WordPress/gutenberg/pull/80495)).
+-   Inherited Global Styles now resolve the `link` element (`styles.elements.link`) for whole-block link blocks — those that render as a link — so their inspector controls reflect inherited link styles, mirroring the `button` element treatment for `core/button`. Covers `core/read-more`, `core/loginout`, `core/post-navigation-link`, `core/query-pagination-next`, `core/query-pagination-previous`, `core/query-pagination-numbers`, `core/comments-pagination-next`, `core/comments-pagination-previous`, `core/comments-pagination-numbers`, `core/comment-edit-link`, `core/comment-reply-link`, and `core/post-comments-link` [#80607](https://github.com/WordPress/gutenberg/pull/80607)).
+### Internal
+-   Gate the inherited Global Styles treatment in the block inspector on the `gutenberg-global-styles-inheritance-ui` Gutenberg experiment, so `useResolvedStyle` resolves nothing and the block-supports panels render without the inheritance affordances until the experiment is turned on ([#80555](https://github.com/WordPress/gutenberg/pull/80555), [#80815](https://github.com/WordPress/gutenberg/pull/80815)).
+-   `URLInput`: Convert the class component to a function component with hooks, replacing the `compose( withSafeTimeout, withSpokenMessages, withInstanceId, withSelect )` wrapper. The unused `setTimeout` prop injected by `withSafeTimeout` is dropped, and the block editor settings are now read on demand rather than subscribed to ([#80721](https://github.com/WordPress/gutenberg/pull/80721)).
+### Bug Fixes
+-   Gate the HEIC canvas conversion fallback on `window.__clientSideMediaProcessing` instead of the redundant `window.__heicUploadSupport` flag, fixing client-side HEIC conversion in Safari on core WordPress installs ([#80452](https://github.com/WordPress/gutenberg/pull/80452)).
+-   `URLInput`: Request suggestions for a value the field is mounted with, instead of waiting for the input to be focused, and stop requesting initial suggestions on mount when `disableSuggestions` is set ([#80721](https://github.com/WordPress/gutenberg/pull/80721)).
 ## 16.0.0 (2026-07-14)
 ### Internal

package/README.md CHANGED Viewed

@@ -406,6 +406,8 @@ _Parameters_
 -   _props.label_ `?string`: A label for the control.
 -   _props.onChange_ `( value: string ) => void`: Called when the dimension value changes.
 -   _props.value_ `string`: The current dimension value.
+-   _props.placeholder_ `?string`: Placeholder text for the custom-value input.
+-   _props.className_ `?string`: Additional CSS class on the wrapping fieldset.
 -   _props.dimensionSizes_ `?Object`: Optional dimension size presets. Falls back to settings from the store.
 _Returns_
@@ -950,10 +952,16 @@ Ensures that the text selection keeps the same vertical distance from the viewpo
 ### URLInput
+Text field for entering a URL, with an autocomplete list of matching posts, pages and other link suggestions.
 _Related_
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md>
+_Parameters_
+-   _props_ `Object`: Component props.
 ### URLInputButton
 _Related_

package/build/components/alignment-control/ui.cjs CHANGED Viewed

@@ -52,7 +52,7 @@ function AlignmentUI({
   onChange,
   alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
   label = (0, import_i18n.__)("Align text"),
-  description = (0, import_i18n.__)("Change text alignment"),
+  description,
   isCollapsed = true,
   isToolbar
 }) {
@@ -70,9 +70,7 @@ function AlignmentUI({
   }
   const UIComponent = isToolbar ? import_components.ToolbarGroup : import_components.ToolbarDropdownMenu;
   const extraProps = isToolbar ? { isCollapsed } : {
-    toggleProps: {
-      description
-    },
+    toggleProps: description ? { description } : {},
     popoverProps: POPOVER_PROPS
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/build/components/alignment-control/ui.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/alignment-control/ui.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components';\nimport { alignLeft, alignRight, alignCenter } from '@wordpress/icons';\n\nconst DEFAULT_ALIGNMENT_CONTROLS = [\n\t{\n\t\ticon: alignLeft,\n\t\ttitle: __( 'Align text left' ),\n\t\talign: 'left',\n\t},\n\t{\n\t\ticon: alignCenter,\n\t\ttitle: __( 'Align text center' ),\n\t\talign: 'center',\n\t},\n\t{\n\t\ticon: alignRight,\n\t\ttitle: __( 'Align text right' ),\n\t\talign: 'right',\n\t},\n];\n\nconst POPOVER_PROPS = {\n\tplacement: 'bottom-start',\n};\n\nfunction AlignmentUI( {\n\tvalue,\n\tonChange,\n\talignmentControls = DEFAULT_ALIGNMENT_CONTROLS,\n\tlabel = __( 'Align text' ),\n\tdescription = __( 'Change text alignment' ),\n\tisCollapsed = true,\n\tisToolbar,\n} ) {\n\tfunction applyOrUnset( align ) {\n\t\treturn () => onChange( value === align ? undefined : align );\n\t}\n\n\tconst activeAlignment = alignmentControls.find(\n\t\t( control ) => control.align === value\n\t);\n\n\tfunction setIcon() {\n\t\tif ( activeAlignment ) {\n\t\t\treturn activeAlignment.icon;\n\t\t}\n\t\treturn isRTL() ? alignRight : alignLeft;\n\t}\n\n\tconst UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;\n\tconst extraProps = isToolbar\n\t\t? { isCollapsed }\n\t\t: {\n\t\t\t\ttoggleProps: {\n\t\t\t\t\tdescription,\n\t\t\t\t},\n\t\t\t\tpopoverProps: POPOVER_PROPS,\n\t\t  };\n\n\treturn (\n\t\t<UIComponent\n\t\t\ticon={ setIcon() }\n\t\t\tlabel={ label }\n\t\t\tcontrols={ alignmentControls.map( ( control ) => {\n\t\t\t\tconst { align } = control;\n\t\t\t\tconst isActive = value === align;\n\n\t\t\t\treturn {\n\t\t\t\t\t...control,\n\t\t\t\t\tisActive,\n\t\t\t\t\trole: isCollapsed ? 'menuitemradio' : undefined,\n\t\t\t\t\tonClick: applyOrUnset( align ),\n\t\t\t\t};\n\t\t\t} ) }\n\t\t\t{ ...extraProps }\n\t\t/>\n\t);\n}\n\nexport default AlignmentUI;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,wBAAkD;AAClD,mBAAmD;AA2DjD;AAzDF,IAAM,6BAA6B;AAAA,EAClC;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,iBAAkB;AAAA,IAC7B,OAAO;AAAA,EACR;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,mBAAoB;AAAA,IAC/B,OAAO;AAAA,EACR;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,kBAAmB;AAAA,IAC9B,OAAO;AAAA,EACR;AACD;AAEA,IAAM,gBAAgB;AAAA,EACrB,WAAW;AACZ;AAEA,SAAS,YAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,YAAQ,gBAAI,YAAa;AAAA,EACzB,kBAAc,gBAAI,uBAAwB;AAAA,EAC1C,cAAc;AAAA,EACd;AACD,GAAI;AACH,WAAS,aAAc,OAAQ;AAC9B,WAAO,MAAM,SAAU,UAAU,QAAQ,SAAY,KAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkB,kBAAkB;AAAA,IACzC,CAAE,YAAa,QAAQ,UAAU;AAAA,EAClC;AAEA,WAAS,UAAU;AAClB,QAAK,iBAAkB;AACtB,aAAO,gBAAgB;AAAA,IACxB;AACA,eAAO,mBAAM,IAAI,0BAAa;AAAA,EAC/B;AAEA,QAAM,cAAc,YAAY,iCAAe;AAC/C,QAAM,aAAa,YAChB,EAAE,YAAY,IACd;AAAA,IACA,aAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,cAAc;AAAA,EACd;AAEH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,QAAQ;AAAA,MACf;AAAA,MACA,UAAW,kBAAkB,IAAK,CAAE,YAAa;AAChD,cAAM,EAAE,MAAM,IAAI;AAClB,cAAM,WAAW,UAAU;AAE3B,eAAO;AAAA,UACN,GAAG;AAAA,UACH;AAAA,UACA,MAAM,cAAc,kBAAkB;AAAA,UACtC,SAAS,aAAc,KAAM;AAAA,QAC9B;AAAA,MACD,CAAE;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEF;AAEA,IAAO,aAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components';\nimport { alignLeft, alignRight, alignCenter } from '@wordpress/icons';\n\nconst DEFAULT_ALIGNMENT_CONTROLS = [\n\t{\n\t\ticon: alignLeft,\n\t\ttitle: __( 'Align text left' ),\n\t\talign: 'left',\n\t},\n\t{\n\t\ticon: alignCenter,\n\t\ttitle: __( 'Align text center' ),\n\t\talign: 'center',\n\t},\n\t{\n\t\ticon: alignRight,\n\t\ttitle: __( 'Align text right' ),\n\t\talign: 'right',\n\t},\n];\n\nconst POPOVER_PROPS = {\n\tplacement: 'bottom-start',\n};\n\nfunction AlignmentUI( {\n\tvalue,\n\tonChange,\n\talignmentControls = DEFAULT_ALIGNMENT_CONTROLS,\n\tlabel = __( 'Align text' ),\n\tdescription,\n\tisCollapsed = true,\n\tisToolbar,\n} ) {\n\tfunction applyOrUnset( align ) {\n\t\treturn () => onChange( value === align ? undefined : align );\n\t}\n\n\tconst activeAlignment = alignmentControls.find(\n\t\t( control ) => control.align === value\n\t);\n\n\tfunction setIcon() {\n\t\tif ( activeAlignment ) {\n\t\t\treturn activeAlignment.icon;\n\t\t}\n\t\treturn isRTL() ? alignRight : alignLeft;\n\t}\n\n\tconst UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;\n\tconst extraProps = isToolbar\n\t\t? { isCollapsed }\n\t\t: {\n\t\t\t\ttoggleProps: description ? { description } : {},\n\t\t\t\tpopoverProps: POPOVER_PROPS,\n\t\t  };\n\n\treturn (\n\t\t<UIComponent\n\t\t\ticon={ setIcon() }\n\t\t\tlabel={ label }\n\t\t\tcontrols={ alignmentControls.map( ( control ) => {\n\t\t\t\tconst { align } = control;\n\t\t\t\tconst isActive = value === align;\n\n\t\t\t\treturn {\n\t\t\t\t\t...control,\n\t\t\t\t\tisActive,\n\t\t\t\t\trole: isCollapsed ? 'menuitemradio' : undefined,\n\t\t\t\t\tonClick: applyOrUnset( align ),\n\t\t\t\t};\n\t\t\t} ) }\n\t\t\t{ ...extraProps }\n\t\t/>\n\t);\n}\n\nexport default AlignmentUI;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA0B;AAC1B,wBAAkD;AAClD,mBAAmD;AAyDjD;AAvDF,IAAM,6BAA6B;AAAA,EAClC;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,iBAAkB;AAAA,IAC7B,OAAO;AAAA,EACR;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,mBAAoB;AAAA,IAC/B,OAAO;AAAA,EACR;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,kBAAmB;AAAA,IAC9B,OAAO;AAAA,EACR;AACD;AAEA,IAAM,gBAAgB;AAAA,EACrB,WAAW;AACZ;AAEA,SAAS,YAAa;AAAA,EACrB;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,YAAQ,gBAAI,YAAa;AAAA,EACzB;AAAA,EACA,cAAc;AAAA,EACd;AACD,GAAI;AACH,WAAS,aAAc,OAAQ;AAC9B,WAAO,MAAM,SAAU,UAAU,QAAQ,SAAY,KAAM;AAAA,EAC5D;AAEA,QAAM,kBAAkB,kBAAkB;AAAA,IACzC,CAAE,YAAa,QAAQ,UAAU;AAAA,EAClC;AAEA,WAAS,UAAU;AAClB,QAAK,iBAAkB;AACtB,aAAO,gBAAgB;AAAA,IACxB;AACA,eAAO,mBAAM,IAAI,0BAAa;AAAA,EAC/B;AAEA,QAAM,cAAc,YAAY,iCAAe;AAC/C,QAAM,aAAa,YAChB,EAAE,YAAY,IACd;AAAA,IACA,aAAa,cAAc,EAAE,YAAY,IAAI,CAAC;AAAA,IAC9C,cAAc;AAAA,EACd;AAEH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,QAAQ;AAAA,MACf;AAAA,MACA,UAAW,kBAAkB,IAAK,CAAE,YAAa;AAChD,cAAM,EAAE,MAAM,IAAI;AAClB,cAAM,WAAW,UAAU;AAE3B,eAAO;AAAA,UACN,GAAG;AAAA,UACH;AAAA,UACA,MAAM,cAAc,kBAAkB;AAAA,UACtC,SAAS,aAAc,KAAM;AAAA,QAC9B;AAAA,MACD,CAAE;AAAA,MACA,GAAG;AAAA;AAAA,EACN;AAEF;AAEA,IAAO,aAAQ;",
   "names": []
 }

package/build/components/background-image-control/index.cjs CHANGED Viewed

@@ -48,6 +48,7 @@ var import_dom = require("@wordpress/dom");
 var import_blob = require("@wordpress/blob");
 var import_global_styles_engine = require("@wordpress/global-styles-engine");
 var import_background_panel = require("../global-styles/background-panel.cjs");
+var import_inheritance = require("../global-styles/inheritance/index.cjs");
 var import_object = require("../../utils/object.cjs");
 var import_media_replace_flow = __toESM(require("../media-replace-flow/index.cjs"));
 var import_store = require("../../store/index.cjs");
@@ -149,6 +150,7 @@ function BackgroundControlsPanel({
   onToggle: onToggleCallback = noop,
   hasImageValue,
   onReset,
+  hasLocalOverride,
   containerRef
 }) {
   if (!hasImageValue) {
@@ -181,7 +183,19 @@ function BackgroundControlsPanel({
               onToggleCallback
             }
           ),
-          onReset && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          onReset && (hasLocalOverride ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_inheritance.InheritanceResetButton,
+            {
+              className: "block-editor-global-styles-background-panel__reset",
+              onResetToInherited: () => {
+                onReset();
+                if (isOpen) {
+                  onToggle();
+                }
+                focusToggleButton(containerRef);
+              }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.Button,
             {
               __next40pxDefaultSize: true,
@@ -197,7 +211,7 @@ function BackgroundControlsPanel({
                 focusToggleButton(containerRef);
               }
             }
-          )
+          ))
         ] });
       },
       renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -359,12 +373,20 @@ function BackgroundSizeControls({
   inheritedValue,
   defaultValues
 }) {
-  const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize;
-  const repeatValue = style?.background?.backgroundRepeat || inheritedValue?.background?.backgroundRepeat;
+  const localSizeValue = style?.background?.backgroundSize;
+  const localRepeatValue = style?.background?.backgroundRepeat;
+  const localPositionValue = style?.background?.backgroundPosition;
+  const localAttachmentValue = style?.background?.backgroundAttachment;
+  const inheritedSizeValue = inheritedValue?.background?.backgroundSize;
+  const inheritedRepeatValue = inheritedValue?.background?.backgroundRepeat;
+  const inheritedPositionValue = inheritedValue?.background?.backgroundPosition;
+  const inheritedAttachmentValue = inheritedValue?.background?.backgroundAttachment;
+  const sizeValue = localSizeValue || inheritedSizeValue;
+  const repeatValue = localRepeatValue || inheritedRepeatValue;
   const imageValue = style?.background?.backgroundImage?.url || inheritedValue?.background?.backgroundImage?.url;
   const isUploadedImage = style?.background?.backgroundImage?.id;
-  const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition;
-  const attachmentValue = style?.background?.backgroundAttachment || inheritedValue?.background?.backgroundAttachment;
+  const positionValue = localPositionValue || inheritedPositionValue;
+  const attachmentValue = localAttachmentValue || inheritedAttachmentValue;
   let currentValueForToggle = !sizeValue && isUploadedImage ? defaultValues?.backgroundSize : sizeValue || "auto";
   currentValueForToggle = !["cover", "contain", "auto"].includes(
     currentValueForToggle
@@ -518,7 +540,8 @@ function BackgroundImagePanel({
   onChange,
   inheritedValue = value,
   settings,
-  defaultValues = {}
+  defaultValues = {},
+  showInheritanceLabelIndicators = (0, import_inheritance.isGlobalStylesInheritanceEnabled)()
 }) {
   const { globalStyles, _links } = (0, import_data.useSelect)((select) => {
     const { getSettings } = select(import_store.store);
@@ -548,11 +571,17 @@ function BackgroundImagePanel({
     );
     return resolvedValues;
   }, [globalStyles, _links, inheritedValue]);
-  const resetBackground = () => onChange((0, import_object.setImmutably)(value, ["background"], {}));
+  const resetBackground = () => onChange(
+    (0, import_object.setImmutably)(value, ["background"], {
+      gradient: value?.background?.gradient
+    })
+  );
   const { title, url } = value?.background?.backgroundImage || {
     ...resolvedInheritedValue?.background?.backgroundImage
   };
-  const hasImageValue = (0, import_background_panel.hasBackgroundImageValue)(value) || (0, import_background_panel.hasBackgroundImageValue)(resolvedInheritedValue);
+  const localHasImageValue = (0, import_background_panel.hasBackgroundImageValue)(value);
+  const hasImageValue = localHasImageValue || (0, import_background_panel.hasBackgroundImageValue)(resolvedInheritedValue);
+  const hasLocalOverride = showInheritanceLabelIndicators && localHasImageValue && (0, import_background_panel.hasBackgroundImageValue)(resolvedInheritedValue);
   const imageValue = value?.background?.backgroundImage || inheritedValue?.background?.backgroundImage;
   const shouldShowBackgroundImageControls = hasImageValue && "none" !== imageValue && (settings?.background?.backgroundSize || settings?.background?.backgroundPosition || settings?.background?.backgroundRepeat);
   const [isDropDownOpen, setIsDropDownOpen] = (0, import_element.useState)(false);
@@ -575,7 +604,8 @@ function BackgroundImagePanel({
           url,
           onToggle: setIsDropDownOpen,
           hasImageValue,
-          onReset: resetBackground,
+          hasLocalOverride,
+          onReset: localHasImageValue ? resetBackground : void 0,
           containerRef,
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, className: "single-column", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/build/components/background-image-control/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/background-image-control/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalVStack as VStack,\n\tDropZone,\n\tFlexBlock,\n\tFocalPointPicker,\n\tMenuItem,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tDropdown,\n\tPlaceholder,\n\tSpinner,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\nimport { reset as resetIcon } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\nimport { useRef, useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { focus } from '@wordpress/dom';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getResolvedValue } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { hasBackgroundImageValue } from '../global-styles/background-panel';\nimport { setImmutably } from '../../utils/object';\nimport MediaReplaceFlow from '../media-replace-flow';\nimport { store as blockEditorStore } from '../../store';\n\nimport {\n\tglobalStylesDataKey,\n\tglobalStylesLinksDataKey,\n} from '../../store/private-keys';\n\nconst IMAGE_BACKGROUND_TYPE = 'image';\n\nconst BACKGROUND_POPOVER_PROPS = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n\tclassName: 'block-editor-global-styles-background-panel__popover',\n};\nconst noop = () => {};\n\n/**\n * Focuses the toggle button.\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\t\t// Focus the toggle button and close the dropdown menu.\n\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\ttoggleButton.focus();\n\t} );\n};\n\n/**\n * Get the help text for the background size control.\n *\n * @param {string} value backgroundSize value.\n * @return {string}      Translated help text.\n */\nfunction backgroundSizeHelpText( value ) {\n\tif ( value === 'cover' || value === undefined ) {\n\t\treturn __( 'Image covers the space evenly.' );\n\t}\n\tif ( value === 'contain' ) {\n\t\treturn __( 'Image is contained without distortion.' );\n\t}\n\treturn __( 'Image has a fixed width.' );\n}\n\n/**\n * Converts decimal x and y coords from FocalPointPicker to percentage-based values\n * to use as backgroundPosition value.\n *\n * @param {{x?:number, y?:number}} value FocalPointPicker coords.\n * @return {string}      \t\t\t\t backgroundPosition value.\n */\nexport const coordsToBackgroundPosition = ( value ) => {\n\tif ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {\n\t\treturn undefined;\n\t}\n\n\tconst x = isNaN( value.x ) ? 0.5 : value.x;\n\tconst y = isNaN( value.y ) ? 0.5 : value.y;\n\n\treturn `${ x * 100 }% ${ y * 100 }%`;\n};\n\n/**\n * Converts backgroundPosition value to x and y coords for FocalPointPicker.\n *\n * @param {string} value backgroundPosition value.\n * @return {{x?:number, y?:number}}       FocalPointPicker coords.\n */\nexport const backgroundPositionToCoords = ( value ) => {\n\tif ( ! value ) {\n\t\treturn { x: undefined, y: undefined };\n\t}\n\n\tlet [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );\n\tx = isNaN( x ) ? undefined : x;\n\ty = isNaN( y ) ? x : y;\n\n\treturn { x, y };\n};\n\nfunction InspectorImagePreviewItem( {\n\tas = 'span',\n\timgUrl,\n\ttoggleProps = {},\n\tfilename,\n\tlabel,\n\tonToggleCallback = noop,\n} ) {\n\tconst { isOpen, ...restToggleProps } = toggleProps;\n\n\tuseEffect( () => {\n\t\tif ( typeof isOpen !== 'undefined' ) {\n\t\t\tonToggleCallback( isOpen );\n\t\t}\n\t}, [ isOpen, onToggleCallback ] );\n\n\tconst renderPreviewContent = () => {\n\t\treturn (\n\t\t\t<HStack className=\"block-editor-global-styles-background-panel__inspector-preview-inner\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-image-indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tbackgroundImage: imgUrl\n\t\t\t\t\t\t\t? `url(${ imgUrl })`\n\t\t\t\t\t\t\t: 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\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden render={ <span /> }>\n\t\t\t\t\t\t{ imgUrl\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: file name */\n\t\t\t\t\t\t\t\t\t__( 'Background image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename || label\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'No background image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t);\n\t};\n\n\treturn as === 'button' ? (\n\t\t<Button __next40pxDefaultSize { ...restToggleProps }>\n\t\t\t{ renderPreviewContent() }\n\t\t</Button>\n\t) : (\n\t\trenderPreviewContent()\n\t);\n}\n\nfunction BackgroundControlsPanel( {\n\tlabel,\n\tfilename,\n\turl: imgUrl,\n\tchildren,\n\tonToggle: onToggleCallback = noop,\n\thasImageValue,\n\tonReset,\n\tcontainerRef,\n} ) {\n\tif ( ! hasImageValue ) {\n\t\treturn;\n\t}\n\n\tconst imgLabel = label || getFilename( imgUrl ) || __( 'Image' );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ BACKGROUND_POPOVER_PROPS }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName:\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__dropdown-toggle',\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t'aria-label': __(\n\t\t\t\t\t\t'Background size, position and repeat options.'\n\t\t\t\t\t),\n\t\t\t\t\tisOpen,\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\t\timgUrl={ imgUrl }\n\t\t\t\t\t\t\tfilename={ filename }\n\t\t\t\t\t\t\tlabel={ imgLabel }\n\t\t\t\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t\t\t\t\tas=\"button\"\n\t\t\t\t\t\t\tonToggleCallback={ onToggleCallback }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ onReset && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__reset\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\t// Close the dropdown if open.\n\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// Focus the toggle button.\n\t\t\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__dropdown-content-wrapper\"\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction LoadingSpinner() {\n\treturn (\n\t\t<Placeholder className=\"block-editor-global-styles-background-panel__loading\">\n\t\t\t<Spinner />\n\t\t</Placeholder>\n\t);\n}\n\nfunction BackgroundImageControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tonRemoveImage = noop,\n\tonResetImage = noop,\n\tdisplayInPanel,\n\tdefaultValues,\n\tcontainerRef,\n} ) {\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\n\tconst { id, title, url } = style?.background?.backgroundImage || {\n\t\t...inheritedValue?.background?.backgroundImage,\n\t};\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\tsetIsUploading( false );\n\t};\n\n\tconst resetBackgroundImage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tresetBackgroundImage();\n\t\t\tsetIsUploading( false );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetIsUploading( true );\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst sizeValue =\n\t\t\tstyle?.background?.backgroundSize || defaultValues?.backgroundSize;\n\t\tconst positionValue = style?.background?.backgroundPosition;\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t\tbackgroundPosition:\n\t\t\t\t\t/*\n\t\t\t\t\t * A background image uploaded and set in the editor receives a default background position of '50% 0',\n\t\t\t\t\t * when the background image size is the equivalent of \"Tile\".\n\t\t\t\t\t * This is to increase the chance that the image's focus point is visible.\n\t\t\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t\t\t */\n\t\t\t\t\t! positionValue && ( 'auto' === sizeValue || ! sizeValue )\n\t\t\t\t\t\t? '50% 0'\n\t\t\t\t\t\t: positionValue,\n\t\t\t\tbackgroundSize: sizeValue,\n\t\t\t} )\n\t\t);\n\t\tsetIsUploading( false );\n\t\t// Close the dropdown and focus the toggle button.\n\t\tfocusToggleButton( containerRef );\n\t};\n\n\t// Drag and drop callback, restricting image to one.\n\tconst onFilesDrop = ( filesList ) => {\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes: [ IMAGE_BACKGROUND_TYPE ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\tconst hasValue = hasBackgroundImageValue( style );\n\n\tconst onRemove = () =>\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\tbackgroundImage: 'none',\n\t\t\t} )\n\t\t);\n\tconst canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );\n\tconst imgLabel = title || getFilename( url ) || __( 'Image' );\n\n\treturn (\n\t\t<div className=\"block-editor-global-styles-background-panel__image-tools-panel-item\">\n\t\t\t{ isUploading && <LoadingSpinner /> }\n\t\t\t<MediaReplaceFlow\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\taccept=\"image/*\"\n\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tclassName: clsx( {\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__media-replace-popover':\n\t\t\t\t\t\t\tdisplayInPanel,\n\t\t\t\t\t} ),\n\t\t\t\t} }\n\t\t\t\tname={\n\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\timgUrl={ url }\n\t\t\t\t\t\tfilename={ title }\n\t\t\t\t\t\tlabel={ imgLabel }\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) }\n\t\t\t\tonError={ onUploadError }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\tonResetImage();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ canRemove && (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\tonRemove();\n\t\t\t\t\t\t\tonRemoveImage();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) }\n\t\t\t</MediaReplaceFlow>\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction BackgroundSizeControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tdefaultValues,\n} ) {\n\tconst sizeValue =\n\t\tstyle?.background?.backgroundSize ||\n\t\tinheritedValue?.background?.backgroundSize;\n\tconst repeatValue =\n\t\tstyle?.background?.backgroundRepeat ||\n\t\tinheritedValue?.background?.backgroundRepeat;\n\tconst imageValue =\n\t\tstyle?.background?.backgroundImage?.url ||\n\t\tinheritedValue?.background?.backgroundImage?.url;\n\tconst isUploadedImage = style?.background?.backgroundImage?.id;\n\tconst positionValue =\n\t\tstyle?.background?.backgroundPosition ||\n\t\tinheritedValue?.background?.backgroundPosition;\n\tconst attachmentValue =\n\t\tstyle?.background?.backgroundAttachment ||\n\t\tinheritedValue?.background?.backgroundAttachment;\n\n\t/*\n\t * Set default values for uploaded images.\n\t * The default values are passed by the consumer.\n\t * Block-level controls may have different defaults to root-level controls.\n\t * A falsy value is treated by default as `auto` (Tile).\n\t */\n\tlet currentValueForToggle =\n\t\t! sizeValue && isUploadedImage\n\t\t\t? defaultValues?.backgroundSize\n\t\t\t: sizeValue || 'auto';\n\t/*\n\t * The incoming value could be a value + unit, e.g. '20px'.\n\t * In this case set the value to 'tile'.\n\t */\n\tcurrentValueForToggle = ! [ 'cover', 'contain', 'auto' ].includes(\n\t\tcurrentValueForToggle\n\t)\n\t\t? 'auto'\n\t\t: currentValueForToggle;\n\t/*\n\t * If the current value is `cover` and the repeat value is `undefined`, then\n\t * the toggle should be unchecked as the default state. Otherwise, the toggle\n\t * should reflect the current repeat value.\n\t */\n\tconst repeatCheckedValue = ! (\n\t\trepeatValue === 'no-repeat' ||\n\t\t( currentValueForToggle === 'cover' && repeatValue === undefined )\n\t);\n\n\tconst updateBackgroundSize = ( next ) => {\n\t\t// When switching to 'contain' toggle the repeat off.\n\t\tlet nextRepeat = repeatValue;\n\t\tlet nextPosition = positionValue;\n\n\t\tif ( next === 'contain' ) {\n\t\t\tnextRepeat = 'no-repeat';\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif ( next === 'cover' ) {\n\t\t\tnextRepeat = undefined;\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif (\n\t\t\t( currentValueForToggle === 'cover' ||\n\t\t\t\tcurrentValueForToggle === 'contain' ) &&\n\t\t\tnext === 'auto'\n\t\t) {\n\t\t\tnextRepeat = undefined;\n\t\t\t/*\n\t\t\t * A background image uploaded and set in the editor (an image with a record id),\n\t\t\t * receives a default background position of '50% 0',\n\t\t\t * when the toggle switches to \"Tile\". This is to increase the chance that\n\t\t\t * the image's focus point is visible.\n\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t */\n\t\t\tif ( !! style?.background?.backgroundImage?.id ) {\n\t\t\t\tnextPosition = '50% 0';\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * Next will be null when the input is cleared,\n\t\t * in which case the value should be 'auto'.\n\t\t */\n\t\tif ( ! next && currentValueForToggle === 'auto' ) {\n\t\t\tnext = 'auto';\n\t\t}\n\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundPosition: nextPosition,\n\t\t\t\tbackgroundRepeat: nextRepeat,\n\t\t\t\tbackgroundSize: next,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst updateBackgroundPosition = ( next ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t\tcoordsToBackgroundPosition( next )\n\t\t\t)\n\t\t);\n\t};\n\n\tconst toggleIsRepeated = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t\trepeatCheckedValue === true ? 'no-repeat' : 'repeat'\n\t\t\t)\n\t\t);\n\n\tconst toggleScrollWithPage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t\tattachmentValue === 'fixed' ? 'scroll' : 'fixed'\n\t\t\t)\n\t\t);\n\n\t// Set a default background position for non-site-wide, uploaded images with a size of 'contain'.\n\tconst backgroundPositionValue =\n\t\t! positionValue && isUploadedImage && 'contain' === sizeValue\n\t\t\t? defaultValues?.backgroundPosition\n\t\t\t: positionValue;\n\n\treturn (\n\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t<FocalPointPicker\n\t\t\t\tlabel={ __( 'Focal point' ) }\n\t\t\t\turl={ imageValue }\n\t\t\t\tvalue={ backgroundPositionToCoords( backgroundPositionValue ) }\n\t\t\t\tonChange={ updateBackgroundPosition }\n\t\t\t/>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Fixed background' ) }\n\t\t\t\tchecked={ attachmentValue === 'fixed' }\n\t\t\t\tonChange={ toggleScrollWithPage }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\tvalue={ currentValueForToggle }\n\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\tisBlock\n\t\t\t\thelp={ backgroundSizeHelpText(\n\t\t\t\t\tsizeValue || defaultValues?.backgroundSize\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"cover\"\n\t\t\t\t\tvalue=\"cover\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Cover',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"contain\"\n\t\t\t\t\tvalue=\"contain\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Contain',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"tile\"\n\t\t\t\t\tvalue=\"auto\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Tile',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 } as=\"span\">\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ __( 'Background image width' ) }\n\t\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\t\tvalue={ sizeValue }\n\t\t\t\t\t__unstableInputWidth=\"100px\"\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tcurrentValueForToggle !== 'auto' ||\n\t\t\t\t\t\tcurrentValueForToggle === undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Repeat' ) }\n\t\t\t\t\tchecked={ repeatCheckedValue }\n\t\t\t\t\tonChange={ toggleIsRepeated }\n\t\t\t\t\tdisabled={ currentValueForToggle === 'cover' }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tdefaultValues = {},\n} ) {\n\t/*\n\t * Resolve any inherited \"ref\" pointers.\n\t * Should the block editor need resolved, inherited values\n\t * across all controls, this could be abstracted into a hook,\n\t * e.g., useResolveGlobalStyle\n\t */\n\tconst { globalStyles, _links } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst _settings = getSettings();\n\t\treturn {\n\t\t\tglobalStyles: _settings[ globalStylesDataKey ],\n\t\t\t_links: _settings[ globalStylesLinksDataKey ],\n\t\t};\n\t}, [] );\n\tconst resolvedInheritedValue = useMemo( () => {\n\t\tconst resolvedValues = {\n\t\t\tbackground: {},\n\t\t};\n\n\t\tif ( ! inheritedValue?.background ) {\n\t\t\treturn inheritedValue;\n\t\t}\n\n\t\tObject.entries( inheritedValue?.background ).forEach(\n\t\t\t( [ key, backgroundValue ] ) => {\n\t\t\t\tresolvedValues.background[ key ] = getResolvedValue(\n\t\t\t\t\tbackgroundValue,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyles: globalStyles,\n\t\t\t\t\t\t_links,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\t\treturn resolvedValues;\n\t}, [ globalStyles, _links, inheritedValue ] );\n\n\tconst resetBackground = () =>\n\t\tonChange( setImmutably( value, [ 'background' ], {} ) );\n\n\tconst { title, url } = value?.background?.backgroundImage || {\n\t\t...resolvedInheritedValue?.background?.backgroundImage,\n\t};\n\tconst hasImageValue =\n\t\thasBackgroundImageValue( value ) ||\n\t\thasBackgroundImageValue( resolvedInheritedValue );\n\n\tconst imageValue =\n\t\tvalue?.background?.backgroundImage ||\n\t\tinheritedValue?.background?.backgroundImage;\n\n\tconst shouldShowBackgroundImageControls =\n\t\thasImageValue &&\n\t\t'none' !== imageValue &&\n\t\t( settings?.background?.backgroundSize ||\n\t\t\tsettings?.background?.backgroundPosition ||\n\t\t\tsettings?.background?.backgroundRepeat );\n\n\tconst [ isDropDownOpen, setIsDropDownOpen ] = useState( false );\n\tconst containerRef = useRef();\n\n\treturn (\n\t\t<div\n\t\t\tref={ containerRef }\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-global-styles-background-panel__inspector-media-replace-container',\n\t\t\t\t{\n\t\t\t\t\t'is-open': isDropDownOpen,\n\t\t\t\t}\n\t\t\t) }\n\t\t>\n\t\t\t{ shouldShowBackgroundImageControls ? (\n\t\t\t\t<BackgroundControlsPanel\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tfilename={ title }\n\t\t\t\t\turl={ url }\n\t\t\t\t\tonToggle={ setIsDropDownOpen }\n\t\t\t\t\thasImageValue={ hasImageValue }\n\t\t\t\t\tonReset={ resetBackground }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t\t\t\t<BackgroundImageControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t\tdisplayInPanel\n\t\t\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BackgroundSizeControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</BackgroundControlsPanel>\n\t\t\t) : (\n\t\t\t\t<BackgroundImageControls\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tstyle={ value }\n\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t} }\n\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tToggleControl,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalVStack as VStack,\n\tDropZone,\n\tFlexBlock,\n\tFocalPointPicker,\n\tMenuItem,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tDropdown,\n\tPlaceholder,\n\tSpinner,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { VisuallyHidden } from '@wordpress/ui';\nimport { reset as resetIcon } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\nimport { useRef, useState, useEffect, useMemo } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { focus } from '@wordpress/dom';\nimport { isBlobURL } from '@wordpress/blob';\nimport { getResolvedValue } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { hasBackgroundImageValue } from '../global-styles/background-panel';\nimport {\n\tInheritanceResetButton,\n\tisGlobalStylesInheritanceEnabled,\n} from '../global-styles/inheritance';\nimport { setImmutably } from '../../utils/object';\nimport MediaReplaceFlow from '../media-replace-flow';\nimport { store as blockEditorStore } from '../../store';\n\nimport {\n\tglobalStylesDataKey,\n\tglobalStylesLinksDataKey,\n} from '../../store/private-keys';\n\nconst IMAGE_BACKGROUND_TYPE = 'image';\n\nconst BACKGROUND_POPOVER_PROPS = {\n\tplacement: 'left-start',\n\toffset: 36,\n\tshift: true,\n\tclassName: 'block-editor-global-styles-background-panel__popover',\n};\nconst noop = () => {};\n\n/**\n * Focuses the toggle button.\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\t\t// Focus the toggle button and close the dropdown menu.\n\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\ttoggleButton.focus();\n\t} );\n};\n\n/**\n * Get the help text for the background size control.\n *\n * @param {string} value backgroundSize value.\n * @return {string}      Translated help text.\n */\nfunction backgroundSizeHelpText( value ) {\n\tif ( value === 'cover' || value === undefined ) {\n\t\treturn __( 'Image covers the space evenly.' );\n\t}\n\tif ( value === 'contain' ) {\n\t\treturn __( 'Image is contained without distortion.' );\n\t}\n\treturn __( 'Image has a fixed width.' );\n}\n\n/**\n * Converts decimal x and y coords from FocalPointPicker to percentage-based values\n * to use as backgroundPosition value.\n *\n * @param {{x?:number, y?:number}} value FocalPointPicker coords.\n * @return {string}      \t\t\t\t backgroundPosition value.\n */\nexport const coordsToBackgroundPosition = ( value ) => {\n\tif ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {\n\t\treturn undefined;\n\t}\n\n\tconst x = isNaN( value.x ) ? 0.5 : value.x;\n\tconst y = isNaN( value.y ) ? 0.5 : value.y;\n\n\treturn `${ x * 100 }% ${ y * 100 }%`;\n};\n\n/**\n * Converts backgroundPosition value to x and y coords for FocalPointPicker.\n *\n * @param {string} value backgroundPosition value.\n * @return {{x?:number, y?:number}}       FocalPointPicker coords.\n */\nexport const backgroundPositionToCoords = ( value ) => {\n\tif ( ! value ) {\n\t\treturn { x: undefined, y: undefined };\n\t}\n\n\tlet [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );\n\tx = isNaN( x ) ? undefined : x;\n\ty = isNaN( y ) ? x : y;\n\n\treturn { x, y };\n};\n\nfunction InspectorImagePreviewItem( {\n\tas = 'span',\n\timgUrl,\n\ttoggleProps = {},\n\tfilename,\n\tlabel,\n\tonToggleCallback = noop,\n} ) {\n\tconst { isOpen, ...restToggleProps } = toggleProps;\n\n\tuseEffect( () => {\n\t\tif ( typeof isOpen !== 'undefined' ) {\n\t\t\tonToggleCallback( isOpen );\n\t\t}\n\t}, [ isOpen, onToggleCallback ] );\n\n\tconst renderPreviewContent = () => {\n\t\treturn (\n\t\t\t<HStack className=\"block-editor-global-styles-background-panel__inspector-preview-inner\">\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-image-indicator\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tbackgroundImage: imgUrl\n\t\t\t\t\t\t\t? `url(${ imgUrl })`\n\t\t\t\t\t\t\t: 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\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden render={ <span /> }>\n\t\t\t\t\t\t{ imgUrl\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: file name */\n\t\t\t\t\t\t\t\t\t__( 'Background image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename || label\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'No background image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexBlock>\n\t\t\t</HStack>\n\t\t);\n\t};\n\n\treturn as === 'button' ? (\n\t\t<Button __next40pxDefaultSize { ...restToggleProps }>\n\t\t\t{ renderPreviewContent() }\n\t\t</Button>\n\t) : (\n\t\trenderPreviewContent()\n\t);\n}\n\nfunction BackgroundControlsPanel( {\n\tlabel,\n\tfilename,\n\turl: imgUrl,\n\tchildren,\n\tonToggle: onToggleCallback = noop,\n\thasImageValue,\n\tonReset,\n\thasLocalOverride,\n\tcontainerRef,\n} ) {\n\tif ( ! hasImageValue ) {\n\t\treturn;\n\t}\n\n\tconst imgLabel = label || getFilename( imgUrl ) || __( 'Image' );\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ BACKGROUND_POPOVER_PROPS }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName:\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__dropdown-toggle',\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t'aria-label': __(\n\t\t\t\t\t\t'Background size, position and repeat options.'\n\t\t\t\t\t),\n\t\t\t\t\tisOpen,\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\t\timgUrl={ imgUrl }\n\t\t\t\t\t\t\tfilename={ filename }\n\t\t\t\t\t\t\tlabel={ imgLabel }\n\t\t\t\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t\t\t\t\tas=\"button\"\n\t\t\t\t\t\t\tonToggleCallback={ onToggleCallback }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ onReset &&\n\t\t\t\t\t\t\t( hasLocalOverride ? (\n\t\t\t\t\t\t\t\t<InheritanceResetButton\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__reset\"\n\t\t\t\t\t\t\t\t\tonResetToInherited={ () => {\n\t\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\t\t// Close the dropdown if open.\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t// Focus the toggle button.\n\t\t\t\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Reset' ) }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__reset\"\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ resetIcon }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\t\t// Close the dropdown if open.\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t// Focus the toggle button.\n\t\t\t\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper\n\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__dropdown-content-wrapper\"\n\t\t\t\t\tpaddingSize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction LoadingSpinner() {\n\treturn (\n\t\t<Placeholder className=\"block-editor-global-styles-background-panel__loading\">\n\t\t\t<Spinner />\n\t\t</Placeholder>\n\t);\n}\n\nfunction BackgroundImageControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tonRemoveImage = noop,\n\tonResetImage = noop,\n\tdisplayInPanel,\n\tdefaultValues,\n\tcontainerRef,\n} ) {\n\tconst [ isUploading, setIsUploading ] = useState( false );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\n\tconst { id, title, url } = style?.background?.backgroundImage || {\n\t\t...inheritedValue?.background?.backgroundImage,\n\t};\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t\tsetIsUploading( false );\n\t};\n\n\tconst resetBackgroundImage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundImage' ],\n\t\t\t\tundefined\n\t\t\t)\n\t\t);\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tresetBackgroundImage();\n\t\t\tsetIsUploading( false );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetIsUploading( true );\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst sizeValue =\n\t\t\tstyle?.background?.backgroundSize || defaultValues?.backgroundSize;\n\t\tconst positionValue = style?.background?.backgroundPosition;\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t\tbackgroundPosition:\n\t\t\t\t\t/*\n\t\t\t\t\t * A background image uploaded and set in the editor receives a default background position of '50% 0',\n\t\t\t\t\t * when the background image size is the equivalent of \"Tile\".\n\t\t\t\t\t * This is to increase the chance that the image's focus point is visible.\n\t\t\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t\t\t */\n\t\t\t\t\t! positionValue && ( 'auto' === sizeValue || ! sizeValue )\n\t\t\t\t\t\t? '50% 0'\n\t\t\t\t\t\t: positionValue,\n\t\t\t\tbackgroundSize: sizeValue,\n\t\t\t} )\n\t\t);\n\t\tsetIsUploading( false );\n\t\t// Close the dropdown and focus the toggle button.\n\t\tfocusToggleButton( containerRef );\n\t};\n\n\t// Drag and drop callback, restricting image to one.\n\tconst onFilesDrop = ( filesList ) => {\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes: [ IMAGE_BACKGROUND_TYPE ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t\tmultiple: false,\n\t\t} );\n\t};\n\n\tconst hasValue = hasBackgroundImageValue( style );\n\n\tconst onRemove = () =>\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\tbackgroundImage: 'none',\n\t\t\t} )\n\t\t);\n\tconst canRemove = ! hasValue && hasBackgroundImageValue( inheritedValue );\n\tconst imgLabel = title || getFilename( url ) || __( 'Image' );\n\n\treturn (\n\t\t<div className=\"block-editor-global-styles-background-panel__image-tools-panel-item\">\n\t\t\t{ isUploading && <LoadingSpinner /> }\n\t\t\t<MediaReplaceFlow\n\t\t\t\tmediaId={ id }\n\t\t\t\tmediaURL={ url }\n\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\taccept=\"image/*\"\n\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tclassName: clsx( {\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__media-replace-popover':\n\t\t\t\t\t\t\tdisplayInPanel,\n\t\t\t\t\t} ),\n\t\t\t\t} }\n\t\t\t\tname={\n\t\t\t\t\t<InspectorImagePreviewItem\n\t\t\t\t\t\timgUrl={ url }\n\t\t\t\t\t\tfilename={ title }\n\t\t\t\t\t\tlabel={ imgLabel }\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) }\n\t\t\t\tonError={ onUploadError }\n\t\t\t\tonReset={ () => {\n\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\tonResetImage();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ canRemove && (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tfocusToggleButton( containerRef );\n\t\t\t\t\t\t\tonRemove();\n\t\t\t\t\t\t\tonRemoveImage();\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t) }\n\t\t\t</MediaReplaceFlow>\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction BackgroundSizeControls( {\n\tonChange,\n\tstyle,\n\tinheritedValue,\n\tdefaultValues,\n} ) {\n\t/*\n\t * Read local and inherited values separately so each sub-control can\n\t * show the inherited value while marking the control as inherited.\n\t */\n\tconst localSizeValue = style?.background?.backgroundSize;\n\tconst localRepeatValue = style?.background?.backgroundRepeat;\n\tconst localPositionValue = style?.background?.backgroundPosition;\n\tconst localAttachmentValue = style?.background?.backgroundAttachment;\n\tconst inheritedSizeValue = inheritedValue?.background?.backgroundSize;\n\tconst inheritedRepeatValue = inheritedValue?.background?.backgroundRepeat;\n\tconst inheritedPositionValue =\n\t\tinheritedValue?.background?.backgroundPosition;\n\tconst inheritedAttachmentValue =\n\t\tinheritedValue?.background?.backgroundAttachment;\n\n\tconst sizeValue = localSizeValue || inheritedSizeValue;\n\tconst repeatValue = localRepeatValue || inheritedRepeatValue;\n\tconst imageValue =\n\t\tstyle?.background?.backgroundImage?.url ||\n\t\tinheritedValue?.background?.backgroundImage?.url;\n\tconst isUploadedImage = style?.background?.backgroundImage?.id;\n\tconst positionValue = localPositionValue || inheritedPositionValue;\n\tconst attachmentValue = localAttachmentValue || inheritedAttachmentValue;\n\n\t/*\n\t * Set default values for uploaded images.\n\t * The default values are passed by the consumer.\n\t * Block-level controls may have different defaults to root-level controls.\n\t * A falsy value is treated by default as `auto` (Tile).\n\t */\n\tlet currentValueForToggle =\n\t\t! sizeValue && isUploadedImage\n\t\t\t? defaultValues?.backgroundSize\n\t\t\t: sizeValue || 'auto';\n\t/*\n\t * The incoming value could be a value + unit, e.g. '20px'.\n\t * In this case set the value to 'tile'.\n\t */\n\tcurrentValueForToggle = ! [ 'cover', 'contain', 'auto' ].includes(\n\t\tcurrentValueForToggle\n\t)\n\t\t? 'auto'\n\t\t: currentValueForToggle;\n\t/*\n\t * If the current value is `cover` and the repeat value is `undefined`, then\n\t * the toggle should be unchecked as the default state. Otherwise, the toggle\n\t * should reflect the current repeat value.\n\t */\n\tconst repeatCheckedValue = ! (\n\t\trepeatValue === 'no-repeat' ||\n\t\t( currentValueForToggle === 'cover' && repeatValue === undefined )\n\t);\n\n\tconst updateBackgroundSize = ( next ) => {\n\t\t// When switching to 'contain' toggle the repeat off.\n\t\tlet nextRepeat = repeatValue;\n\t\tlet nextPosition = positionValue;\n\n\t\tif ( next === 'contain' ) {\n\t\t\tnextRepeat = 'no-repeat';\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif ( next === 'cover' ) {\n\t\t\tnextRepeat = undefined;\n\t\t\tnextPosition = undefined;\n\t\t}\n\n\t\tif (\n\t\t\t( currentValueForToggle === 'cover' ||\n\t\t\t\tcurrentValueForToggle === 'contain' ) &&\n\t\t\tnext === 'auto'\n\t\t) {\n\t\t\tnextRepeat = undefined;\n\t\t\t/*\n\t\t\t * A background image uploaded and set in the editor (an image with a record id),\n\t\t\t * receives a default background position of '50% 0',\n\t\t\t * when the toggle switches to \"Tile\". This is to increase the chance that\n\t\t\t * the image's focus point is visible.\n\t\t\t * This is in-editor only to assist with the user experience.\n\t\t\t */\n\t\t\tif ( !! style?.background?.backgroundImage?.id ) {\n\t\t\t\tnextPosition = '50% 0';\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * Next will be null when the input is cleared,\n\t\t * in which case the value should be 'auto'.\n\t\t */\n\t\tif ( ! next && currentValueForToggle === 'auto' ) {\n\t\t\tnext = 'auto';\n\t\t}\n\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundPosition: nextPosition,\n\t\t\t\tbackgroundRepeat: nextRepeat,\n\t\t\t\tbackgroundSize: next,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst updateBackgroundPosition = ( next ) => {\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t\tcoordsToBackgroundPosition( next )\n\t\t\t)\n\t\t);\n\t};\n\n\tconst toggleIsRepeated = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t\trepeatCheckedValue === true ? 'no-repeat' : 'repeat'\n\t\t\t)\n\t\t);\n\n\tconst toggleScrollWithPage = () =>\n\t\tonChange(\n\t\t\tsetImmutably(\n\t\t\t\tstyle,\n\t\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t\tattachmentValue === 'fixed' ? 'scroll' : 'fixed'\n\t\t\t)\n\t\t);\n\n\t// Set a default background position for non-site-wide, uploaded images with a size of 'contain'.\n\tconst backgroundPositionValue =\n\t\t! positionValue && isUploadedImage && 'contain' === sizeValue\n\t\t\t? defaultValues?.backgroundPosition\n\t\t\t: positionValue;\n\n\treturn (\n\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t<FocalPointPicker\n\t\t\t\tlabel={ __( 'Focal point' ) }\n\t\t\t\turl={ imageValue }\n\t\t\t\tvalue={ backgroundPositionToCoords( backgroundPositionValue ) }\n\t\t\t\tonChange={ updateBackgroundPosition }\n\t\t\t/>\n\t\t\t<ToggleControl\n\t\t\t\tlabel={ __( 'Fixed background' ) }\n\t\t\t\tchecked={ attachmentValue === 'fixed' }\n\t\t\t\tonChange={ toggleScrollWithPage }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tlabel={ __( 'Size' ) }\n\t\t\t\tvalue={ currentValueForToggle }\n\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\tisBlock\n\t\t\t\thelp={ backgroundSizeHelpText(\n\t\t\t\t\tsizeValue || defaultValues?.backgroundSize\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"cover\"\n\t\t\t\t\tvalue=\"cover\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Cover',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"contain\"\n\t\t\t\t\tvalue=\"contain\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Contain',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey=\"tile\"\n\t\t\t\t\tvalue=\"auto\"\n\t\t\t\t\tlabel={ _x(\n\t\t\t\t\t\t'Tile',\n\t\t\t\t\t\t'Size option for background image control'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t<HStack justify=\"flex-start\" spacing={ 2 } as=\"span\">\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ __( 'Background image width' ) }\n\t\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\t\tvalue={ sizeValue }\n\t\t\t\t\t__unstableInputWidth=\"100px\"\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tplaceholder={ __( 'Auto' ) }\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tcurrentValueForToggle !== 'auto' ||\n\t\t\t\t\t\tcurrentValueForToggle === undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Repeat' ) }\n\t\t\t\t\tchecked={ repeatCheckedValue }\n\t\t\t\t\tonChange={ toggleIsRepeated }\n\t\t\t\t\tdisabled={ currentValueForToggle === 'cover' }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</VStack>\n\t);\n}\n\nexport default function BackgroundImagePanel( {\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tdefaultValues = {},\n\tshowInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),\n} ) {\n\t/*\n\t * Resolve inherited `ref` pointers for background controls.\n\t */\n\tconst { globalStyles, _links } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst _settings = getSettings();\n\t\treturn {\n\t\t\tglobalStyles: _settings[ globalStylesDataKey ],\n\t\t\t_links: _settings[ globalStylesLinksDataKey ],\n\t\t};\n\t}, [] );\n\tconst resolvedInheritedValue = useMemo( () => {\n\t\tconst resolvedValues = {\n\t\t\tbackground: {},\n\t\t};\n\n\t\tif ( ! inheritedValue?.background ) {\n\t\t\treturn inheritedValue;\n\t\t}\n\n\t\tObject.entries( inheritedValue?.background ).forEach(\n\t\t\t( [ key, backgroundValue ] ) => {\n\t\t\t\tresolvedValues.background[ key ] = getResolvedValue(\n\t\t\t\t\tbackgroundValue,\n\t\t\t\t\t{\n\t\t\t\t\t\tstyles: globalStyles,\n\t\t\t\t\t\t_links,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t);\n\t\treturn resolvedValues;\n\t}, [ globalStyles, _links, inheritedValue ] );\n\n\tconst resetBackground = () =>\n\t\tonChange(\n\t\t\tsetImmutably( value, [ 'background' ], {\n\t\t\t\tgradient: value?.background?.gradient,\n\t\t\t} )\n\t\t);\n\n\tconst { title, url } = value?.background?.backgroundImage || {\n\t\t...resolvedInheritedValue?.background?.backgroundImage,\n\t};\n\tconst localHasImageValue = hasBackgroundImageValue( value );\n\tconst hasImageValue =\n\t\tlocalHasImageValue || hasBackgroundImageValue( resolvedInheritedValue );\n\t// The blue-dot local-override affordance is part of the inherited-value\n\t// treatment. When that treatment is disabled (e.g. in the Global Styles\n\t// panel, where the edited value *is* the global style rather than a local\n\t// override of it), fall back to the plain reset control.\n\tconst hasLocalOverride =\n\t\tshowInheritanceLabelIndicators &&\n\t\tlocalHasImageValue &&\n\t\thasBackgroundImageValue( resolvedInheritedValue );\n\n\tconst imageValue =\n\t\tvalue?.background?.backgroundImage ||\n\t\tinheritedValue?.background?.backgroundImage;\n\n\tconst shouldShowBackgroundImageControls =\n\t\thasImageValue &&\n\t\t'none' !== imageValue &&\n\t\t( settings?.background?.backgroundSize ||\n\t\t\tsettings?.background?.backgroundPosition ||\n\t\t\tsettings?.background?.backgroundRepeat );\n\n\tconst [ isDropDownOpen, setIsDropDownOpen ] = useState( false );\n\tconst containerRef = useRef();\n\n\treturn (\n\t\t<div\n\t\t\tref={ containerRef }\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-global-styles-background-panel__inspector-media-replace-container',\n\t\t\t\t{\n\t\t\t\t\t'is-open': isDropDownOpen,\n\t\t\t\t}\n\t\t\t) }\n\t\t>\n\t\t\t{ shouldShowBackgroundImageControls ? (\n\t\t\t\t<BackgroundControlsPanel\n\t\t\t\t\tlabel={ title }\n\t\t\t\t\tfilename={ title }\n\t\t\t\t\turl={ url }\n\t\t\t\t\tonToggle={ setIsDropDownOpen }\n\t\t\t\t\thasImageValue={ hasImageValue }\n\t\t\t\t\thasLocalOverride={ hasLocalOverride }\n\t\t\t\t\tonReset={ localHasImageValue ? resetBackground : undefined }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 3 } className=\"single-column\">\n\t\t\t\t\t\t<BackgroundImageControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t\tdisplayInPanel\n\t\t\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BackgroundSizeControls\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tstyle={ value }\n\t\t\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t</BackgroundControlsPanel>\n\t\t\t) : (\n\t\t\t\t<BackgroundImageControls\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tstyle={ value }\n\t\t\t\t\tinheritedValue={ resolvedInheritedValue }\n\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t\tonResetImage={ () => {\n\t\t\t\t\t\tsetIsDropDownOpen( false );\n\t\t\t\t\t\tresetBackground();\n\t\t\t\t\t} }\n\t\t\t\t\tonRemoveImage={ () => setIsDropDownOpen( false ) }\n\t\t\t\t\tcontainerRef={ containerRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": ["HStack", "Truncate", "resetIcon", "DropdownContentWrapper", "blockEditorStore", "noticesStore", "MediaReplaceFlow", "clsx", "VStack", "ToggleGroupControl", "ToggleGroupControlOption", "UnitControl"]
 }

package/build/components/block-alignment-control/ui.cjs CHANGED Viewed

@@ -44,7 +44,9 @@ function BlockAlignmentUI({
   onChange,
   controls,
   isToolbar,
-  isCollapsed = true
+  isCollapsed = true,
+  label = (0, import_i18n.__)("Align block"),
+  description
 }) {
   const enabledControls = (0, import_use_available_alignments.default)(controls);
   const hasEnabledControls = !!enabledControls.length;
@@ -59,7 +61,7 @@ function BlockAlignmentUI({
   const UIComponent = isToolbar ? import_components.ToolbarGroup : import_components.ToolbarDropdownMenu;
   const commonProps = {
     icon: activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon,
-    label: (0, import_i18n.__)("Align")
+    label
   };
   const extraProps = isToolbar ? {
     isCollapsed,
@@ -72,7 +74,7 @@ function BlockAlignmentUI({
       };
     })
   } : {
-    toggleProps: { description: (0, import_i18n.__)("Change alignment") },
+    toggleProps: description ? { description } : {},
     children: ({ onClose }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { className: "block-editor-block-alignment-control__menu-group", children: enabledControls.map(
         ({ name: controlName, info }) => {

package/build/components/block-alignment-control/ui.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-alignment-control/ui.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToolbarDropdownMenu,\n\tToolbarGroup,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useAvailableAlignments from './use-available-alignments';\nimport { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from './constants';\n\nfunction BlockAlignmentUI( {\n\tvalue,\n\tonChange,\n\tcontrols,\n\tisToolbar,\n\tisCollapsed = true,\n} ) {\n\tconst enabledControls = useAvailableAlignments( controls );\n\tconst hasEnabledControls = !! enabledControls.length;\n\n\tif ( ! hasEnabledControls ) {\n\t\treturn null;\n\t}\n\n\tfunction onChangeAlignment( align ) {\n\t\tonChange( [ value, 'none' ].includes( align ) ? undefined : align );\n\t}\n\n\tconst activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];\n\tconst defaultAlignmentControl =\n\t\tBLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];\n\n\tconst UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;\n\tconst commonProps = {\n\t\ticon: activeAlignmentControl\n\t\t\t? activeAlignmentControl.icon\n\t\t\t: defaultAlignmentControl.icon,\n\t\tlabel: __( 'Align' ),\n\t};\n\tconst extraProps = isToolbar\n\t\t? {\n\t\t\t\tisCollapsed,\n\t\t\t\tcontrols: enabledControls.map( ( { name: controlName } ) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],\n\t\t\t\t\t\tisActive:\n\t\t\t\t\t\t\tvalue === controlName ||\n\t\t\t\t\t\t\t( ! value && controlName === 'none' ),\n\t\t\t\t\t\trole: isCollapsed ? 'menuitemradio' : undefined,\n\t\t\t\t\t\tonClick: () => onChangeAlignment( controlName ),\n\t\t\t\t\t};\n\t\t\t\t} ),\n\t\t  }\n\t\t: {\n\t\t\t\ttoggleProps: { description: __( 'Change alignment' ) },\n\t\t\t\tchildren: ( { onClose } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<MenuGroup className=\"block-editor-block-alignment-control__menu-group\">\n\t\t\t\t\t\t\t\t{ enabledControls.map(\n\t\t\t\t\t\t\t\t\t( { name: controlName, info } ) => {\n\t\t\t\t\t\t\t\t\t\tconst { icon, title } =\n\t\t\t\t\t\t\t\t\t\t\tBLOCK_ALIGNMENTS_CONTROLS[\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolName\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t// If no value is provided, mark as selected the `none` option.\n\t\t\t\t\t\t\t\t\t\tconst isSelected =\n\t\t\t\t\t\t\t\t\t\t\tcontrolName === value ||\n\t\t\t\t\t\t\t\t\t\t\t( ! value &&\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolName === 'none' );\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ controlName }\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'is-active': isSelected,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeAlignment(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolName\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\t\t\tinfo={ info }\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{ title }\n\t\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t  };\n\n\treturn <UIComponent { ...commonProps } { ...extraProps } />;\n}\n\nexport default BlockAlignmentUI;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAmB;AACnB,wBAKO;AAKP,sCAAmC;AACnC,uBAA2D;AAiDrD;AA/CN,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AACf,GAAI;AACH,QAAM,sBAAkB,gCAAAA,SAAwB,QAAS;AACzD,QAAM,qBAAqB,CAAC,CAAE,gBAAgB;AAE9C,MAAK,CAAE,oBAAqB;AAC3B,WAAO;AAAA,EACR;AAEA,WAAS,kBAAmB,OAAQ;AACnC,aAAU,CAAE,OAAO,MAAO,EAAE,SAAU,KAAM,IAAI,SAAY,KAAM;AAAA,EACnE;AAEA,QAAM,yBAAyB,2CAA2B,KAAM;AAChE,QAAM,0BACL,2CAA2B,gCAAgB;AAE5C,QAAM,cAAc,YAAY,iCAAe;AAC/C,QAAM,cAAc;AAAA,IACnB,MAAM,yBACH,uBAAuB,OACvB,wBAAwB;AAAA,IAC3B,WAAO,gBAAI,OAAQ;AAAA,EACpB;AACA,QAAM,aAAa,YAChB;AAAA,IACA;AAAA,IACA,UAAU,gBAAgB,IAAK,CAAE,EAAE,MAAM,YAAY,MAAO;AAC3D,aAAO;AAAA,QACN,GAAG,2CAA2B,WAAY;AAAA,QAC1C,UACC,UAAU,eACR,CAAE,SAAS,gBAAgB;AAAA,QAC9B,MAAM,cAAc,kBAAkB;AAAA,QACtC,SAAS,MAAM,kBAAmB,WAAY;AAAA,MAC/C;AAAA,IACD,CAAE;AAAA,EACF,IACA;AAAA,IACA,aAAa,EAAE,iBAAa,gBAAI,kBAAmB,EAAE;AAAA,IACrD,UAAU,CAAE,EAAE,QAAQ,MAAO;AAC5B,aACC,2EACC,sDAAC,+BAAU,WAAU,oDAClB,0BAAgB;AAAA,QACjB,CAAE,EAAE,MAAM,aAAa,KAAK,MAAO;AAClC,gBAAM,EAAE,MAAM,MAAM,IACnB,2CACC,WACD;AAED,gBAAM,aACL,gBAAgB,SACd,CAAE,SACH,gBAAgB;AAClB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA,cAAa;AAAA,cACb,eAAY,YAAAC;AAAA,gBACX;AAAA,gBACA;AAAA,kBACC,aAAa;AAAA,gBACd;AAAA,cACD;AAAA,cACA;AAAA,cACA,SAAU,MAAM;AACf;AAAA,kBACC;AAAA,gBACD;AACA,wBAAQ;AAAA,cACT;AAAA,cACA,MAAK;AAAA,cACL;AAAA,cAEE;AAAA;AAAA,YAnBI;AAAA,UAoBP;AAAA,QAEF;AAAA,MACD,GACD,GACD;AAAA,IAEF;AAAA,EACA;AAEH,SAAO,4CAAC,eAAc,GAAG,aAAgB,GAAG,YAAa;AAC1D;AAEA,IAAO,aAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToolbarDropdownMenu,\n\tToolbarGroup,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useAvailableAlignments from './use-available-alignments';\nimport { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from './constants';\n\nfunction BlockAlignmentUI( {\n\tvalue,\n\tonChange,\n\tcontrols,\n\tisToolbar,\n\tisCollapsed = true,\n\tlabel = __( 'Align block' ),\n\tdescription,\n} ) {\n\tconst enabledControls = useAvailableAlignments( controls );\n\tconst hasEnabledControls = !! enabledControls.length;\n\n\tif ( ! hasEnabledControls ) {\n\t\treturn null;\n\t}\n\n\tfunction onChangeAlignment( align ) {\n\t\tonChange( [ value, 'none' ].includes( align ) ? undefined : align );\n\t}\n\n\tconst activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ];\n\tconst defaultAlignmentControl =\n\t\tBLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];\n\n\tconst UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;\n\tconst commonProps = {\n\t\ticon: activeAlignmentControl\n\t\t\t? activeAlignmentControl.icon\n\t\t\t: defaultAlignmentControl.icon,\n\t\tlabel,\n\t};\n\tconst extraProps = isToolbar\n\t\t? {\n\t\t\t\tisCollapsed,\n\t\t\t\tcontrols: enabledControls.map( ( { name: controlName } ) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...BLOCK_ALIGNMENTS_CONTROLS[ controlName ],\n\t\t\t\t\t\tisActive:\n\t\t\t\t\t\t\tvalue === controlName ||\n\t\t\t\t\t\t\t( ! value && controlName === 'none' ),\n\t\t\t\t\t\trole: isCollapsed ? 'menuitemradio' : undefined,\n\t\t\t\t\t\tonClick: () => onChangeAlignment( controlName ),\n\t\t\t\t\t};\n\t\t\t\t} ),\n\t\t  }\n\t\t: {\n\t\t\t\ttoggleProps: description ? { description } : {},\n\t\t\t\tchildren: ( { onClose } ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<MenuGroup className=\"block-editor-block-alignment-control__menu-group\">\n\t\t\t\t\t\t\t\t{ enabledControls.map(\n\t\t\t\t\t\t\t\t\t( { name: controlName, info } ) => {\n\t\t\t\t\t\t\t\t\t\tconst { icon, title } =\n\t\t\t\t\t\t\t\t\t\t\tBLOCK_ALIGNMENTS_CONTROLS[\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolName\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t// If no value is provided, mark as selected the `none` option.\n\t\t\t\t\t\t\t\t\t\tconst isSelected =\n\t\t\t\t\t\t\t\t\t\t\tcontrolName === value ||\n\t\t\t\t\t\t\t\t\t\t\t( ! value &&\n\t\t\t\t\t\t\t\t\t\t\t\tcontrolName === 'none' );\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ controlName }\n\t\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'is-active': isSelected,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeAlignment(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolName\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"menuitemradio\"\n\t\t\t\t\t\t\t\t\t\t\t\tinfo={ info }\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{ title }\n\t\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t  };\n\n\treturn <UIComponent { ...commonProps } { ...extraProps } />;\n}\n\nexport default BlockAlignmentUI;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAmB;AACnB,wBAKO;AAKP,sCAAmC;AACnC,uBAA2D;AAmDrD;AAjDN,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAQ,gBAAI,aAAc;AAAA,EAC1B;AACD,GAAI;AACH,QAAM,sBAAkB,gCAAAA,SAAwB,QAAS;AACzD,QAAM,qBAAqB,CAAC,CAAE,gBAAgB;AAE9C,MAAK,CAAE,oBAAqB;AAC3B,WAAO;AAAA,EACR;AAEA,WAAS,kBAAmB,OAAQ;AACnC,aAAU,CAAE,OAAO,MAAO,EAAE,SAAU,KAAM,IAAI,SAAY,KAAM;AAAA,EACnE;AAEA,QAAM,yBAAyB,2CAA2B,KAAM;AAChE,QAAM,0BACL,2CAA2B,gCAAgB;AAE5C,QAAM,cAAc,YAAY,iCAAe;AAC/C,QAAM,cAAc;AAAA,IACnB,MAAM,yBACH,uBAAuB,OACvB,wBAAwB;AAAA,IAC3B;AAAA,EACD;AACA,QAAM,aAAa,YAChB;AAAA,IACA;AAAA,IACA,UAAU,gBAAgB,IAAK,CAAE,EAAE,MAAM,YAAY,MAAO;AAC3D,aAAO;AAAA,QACN,GAAG,2CAA2B,WAAY;AAAA,QAC1C,UACC,UAAU,eACR,CAAE,SAAS,gBAAgB;AAAA,QAC9B,MAAM,cAAc,kBAAkB;AAAA,QACtC,SAAS,MAAM,kBAAmB,WAAY;AAAA,MAC/C;AAAA,IACD,CAAE;AAAA,EACF,IACA;AAAA,IACA,aAAa,cAAc,EAAE,YAAY,IAAI,CAAC;AAAA,IAC9C,UAAU,CAAE,EAAE,QAAQ,MAAO;AAC5B,aACC,2EACC,sDAAC,+BAAU,WAAU,oDAClB,0BAAgB;AAAA,QACjB,CAAE,EAAE,MAAM,aAAa,KAAK,MAAO;AAClC,gBAAM,EAAE,MAAM,MAAM,IACnB,2CACC,WACD;AAED,gBAAM,aACL,gBAAgB,SACd,CAAE,SACH,gBAAgB;AAClB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA;AAAA,cACA,cAAa;AAAA,cACb,eAAY,YAAAC;AAAA,gBACX;AAAA,gBACA;AAAA,kBACC,aAAa;AAAA,gBACd;AAAA,cACD;AAAA,cACA;AAAA,cACA,SAAU,MAAM;AACf;AAAA,kBACC;AAAA,gBACD;AACA,wBAAQ;AAAA,cACT;AAAA,cACA,MAAK;AAAA,cACL;AAAA,cAEE;AAAA;AAAA,YAnBI;AAAA,UAoBP;AAAA,QAEF;AAAA,MACD,GACD,GACD;AAAA,IAEF;AAAA,EACA;AAEH,SAAO,4CAAC,eAAc,GAAG,aAAgB,GAAG,YAAa;AAC1D;AAEA,IAAO,aAAQ;",
   "names": ["useAvailableAlignments", "clsx"]
 }

package/build/components/block-inspector/index.cjs CHANGED Viewed

@@ -50,6 +50,7 @@ var import_list_view_content_popover = require("../inspector-controls/list-view-
 var import_inspector_controls = __toESM(require("../inspector-controls/index.cjs"));
 var import_inspector_pre_tabs_slot_fill = require("./inspector-pre-tabs-slot-fill.cjs");
 var import_inspector_controls_tabs = __toESM(require("../inspector-controls-tabs/index.cjs"));
+var import_styles_tab = require("../inspector-controls-tabs/styles-tab.cjs");
 var import_use_inspector_controls_tabs = __toESM(require("../inspector-controls-tabs/use-inspector-controls-tabs.cjs"));
 var import_last_item = __toESM(require("../inspector-controls/last-item.cjs"));
 var import_advanced_controls_panel = __toESM(require("../inspector-controls-tabs/advanced-controls-panel.cjs"));
@@ -117,56 +118,79 @@ function StyleInspectorSlots({
     showAdvancedControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_advanced_controls_panel.default, {}) })
   ] });
 }
-function StyleStateInspectorSlots({ blockName, selectedBlockStyleState }) {
+function StyleStateInspectorSlots({
+  blockName,
+  clientId,
+  contentClientIds,
+  isSectionBlock,
+  selectedBlockStyleState
+}) {
   const borderPanelLabel = (0, import_border.useBorderPanelLabel)({ blockName });
   const showLayoutControls = (0, import_block_style_state.hasViewportBlockStyleState)(selectedBlockStyleState) && !(0, import_block_style_state.hasPseudoBlockStyleState)(selectedBlockStyleState);
+  const showSectionStyleControls = isSectionBlock && blockName !== "core/template-part";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_inspector_controls.default.Slot,
-      {
-        group: "typography",
-        label: (0, import_i18n.__)("Typography")
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_inspector_controls.default.Slot,
-      {
-        group: "color",
-        label: (0, import_i18n.__)("Color"),
-        className: "color-block-support-panel__inner-wrapper"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_inspector_controls.default.Slot,
-      {
-        group: "background",
-        label: (0, import_i18n.__)("Background"),
-        className: "background-block-support-panel__inner-wrapper"
-      }
-    ),
-    showLayoutControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_inspector_controls.default.Slot,
-      {
-        group: "layout",
-        label: (0, import_i18n.__)("Layout")
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_inspector_controls.default.Slot,
-      {
-        group: "dimensions",
-        label: (0, import_i18n.__)("Dimensions")
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "border", label: borderPanelLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_inspector_controls.default.Slot,
+    showSectionStyleControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_style_state.BlockStyleStateProvider, { value: selectedBlockStyleState, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styles_tab.SectionStyleControls,
       {
-        group: "elements",
-        label: (0, import_i18n.__)("Elements"),
-        className: "elements-block-support-panel__inner-wrapper"
+        blockName,
+        clientId,
+        contentClientIds
       }
-    )
+    ) }),
+    !showSectionStyleControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_inspector_controls.default.Slot,
+        {
+          group: "typography",
+          label: (0, import_i18n.__)("Typography")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_inspector_controls.default.Slot,
+        {
+          group: "color",
+          label: (0, import_i18n.__)("Color"),
+          className: "color-block-support-panel__inner-wrapper"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_inspector_controls.default.Slot,
+        {
+          group: "background",
+          label: (0, import_i18n.__)("Background"),
+          className: "background-block-support-panel__inner-wrapper"
+        }
+      ),
+      showLayoutControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_inspector_controls.default.Slot,
+        {
+          group: "layout",
+          label: (0, import_i18n.__)("Layout")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_inspector_controls.default.Slot,
+        {
+          group: "dimensions",
+          label: (0, import_i18n.__)("Dimensions")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_inspector_controls.default.Slot,
+        {
+          group: "border",
+          label: borderPanelLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_inspector_controls.default.Slot,
+        {
+          group: "elements",
+          label: (0, import_i18n.__)("Elements"),
+          className: "elements-block-support-panel__inner-wrapper"
+        }
+      )
+    ] })
   ] });
 }
 function BlockInspector() {
@@ -445,10 +469,13 @@ var BlockInspectorSingleBlock = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_pre_tabs_slot_fill.BlockInspectorPreTabsSlot, {}),
-    isEditingStyleState && !isSectionBlock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    isEditingStyleState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       StyleStateInspectorSlots,
       {
         blockName,
+        clientId: renderedBlockClientId,
+        contentClientIds,
+        isSectionBlock,
         selectedBlockStyleState
       }
     ),