diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index ab94fd648b8a2..721715798c2f9 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -7,8 +7,6 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import {
- FontSizePicker,
- __experimentalNumberControl as NumberControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
ToggleControl,
@@ -28,7 +26,7 @@ import {
import { __, sprintf } from '@wordpress/i18n';
import { store as noticesStore } from '@wordpress/notices';
import { getFilename } from '@wordpress/url';
-import { Platform, useCallback, useRef } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { focus } from '@wordpress/dom';
import { isBlobURL } from '@wordpress/blob';
@@ -77,6 +75,11 @@ export function hasBackgroundImageValue( style ) {
return hasValue;
}
+export const hasNumericalBackgroundPosition = ( value ) =>
+ typeof value === 'string' &&
+ value.split( ' ' ).every( ( v ) => ! isNaN( parseFloat( v ) ) );
+
+
export const coordsToBackgroundPosition = ( value ) => {
if ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {
return undefined;
@@ -160,6 +163,7 @@ function BackgroundImageToolsPanelItem( {
isShownByDefault,
onChange,
style,
+ inheritedValue,
} ) {
const { mediaUpload } = useSelect(
( select ) => {
@@ -172,7 +176,9 @@ function BackgroundImageToolsPanelItem( {
[ panelId ]
);
- const { id, title, url } = style?.background?.backgroundImage || {};
+ const { id, title, url } = style?.background?.backgroundImage || {
+ ...inheritedValue?.background.backgroundImage,
+ };
const replaceContainerRef = useRef();
@@ -248,7 +254,9 @@ function BackgroundImageToolsPanelItem( {
};
}, [] );
- const hasValue = hasBackgroundImageValue( style );
+ const hasValue =
+ hasBackgroundImageValue( style ) ||
+ hasBackgroundImageValue( inheritedValue );
return (
}
@@ -311,9 +319,20 @@ function BackgroundSizeToolsPanelItem( {
isShownByDefault,
onChange,
style,
+ inheritedValue,
} ) {
- const sizeValue = style?.background?.backgroundSize;
- const repeatValue = style?.background?.backgroundRepeat;
+ 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 treated as `cover` by the toggle group control.
// An empty string is treated as `auto` by the toggle group control. This
@@ -420,10 +439,8 @@ function BackgroundSizeToolsPanelItem( {
{ children }
-
+
);
}
const DEFAULT_CONTROLS = {
backgroundImage: true,
- backgroundSize: true,
+ backgroundSize: false,
};
export default function BackgroundPanel( {
@@ -508,7 +527,9 @@ export default function BackgroundPanel( {
panelId,
defaultControls = DEFAULT_CONTROLS,
} ) {
- const hasBackGroundSizeControl = !! settings?.background?.backgroundSize;
+ const hasBackGroundSizeControl =
+ hasNumericalBackgroundPosition( settings?.background?.backgroundSize ) ||
+ hasNumericalBackgroundPosition( inheritedValue?.background?.backgroundSize );
const resetAllFilter = useCallback( ( previousValue ) => {
return {
...previousValue,
@@ -528,15 +549,17 @@ export default function BackgroundPanel( {
panelId={ panelId }
isShownByDefault={ defaultControls.backgroundImage }
style={ value }
+ inheritedValue={ inheritedValue }
+ />
+
- { hasBackGroundSizeControl && (
-
- ) }
);
}
diff --git a/packages/edit-site/src/components/global-styles/background-panel.js b/packages/edit-site/src/components/global-styles/background-panel.js
index 60d3f1b55a06c..eee61732206ae 100644
--- a/packages/edit-site/src/components/global-styles/background-panel.js
+++ b/packages/edit-site/src/components/global-styles/background-panel.js
@@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
@@ -16,16 +15,6 @@ const {
BackgroundPanel: StylesBackgroundPanel,
} = unlock( blockEditorPrivateApis );
-const DEFAULT_CONTROLS = {
- contentSize: true,
- wideSize: true,
- padding: true,
- margin: true,
- blockGap: true,
- minHeight: true,
- childLayout: false,
-};
-
export default function BackgroundPanel() {
const [ style ] = useGlobalStyle( '', undefined, 'user', {
shouldDecodeEncode: false,
@@ -36,15 +25,13 @@ export default function BackgroundPanel() {
const [ rawSettings ] = useGlobalSetting( '' );
const settings = useSettingsForBlockElement( rawSettings );
-
+console.log( 'inheritedStyle', inheritedStyle );
return (
);
}