@wordpress/block-editor 13.4.0 → 14.0.0

package/src/components/global-styles/background-panel.js

@@ -318,8 +318,12 @@ function BackgroundImageControls( {
 			return;
 		}
 
-		const sizeValue = style?.background?.backgroundSize;
-		const positionValue = style?.background?.backgroundPosition;
+		const sizeValue =
+			style?.background?.backgroundSize ||
+			inheritedValue?.background?.backgroundSize;
+		const positionValue =
+			style?.background?.backgroundPosition ||
+			inheritedValue?.background?.backgroundPosition;
 
 		onChange(
 			setImmutably( style, [ 'background' ], {
@@ -334,6 +338,7 @@ function BackgroundImageControls( {
 					! positionValue && ( 'auto' === sizeValue || ! sizeValue )
 						? '50% 0'
 						: positionValue,
+				backgroundSize: sizeValue,
 			} )
 		);
 	};
@@ -448,6 +453,9 @@ function BackgroundSizeControls( {
 	const imageValue =
 		style?.background?.backgroundImage?.url ||
 		inheritedValue?.background?.backgroundImage?.url;
+	const isUploadedImage =
+		style?.background?.backgroundImage?.id ||
+		inheritedValue?.background?.backgroundImage?.id;
 	const positionValue =
 		style?.background?.backgroundPosition ||
 		inheritedValue?.background?.backgroundPosition;
@@ -456,19 +464,15 @@ function BackgroundSizeControls( {
 		inheritedValue?.background?.backgroundAttachment;
 
 	/*
-	 * An `undefined` value is replaced with any supplied
-	 * default control value for the toggle group control.
-	 * An empty string is treated as `auto` - this allows a user
-	 * to select "Size" and then enter a custom value, with an
-	 * empty value being treated as `auto`.
+	 * Set default values for uploaded images.
+	 * The default values are passed by the consumer.
+	 * Block-level controls may have different defaults to root-level controls.
+	 * A falsy value is treated by default as `auto` (Tile).
 	 */
 	const currentValueForToggle =
-		( sizeValue !== undefined &&
-			sizeValue !== 'cover' &&
-			sizeValue !== 'contain' ) ||
-		sizeValue === ''
-			? 'auto'
-			: sizeValue || defaultValues?.backgroundSize;
+		! sizeValue && isUploadedImage
+			? defaultValues?.backgroundSize
+			: sizeValue || 'auto';
 
 	/*
 	 * If the current value is `cover` and the repeat value is `undefined`, then
@@ -569,6 +573,7 @@ function BackgroundSizeControls( {
 				onChange={ updateBackgroundPosition }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Fixed background' ) }
 				checked={ attachmentValue === 'fixed' }
 				onChange={ toggleScrollWithPage }
@@ -577,6 +582,7 @@ function BackgroundSizeControls( {
 				) }
 			/>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
@@ -626,6 +632,7 @@ function BackgroundSizeControls( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Repeat' ) }
 					checked={ repeatCheckedValue }
 					onChange={ toggleIsRepeated }
@@ -717,55 +724,56 @@ export default function BackgroundPanel( {
 					}
 				) }
 			>
-				{ shouldShowBackgroundImageControls ? (
-					<BackgroundControlsPanel
-						label={ title }
-						filename={ title }
-						url={ getResolvedThemeFilePath( url, themeFileURIs ) }
-						onToggle={ setIsDropDownOpen }
-						hasImageValue={ hasImageValue }
-					>
-						<VStack spacing={ 3 } className="single-column">
-							<BackgroundImageControls
-								onChange={ onChange }
-								style={ value }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-								displayInPanel
-								onRemoveImage={ () => {
-									setIsDropDownOpen( false );
-									resetBackground();
-								} }
-							/>
-							<BackgroundSizeControls
-								onChange={ onChange }
-								panelId={ panelId }
-								style={ value }
-								defaultValues={ defaultValues }
-								inheritedValue={ inheritedValue }
-								themeFileURIs={ themeFileURIs }
-							/>
-						</VStack>
-					</BackgroundControlsPanel>
-				) : (
-					<BackgroundImageControls
-						onChange={ onChange }
-						style={ value }
-						inheritedValue={ inheritedValue }
-						themeFileURIs={ themeFileURIs }
-					/>
-				) }
+				<ToolsPanelItem
+					hasValue={ () => hasImageValue }
+					label={ __( 'Image' ) }
+					onDeselect={ resetBackground }
+					isShownByDefault={ defaultControls.backgroundImage }
+					panelId={ panelId }
+				>
+					{ shouldShowBackgroundImageControls ? (
+						<BackgroundControlsPanel
+							label={ title }
+							filename={ title }
+							url={ getResolvedThemeFilePath(
+								url,
+								themeFileURIs
+							) }
+							onToggle={ setIsDropDownOpen }
+							hasImageValue={ hasImageValue }
+						>
+							<VStack spacing={ 3 } className="single-column">
+								<BackgroundImageControls
+									onChange={ onChange }
+									style={ value }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+									displayInPanel
+									onRemoveImage={ () => {
+										setIsDropDownOpen( false );
+										resetBackground();
+									} }
+								/>
+								<BackgroundSizeControls
+									onChange={ onChange }
+									panelId={ panelId }
+									style={ value }
+									defaultValues={ defaultValues }
+									inheritedValue={ inheritedValue }
+									themeFileURIs={ themeFileURIs }
+								/>
+							</VStack>
+						</BackgroundControlsPanel>
+					) : (
+						<BackgroundImageControls
+							onChange={ onChange }
+							style={ value }
+							inheritedValue={ inheritedValue }
+							themeFileURIs={ themeFileURIs }
+						/>
+					) }
+				</ToolsPanelItem>
 			</div>
-
-			{ /* Dummy ToolsPanel items, so we can control what's in the dropdown popover */ }
-			<ToolsPanelItem
-				hasValue={ () => hasImageValue }
-				label={ __( 'Image' ) }
-				onDeselect={ resetBackground }
-				isShownByDefault={ defaultControls.backgroundImage }
-				panelId={ panelId }
-				className="block-editor-global-styles-background-panel__hidden-tools-panel-item"
-			/>
 		</Wrapper>
 	);
 }

package/src/components/global-styles/image-settings-panel.js

@@ -67,6 +67,7 @@ export default function ImageSettingsPanel( {
 					panelId={ panelId }
 				>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Expand on click' ) }
 						checked={ lightboxChecked }
 						onChange={ onChangeLightbox }

package/src/components/global-styles/style.scss

@@ -193,10 +193,6 @@
 .block-editor-global-styles-background-panel__dropdown-content-wrapper {
 	min-width: 260px;
 	overflow-x: hidden;
-	.components-base-control__help,
-	.components-toggle-control {
-		margin-bottom: 0;
-	}
 
 	.components-focal-point-picker-wrapper {
 		background-color: $gray-100;
@@ -215,12 +211,6 @@
 	}
 }
 
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-	height: 0;
-	width: 0;
-	position: absolute;
-}
-
 // Push control panel into the background when the media modal is open.
 .modal-open .block-editor-global-styles-background-panel__popover {
 	z-index: z-index(".block-editor-global-styles-background-panel__popover");

package/src/components/global-styles/test/theme-file-uri-utils.js

@@ -1,10 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	setThemeFileUris,
-	getResolvedThemeFilePath,
-} from '../theme-file-uri-utils';
+import { getResolvedThemeFilePath } from '../theme-file-uri-utils';
 
 const themeFileURIs = [
 	{
@@ -19,28 +16,6 @@ const themeFileURIs = [
 	},
 ];
 
-describe( 'setThemeFileUris()', () => {
-	const themeJson = {
-		styles: {
-			background: {
-				backgroundImage: {
-					url: 'file:./assets/image.jpg',
-				},
-			},
-		},
-	};
-
-	it( 'should replace relative paths with resolved URIs if found in themeFileURIs', () => {
-		const newThemeJson = setThemeFileUris( themeJson, themeFileURIs );
-		expect(
-			newThemeJson.styles.background.backgroundImage.url ===
-				'https://wordpress.org/assets/image.jpg'
-		).toBe( true );
-		// Object reference should be the same as the function is mutating the object.
-		expect( newThemeJson ).toEqual( themeJson );
-	} );
-} );
-
 describe( 'getResolvedThemeFilePath()', () => {
 	it.each( [
 		[

package/src/components/global-styles/test/use-global-styles-output.js

@@ -1028,14 +1028,59 @@ describe( 'global styles renderer', () => {
 				'letter-spacing: 2px',
 			] );
 		} );
+		it( 'should set default values for block background styles', () => {
+			const backgroundStyles = {
+				background: {
+					backgroundImage: {
+						url: 'https://wordpress.org/assets/image.jpg',
+						id: 123,
+					},
+				},
+			};
+			expect(
+				getStylesDeclarations( backgroundStyles, '.wp-block-group' )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-size: cover',
+			] );
+			// Test with root-level styles.
+			expect(
+				getStylesDeclarations( backgroundStyles, ROOT_BLOCK_SELECTOR )
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+			] );
+			expect(
+				getStylesDeclarations(
+					{
+						background: {
+							...backgroundStyles.background,
+							backgroundSize: 'contain',
+						},
+					},
+					'.wp-block-group'
+				)
+			).toEqual( [
+				"background-image: url( 'https://wordpress.org/assets/image.jpg' )",
+				'background-position: center',
+				'background-size: contain',
+			] );
+		} );
 	} );
 
 	describe( 'processCSSNesting', () => {
+		it( 'should return empty string when supplied css is empty', () => {
+			expect( processCSSNesting( '', '.foo' ) ).toEqual( '' );
+		} );
 		it( 'should return processed CSS without any nested selectors', () => {
 			expect(
 				processCSSNesting( 'color: red; margin: auto;', '.foo' )
 			).toEqual( ':root :where(.foo){color: red; margin: auto;}' );
 		} );
+		it( 'should return processed CSS when there are no root selectors', () => {
+			expect(
+				processCSSNesting( '&::before{color: red;}', '.foo' )
+			).toEqual( ':root :where(.foo)::before{color: red;}' );
+		} );
 		it( 'should return processed CSS with nested selectors', () => {
 			expect(
 				processCSSNesting(
@@ -1049,21 +1094,21 @@ describe( 'global styles renderer', () => {
 		it( 'should return processed CSS with pseudo elements', () => {
 			expect(
 				processCSSNesting(
-					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;}',
+					'color: red; margin: auto; &::before{color: blue;} & ::before{color: green;}  &.one::before{color: yellow;} & .two::before{color: purple;} & > ::before{color: darkseagreen;}',
 					'.foo'
 				)
 			).toEqual(
-				':root :where(.foo){color: red; margin: auto;}:root :where(.foo::before){color: blue;}:root :where(.foo ::before){color: green;}:root :where(.foo.one::before){color: yellow;}:root :where(.foo .two::before){color: purple;}'
+				':root :where(.foo){color: red; margin: auto;}:root :where(.foo)::before{color: blue;}:root :where(.foo) ::before{color: green;}:root :where(.foo.one)::before{color: yellow;}:root :where(.foo .two)::before{color: purple;}:root :where(.foo) > ::before{color: darkseagreen;}'
 			);
 		} );
 		it( 'should return processed CSS with multiple root selectors', () => {
 			expect(
 				processCSSNesting(
-					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;}',
+					'color: red; margin: auto; &.one{color: blue;} & .two{color: green;} &::before{color: yellow;} & ::before{color: purple;}  &.three::before{color: orange;} & .four::before{color: skyblue;} & > ::before{color: darkseagreen;}',
 					'.foo, .bar'
 				)
 			).toEqual(
-				':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo::before, .bar::before){color: yellow;}:root :where(.foo ::before, .bar ::before){color: purple;}:root :where(.foo.three::before, .bar.three::before){color: orange;}:root :where(.foo .four::before, .bar .four::before){color: skyblue;}'
+				':root :where(.foo, .bar){color: red; margin: auto;}:root :where(.foo.one, .bar.one){color: blue;}:root :where(.foo .two, .bar .two){color: green;}:root :where(.foo, .bar)::before{color: yellow;}:root :where(.foo, .bar) ::before{color: purple;}:root :where(.foo.three, .bar.three)::before{color: orange;}:root :where(.foo .four, .bar .four)::before{color: skyblue;}:root :where(.foo, .bar) > ::before{color: darkseagreen;}'
 			);
 		} );
 	} );

package/src/components/global-styles/test/utils.js

@@ -7,6 +7,9 @@ import {
 	getPresetVariableFromValue,
 	getValueFromVariable,
 	scopeFeatureSelectors,
+	getResolvedThemeFilePath,
+	getResolvedRefValue,
+	getResolvedValue,
 } from '../utils';
 
 describe( 'editor utils', () => {
@@ -52,6 +55,41 @@ describe( 'editor utils', () => {
 				},
 			},
 		},
+		styles: {
+			background: {
+				backgroundImage: {
+					url: 'file:./assets/image.jpg',
+				},
+				backgroundAttachment: 'fixed',
+				backgroundPosition: 'top left',
+			},
+			blocks: {
+				'core/group': {
+					background: {
+						backgroundImage: {
+							ref: 'styles.background.backgroundImage',
+						},
+					},
+					dimensions: {
+						minHeight: '100px',
+					},
+				},
+			},
+		},
+		_links: {
+			'wp:theme-file': [
+				{
+					name: 'file:./assets/image.jpg',
+					href: 'https://wordpress.org/assets/image.jpg',
+					target: 'styles.background.backgroundImage.url',
+				},
+				{
+					name: 'file:./assets/other/image.jpg',
+					href: 'https://wordpress.org/assets/other/image.jpg',
+					target: "styles.blocks.['core/group'].background.backgroundImage.url",
+				},
+			],
+		},
 		isGlobalStylesUserThemeJSON: true,
 	};
 
@@ -366,4 +404,86 @@ describe( 'editor utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'getResolvedThemeFilePath()', () => {
+		it.each( [
+			[
+				'file:./assets/image.jpg',
+				'https://wordpress.org/assets/image.jpg',
+				'Should return absolute URL if found in themeFileURIs',
+			],
+			[
+				'file:./misc/image.jpg',
+				'file:./misc/image.jpg',
+				'Should return value if not found in themeFileURIs',
+			],
+			[
+				'https://wordpress.org/assets/image.jpg',
+				'https://wordpress.org/assets/image.jpg',
+				'Should not match absolute URLs',
+			],
+		] )(
+			'Given file %s and return value %s: %s',
+			( file, returnedValue ) => {
+				expect(
+					getResolvedThemeFilePath(
+						file,
+						themeJson._links[ 'wp:theme-file' ]
+					) === returnedValue
+				).toBe( true );
+			}
+		);
+	} );
+
+	describe( 'getResolvedRefValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'file:./assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedRefValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
+
+	describe( 'getResolvedValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'https://wordpress.org/assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
 } );

package/src/components/global-styles/theme-file-uri-utils.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { getValueFromObjectPath } from '../../utils/object';
-
 /**
  * Looks up a theme file URI based on a relative path.
  *
@@ -21,57 +16,3 @@ export function getResolvedThemeFilePath( file, themeFileURIs = [] ) {
 
 	return uri?.href;
 }
-
-/**
- * Mutates an object by settings a value at the provided path.
- *
- * @param {Object}              object Object to set a value in.
- * @param {number|string|Array} path   Path in the object to modify.
- * @param {*}                   value  New value to set.
- * @return {Object} Object with the new value set.
- */
-function setMutably( object, path, value ) {
-	path = path.split( '.' );
-	const finalValueKey = path.pop();
-	let prev = object;
-
-	for ( const key of path ) {
-		const current = prev[ key ];
-		prev = current;
-	}
-
-	prev[ finalValueKey ] = value;
-
-	return object;
-}
-
-/**
- * Resolves any relative paths if a corresponding theme file URI is available.
- * Note: this function mutates the object and is specifically to be used in
- * an async styles build context in useGlobalStylesOutput
- *
- * @param {Object}        themeJson     Theme.json/Global styles tree.
- * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
- * @return {Object} Returns mutated object.
- */
-export function setThemeFileUris( themeJson, themeFileURIs ) {
-	if ( ! themeJson?.styles || ! themeFileURIs ) {
-		return themeJson;
-	}
-
-	themeFileURIs.forEach( ( { name, href, target } ) => {
-		const value = getValueFromObjectPath( themeJson, target );
-		if ( value === name ) {
-			/*
-			 * The object must not be updated immutably here because the
-			 * themeJson is a reference to the global styles tree used as a dependency in the
-			 * useGlobalStylesOutputWithConfig() hook. If we don't mutate the object,
-			 * the hook will detect the change and re-render the component, resulting
-			 * in a maximum depth exceeded error.
-			 */
-			themeJson = setMutably( themeJson, target, href );
-		}
-	} );
-
-	return themeJson;
-}

package/src/components/global-styles/typography-panel.js

@@ -474,7 +474,6 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<LineHeightControl
-						__nextHasNoMarginBottom
 						__unstableInputWidth="auto"
 						value={ lineHeight }
 						onChange={ setLineHeight }