Removed useBlockProps and now editing style object directly

WordPress · Apr 11, 2024 · de024f1 · de024f1
1 parent f96060b
commit de024f1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 76 deletions.
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -35,7 +35,7 @@ import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import BlockContext from '../block-context';
 import { unlock } from '../../lock-unlock';
-import { getBackgroundSupportStyles } from '../../hooks/background';
+import { setBackgroundStyleDefaults } from '../../hooks/background';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -394,19 +394,16 @@ export function getStylesDeclarations(
 		[]
 	);
 
-	// Set background defaults.
-	// Applies to all blocks/global styles.
-	if ( !! blockStyles.background ) {
-		blockStyles = {
-			...blockStyles,
-			background: {
-				...blockStyles.background,
-				...getBackgroundSupportStyles(
-					blockStyles.background,
-					editorSettings
-				),
-			},
-		};
+	/*
+	 * Set styles defaults.
+	 * Applies default values to the style object based on the block settings.
+	 * Only applies to background styles for now.
+	 */
+	if ( !! blockStyles?.background ) {
+		blockStyles = setBackgroundStyleDefaults( blockStyles, {
+			...editorSettings,
+			isRoot,
+		} );
 	}
 
 	// The goal is to move everything to server side generated engine styles

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -50,68 +50,46 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
-export function getBackgroundSupportStyles( backgroundStyle, options ) {
-	const backgroundImage = backgroundStyle?.backgroundImage;
+export function setBackgroundStyleDefaults( blockStyles, options ) {
+	const backgroundImage = blockStyles?.background?.backgroundImage;
+	const newBackgroundStyles = {};
+
 	if (
 		backgroundImage?.source === 'theme' &&
 		!! backgroundImage?.url &&
-		options?.themeDirURI
+		!! options?.themeDirURI
 	) {
-		return {
-			backgroundImage: {
-				url: `${ options.themeDirURI }${ backgroundImage.url }`,
-				source: 'file',
-			},
+		const url = `${ options.themeDirURI }${
+			backgroundImage.url.startsWith( '/' )
+				? backgroundImage.url
+				: `/${ backgroundImage.url }`
+		}`;
+
+		newBackgroundStyles.backgroundImage = {
+			...backgroundImage,
+			url,
 		};
 	}
-}
-
-export function setBackgroundStyleDefaults( backgroundStyle ) {
-	if ( ! backgroundStyle ) {
-		return;
-	}
-
-	const backgroundImage = backgroundStyle?.backgroundImage;
-	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( !! backgroundImage?.url ) {
-		if ( ! backgroundStyle?.backgroundSize ) {
-			backgroundStylesWithDefaults = {
-				backgroundSize: 'cover',
-			};
+	if ( ! options?.isRoot && !! backgroundImage?.url ) {
+		if ( ! blockStyles?.background?.backgroundSize ) {
+			newBackgroundStyles.backgroundSize = 'cover';
 		}
 
 		if (
-			'contain' === backgroundStyle?.backgroundSize &&
-			! backgroundStyle?.backgroundPosition
+			'contain' === blockStyles?.background?.backgroundSize &&
+			! blockStyles?.background?.backgroundPosition
 		) {
-			backgroundStylesWithDefaults = {
-				backgroundPosition: 'center',
-			};
+			newBackgroundStyles.backgroundPosition = 'center';
 		}
 	}
 
-	return backgroundStylesWithDefaults;
-}
-
-function useBlockProps( { name, style } ) {
-	if (
-		! hasBackgroundSupport( name ) ||
-		! style?.background?.backgroundImage
-	) {
-		return;
-	}
-
-	const backgroundStyles = setBackgroundStyleDefaults( style?.background );
-
-	if ( ! backgroundStyles ) {
-		return;
-	}
-
 	return {
-		style: {
-			...backgroundStyles,
+		...blockStyles,
+		background: {
+			...blockStyles.background,
+			...newBackgroundStyles,
 		},
 	};
 }
@@ -198,7 +176,6 @@ export function BackgroundImagePanel( {
 }
 
 export default {
-	useBlockProps,
 	attributeKeys: [ 'style' ],
 	hasSupport: hasBackgroundSupport,
 };
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
@@ -8,7 +8,6 @@ import {
 } from './utils';
 import './compat';
 import align from './align';
-import background from './background';
 import './lock';
 import anchor from './anchor';
 import ariaLabel from './aria-label';
@@ -47,7 +46,6 @@ createBlockEditFilter(
 );
 createBlockListBlockFilter( [
 	align,
-	background,
 	style,
 	color,
 	dimensions,

diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
@@ -18,7 +18,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	BACKGROUND_SUPPORT_KEY,
 	BackgroundImagePanel,
-	getBackgroundSupportStyles,
+	setBackgroundStyleDefaults,
 } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
@@ -319,19 +319,13 @@ export function addSaveProps(
 		}
 	} );
 
-	// Set background defaults.
-	// Applies to all blocks/global styles.
+	/*
+	 * Set styles defaults.
+	 * Applies default values to the style object based on the block settings.
+	 * Only applies to background styles for now.
+	 */
 	if ( !! style.background ) {
-		style = {
-			...style,
-			background: {
-				...style.background,
-				...getBackgroundSupportStyles(
-					style.background,
-					editorSettings
-				),
-			},
-		};
+		style = setBackgroundStyleDefaults( style, editorSettings );
 	}
 
 	props.style = {