@wordpress/block-editor 13.3.0 → 14.0.0

package/src/components/font-family/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { SelectControl } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -10,6 +11,8 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -33,8 +36,21 @@ export default function FontFamilyControl( {
 			};
 		} ),
 	];
+
+	if ( ! __nextHasNoMarginBottom ) {
+		deprecated(
+			'Bottom margin styles for wp.blockEditor.FontFamilyControl',
+			{
+				since: '6.7',
+				version: '7.0',
+				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version',
+			}
+		);
+	}
+
 	return (
 		<SelectControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ __( 'Font' ) }
 			options={ options }
 			value={ value }

package/src/components/font-family/stories/index.story.js

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontFamilyControl from '..';
+
+export default {
+	component: FontFamilyControl,
+	title: 'BlockEditor/FontFamilyControl',
+};
+
+export const Default = {
+	render: function Template( props ) {
+		const [ value, setValue ] = useState();
+		return (
+			<FontFamilyControl
+				onChange={ setValue }
+				value={ value }
+				{ ...props }
+			/>
+		);
+	},
+	args: {
+		fontFamilies: [
+			{
+				fontFace: [
+					{
+						fontFamily: 'Inter',
+						fontStretch: 'normal',
+						fontStyle: 'normal',
+						fontWeight: '200 900',
+						src: [
+							'file:./assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf',
+						],
+					},
+				],
+				fontFamily: '"Inter", sans-serif',
+				name: 'Inter',
+				slug: 'inter',
+			},
+			{
+				fontFamily:
+					'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+				name: 'System Font',
+				slug: 'system-font',
+			},
+		],
+		__nextHasNoMarginBottom: true,
+	},
+};

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,24 +453,26 @@ 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;
+	const attachmentValue =
+		style?.background?.backgroundAttachment ||
+		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
@@ -546,8 +553,17 @@ function BackgroundSizeControls( {
 			)
 		);
 
+	const toggleScrollWithPage = () =>
+		onChange(
+			setImmutably(
+				style,
+				[ 'background', 'backgroundAttachment' ],
+				attachmentValue === 'fixed' ? 'scroll' : 'fixed'
+			)
+		);
+
 	return (
-		<VStack spacing={ 3 } className="single-column">
+		<VStack spacing={ 4 } className="single-column">
 			<FocalPointPicker
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
@@ -556,7 +572,17 @@ function BackgroundSizeControls( {
 				value={ backgroundPositionToCoords( positionValue ) }
 				onChange={ updateBackgroundPosition }
 			/>
+			<ToggleControl
+				__nextHasNoMarginBottom
+				label={ __( 'Fixed background' ) }
+				checked={ attachmentValue === 'fixed' }
+				onChange={ toggleScrollWithPage }
+				help={ __(
+					'Whether your image should scroll with the page or stay fixed in place.'
+				) }
+			/>
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				size="__unstable-large"
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
@@ -606,6 +632,7 @@ function BackgroundSizeControls( {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Repeat' ) }
 					checked={ repeatCheckedValue }
 					onChange={ toggleIsRepeated }
@@ -697,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/hooks.js

@@ -85,7 +85,11 @@ const VALID_SETTINGS = [
 ];
 
 export const useGlobalStylesReset = () => {
-	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+	const { user, setUserConfig } = useContext( GlobalStylesContext );
+	const config = {
+		settings: user.settings,
+		styles: user.styles,
+	};
 	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,

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

@@ -103,8 +103,13 @@
 .block-editor-global-styles-background-panel__image-tools-panel-item {
 	border: 1px solid $gray-300;
 	border-radius: 2px;
+
 	// Full width. ToolsPanel lays out children in a grid.
 	grid-column: 1 / -1;
+
+	// Ensure the dropzone is positioned to the size of the item.
+	position: relative;
+
 	// Since there is no option to skip rendering the drag'n'drop icon in drop
 	// zone, we hide it for now.
 	.components-drop-zone__content-icon {
@@ -188,25 +193,22 @@
 .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;
 		width: 100%;
 		border-radius: $radius-block-ui;
 		border: $border-width solid $gray-300;
 	}
+
 	.components-focal-point-picker__media--image {
 		max-height: 180px;
 	}
-}
 
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-	height: 0;
-	width: 0;
-	position: absolute;
+	// Override focal picker to avoid a double border.
+	.components-focal-point-picker::after {
+		content: none;
+	}
 }
 
 // Push control panel into the background when the media modal is open.

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( [
 		[