@wordpress/block-editor 12.22.0 → 12.23.0

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

@@ -0,0 +1,430 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, __experimentalVStack as VStack, DropZone, FlexItem, FocalPointPicker, MenuItem, VisuallyHidden, __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalTruncate as Truncate } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
+import { useCallback, Platform, useRef } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { isBlobURL } from '@wordpress/blob';
+
+/**
+ * Internal dependencies
+ */
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { setImmutably } from '../../utils/object';
+import MediaReplaceFlow from '../media-replace-flow';
+import { store as blockEditorStore } from '../../store';
+const IMAGE_BACKGROUND_TYPE = 'image';
+
+/**
+ * Checks site settings to see if the background panel may be used.
+ * `settings.background.backgroundSize` exists also,
+ * but can only be used if settings?.background?.backgroundImage is `true`.
+ *
+ * @param {Object} settings Site settings
+ * @return {boolean}        Whether site settings has activated background panel.
+ */
+export function useHasBackgroundPanel(settings) {
+  return Platform.OS === 'web' && settings?.background?.backgroundImage;
+}
+
+/**
+ * Checks if there is a current value in the background size block support
+ * attributes. Background size values include background size as well
+ * as background position.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background size value set.
+ */
+export function hasBackgroundSizeValue(style) {
+  return style?.background?.backgroundPosition !== undefined || style?.background?.backgroundSize !== undefined;
+}
+
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether the block has a background image value set.
+ */
+export function hasBackgroundImageValue(style) {
+  return !!style?.background?.backgroundImage?.id || !!style?.background?.backgroundImage?.url;
+}
+
+/**
+ * Get the help text for the background size control.
+ *
+ * @param {string} value backgroundSize value.
+ * @return {string}      Translated help text.
+ */
+function backgroundSizeHelpText(value) {
+  if (value === 'cover' || value === undefined) {
+    return __('Image covers the space evenly.');
+  }
+  if (value === 'contain') {
+    return __('Image is contained without distortion.');
+  }
+  return __('Specify a fixed width.');
+}
+
+/**
+ * Converts decimal x and y coords from FocalPointPicker to percentage-based values
+ * to use as backgroundPosition value.
+ *
+ * @param {{x?:number, y?:number}} value FocalPointPicker coords.
+ * @return {string}      				 backgroundPosition value.
+ */
+export const coordsToBackgroundPosition = value => {
+  if (!value || isNaN(value.x) && isNaN(value.y)) {
+    return undefined;
+  }
+  const x = isNaN(value.x) ? 0.5 : value.x;
+  const y = isNaN(value.y) ? 0.5 : value.y;
+  return `${x * 100}% ${y * 100}%`;
+};
+
+/**
+ * Converts backgroundPosition value to x and y coords for FocalPointPicker.
+ *
+ * @param {string} value backgroundPosition value.
+ * @return {{x?:number, y?:number}}       FocalPointPicker coords.
+ */
+export const backgroundPositionToCoords = value => {
+  if (!value) {
+    return {
+      x: undefined,
+      y: undefined
+    };
+  }
+  let [x, y] = value.split(' ').map(v => parseFloat(v) / 100);
+  x = isNaN(x) ? undefined : x;
+  y = isNaN(y) ? x : y;
+  return {
+    x,
+    y
+  };
+};
+function InspectorImagePreview({
+  label,
+  filename,
+  url: imgUrl
+}) {
+  const imgLabel = label || getFilename(imgUrl);
+  return createElement(ItemGroup, {
+    as: "span"
+  }, createElement(HStack, {
+    justify: "flex-start",
+    as: "span"
+  }, createElement("span", {
+    className: classnames('block-editor-global-styles-background-panel__inspector-image-indicator-wrapper', {
+      'has-image': imgUrl
+    }),
+    "aria-hidden": true
+  }, imgUrl && createElement("span", {
+    className: "block-editor-global-styles-background-panel__inspector-image-indicator",
+    style: {
+      backgroundImage: `url(${imgUrl})`
+    }
+  })), createElement(FlexItem, {
+    as: "span"
+  }, createElement(Truncate, {
+    numberOfLines: 1,
+    className: "block-editor-global-styles-background-panel__inspector-media-replace-title"
+  }, imgLabel), createElement(VisuallyHidden, {
+    as: "span"
+  }, filename ? sprintf( /* translators: %s: file name */
+  __('Selected image: %s'), filename) : __('No image selected')))));
+}
+function BackgroundImageToolsPanelItem({
+  panelId,
+  isShownByDefault,
+  onChange,
+  style,
+  inheritedValue
+}) {
+  const mediaUpload = useSelect(select => select(blockEditorStore).getSettings().mediaUpload, []);
+  const {
+    id,
+    title,
+    url
+  } = style?.background?.backgroundImage || {
+    ...inheritedValue?.background?.backgroundImage
+  };
+  const replaceContainerRef = useRef();
+  const {
+    createErrorNotice
+  } = useDispatch(noticesStore);
+  const onUploadError = message => {
+    createErrorNotice(message, {
+      type: 'snackbar'
+    });
+  };
+  const resetBackgroundImage = () => onChange(setImmutably(style, ['background', 'backgroundImage'], undefined));
+  const onSelectMedia = media => {
+    if (!media || !media.url) {
+      resetBackgroundImage();
+      return;
+    }
+    if (isBlobURL(media.url)) {
+      return;
+    }
+
+    // For media selections originated from a file upload.
+    if (media.media_type && media.media_type !== IMAGE_BACKGROUND_TYPE || !media.media_type && media.type && media.type !== IMAGE_BACKGROUND_TYPE) {
+      onUploadError(__('Only images can be used as a background image.'));
+      return;
+    }
+    onChange(setImmutably(style, ['background', 'backgroundImage'], {
+      url: media.url,
+      id: media.id,
+      source: 'file',
+      title: media.title || undefined
+    }));
+  };
+  const onFilesDrop = filesList => {
+    mediaUpload({
+      allowedTypes: ['image'],
+      filesList,
+      onFileChange([image]) {
+        if (isBlobURL(image?.url)) {
+          return;
+        }
+        onSelectMedia(image);
+      },
+      onError: onUploadError
+    });
+  };
+  const resetAllFilter = useCallback(previousValue => {
+    return {
+      ...previousValue,
+      style: {
+        ...previousValue.style,
+        background: undefined
+      }
+    };
+  }, []);
+  const hasValue = hasBackgroundImageValue(style) || hasBackgroundImageValue(inheritedValue);
+  return createElement(ToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => hasValue,
+    label: __('Background image'),
+    onDeselect: resetBackgroundImage,
+    isShownByDefault: isShownByDefault,
+    resetAllFilter: resetAllFilter,
+    panelId: panelId
+  }, createElement("div", {
+    className: "block-editor-global-styles-background-panel__inspector-media-replace-container",
+    ref: replaceContainerRef
+  }, createElement(MediaReplaceFlow, {
+    mediaId: id,
+    mediaURL: url,
+    allowedTypes: [IMAGE_BACKGROUND_TYPE],
+    accept: "image/*",
+    onSelect: onSelectMedia,
+    name: createElement(InspectorImagePreview, {
+      label: __('Background image'),
+      filename: title || __('Untitled'),
+      url: url
+    }),
+    variant: "secondary"
+  }, hasValue && createElement(MenuItem, {
+    onClick: () => {
+      const [toggleButton] = focus.tabbable.find(replaceContainerRef.current);
+      // Focus the toggle button and close the dropdown menu.
+      // This ensures similar behaviour as to selecting an image, where the dropdown is
+      // closed and focus is redirected to the dropdown toggle button.
+      toggleButton?.focus();
+      toggleButton?.click();
+      resetBackgroundImage();
+    }
+  }, __('Reset '))), createElement(DropZone, {
+    onFilesDrop: onFilesDrop,
+    label: __('Drop to upload')
+  })));
+}
+function BackgroundSizeToolsPanelItem({
+  panelId,
+  isShownByDefault,
+  onChange,
+  style,
+  inheritedValue,
+  defaultValues
+}) {
+  const sizeValue = style?.background?.backgroundSize || inheritedValue?.background?.backgroundSize;
+  const repeatValue = style?.background?.backgroundRepeat || inheritedValue?.background?.backgroundRepeat;
+  const imageValue = style?.background?.backgroundImage?.url || inheritedValue?.background?.backgroundImage?.url;
+  const positionValue = style?.background?.backgroundPosition || inheritedValue?.background?.backgroundPosition;
+
+  /*
+   * An `undefined` value is replaced with any supplied
+   * default control value for the toggle group control.
+   * An empty string is treated as `auto` - this allows a user
+   * to select "Size" and then enter a custom value, with an
+   * empty value being treated as `auto`.
+   */
+  const currentValueForToggle = sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' || sizeValue === '' ? 'auto' : sizeValue || defaultValues?.backgroundSize;
+
+  /*
+   * If the current value is `cover` and the repeat value is `undefined`, then
+   * the toggle should be unchecked as the default state. Otherwise, the toggle
+   * should reflect the current repeat value.
+   */
+  const repeatCheckedValue = !(repeatValue === 'no-repeat' || currentValueForToggle === 'cover' && repeatValue === undefined);
+  const hasValue = hasBackgroundSizeValue(style);
+  const resetAllFilter = useCallback(previousValue => {
+    return {
+      ...previousValue,
+      style: {
+        ...previousValue.style,
+        background: {
+          ...previousValue.style?.background,
+          backgroundRepeat: undefined,
+          backgroundSize: undefined
+        }
+      }
+    };
+  }, []);
+  const updateBackgroundSize = next => {
+    // When switching to 'contain' toggle the repeat off.
+    let nextRepeat = repeatValue;
+    if (next === 'contain') {
+      nextRepeat = 'no-repeat';
+    }
+    if (next === 'cover') {
+      nextRepeat = undefined;
+    }
+    if ((currentValueForToggle === 'cover' || currentValueForToggle === 'contain') && next === 'auto') {
+      nextRepeat = undefined;
+    }
+    onChange(setImmutably(style, ['background'], {
+      ...style?.background,
+      backgroundRepeat: nextRepeat,
+      backgroundSize: next
+    }));
+  };
+  const updateBackgroundPosition = next => {
+    onChange(setImmutably(style, ['background', 'backgroundPosition'], coordsToBackgroundPosition(next)));
+  };
+  const toggleIsRepeated = () => onChange(setImmutably(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : undefined));
+  const resetBackgroundSize = () => onChange(setImmutably(style, ['background'], {
+    ...style?.background,
+    backgroundPosition: undefined,
+    backgroundRepeat: undefined,
+    backgroundSize: undefined
+  }));
+  return createElement(VStack, {
+    as: ToolsPanelItem,
+    spacing: 2,
+    className: "single-column",
+    hasValue: () => hasValue,
+    label: __('Size'),
+    onDeselect: resetBackgroundSize,
+    isShownByDefault: isShownByDefault,
+    resetAllFilter: resetAllFilter,
+    panelId: panelId
+  }, createElement(FocalPointPicker, {
+    __next40pxDefaultSize: true,
+    label: __('Position'),
+    url: imageValue,
+    value: backgroundPositionToCoords(positionValue),
+    onChange: updateBackgroundPosition
+  }), createElement(ToggleGroupControl, {
+    size: '__unstable-large',
+    label: __('Size'),
+    value: currentValueForToggle,
+    onChange: updateBackgroundSize,
+    isBlock: true,
+    help: backgroundSizeHelpText(sizeValue)
+  }, createElement(ToggleGroupControlOption, {
+    key: 'cover',
+    value: 'cover',
+    label: __('Cover')
+  }), createElement(ToggleGroupControlOption, {
+    key: 'contain',
+    value: 'contain',
+    label: __('Contain')
+  }), createElement(ToggleGroupControlOption, {
+    key: 'fixed',
+    value: 'auto',
+    label: __('Fixed')
+  })), sizeValue !== undefined && sizeValue !== 'cover' && sizeValue !== 'contain' ? createElement(UnitControl, {
+    size: '__unstable-large',
+    onChange: updateBackgroundSize,
+    value: sizeValue
+  }) : null, currentValueForToggle !== 'cover' && createElement(ToggleControl, {
+    label: __('Repeat'),
+    checked: repeatCheckedValue,
+    onChange: toggleIsRepeated
+  }));
+}
+function BackgroundToolsPanel({
+  resetAllFilter,
+  onChange,
+  value,
+  panelId,
+  children
+}) {
+  const resetAll = () => {
+    const updatedValue = resetAllFilter(value);
+    onChange(updatedValue);
+  };
+  return createElement(VStack, {
+    as: ToolsPanel,
+    spacing: 6,
+    label: __('Background'),
+    resetAll: resetAll,
+    panelId: panelId,
+    dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS
+  }, children);
+}
+const DEFAULT_CONTROLS = {
+  backgroundImage: true,
+  backgroundSize: true
+};
+export default function BackgroundPanel({
+  as: Wrapper = BackgroundToolsPanel,
+  value,
+  onChange,
+  inheritedValue = value,
+  settings,
+  panelId,
+  defaultControls = DEFAULT_CONTROLS,
+  defaultValues = {}
+}) {
+  const resetAllFilter = useCallback(previousValue => {
+    return {
+      ...previousValue,
+      background: {}
+    };
+  }, []);
+  const shouldShowBackgroundSizeControls = settings?.background?.backgroundSize;
+  return createElement(Wrapper, {
+    resetAllFilter: resetAllFilter,
+    value: value,
+    onChange: onChange,
+    panelId: panelId
+  }, createElement(BackgroundImageToolsPanelItem, {
+    onChange: onChange,
+    panelId: panelId,
+    isShownByDefault: defaultControls.backgroundImage,
+    style: value,
+    inheritedValue: inheritedValue
+  }), shouldShowBackgroundSizeControls && createElement(BackgroundSizeToolsPanelItem, {
+    onChange: onChange,
+    panelId: panelId,
+    isShownByDefault: defaultControls.backgroundSize,
+    style: value,
+    inheritedValue: inheritedValue,
+    defaultValues: defaultValues
+  }));
+}
+//# sourceMappingURL=background-panel.js.map

