Adding background panel for blocks.

WordPress · Mar 22, 2024 · 7788359 · 7788359
1 parent 3872394
commit 7788359
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
@@ -472,10 +472,10 @@ class WP_Theme_JSON_Gutenberg {
 	 */
 	const VALID_STYLES = array(
 		'background' => array(
-			'backgroundImage'    => 'top',
-			'backgroundPosition' => 'top',
-			'backgroundRepeat'   => 'top',
-			'backgroundSize'     => 'top',
+			'backgroundImage'    => null,
+			'backgroundPosition' => null,
+			'backgroundRepeat'   => null,
+			'backgroundSize'     => null,
 		),
 		'border'     => array(
 			'color'  => null,

diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -70,6 +70,8 @@ const {
 	useHasFiltersPanel,
 	useHasImageSettingsPanel,
 	useGlobalStyle,
+	useHasBackgroundPanel,
+	BackgroundPanel: StylesBackgroundPanel,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
@@ -121,6 +123,7 @@ function ScreenBlock( { name, variation } ) {
 	}
 
 	const blockVariations = useBlockVariations( name );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
@@ -232,6 +235,43 @@ function ScreenBlock( { name, variation } ) {
 		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
 	};
 
+	const onChangeBackground = ( newStyle ) => {
+		console.log( 'newStyle', newStyle );
+		const backgroundImage = newStyle?.background?.backgroundImage;
+		let backgroundStyles;
+
+		// Set block background defaults.
+		if ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) {
+			if ( ! newStyle?.background?.backgroundSize ) {
+				backgroundStyles = {
+					backgroundSize: 'cover',
+				};
+			}
+
+			if (
+				'contain' === newStyle?.background?.backgroundSize &&
+				! newStyle?.background?.backgroundPosition
+			) {
+				backgroundStyles = {
+					backgroundPosition: 'center',
+				};
+			}
+		}
+
+		setStyle( {
+			...newStyle,
+			background: {
+				...newStyle?.background,
+				...backgroundStyles,
+			}
+		} );
+	};
+
+	// Initial control values where no block style is set.
+	const defaultBackgroundControlValues = {
+		backgroundSize: 'cover',
+	};
+
 	return (
 		<>
 			<ScreenHeader
@@ -295,6 +335,15 @@ function ScreenBlock( { name, variation } ) {
 					inheritedValue={ settings }
 				/>
 			) }
+			{ hasBackgroundPanel && (
+				<StylesBackgroundPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ onChangeBackground }
+					settings={ settings }
+					defaultControlValues={ defaultBackgroundControlValues }
+				/>
+			) }
 
 			{ canEditCSS && (
 				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>