Remove unused "parentDirectoryURI" prop in block editor settings

Added/updated unit tests Bad horsie
WordPress · Apr 15, 2024 · 16e830b · 16e830b
1 parent e3c9d0a
commit 16e830b
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 7 deletions.
diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php
@@ -78,8 +78,6 @@ function gutenberg_get_block_editor_settings( $settings ) {
 
 	$current_theme            = wp_get_theme();
 	$settings['currentTheme'] = array(
-		// Directory of the current or parent theme. If a child theme is active, it's the parent theme directory.
-		'parentDirectoryURI' => $current_theme->get_template_directory_uri(),
 		// Directory of the current theme. Will be the child theme directory if a child theme is active.
 		'directoryURI'       => $current_theme->get_stylesheet_directory_uri(),
 		// `__unstableIsBlockBasedTheme` could also be relocated here, e.g., 'isBlockTheme' => $current_theme->is_block_theme().

diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -999,6 +999,34 @@ describe( 'global styles renderer', () => {
 				'letter-spacing: 2px',
 			] );
 		} );
+
+		it( 'should process styles and set CSS default values', () => {
+			const styles = {
+				background: {
+					backgroundImage: {
+						url: 'image.jpg',
+						source: 'theme',
+					},
+				},
+			};
+			const editorSettings = {
+				themeDirURI: 'http://example.com/theme',
+			};
+
+			expect(
+				getStylesDeclarations(
+					styles,
+					'.wp-block',
+					false,
+					{},
+					false,
+					editorSettings
+				)
+			).toEqual( [
+				"background-image: url( 'http://example.com/theme/image.jpg' )",
+				'background-size: cover',
+			] );
+		} );
 	} );
 
 	describe( 'processCSSNesting', () => {

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
@@ -402,7 +402,7 @@ export function getStylesDeclarations(
 	if ( !! blockStyles?.background ) {
 		blockStyles = setBackgroundStyleDefaults( blockStyles, {
 			...editorSettings,
-			isRoot,
+			selector,
 		} );
 	}
 

diff --git a/packages/block-editor/src/hooks/background.js b/packages/block-editor/src/hooks/background.js
@@ -4,6 +4,7 @@
 import { getBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
+import { safeDecodeURI } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -16,6 +17,7 @@ import {
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
+import { ROOT_BLOCK_SELECTOR } from '../components/global-styles/utils';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -50,7 +52,23 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
+/**
+ * Updates a styles object with default background values.
+ *
+ * @param {Object} blockStyles         A styles object.
+ * @param {Object} options             Optional settings.
+ * @param {string} options.themeDirURI The URI of the current theme directory.
+ * @param {string} options.selector    The block selector.
+ * @return {Object}                     Updated styles.
+ */
 export function setBackgroundStyleDefaults( blockStyles, options ) {
+	if (
+		typeof blockStyles?.background !== 'object' ||
+		Object.keys( blockStyles?.background ).length === 0
+	) {
+		return blockStyles;
+	}
+
 	const backgroundImage = blockStyles?.background?.backgroundImage;
 	const newBackgroundStyles = {};
 
@@ -67,12 +85,12 @@ export function setBackgroundStyleDefaults( blockStyles, options ) {
 
 		newBackgroundStyles.backgroundImage = {
 			...backgroundImage,
-			url,
+			url: encodeURI( safeDecodeURI( url ) ),
 		};
 	}
 
 	// Set block background defaults.
-	if ( ! options?.isRoot && !! backgroundImage?.url ) {
+	if ( options?.selector !== ROOT_BLOCK_SELECTOR && !! backgroundImage ) {
 		if ( ! blockStyles?.background?.backgroundSize ) {
 			newBackgroundStyles.backgroundSize = 'cover';
 		}

diff --git a/packages/block-editor/src/hooks/test/background.js b/packages/block-editor/src/hooks/test/background.js
@@ -0,0 +1,83 @@
+/**
+ * Internal dependencies
+ */
+import { setBackgroundStyleDefaults } from '../background';
+import { ROOT_BLOCK_SELECTOR } from '../../components/global-styles/utils';
+
+describe( 'background', () => {
+	describe( 'setBackgroundStyleDefaults', () => {
+		it( 'should return the block styles if the block styles do not have a background', () => {
+			const blockStyles = { color: 'red' };
+			expect( setBackgroundStyleDefaults( blockStyles ) ).toEqual(
+				blockStyles
+			);
+		} );
+
+		it( 'should return the block styles if `background` is not an object', () => {
+			const blockStyles = { background: 'red' };
+			expect( setBackgroundStyleDefaults( blockStyles ) ).toEqual(
+				blockStyles
+			);
+		} );
+
+		it( 'should return the background size defaults', () => {
+			const blockStyles = {
+				background: { backgroundImage: 'some-image.jpg' },
+			};
+			expect( setBackgroundStyleDefaults( blockStyles ) ).toEqual( {
+				background: {
+					backgroundImage: 'some-image.jpg',
+					backgroundSize: 'cover',
+				},
+			} );
+		} );
+
+		it( 'should return an absolute theme URL path', () => {
+			const blockStyles = {
+				background: {
+					backgroundImage: {
+						source: 'theme',
+						url: '/some-image.jpg',
+					},
+				},
+			};
+			const options = { themeDirURI: 'http://example.com' };
+			expect(
+				setBackgroundStyleDefaults( blockStyles, options )
+			).toEqual( {
+				background: {
+					backgroundImage: {
+						source: 'theme',
+						url: 'http://example.com/some-image.jpg',
+					},
+					backgroundSize: 'cover',
+				},
+			} );
+		} );
+
+		it( 'should not add background size defaults for root selector', () => {
+			const blockStyles = {
+				background: {
+					backgroundImage: {
+						source: 'theme',
+						url: '/some-image.jpg',
+					},
+				},
+			};
+			const options = {
+				themeDirURI: 'http://example.com',
+				selector: ROOT_BLOCK_SELECTOR,
+			};
+			expect(
+				setBackgroundStyleDefaults( blockStyles, options )
+			).toEqual( {
+				background: {
+					backgroundImage: {
+						source: 'theme',
+						url: 'http://example.com/some-image.jpg',
+					},
+				},
+			} );
+		} );
+	} );
+} );
diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -132,7 +132,6 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 				? getEntityRecord( 'root', 'site' )
 				: undefined;
 
-			const _currentTheme = getCurrentTheme();
 			function getSectionRootBlock() {
 				if ( renderingMode === 'template-locked' ) {
 					return getBlocksByName( 'core/post-content' )?.[ 0 ] ?? '';

diff --git a/packages/style-engine/src/test/index.js b/packages/style-engine/src/test/index.js
@@ -226,7 +226,6 @@ describe( 'getCSSRules', () => {
 				{
 					background: {
 						backgroundImage: {
-							source: 'file',
 							url: 'https://example.com/image.jpg',
 						},
 						backgroundPosition: '50% 50%',