package/build-module/components/global-styles/background-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classnames","__experimentalToolsPanel","ToolsPanel","__experimentalToolsPanelItem","ToolsPanelItem","ToggleControl","__experimentalToggleGroupControl","ToggleGroupControl","__experimentalToggleGroupControlOption","ToggleGroupControlOption","__experimentalUnitControl","UnitControl","__experimentalVStack","VStack","DropZone","FlexItem","FocalPointPicker","MenuItem","VisuallyHidden","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalTruncate","Truncate","__","sprintf","store","noticesStore","getFilename","useCallback","Platform","useRef","useDispatch","useSelect","focus","isBlobURL","TOOLSPANEL_DROPDOWNMENU_PROPS","setImmutably","MediaReplaceFlow","blockEditorStore","IMAGE_BACKGROUND_TYPE","useHasBackgroundPanel","settings","OS","background","backgroundImage","hasBackgroundSizeValue","style","backgroundPosition","undefined","backgroundSize","hasBackgroundImageValue","id","url","backgroundSizeHelpText","value","coordsToBackgroundPosition","isNaN","x","y","backgroundPositionToCoords","split","map","v","parseFloat","InspectorImagePreview","label","filename","imgUrl","imgLabel","createElement","as","justify","className","numberOfLines","BackgroundImageToolsPanelItem","panelId","isShownByDefault","onChange","inheritedValue","mediaUpload","select","getSettings","title","replaceContainerRef","createErrorNotice","onUploadError","message","type","resetBackgroundImage","onSelectMedia","media","media_type","source","onFilesDrop","filesList","allowedTypes","onFileChange","image","onError","resetAllFilter","previousValue","hasValue","onDeselect","ref","mediaId","mediaURL","accept","onSelect","name","variant","onClick","toggleButton","tabbable","find","current","click","BackgroundSizeToolsPanelItem","defaultValues","sizeValue","repeatValue","backgroundRepeat","imageValue","positionValue","currentValueForToggle","repeatCheckedValue","updateBackgroundSize","next","nextRepeat","updateBackgroundPosition","toggleIsRepeated","resetBackgroundSize","spacing","__next40pxDefaultSize","size","isBlock","help","key","checked","BackgroundToolsPanel","children","resetAll","updatedValue","dropdownMenuProps","DEFAULT_CONTROLS","BackgroundPanel","Wrapper","defaultControls","shouldShowBackgroundSizeControls"],"sources":["@wordpress/block-editor/src/components/global-styles/background-panel.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\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\tFlexItem,\n\tFocalPointPicker,\n\tMenuItem,\n\tVisuallyHidden,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\nimport { useCallback, Platform, useRef } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { focus } from '@wordpress/dom';\nimport { isBlobURL } from '@wordpress/blob';\n\n/**\n * Internal dependencies\n */\nimport { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';\nimport { setImmutably } from '../../utils/object';\nimport MediaReplaceFlow from '../media-replace-flow';\nimport { store as blockEditorStore } from '../../store';\n\nconst IMAGE_BACKGROUND_TYPE = 'image';\n\n/**\n * Checks site settings to see if the background panel may be used.\n * `settings.background.backgroundSize` exists also,\n * but can only be used if settings?.background?.backgroundImage is `true`.\n *\n * @param {Object} settings Site settings\n * @return {boolean}        Whether site settings has activated background panel.\n */\nexport function useHasBackgroundPanel( settings ) {\n\treturn Platform.OS === 'web' && settings?.background?.backgroundImage;\n}\n\n/**\n * Checks if there is a current value in the background size block support\n * attributes. Background size values include background size as well\n * as background position.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background size value set.\n */\nexport function hasBackgroundSizeValue( style ) {\n\treturn (\n\t\tstyle?.background?.backgroundPosition !== undefined ||\n\t\tstyle?.background?.backgroundSize !== undefined\n\t);\n}\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} style Style attribute.\n * @return {boolean}     Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style ) {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t!! style?.background?.backgroundImage?.url\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 __( 'Specify 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 InspectorImagePreview( { label, filename, url: imgUrl } ) {\n\tconst imgLabel = label || getFilename( imgUrl );\n\treturn (\n\t\t<ItemGroup as=\"span\">\n\t\t\t<HStack justify=\"flex-start\" as=\"span\">\n\t\t\t\t<span\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'block-editor-global-styles-background-panel__inspector-image-indicator-wrapper',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'has-image': imgUrl,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\taria-hidden\n\t\t\t\t>\n\t\t\t\t\t{ imgUrl && (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-image-indicator\"\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${ imgUrl })`,\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</span>\n\t\t\t\t<FlexItem as=\"span\">\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{ imgLabel }\n\t\t\t\t\t</Truncate>\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ filename\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__( 'Selected image: %s' ),\n\t\t\t\t\t\t\t\t\tfilename\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'No image selected' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\nfunction BackgroundImageToolsPanelItem( {\n\tpanelId,\n\tisShownByDefault,\n\tonChange,\n\tstyle,\n\tinheritedValue,\n} ) {\n\tconst mediaUpload = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().mediaUpload,\n\t\t[]\n\t);\n\n\tconst { id, title, url } = style?.background?.backgroundImage || {\n\t\t...inheritedValue?.background?.backgroundImage,\n\t};\n\n\tconst replaceContainerRef = useRef();\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\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\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\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\tonChange(\n\t\t\tsetImmutably( style, [ 'background', 'backgroundImage' ], {\n\t\t\t\turl: media.url,\n\t\t\t\tid: media.id,\n\t\t\t\tsource: 'file',\n\t\t\t\ttitle: media.title || undefined,\n\t\t\t} )\n\t\t);\n\t};\n\n\tconst onFilesDrop = ( filesList ) => {\n\t\tmediaUpload( {\n\t\t\tallowedTypes: [ 'image' ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst hasValue =\n\t\thasBackgroundImageValue( style ) ||\n\t\thasBackgroundImageValue( inheritedValue );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasValue }\n\t\t\tlabel={ __( 'Background image' ) }\n\t\t\tonDeselect={ resetBackgroundImage }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-global-styles-background-panel__inspector-media-replace-container\"\n\t\t\t\tref={ replaceContainerRef }\n\t\t\t>\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ url }\n\t\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\t\taccept=\"image/*\"\n\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\tname={\n\t\t\t\t\t\t<InspectorImagePreview\n\t\t\t\t\t\t\tlabel={ __( 'Background image' ) }\n\t\t\t\t\t\t\tfilename={ title || __( 'Untitled' ) }\n\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t>\n\t\t\t\t\t{ hasValue && (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tconst [ toggleButton ] = focus.tabbable.find(\n\t\t\t\t\t\t\t\t\treplaceContainerRef.current\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t// Focus the toggle button and close the dropdown menu.\n\t\t\t\t\t\t\t\t// This ensures similar behaviour as to selecting an image, where the dropdown is\n\t\t\t\t\t\t\t\t// closed and focus is redirected to the dropdown toggle button.\n\t\t\t\t\t\t\t\ttoggleButton?.focus();\n\t\t\t\t\t\t\t\ttoggleButton?.click();\n\t\t\t\t\t\t\t\tresetBackgroundImage();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset ' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t) }\n\t\t\t\t</MediaReplaceFlow>\n\t\t\t\t<DropZone\n\t\t\t\t\tonFilesDrop={ onFilesDrop }\n\t\t\t\t\tlabel={ __( 'Drop to upload' ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nfunction BackgroundSizeToolsPanelItem( {\n\tpanelId,\n\tisShownByDefault,\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 positionValue =\n\t\tstyle?.background?.backgroundPosition ||\n\t\tinheritedValue?.background?.backgroundPosition;\n\n\t/*\n\t * An `undefined` value is replaced with any supplied\n\t * default control value for the toggle group control.\n\t * An empty string is treated as `auto` - this allows a user\n\t * to select \"Size\" and then enter a custom value, with an\n\t * empty value being treated as `auto`.\n\t */\n\tconst currentValueForToggle =\n\t\t( sizeValue !== undefined &&\n\t\t\tsizeValue !== 'cover' &&\n\t\t\tsizeValue !== 'contain' ) ||\n\t\tsizeValue === ''\n\t\t\t? 'auto'\n\t\t\t: sizeValue || defaultValues?.backgroundSize;\n\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 hasValue = hasBackgroundSizeValue( style );\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...previousValue.style?.background,\n\t\t\t\t\tbackgroundRepeat: undefined,\n\t\t\t\t\tbackgroundSize: undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\tconst updateBackgroundSize = ( next ) => {\n\t\t// When switching to 'contain' toggle the repeat off.\n\t\tlet nextRepeat = repeatValue;\n\n\t\tif ( next === 'contain' ) {\n\t\t\tnextRepeat = 'no-repeat';\n\t\t}\n\n\t\tif ( next === 'cover' ) {\n\t\t\tnextRepeat = 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}\n\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\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' : undefined\n\t\t\t)\n\t\t);\n\n\tconst resetBackgroundSize = () =>\n\t\tonChange(\n\t\t\tsetImmutably( style, [ 'background' ], {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundPosition: undefined,\n\t\t\t\tbackgroundRepeat: undefined,\n\t\t\t\tbackgroundSize: undefined,\n\t\t\t} )\n\t\t);\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanelItem }\n\t\t\tspacing={ 2 }\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasValue }\n\t\t\tlabel={ __( 'Size' ) }\n\t\t\tonDeselect={ resetBackgroundSize }\n\t\t\tisShownByDefault={ isShownByDefault }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<FocalPointPicker\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Position' ) }\n\t\t\t\turl={ imageValue }\n\t\t\t\tvalue={ backgroundPositionToCoords( positionValue ) }\n\t\t\t\tonChange={ updateBackgroundPosition }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\tsize={ '__unstable-large' }\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( sizeValue ) }\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={ __( 'Cover' ) }\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={ __( 'Contain' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\tvalue={ 'auto' }\n\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ sizeValue !== undefined &&\n\t\t\tsizeValue !== 'cover' &&\n\t\t\tsizeValue !== 'contain' ? (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\tonChange={ updateBackgroundSize }\n\t\t\t\t\tvalue={ sizeValue }\n\t\t\t\t/>\n\t\t\t) : null }\n\t\t\t{ currentValueForToggle !== 'cover' && (\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/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nfunction BackgroundToolsPanel( {\n\tresetAllFilter,\n\tonChange,\n\tvalue,\n\tpanelId,\n\tchildren,\n} ) {\n\tconst resetAll = () => {\n\t\tconst updatedValue = resetAllFilter( value );\n\t\tonChange( updatedValue );\n\t};\n\n\treturn (\n\t\t<VStack\n\t\t\tas={ ToolsPanel }\n\t\t\tspacing={ 6 }\n\t\t\tlabel={ __( 'Background' ) }\n\t\t\tresetAll={ resetAll }\n\t\t\tpanelId={ panelId }\n\t\t\tdropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }\n\t\t>\n\t\t\t{ children }\n\t\t</VStack>\n\t);\n}\n\nconst DEFAULT_CONTROLS = {\n\tbackgroundImage: true,\n\tbackgroundSize: true,\n};\n\nexport default function BackgroundPanel( {\n\tas: Wrapper = BackgroundToolsPanel,\n\tvalue,\n\tonChange,\n\tinheritedValue = value,\n\tsettings,\n\tpanelId,\n\tdefaultControls = DEFAULT_CONTROLS,\n\tdefaultValues = {},\n} ) {\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tbackground: {},\n\t\t};\n\t}, [] );\n\tconst shouldShowBackgroundSizeControls =\n\t\tsettings?.background?.backgroundSize;\n\n\treturn (\n\t\t<Wrapper\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChange }\n\t\t\tpanelId={ panelId }\n\t\t>\n\t\t\t<BackgroundImageToolsPanelItem\n\t\t\t\tonChange={ onChange }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tisShownByDefault={ defaultControls.backgroundImage }\n\t\t\t\tstyle={ value }\n\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t/>\n\t\t\t{ shouldShowBackgroundSizeControls && (\n\t\t\t\t<BackgroundSizeToolsPanelItem\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t\tisShownByDefault={ defaultControls.backgroundSize }\n\t\t\t\t\tstyle={ value }\n\t\t\t\t\tinheritedValue={ inheritedValue }\n\t\t\t\t\tdefaultValues={ defaultValues }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n"],"mappings":"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"}

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

@@ -67,10 +67,11 @@ function ColorToolsPanel({
     onChange(updatedValue);
   };
   return createElement(ToolsPanel, {
-    label: __('Color'),
+    label: __('Elements'),
     resetAll: resetAll,
     panelId: panelId,
     hasInnerWrapper: true,
+    headingLevel: 3,
     className: "color-block-support-panel",
     __experimentalFirstVisibleItemClass: "first",
     __experimentalLastVisibleItemClass: "last",