Plugging in background components to global styles and its defaults

WordPress · Feb 29, 2024 · d191244 · d191244
1 parent 847d0e5
commit d191244
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 38 deletions.
diff --git 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 (
 		<ToolsPanelItem
@@ -273,7 +281,7 @@ function BackgroundImageToolsPanelItem( {
 					name={
 						<InspectorImagePreview
 							label={ __( 'Background image' ) }
-							filename={ title }
+							filename={ title || __( 'Untitled' ) }
 							url={ url }
 						/>
 					}
@@ -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( {
 			<FocalPointPicker
 				__next40pxDefaultSize
 				label={ __( 'Position' ) }
-				url={ style?.background?.backgroundImage?.url }
-				value={ backgroundPositionToCoords(
-					style?.background?.backgroundPosition
-				) }
+				url={ imageValue }
+				value={ backgroundPositionToCoords( positionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleGroupControl
@@ -483,20 +500,22 @@ function BackgroundToolsPanel( {
 	};
 
 	return (
-		<ToolsPanel
+		<VStack
+			as={ ToolsPanel }
+			spacing={ 6 }
 			label={ __( 'Background' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
-		</ToolsPanel>
+		</VStack>
 	);
 }
 
 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 }
+			/>
+			<BackgroundSizeToolsPanelItem
+				onChange={ onChange }
+				panelId={ panelId }
+				isShownByDefault={
+					hasBackGroundSizeControl || defaultControls.backgroundSize
+				}
+				style={ value }
+				inheritedValue={ inheritedValue }
 			/>
-			{ hasBackGroundSizeControl && (
-				<BackgroundSizeToolsPanelItem
-					onChange={ onChange }
-					panelId={ panelId }
-					isShownByDefault={ defaultControls.backgroundSize }
-					style={ value }
-				/>
-			) }
 		</Wrapper>
 	);
 }
diff --git 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 (
 		<StylesBackgroundPanel
 			inheritedValue={ inheritedStyle }
 			value={ style }
 			onChange={ setStyle }
 			settings={ settings }
-			includeLayoutControls
-			defaultControls={ DEFAULT_CONTROLS }
 		/>
 	);
 }