@wordpress/edit-site 4.12.0 → 4.13.1-next.957ca95e4c.0

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -11,7 +16,10 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalView as View,
 } from '@wordpress/components';
-import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
+import {
+	__experimentalUseCustomSides as useCustomSides,
+	__experimentalSpacingSizesControl as SpacingSizesControl,
+} from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
@@ -66,6 +74,12 @@ function useHasGap( name ) {
 	return settings && supports.includes( 'blockGap' );
 }
 
+function useHasSpacingPresets() {
+	const [ settings ] = useSetting( 'spacing.spacingSizes' );
+
+	return settings && settings.length > 0;
+}
+
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -90,7 +104,7 @@ function filterValuesBySides( values, sides ) {
 }
 
 function splitStyleValue( value ) {
-	// Check for shorthand value ( a string value ).
+	// Check for shorthand value (a string value).
 	if ( value && typeof value === 'string' ) {
 		// Convert to value for individual sides for BoxControl.
 		return {
@@ -104,6 +118,26 @@ function splitStyleValue( value ) {
 	return value;
 }
 
+function splitGapValue( value ) {
+	// Check for shorthand value (a string value).
+	if ( value && typeof value === 'string' ) {
+		// If the value is a string, treat it as a single side (top) for the spacing controls.
+		return {
+			top: value,
+		};
+	}
+
+	if ( value ) {
+		return {
+			...value,
+			right: value?.left,
+			bottom: value?.top,
+		};
+	}
+
+	return value;
+}
+
 // Props for managing `layout.contentSize`.
 function useContentSizeProps( name ) {
 	const [ contentSizeValue, setContentSizeValue ] = useSetting(
@@ -204,12 +238,34 @@ function useMarginProps( name ) {
 // Props for managing `spacing.blockGap`.
 function useBlockGapProps( name ) {
 	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+	const gapValues = splitGapValue( gapValue );
+	const gapSides = useCustomSides( name, 'blockGap' );
+	const isAxialGap =
+		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
 	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
 	const hasGapValue = () => !! userSetGapValue;
+	const setGapValues = ( nextBoxGapValue ) => {
+		if ( ! nextBoxGapValue ) {
+			setGapValue( null );
+		}
+		// If axial gap is not enabled, treat the 'top' value as the shorthand gap value.
+		if ( ! isAxialGap && nextBoxGapValue?.hasOwnProperty( 'top' ) ) {
+			setGapValue( nextBoxGapValue.top );
+		} else {
+			setGapValue( {
+				top: nextBoxGapValue?.top,
+				left: nextBoxGapValue?.left,
+			} );
+		}
+	};
 	return {
 		gapValue,
+		gapValues,
+		gapSides,
+		isAxialGap,
 		setGapValue,
+		setGapValues,
 		resetGapValue,
 		hasGapValue,
 	};
@@ -221,6 +277,7 @@ export default function DimensionsPanel( { name } ) {
 	const showPaddingControl = useHasPadding( name );
 	const showMarginControl = useHasMargin( name );
 	const showGapControl = useHasGap( name );
+	const showSpacingPresetsControl = useHasSpacingPresets();
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
 			'%',
@@ -268,8 +325,16 @@ export default function DimensionsPanel( { name } ) {
 	} = useMarginProps( name );
 
 	// Props for managing `spacing.blockGap`.
-	const { gapValue, setGapValue, resetGapValue, hasGapValue } =
-		useBlockGapProps( name );
+	const {
+		gapValue,
+		gapValues,
+		gapSides,
+		isAxialGap,
+		setGapValue,
+		setGapValues,
+		resetGapValue,
+		hasGapValue,
+	} = useBlockGapProps( name );
 
 	const resetAll = () => {
 		resetPaddingValue();
@@ -342,16 +407,32 @@ export default function DimensionsPanel( { name } ) {
 					label={ __( 'Padding' ) }
 					onDeselect={ resetPaddingValue }
 					isShownByDefault={ true }
+					className={ classnames( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
 				>
-					<BoxControl
-						values={ paddingValues }
-						onChange={ setPaddingValues }
-						label={ __( 'Padding' ) }
-						sides={ paddingSides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ isAxialPadding }
-					/>
+					{ ! showSpacingPresetsControl && (
+						<BoxControl
+							values={ paddingValues }
+							onChange={ setPaddingValues }
+							label={ __( 'Padding' ) }
+							sides={ paddingSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialPadding }
+						/>
+					) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							values={ paddingValues }
+							onChange={ setPaddingValues }
+							label={ __( 'Padding' ) }
+							sides={ paddingSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialPadding }
+						/>
+					) }
 				</ToolsPanelItem>
 			) }
 			{ showMarginControl && (
@@ -360,16 +441,32 @@ export default function DimensionsPanel( { name } ) {
 					label={ __( 'Margin' ) }
 					onDeselect={ resetMarginValue }
 					isShownByDefault={ true }
+					className={ classnames( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
 				>
-					<BoxControl
-						values={ marginValues }
-						onChange={ setMarginValues }
-						label={ __( 'Margin' ) }
-						sides={ marginSides }
-						units={ units }
-						allowReset={ false }
-						splitOnAxis={ isAxialMargin }
-					/>
+					{ ! showSpacingPresetsControl && (
+						<BoxControl
+							values={ marginValues }
+							onChange={ setMarginValues }
+							label={ __( 'Margin' ) }
+							sides={ marginSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialMargin }
+						/>
+					) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							values={ marginValues }
+							onChange={ setMarginValues }
+							label={ __( 'Margin' ) }
+							sides={ marginSides }
+							units={ units }
+							allowReset={ false }
+							splitOnAxis={ isAxialMargin }
+						/>
+					) }
 				</ToolsPanelItem>
 			) }
 			{ showGapControl && (
@@ -378,15 +475,43 @@ export default function DimensionsPanel( { name } ) {
 					label={ __( 'Block spacing' ) }
 					onDeselect={ resetGapValue }
 					isShownByDefault={ true }
+					className={ classnames( {
+						'tools-panel-item-spacing': showSpacingPresetsControl,
+					} ) }
 				>
-					<UnitControl
-						label={ __( 'Block spacing' ) }
-						__unstableInputWidth="80px"
-						min={ 0 }
-						onChange={ setGapValue }
-						units={ units }
-						value={ gapValue }
-					/>
+					{ ! showSpacingPresetsControl &&
+						( isAxialGap ? (
+							<BoxControl
+								label={ __( 'Block spacing' ) }
+								min={ 0 }
+								onChange={ setGapValues }
+								units={ units }
+								sides={ gapSides }
+								values={ gapValues }
+								allowReset={ false }
+								splitOnAxis={ isAxialGap }
+							/>
+						) : (
+							<UnitControl
+								label={ __( 'Block spacing' ) }
+								__unstableInputWidth="80px"
+								min={ 0 }
+								onChange={ setGapValue }
+								units={ units }
+								value={ gapValue }
+							/>
+						) ) }
+					{ showSpacingPresetsControl && (
+						<SpacingSizesControl
+							label={ __( 'Block spacing' ) }
+							min={ 0 }
+							onChange={ setGapValues }
+							sides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
+							values={ gapValues }
+							allowReset={ false }
+							splitOnAxis={ isAxialGap }
+						/>
+					) }
 				</ToolsPanelItem>
 			) }
 		</ToolsPanel>

package/src/components/global-styles/hooks.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, cloneDeep, set, isEqual, has } from 'lodash';
+import { get, cloneDeep, set, isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -128,21 +128,21 @@ export function useStyle( path, blockName, source = 'all' ) {
 	switch ( source ) {
 		case 'all':
 			result = getValueFromVariable(
-				mergedConfig.settings,
+				mergedConfig,
 				blockName,
 				get( userConfig, finalPath ) ?? get( baseConfig, finalPath )
 			);
 			break;
 		case 'user':
 			result = getValueFromVariable(
-				mergedConfig.settings,
+				mergedConfig,
 				blockName,
 				get( userConfig, finalPath )
 			);
 			break;
 		case 'base':
 			result = getValueFromVariable(
-				baseConfig.settings,
+				baseConfig,
 				blockName,
 				get( baseConfig, finalPath )
 			);
@@ -210,10 +210,8 @@ export function getSupportedGlobalStylesPanels( name ) {
 		// unset, we still enable it.
 		if ( STYLE_PROPERTY[ styleName ].requiresOptOut ) {
 			if (
-				has(
-					blockType.supports,
-					STYLE_PROPERTY[ styleName ].support[ 0 ]
-				) &&
+				STYLE_PROPERTY[ styleName ].support[ 0 ] in
+					blockType.supports &&
 				get(
 					blockType.supports,
 					STYLE_PROPERTY[ styleName ].support

package/src/components/global-styles/preview.js

@@ -79,13 +79,13 @@ const StylesPreview = ( { label, isFocused } ) => {
 		)
 		.slice( 0, 2 );
 
-	// Reset leaked styles from WP common.css.
+	// Reset leaked styles from WP common.css and remove main content layout padding.
 	const editorStyles = useMemo( () => {
 		if ( styles ) {
 			return [
 				...styles,
 				{
-					css: 'body{min-width: 0;}',
+					css: 'body{min-width: 0;padding: 0;}',
 					isGlobalStyles: true,
 				},
 			];

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

@@ -21,8 +21,9 @@
 	border-radius: $radius-block-ui;
 }
 
-.edit-site-typography-panel__half-width-control {
-	width: calc((100% - #{$grid-unit-30}) / 2);
+.edit-site-typography-panel__full-width-control {
+	grid-column: 1 / -1;
+	max-width: 100%;
 }
 
 .edit-site-global-styles-screen-heading-color,

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

@@ -484,6 +484,19 @@ describe( 'global styles renderer', () => {
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
+		it( 'should output content and wide size variables if values are specified', () => {
+			const tree = {
+				settings: {
+					layout: {
+						contentSize: '840px',
+						wideSize: '1100px',
+					},
+				},
+			};
+			expect( toStyles( tree, 'body' ) ).toEqual(
+				'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
 	} );
 
 	describe( 'getLayoutStyles', () => {
@@ -705,12 +718,12 @@ describe( 'global styles renderer', () => {
 			expect(
 				getStylesDeclarations( blockStyles, 'body', true )
 			).toEqual( [
-				'font-family: sans-serif',
 				'--wp--style--root--padding-top: 33px',
 				'--wp--style--root--padding-right: 33px',
 				'--wp--style--root--padding-bottom: 33px',
 				'--wp--style--root--padding-left: 33px',
 				'background-color: var(--wp--preset--color--light-green-cyan)',
+				'font-family: sans-serif',
 			] );
 		} );
 
@@ -718,12 +731,12 @@ describe( 'global styles renderer', () => {
 			expect(
 				getStylesDeclarations( blockStyles, 'body', false )
 			).toEqual( [
-				'font-family: sans-serif',
 				'background-color: var(--wp--preset--color--light-green-cyan)',
 				'padding-top: 33px',
 				'padding-right: 33px',
 				'padding-bottom: 33px',
 				'padding-left: 33px',
+				'font-family: sans-serif',
 			] );
 		} );
 
@@ -735,12 +748,12 @@ describe( 'global styles renderer', () => {
 					true
 				)
 			).toEqual( [
-				'font-family: sans-serif',
 				'background-color: var(--wp--preset--color--light-green-cyan)',
 				'padding-top: 33px',
 				'padding-right: 33px',
 				'padding-bottom: 33px',
 				'padding-left: 33px',
+				'font-family: sans-serif',
 			] );
 		} );
 	} );

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

@@ -4,7 +4,7 @@
 import { getPresetVariableFromValue, getValueFromVariable } from '../utils';
 
 describe( 'editor utils', () => {
-	const styles = {
+	const themeJson = {
 		version: 1,
 		settings: {
 			color: {
@@ -57,7 +57,7 @@ describe( 'editor utils', () => {
 		describe( 'when a provided global style (e.g. fontFamily, color,etc.) does not exist', () => {
 			it( 'returns the originally provided value', () => {
 				const actual = getPresetVariableFromValue(
-					styles.settings,
+					themeJson.settings,
 					context,
 					'fakePropertyName',
 					value
@@ -69,7 +69,7 @@ describe( 'editor utils', () => {
 		describe( 'when a global style is cleared by the user', () => {
 			it( 'returns an undefined preset variable', () => {
 				const actual = getPresetVariableFromValue(
-					styles.settings,
+					themeJson.settings,
 					context,
 					propertyName,
 					undefined
@@ -83,7 +83,7 @@ describe( 'editor utils', () => {
 				it( 'returns the originally provided value', () => {
 					const customValue = '#6e4545';
 					const actual = getPresetVariableFromValue(
-						styles.settings,
+						themeJson.settings,
 						context,
 						propertyName,
 						customValue
@@ -95,7 +95,7 @@ describe( 'editor utils', () => {
 			describe( 'and it is a preset value', () => {
 				it( 'returns the preset variable', () => {
 					const actual = getPresetVariableFromValue(
-						styles.settings,
+						themeJson.settings,
 						context,
 						propertyName,
 						value
@@ -110,7 +110,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided an invalid variable', () => {
 			it( 'returns the originally provided value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					themeJson,
 					'root',
 					undefined
 				);
@@ -122,7 +122,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided a preset variable', () => {
 			it( 'retrieves the correct preset value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					themeJson,
 					'root',
 					'var:preset|color|primary'
 				);
@@ -134,7 +134,7 @@ describe( 'editor utils', () => {
 		describe( 'when provided a custom variable', () => {
 			it( 'retrieves the correct custom value', () => {
 				const actual = getValueFromVariable(
-					styles.settings,
+					themeJson,
 					'root',
 					'var(--wp--custom--color--secondary)'
 				);
@@ -142,5 +142,65 @@ describe( 'editor utils', () => {
 				expect( actual ).toBe( '#a65555' );
 			} );
 		} );
+
+		describe( 'when provided a dynamic reference', () => {
+			it( 'retrieves the referenced value', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: 'purple-rain',
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference and reference does not exist', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+		} );
 	} );
 } );