@wordpress/block-editor 13.2.0 → 13.4.0

package/build-module/components/font-appearance-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["CustomSelectControl","useMemo","__","_x","sprintf","jsx","_jsx","FONT_STYLES","name","value","FONT_WEIGHTS","getFontAppearanceLabel","hasFontStyles","hasFontWeights","FontAppearanceControl","props","onChange","fontStyle","fontWeight","otherProps","hasStylesOrWeights","label","defaultOption","key","style","undefined","combineOptions","combinedOptions","forEach","styleName","styleValue","weightName","weightValue","optionName","push","styleOptions","weightOptions","selectOptions","options","currentSelection","find","option","getDescribedBy","className","describedBy","selectedItem"],"sources":["@wordpress/block-editor/src/components/font-appearance-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\nconst FONT_STYLES = [\n\t{\n\t\tname: _x( 'Regular', 'font style' ),\n\t\tvalue: 'normal',\n\t},\n\t{\n\t\tname: _x( 'Italic', 'font style' ),\n\t\tvalue: 'italic',\n\t},\n];\n\nconst FONT_WEIGHTS = [\n\t{\n\t\tname: _x( 'Thin', 'font weight' ),\n\t\tvalue: '100',\n\t},\n\t{\n\t\tname: _x( 'Extra Light', 'font weight' ),\n\t\tvalue: '200',\n\t},\n\t{\n\t\tname: _x( 'Light', 'font weight' ),\n\t\tvalue: '300',\n\t},\n\t{\n\t\tname: _x( 'Regular', 'font weight' ),\n\t\tvalue: '400',\n\t},\n\t{\n\t\tname: _x( 'Medium', 'font weight' ),\n\t\tvalue: '500',\n\t},\n\t{\n\t\tname: _x( 'Semi Bold', 'font weight' ),\n\t\tvalue: '600',\n\t},\n\t{\n\t\tname: _x( 'Bold', 'font weight' ),\n\t\tvalue: '700',\n\t},\n\t{\n\t\tname: _x( 'Extra Bold', 'font weight' ),\n\t\tvalue: '800',\n\t},\n\t{\n\t\tname: _x( 'Black', 'font weight' ),\n\t\tvalue: '900',\n\t},\n];\n\n/**\n * Adjusts font appearance field label in case either font styles or weights\n * are disabled.\n *\n * @param {boolean} hasFontStyles  Whether font styles are enabled and present.\n * @param {boolean} hasFontWeights Whether font weights are enabled and present.\n * @return {string} A label representing what font appearance is being edited.\n */\nconst getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\n\treturn __( 'Appearance' );\n};\n\n/**\n * Control to display unified font style and weight options.\n *\n * @param {Object} props Component props.\n *\n * @return {Element} Font appearance control.\n */\nexport default function FontAppearanceControl( props ) {\n\tconst {\n\t\tonChange,\n\t\thasFontStyles = true,\n\t\thasFontWeights = true,\n\t\tvalue: { fontStyle, fontWeight },\n\t\t...otherProps\n\t} = props;\n\tconst hasStylesOrWeights = hasFontStyles || hasFontWeights;\n\tconst label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );\n\tconst defaultOption = {\n\t\tkey: 'default',\n\t\tname: __( 'Default' ),\n\t\tstyle: { fontStyle: undefined, fontWeight: undefined },\n\t};\n\n\t// Combines both font style and weight options into a single dropdown.\n\tconst combineOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\n\t\tFONT_STYLES.forEach( ( { name: styleName, value: styleValue } ) => {\n\t\t\tFONT_WEIGHTS.forEach(\n\t\t\t\t( { name: weightName, value: weightValue } ) => {\n\t\t\t\t\tconst optionName =\n\t\t\t\t\t\tstyleValue === 'normal'\n\t\t\t\t\t\t\t? weightName\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: 1: Font weight name. 2: Font style name. */\n\t\t\t\t\t\t\t\t\t__( '%1$s %2$s' ),\n\t\t\t\t\t\t\t\t\tweightName,\n\t\t\t\t\t\t\t\t\tstyleName\n\t\t\t\t\t\t\t  );\n\n\t\t\t\t\tcombinedOptions.push( {\n\t\t\t\t\t\tkey: `${ styleValue }-${ weightValue }`,\n\t\t\t\t\t\tname: optionName,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tfontStyle: styleValue,\n\t\t\t\t\t\t\tfontWeight: weightValue,\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} );\n\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font styles only.\n\tconst styleOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tFONT_STYLES.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: value, fontWeight: undefined },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font weights only.\n\tconst weightOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tFONT_WEIGHTS.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: undefined, fontWeight: value },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Map font styles and weights to select options.\n\tconst selectOptions = useMemo( () => {\n\t\tif ( hasFontStyles && hasFontWeights ) {\n\t\t\treturn combineOptions();\n\t\t}\n\n\t\treturn hasFontStyles ? styleOptions() : weightOptions();\n\t}, [ props.options ] );\n\n\t// Find current selection by comparing font style & weight against options,\n\t// and fall back to the Default option if there is no matching option.\n\tconst currentSelection =\n\t\tselectOptions.find(\n\t\t\t( option ) =>\n\t\t\t\toption.style.fontStyle === fontStyle &&\n\t\t\t\toption.style.fontWeight === fontWeight\n\t\t) || selectOptions[ 0 ];\n\n\t// Adjusts screen reader description based on styles or weights.\n\tconst getDescribedBy = () => {\n\t\tif ( ! currentSelection ) {\n\t\t\treturn __( 'No selected font appearance' );\n\t\t}\n\n\t\tif ( ! hasFontStyles ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font weight.\n\t\t\t\t__( 'Currently selected font weight: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\tif ( ! hasFontWeights ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font style.\n\t\t\t\t__( 'Currently selected font style: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\treturn sprintf(\n\t\t\t// translators: %s: Currently selected font appearance.\n\t\t\t__( 'Currently selected font appearance: %s' ),\n\t\t\tcurrentSelection.name\n\t\t);\n\t};\n\n\treturn (\n\t\thasStylesOrWeights && (\n\t\t\t<CustomSelectControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName=\"components-font-appearance-control\"\n\t\t\t\tlabel={ label }\n\t\t\t\tdescribedBy={ getDescribedBy() }\n\t\t\t\toptions={ selectOptions }\n\t\t\t\tvalue={ currentSelection }\n\t\t\t\tonChange={ ( { selectedItem } ) =>\n\t\t\t\t\tonChange( selectedItem.style )\n\t\t\t\t}\n\t\t\t/>\n\t\t)\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["CustomSelectControl","useMemo","__","sprintf","getFontStylesAndWeights","jsx","_jsx","getFontAppearanceLabel","hasFontStyles","hasFontWeights","FontAppearanceControl","props","onChange","fontFamilyFaces","value","fontStyle","fontWeight","otherProps","hasStylesOrWeights","label","defaultOption","key","name","style","undefined","fontStyles","fontWeights","combinedStyleAndWeightOptions","combineOptions","combinedOptions","push","styleOptions","forEach","weightOptions","selectOptions","options","currentSelection","find","option","getDescribedBy","className","describedBy","selectedItem"],"sources":["@wordpress/block-editor/src/components/font-appearance-control/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';\n\n/**\n * Adjusts font appearance field label in case either font styles or weights\n * are disabled.\n *\n * @param {boolean} hasFontStyles  Whether font styles are enabled and present.\n * @param {boolean} hasFontWeights Whether font weights are enabled and present.\n * @return {string} A label representing what font appearance is being edited.\n */\nconst getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\n\treturn __( 'Appearance' );\n};\n\n/**\n * Control to display font style and weight options of the active font.\n *\n * @param {Object} props Component props.\n *\n * @return {Element} Font appearance control.\n */\nexport default function FontAppearanceControl( props ) {\n\tconst {\n\t\tonChange,\n\t\thasFontStyles = true,\n\t\thasFontWeights = true,\n\t\tfontFamilyFaces,\n\t\tvalue: { fontStyle, fontWeight },\n\t\t...otherProps\n\t} = props;\n\tconst hasStylesOrWeights = hasFontStyles || hasFontWeights;\n\tconst label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );\n\tconst defaultOption = {\n\t\tkey: 'default',\n\t\tname: __( 'Default' ),\n\t\tstyle: { fontStyle: undefined, fontWeight: undefined },\n\t};\n\tconst { fontStyles, fontWeights, combinedStyleAndWeightOptions } =\n\t\tgetFontStylesAndWeights( fontFamilyFaces );\n\n\t// Generates select options for combined font styles and weights.\n\tconst combineOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tif ( combinedStyleAndWeightOptions ) {\n\t\t\tcombinedOptions.push( ...combinedStyleAndWeightOptions );\n\t\t}\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font styles only.\n\tconst styleOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tfontStyles.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: value, fontWeight: undefined },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font weights only.\n\tconst weightOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tfontWeights.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: undefined, fontWeight: value },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Map font styles and weights to select options.\n\tconst selectOptions = useMemo( () => {\n\t\t// Display combined available font style and weight options.\n\t\tif ( hasFontStyles && hasFontWeights ) {\n\t\t\treturn combineOptions();\n\t\t}\n\n\t\t// Display only font style options or font weight options.\n\t\treturn hasFontStyles ? styleOptions() : weightOptions();\n\t}, [\n\t\tprops.options,\n\t\tfontStyles,\n\t\tfontWeights,\n\t\tcombinedStyleAndWeightOptions,\n\t] );\n\n\t// Find current selection by comparing font style & weight against options,\n\t// and fall back to the Default option if there is no matching option.\n\tconst currentSelection =\n\t\tselectOptions.find(\n\t\t\t( option ) =>\n\t\t\t\toption.style.fontStyle === fontStyle &&\n\t\t\t\toption.style.fontWeight === fontWeight\n\t\t) || selectOptions[ 0 ];\n\n\t// Adjusts screen reader description based on styles or weights.\n\tconst getDescribedBy = () => {\n\t\tif ( ! currentSelection ) {\n\t\t\treturn __( 'No selected font appearance' );\n\t\t}\n\n\t\tif ( ! hasFontStyles ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font weight.\n\t\t\t\t__( 'Currently selected font weight: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\tif ( ! hasFontWeights ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font style.\n\t\t\t\t__( 'Currently selected font style: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\treturn sprintf(\n\t\t\t// translators: %s: Currently selected font appearance.\n\t\t\t__( 'Currently selected font appearance: %s' ),\n\t\t\tcurrentSelection.name\n\t\t);\n\t};\n\n\treturn (\n\t\thasStylesOrWeights && (\n\t\t\t<CustomSelectControl\n\t\t\t\t{ ...otherProps }\n\t\t\t\tclassName=\"components-font-appearance-control\"\n\t\t\t\tlabel={ label }\n\t\t\t\tdescribedBy={ getDescribedBy() }\n\t\t\t\toptions={ selectOptions }\n\t\t\t\tvalue={ currentSelection }\n\t\t\t\tonChange={ ( { selectedItem } ) =>\n\t\t\t\t\tonChange( selectedItem.style )\n\t\t\t\t}\n\t\t\t/>\n\t\t)\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -6,11 +6,11 @@ import clsx from 'clsx';
 /**
  * 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 { __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, Dropdown, __experimentalDropdownContentWrapper as DropdownContentWrapper } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import { useCallback, Platform, useRef } from '@wordpress/element';
+import { useCallback, Platform, useRef, useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { isBlobURL } from '@wordpress/blob';
@@ -18,7 +18,7 @@ import { isBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import MediaReplaceFlow from '../media-replace-flow';
 import { store as blockEditorStore } from '../../store';
@@ -27,9 +27,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const IMAGE_BACKGROUND_TYPE = 'image';
 const DEFAULT_CONTROLS = {
-  backgroundImage: true,
-  backgroundSize: false
+  backgroundImage: true
 };
+const BACKGROUND_POPOVER_PROPS = {
+  placement: 'left-start',
+  offset: 36,
+  shift: true,
+  className: 'block-editor-global-styles-background-panel__popover'
+};
+const noop = () => {};
 
 /**
  * Checks site settings to see if the background panel may be used.
@@ -121,21 +127,30 @@ export const backgroundPositionToCoords = value => {
     y
   };
 };
-function InspectorImagePreview({
-  label,
+function InspectorImagePreviewItem({
+  as = 'span',
+  imgUrl,
+  toggleProps = {},
   filename,
-  url: imgUrl
+  label,
+  className,
+  onToggleCallback = noop
 }) {
-  const imgLabel = label || getFilename(imgUrl) || __('Add background image');
+  useEffect(() => {
+    if (typeof toggleProps?.isOpen !== 'undefined') {
+      onToggleCallback(toggleProps?.isOpen);
+    }
+  }, [toggleProps?.isOpen, onToggleCallback]);
   return /*#__PURE__*/_jsx(ItemGroup, {
-    as: "span",
+    as: as,
+    className: className,
+    ...toggleProps,
     children: /*#__PURE__*/_jsxs(HStack, {
-      justify: imgUrl ? 'flex-start' : 'center',
+      justify: "flex-start",
       as: "span",
+      className: "block-editor-global-styles-background-panel__inspector-preview-inner",
       children: [imgUrl && /*#__PURE__*/_jsx("span", {
-        className: clsx('block-editor-global-styles-background-panel__inspector-image-indicator-wrapper', {
-          'has-image': imgUrl
-        }),
+        className: "block-editor-global-styles-background-panel__inspector-image-indicator-wrapper",
         "aria-hidden": true,
         children: /*#__PURE__*/_jsx("span", {
           className: "block-editor-global-styles-background-panel__inspector-image-indicator",
@@ -145,25 +160,69 @@ function InspectorImagePreview({
         })
       }), /*#__PURE__*/_jsxs(FlexItem, {
         as: "span",
+        style: imgUrl ? {} : {
+          flexGrow: 1
+        },
         children: [/*#__PURE__*/_jsx(Truncate, {
           numberOfLines: 1,
           className: "block-editor-global-styles-background-panel__inspector-media-replace-title",
-          children: imgLabel
+          children: label
         }), /*#__PURE__*/_jsx(VisuallyHidden, {
           as: "span",
           children: imgUrl ? sprintf( /* translators: %s: file name */
-          __('Background image: %s'), filename || imgLabel) : __('No background image selected')
+          __('Background image: %s'), filename || label) : __('No background image selected')
         })]
       })]
     })
   });
 }
-function BackgroundImageToolsPanelItem({
-  panelId,
-  isShownByDefault,
+function BackgroundControlsPanel({
+  label,
+  filename,
+  url: imgUrl,
+  children,
+  onToggle: onToggleCallback = noop,
+  hasImageValue
+}) {
+  if (!hasImageValue) {
+    return;
+  }
+  const imgLabel = label || getFilename(imgUrl) || __('Add background image');
+  return /*#__PURE__*/_jsx(Dropdown, {
+    popoverProps: BACKGROUND_POPOVER_PROPS,
+    renderToggle: ({
+      onToggle,
+      isOpen
+    }) => {
+      const toggleProps = {
+        onClick: onToggle,
+        className: 'block-editor-global-styles-background-panel__dropdown-toggle',
+        'aria-expanded': isOpen,
+        'aria-label': __('Background size, position and repeat options.'),
+        isOpen
+      };
+      return /*#__PURE__*/_jsx(InspectorImagePreviewItem, {
+        imgUrl: imgUrl,
+        filename: filename,
+        label: imgLabel,
+        toggleProps: toggleProps,
+        as: "button",
+        onToggleCallback: onToggleCallback
+      });
+    },
+    renderContent: () => /*#__PURE__*/_jsx(DropdownContentWrapper, {
+      className: "block-editor-global-styles-background-panel__dropdown-content-wrapper",
+      paddingSize: "medium",
+      children: children
+    })
+  });
+}
+function BackgroundImageControls({
   onChange,
   style,
   inheritedValue,
+  onRemoveImage = noop,
+  displayInPanel,
   themeFileURIs
 }) {
   const mediaUpload = useSelect(select => select(blockEditorStore).getSettings().mediaUpload, []);
@@ -224,15 +283,6 @@ function BackgroundImageToolsPanelItem({
       onError: onUploadError
     });
   };
-  const resetAllFilter = useCallback(previousValue => {
-    return {
-      ...previousValue,
-      style: {
-        ...previousValue.style,
-        background: undefined
-      }
-    };
-  }, []);
   const hasValue = hasBackgroundImageValue(style);
   const closeAndFocus = () => {
     const [toggleButton] = focus.tabbable.find(replaceContainerRef.current);
@@ -244,52 +294,48 @@ function BackgroundImageToolsPanelItem({
   };
   const onRemove = () => onChange(setImmutably(style, ['background', 'backgroundImage'], 'none'));
   const canRemove = !hasValue && hasBackgroundImageValue(inheritedValue);
-  return /*#__PURE__*/_jsx(ToolsPanelItem, {
-    className: "single-column",
-    hasValue: () => hasValue,
-    label: __('Background image'),
-    onDeselect: resetBackgroundImage,
-    isShownByDefault: isShownByDefault,
-    resetAllFilter: resetAllFilter,
-    panelId: panelId,
-    children: /*#__PURE__*/_jsxs("div", {
-      className: "block-editor-global-styles-background-panel__inspector-media-replace-container",
-      ref: replaceContainerRef,
-      children: [/*#__PURE__*/_jsxs(MediaReplaceFlow, {
-        mediaId: id,
-        mediaURL: url,
-        allowedTypes: [IMAGE_BACKGROUND_TYPE],
-        accept: "image/*",
-        onSelect: onSelectMedia,
-        name: /*#__PURE__*/_jsx(InspectorImagePreview, {
-          label: title,
-          filename: title,
-          url: getResolvedThemeFilePath(url, themeFileURIs)
-        }),
-        variant: "secondary",
-        children: [canRemove && /*#__PURE__*/_jsx(MenuItem, {
-          onClick: () => {
-            closeAndFocus();
-            onRemove();
-          },
-          children: __('Remove')
-        }), hasValue && /*#__PURE__*/_jsx(MenuItem, {
-          onClick: () => {
-            closeAndFocus();
-            resetBackgroundImage();
-          },
-          children: __('Reset ')
-        })]
-      }), /*#__PURE__*/_jsx(DropZone, {
-        onFilesDrop: onFilesDrop,
-        label: __('Drop to upload')
+  const imgLabel = title || getFilename(url) || __('Add background image');
+  return /*#__PURE__*/_jsxs("div", {
+    ref: replaceContainerRef,
+    className: "block-editor-global-styles-background-panel__image-tools-panel-item",
+    children: [/*#__PURE__*/_jsxs(MediaReplaceFlow, {
+      mediaId: id,
+      mediaURL: url,
+      allowedTypes: [IMAGE_BACKGROUND_TYPE],
+      accept: "image/*",
+      onSelect: onSelectMedia,
+      popoverProps: {
+        className: clsx({
+          'block-editor-global-styles-background-panel__media-replace-popover': displayInPanel
+        })
+      },
+      name: /*#__PURE__*/_jsx(InspectorImagePreviewItem, {
+        className: "block-editor-global-styles-background-panel__image-preview",
+        imgUrl: getResolvedThemeFilePath(url, themeFileURIs),
+        filename: title,
+        label: imgLabel
+      }),
+      variant: "secondary",
+      children: [canRemove && /*#__PURE__*/_jsx(MenuItem, {
+        onClick: () => {
+          closeAndFocus();
+          onRemove();
+        },
+        children: __('Remove')
+      }), hasValue && /*#__PURE__*/_jsx(MenuItem, {
+        onClick: () => {
+          closeAndFocus();
+          onRemoveImage();
+        },
+        children: __('Reset ')
       })]
-    })
+    }), /*#__PURE__*/_jsx(DropZone, {
+      onFilesDrop: onFilesDrop,
+      label: __('Drop to upload')
+    })]
   });
 }
-function BackgroundSizeToolsPanelItem({
-  panelId,
-  isShownByDefault,
+function BackgroundSizeControls({
   onChange,
   style,
   inheritedValue,
@@ -300,6 +346,7 @@ function BackgroundSizeToolsPanelItem({
   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;
+  const attachmentValue = style?.background?.backgroundAttachment || inheritedValue?.background?.backgroundAttachment;
 
   /*
    * An `undefined` value is replaced with any supplied
@@ -316,20 +363,6 @@ function BackgroundSizeToolsPanelItem({
    * 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;
@@ -373,28 +406,22 @@ function BackgroundSizeToolsPanelItem({
     onChange(setImmutably(style, ['background', 'backgroundPosition'], coordsToBackgroundPosition(next)));
   };
   const toggleIsRepeated = () => onChange(setImmutably(style, ['background', 'backgroundRepeat'], repeatCheckedValue === true ? 'no-repeat' : 'repeat'));
-  const resetBackgroundSize = () => onChange(setImmutably(style, ['background'], {
-    ...style?.background,
-    backgroundPosition: undefined,
-    backgroundRepeat: undefined,
-    backgroundSize: undefined
-  }));
+  const toggleScrollWithPage = () => onChange(setImmutably(style, ['background', 'backgroundAttachment'], attachmentValue === 'fixed' ? 'scroll' : 'fixed'));
   return /*#__PURE__*/_jsxs(VStack, {
-    as: ToolsPanelItem,
-    spacing: 2,
+    spacing: 4,
     className: "single-column",
-    hasValue: () => hasValue,
-    label: __('Size'),
-    onDeselect: resetBackgroundSize,
-    isShownByDefault: isShownByDefault,
-    resetAllFilter: resetAllFilter,
-    panelId: panelId,
     children: [/*#__PURE__*/_jsx(FocalPointPicker, {
       __next40pxDefaultSize: true,
-      label: __('Position'),
+      __nextHasNoMarginBottom: true,
+      label: __('Focal point'),
       url: getResolvedThemeFilePath(imageValue, themeFileURIs),
       value: backgroundPositionToCoords(positionValue),
       onChange: updateBackgroundPosition
+    }), /*#__PURE__*/_jsx(ToggleControl, {
+      label: __('Fixed background'),
+      checked: attachmentValue === 'fixed',
+      onChange: toggleScrollWithPage,
+      help: __('Whether your image should scroll with the page or stay fixed in place.')
     }), /*#__PURE__*/_jsxs(ToggleGroupControl, {
       size: "__unstable-large",
       label: __('Size'),
@@ -416,18 +443,20 @@ function BackgroundSizeToolsPanelItem({
       justify: "flex-start",
       spacing: 2,
       as: "span",
-      children: [currentValueForToggle !== undefined && currentValueForToggle !== 'cover' && currentValueForToggle !== 'contain' ? /*#__PURE__*/_jsx(UnitControl, {
+      children: [/*#__PURE__*/_jsx(UnitControl, {
         "aria-label": __('Background image width'),
         onChange: updateBackgroundSize,
         value: sizeValue,
         size: "__unstable-large",
         __unstableInputWidth: "100px",
         min: 0,
-        placeholder: __('Auto')
-      }) : null, currentValueForToggle !== 'cover' && /*#__PURE__*/_jsx(ToggleControl, {
+        placeholder: __('Auto'),
+        disabled: currentValueForToggle !== 'auto' || currentValueForToggle === undefined
+      }), /*#__PURE__*/_jsx(ToggleControl, {
         label: __('Repeat'),
         checked: repeatCheckedValue,
-        onChange: toggleIsRepeated
+        onChange: toggleIsRepeated,
+        disabled: currentValueForToggle === 'cover'
       })]
     })]
   });
@@ -440,6 +469,7 @@ function BackgroundToolsPanel({
   children,
   headerLabel
 }) {
+  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
   const resetAll = () => {
     const updatedValue = resetAllFilter(value);
     onChange(updatedValue);
@@ -450,7 +480,7 @@ function BackgroundToolsPanel({
     label: headerLabel,
     resetAll: resetAll,
     panelId: panelId,
-    dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS,
+    dropdownMenuProps: dropdownMenuProps,
     children: children
   });
 }
@@ -472,28 +502,67 @@ export default function BackgroundPanel({
       background: {}
     };
   }, []);
-  const shouldShowBackgroundSizeControls = settings?.background?.backgroundSize;
+  const resetBackground = () => onChange(setImmutably(value, ['background'], {}));
+  const {
+    title,
+    url
+  } = value?.background?.backgroundImage || {
+    ...inheritedValue?.background?.backgroundImage
+  };
+  const hasImageValue = hasBackgroundImageValue(value) || hasBackgroundImageValue(inheritedValue);
+  const shouldShowBackgroundImageControls = hasImageValue && (settings?.background?.backgroundSize || settings?.background?.backgroundPosition || settings?.background?.backgroundRepeat);
+  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
   return /*#__PURE__*/_jsxs(Wrapper, {
     resetAllFilter: resetAllFilter,
     value: value,
     onChange: onChange,
     panelId: panelId,
     headerLabel: headerLabel,
-    children: [/*#__PURE__*/_jsx(BackgroundImageToolsPanelItem, {
-      onChange: onChange,
-      panelId: panelId,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: clsx('block-editor-global-styles-background-panel__inspector-media-replace-container', {
+        'is-open': isDropDownOpen
+      }),
+      children: shouldShowBackgroundImageControls ? /*#__PURE__*/_jsx(BackgroundControlsPanel, {
+        label: title,
+        filename: title,
+        url: getResolvedThemeFilePath(url, themeFileURIs),
+        onToggle: setIsDropDownOpen,
+        hasImageValue: hasImageValue,
+        children: /*#__PURE__*/_jsxs(VStack, {
+          spacing: 3,
+          className: "single-column",
+          children: [/*#__PURE__*/_jsx(BackgroundImageControls, {
+            onChange: onChange,
+            style: value,
+            inheritedValue: inheritedValue,
+            themeFileURIs: themeFileURIs,
+            displayInPanel: true,
+            onRemoveImage: () => {
+              setIsDropDownOpen(false);
+              resetBackground();
+            }
+          }), /*#__PURE__*/_jsx(BackgroundSizeControls, {
+            onChange: onChange,
+            panelId: panelId,
+            style: value,
+            defaultValues: defaultValues,
+            inheritedValue: inheritedValue,
+            themeFileURIs: themeFileURIs
+          })]
+        })
+      }) : /*#__PURE__*/_jsx(BackgroundImageControls, {
+        onChange: onChange,
+        style: value,
+        inheritedValue: inheritedValue,
+        themeFileURIs: themeFileURIs
+      })
+    }), /*#__PURE__*/_jsx(ToolsPanelItem, {
+      hasValue: () => hasImageValue,
+      label: __('Image'),
+      onDeselect: resetBackground,
       isShownByDefault: defaultControls.backgroundImage,
-      style: value,
-      inheritedValue: inheritedValue,
-      themeFileURIs: themeFileURIs
-    }), shouldShowBackgroundSizeControls && /*#__PURE__*/_jsx(BackgroundSizeToolsPanelItem, {
-      onChange: onChange,
       panelId: panelId,
-      isShownByDefault: defaultControls.backgroundSize,
-      style: value,
-      inheritedValue: inheritedValue,
-      defaultValues: defaultValues,
-      themeFileURIs: themeFileURIs
+      className: "block-editor-global-styles-background-panel__hidden-tools-panel-item"
     })]
   });
 }