@wordpress/edit-site 4.8.0 → 4.11.0

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

@@ -6,10 +6,13 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
+	__experimentalHStack as HStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalView as View,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
+import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,11 +22,27 @@ import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
 export function useHasDimensionsPanel( name ) {
+	const hasContentSize = useHasContentSize( name );
+	const hasWideSize = useHasWideSize( name );
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
 	const hasGap = useHasGap( name );
 
-	return hasPadding || hasMargin || hasGap;
+	return hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap;
+}
+
+function useHasContentSize( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'layout.contentSize', name );
+
+	return settings && supports.includes( 'contentSize' );
+}
+
+function useHasWideSize( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'layout.wideSize', name );
+
+	return settings && supports.includes( 'wideSize' );
 }
 
 function useHasPadding( name ) {
@@ -43,13 +62,8 @@ function useHasMargin( name ) {
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
-	// Do not show the gap control panel for block-level global styles
-	// as they do not work on the frontend.
-	// See: https://github.com/WordPress/gutenberg/pull/39845.
-	// We can revert this condition when they're working again.
-	return !! name
-		? false
-		: settings && supports.includes( '--wp--style--block-gap' );
+
+	return settings && supports.includes( 'blockGap' );
 }
 
 function filterValuesBySides( values, sides ) {
@@ -90,20 +104,50 @@ function splitStyleValue( value ) {
 	return value;
 }
 
-export default function DimensionsPanel( { name } ) {
-	const showPaddingControl = useHasPadding( name );
-	const showMarginControl = useHasMargin( name );
-	const showGapControl = useHasGap( name );
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
-	} );
+// Props for managing `layout.contentSize`.
+function useContentSizeProps( name ) {
+	const [ contentSizeValue, setContentSizeValue ] = useSetting(
+		'layout.contentSize',
+		name
+	);
+	const [ userSetContentSizeValue ] = useSetting(
+		'layout.contentSize',
+		name,
+		'user'
+	);
+	const hasUserSetContentSizeValue = () => !! userSetContentSizeValue;
+	const resetContentSizeValue = () => setContentSizeValue( '' );
+	return {
+		contentSizeValue,
+		setContentSizeValue,
+		hasUserSetContentSizeValue,
+		resetContentSizeValue,
+	};
+}
 
+// Props for managing `layout.wideSize`.
+function useWideSizeProps( name ) {
+	const [ wideSizeValue, setWideSizeValue ] = useSetting(
+		'layout.wideSize',
+		name
+	);
+	const [ userSetWideSizeValue ] = useSetting(
+		'layout.wideSize',
+		name,
+		'user'
+	);
+	const hasUserSetWideSizeValue = () => !! userSetWideSizeValue;
+	const resetWideSizeValue = () => setWideSizeValue( '' );
+	return {
+		wideSizeValue,
+		setWideSizeValue,
+		hasUserSetWideSizeValue,
+		resetWideSizeValue,
+	};
+}
+
+// Props for managing `spacing.padding`.
+function usePaddingProps( name ) {
 	const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = useCustomSides( name, 'padding' );
@@ -119,6 +163,18 @@ export default function DimensionsPanel( { name } ) {
 	const hasPaddingValue = () =>
 		!! paddingValues && Object.keys( paddingValues ).length;
 
+	return {
+		paddingValues,
+		paddingSides,
+		isAxialPadding,
+		setPaddingValues,
+		resetPaddingValue,
+		hasPaddingValue,
+	};
+}
+
+// Props for managing `spacing.margin`.
+function useMarginProps( name ) {
 	const [ rawMargin, setRawMargin ] = useStyle( 'spacing.margin', name );
 	const marginValues = splitStyleValue( rawMargin );
 	const marginSides = useCustomSides( name, 'margin' );
@@ -134,18 +190,150 @@ export default function DimensionsPanel( { name } ) {
 	const hasMarginValue = () =>
 		!! marginValues && Object.keys( marginValues ).length;
 
+	return {
+		marginValues,
+		marginSides,
+		isAxialMargin,
+		setMarginValues,
+		resetMarginValue,
+		hasMarginValue,
+	};
+}
+
+// Props for managing `spacing.blockGap`.
+function useBlockGapProps( name ) {
 	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
 	const resetGapValue = () => setGapValue( undefined );
 	const hasGapValue = () => !! gapValue;
+	return {
+		gapValue,
+		setGapValue,
+		resetGapValue,
+		hasGapValue,
+	};
+}
+
+export default function DimensionsPanel( { name } ) {
+	const showContentSizeControl = useHasContentSize( name );
+	const showWideSizeControl = useHasWideSize( name );
+	const showPaddingControl = useHasPadding( name );
+	const showMarginControl = useHasMargin( name );
+	const showGapControl = useHasGap( name );
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+
+	// Props for managing `layout.contentSize`.
+	const {
+		contentSizeValue,
+		setContentSizeValue,
+		hasUserSetContentSizeValue,
+		resetContentSizeValue,
+	} = useContentSizeProps( name );
+
+	// Props for managing `layout.wideSize`.
+	const {
+		wideSizeValue,
+		setWideSizeValue,
+		hasUserSetWideSizeValue,
+		resetWideSizeValue,
+	} = useWideSizeProps( name );
+
+	// Props for managing `spacing.padding`.
+	const {
+		paddingValues,
+		paddingSides,
+		isAxialPadding,
+		setPaddingValues,
+		resetPaddingValue,
+		hasPaddingValue,
+	} = usePaddingProps( name );
+
+	// Props for managing `spacing.margin`.
+	const {
+		marginValues,
+		marginSides,
+		isAxialMargin,
+		setMarginValues,
+		resetMarginValue,
+		hasMarginValue,
+	} = useMarginProps( name );
+
+	// Props for managing `spacing.blockGap`.
+	const { gapValue, setGapValue, resetGapValue, hasGapValue } =
+		useBlockGapProps( name );
 
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
 		resetGapValue();
+		resetContentSizeValue();
+		resetWideSizeValue();
 	};
 
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+			{ ( showContentSizeControl || showWideSizeControl ) && (
+				<span className="span-columns">
+					{ __( 'Set the width of the main content area.' ) }
+				</span>
+			) }
+			{ showContentSizeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Content size' ) }
+					hasValue={ hasUserSetContentSizeValue }
+					onDeselect={ resetContentSizeValue }
+					isShownByDefault={ true }
+				>
+					<HStack alignment="flex-end" justify="flex-start">
+						<UnitControl
+							label={ __( 'Content' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ contentSizeValue || '' }
+							onChange={ ( nextContentSize ) => {
+								setContentSizeValue( nextContentSize );
+							} }
+							units={ units }
+						/>
+						<View>
+							<Icon icon={ positionCenter } />
+						</View>
+					</HStack>
+				</ToolsPanelItem>
+			) }
+			{ showWideSizeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Wide size' ) }
+					hasValue={ hasUserSetWideSizeValue }
+					onDeselect={ resetWideSizeValue }
+					isShownByDefault={ true }
+				>
+					<HStack alignment="flex-end" justify="flex-start">
+						<UnitControl
+							label={ __( 'Wide' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ wideSizeValue || '' }
+							onChange={ ( nextWideSize ) => {
+								setWideSizeValue( nextWideSize );
+							} }
+							units={ units }
+						/>
+						<View>
+							<Icon icon={ stretchWide } />
+						</View>
+					</HStack>
+				</ToolsPanelItem>
+			) }
 			{ showPaddingControl && (
 				<ToolsPanelItem
 					hasValue={ hasPaddingValue }

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

@@ -1,14 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	mergeWith,
-	pickBy,
-	isEmpty,
-	isObject,
-	identity,
-	mapValues,
-} from 'lodash';
+import { mergeWith, pickBy, isEmpty, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -22,6 +15,8 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { GlobalStylesContext } from './context';
 
+const identity = ( x ) => x;
+
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
 	// in which case we want the new array of values
@@ -36,7 +31,11 @@ export function mergeBaseAndUserConfigs( base, user ) {
 }
 
 const cleanEmptyObject = ( object ) => {
-	if ( ! isObject( object ) || Array.isArray( object ) ) {
+	if (
+		object === null ||
+		typeof object !== 'object' ||
+		Array.isArray( object )
+	) {
 		return object;
 	}
 	const cleanedNestedObjects = pickBy(

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

@@ -159,6 +159,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'backgroundColor',
 	'color',
 	'linkColor',
+	'buttonColor',
 	'fontFamily',
 	'fontSize',
 	'fontStyle',
@@ -167,6 +168,8 @@ const ROOT_BLOCK_SUPPORTS = [
 	'textDecoration',
 	'textTransform',
 	'padding',
+	'contentSize',
+	'wideSize',
 ];
 
 export function getSupportedGlobalStylesPanels( name ) {
@@ -181,6 +184,21 @@ export function getSupportedGlobalStylesPanels( name ) {
 	}
 
 	const supportKeys = [];
+
+	// Check for blockGap support.
+	// Block spacing support doesn't map directly to a single style property, so needs to be handled separately.
+	// Also, only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
+	if (
+		blockType?.supports?.spacing?.blockGap &&
+		blockType?.supports?.spacing?.__experimentalSkipSerialization !==
+			true &&
+		! blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
+			( spacingType ) => spacingType === 'blockGap'
+		)
+	) {
+		supportKeys.push( 'blockGap' );
+	}
+
 	Object.keys( STYLE_PROPERTY ).forEach( ( styleName ) => {
 		if ( ! STYLE_PROPERTY[ styleName ].support ) {
 			return;

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

@@ -58,7 +58,10 @@ function Palette( { name } ) {
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem path={ screenPath }>
+				<NavigationButtonAsItem
+					path={ screenPath }
+					aria-label={ __( 'Color palettes' ) }
+				>
 					<HStack
 						direction={
 							colors.length === 0 ? 'row-reverse' : 'row'

package/src/components/global-styles/screen-block-list.js

@@ -60,8 +60,17 @@ function BlockMenuItem( { block } ) {
 		return null;
 	}
 
+	const navigationButtonLabel = sprintf(
+		// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+		__( '%s block styles' ),
+		block.title
+	);
+
 	return (
-		<NavigationButtonAsItem path={ '/blocks/' + block.name }>
+		<NavigationButtonAsItem
+			path={ '/blocks/' + block.name }
+			aria-label={ navigationButtonLabel }
+		>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>

package/src/components/global-styles/screen-button-color.js

@@ -0,0 +1,102 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+} from './hooks';
+
+function ScreenButtonColor( { name } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+
+	const colorsPerOrigin = useColorsPerOrigin( name );
+
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
+	const hasButtonColor =
+		supports.includes( 'buttonColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const [ buttonTextColor, setButtonTextColor ] = useStyle(
+		'elements.button.color.text',
+		name
+	);
+	const [ userButtonTextColor ] = useStyle(
+		'elements.button.color.text',
+		name,
+		'user'
+	);
+
+	const [ buttonBgColor, setButtonBgColor ] = useStyle(
+		'elements.button.color.background',
+		name
+	);
+	const [ userButtonBgColor ] = useStyle(
+		'elements.button.color.background',
+		name,
+		'user'
+	);
+
+	if ( ! hasButtonColor ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Buttons' ) }
+				description={ __(
+					'Set the default colors used for buttons across the site.'
+				) }
+			/>
+
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Text color' ) }
+			</h4>
+
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonTextColor }
+				onColorChange={ setButtonTextColor }
+				clearable={ buttonTextColor === userButtonTextColor }
+			/>
+
+			<h4 className="edit-site-global-styles-section-title">
+				{ __( 'Background color' ) }
+			</h4>
+
+			<ColorGradientControl
+				className="edit-site-screen-button-color__control"
+				colors={ colorsPerOrigin }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				__experimentalHasMultipleOrigins
+				showTitle={ false }
+				enableAlpha
+				__experimentalIsRenderedInSidebar
+				colorValue={ buttonBgColor }
+				onColorChange={ setButtonBgColor }
+				clearable={ buttonBgColor === userButtonBgColor }
+			/>
+		</>
+	);
+}
+
+export default ScreenButtonColor;

package/src/components/global-styles/screen-color-palette.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { TabPanel } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -16,8 +12,6 @@ import GradientPalettePanel from './gradients-palette-panel';
 import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
-	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-
 	return (
 		<>
 			<ScreenHeader
@@ -26,27 +20,31 @@ function ScreenColorPalette( { name } ) {
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
 				) }
 			/>
-			<ToggleGroupControl
-				className="edit-site-screen-color-palette-toggle"
-				value={ currentTab }
-				onChange={ setCurrentTab }
-				label={ __( 'Select palette type' ) }
-				hideLabelFromVision
-				isBlock
+			<TabPanel
+				tabs={ [
+					{
+						name: 'solid',
+						title: 'Solid color',
+						value: 'solid',
+					},
+					{
+						name: 'gradient',
+						title: 'Gradient',
+						value: 'gradient',
+					},
+				] }
 			>
-				<ToggleGroupControlOption
-					value="solid"
-					label={ __( 'Solid' ) }
-				/>
-				<ToggleGroupControlOption
-					value="gradient"
-					label={ __( 'Gradient' ) }
-				/>
-			</ToggleGroupControl>
-			{ currentTab === 'solid' && <ColorPalettePanel name={ name } /> }
-			{ currentTab === 'gradient' && (
-				<GradientPalettePanel name={ name } />
-			) }
+				{ ( tab ) => (
+					<>
+						{ tab.value === 'solid' && (
+							<ColorPalettePanel name={ name } />
+						) }
+						{ tab.value === 'gradient' && (
+							<GradientPalettePanel name={ name } />
+						) }
+					</>
+				) }
+			</TabPanel>
 		</>
 	);
 }

package/src/components/global-styles/screen-colors.js

@@ -6,6 +6,7 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	__experimentalZStack as ZStack,
 	FlexItem,
 	ColorIndicator,
 } from '@wordpress/components';
@@ -33,11 +34,15 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/background' }
+			aria-label={ __( 'Colors background styles' ) }
+		>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
 						colorValue={ gradientValue ?? backgroundColor }
+						data-testid="background-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
@@ -56,10 +61,16 @@ function TextColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/text' }
+			aria-label={ __( 'Colors text styles' ) }
+		>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator colorValue={ color } />
+					<ColorIndicator
+						colorValue={ color }
+						data-testid="text-color-indicator"
+					/>
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
@@ -71,23 +82,59 @@ function LinkColorItem( { name, parentMenu } ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const hasSupport = supports.includes( 'linkColor' );
 	const [ color ] = useStyle( 'elements.link.color.text', name );
+	const [ colorHover ] = useStyle( 'elements.link.:hover.color.text', name );
 
 	if ( ! hasSupport ) {
 		return null;
 	}
 
 	return (
-		<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/link' }
+			aria-label={ __( 'Colors link styles' ) }
+		>
 			<HStack justify="flex-start">
-				<ColorIndicatorWrapper expanded={ false }>
-					<ColorIndicator colorValue={ color } />
-				</ColorIndicatorWrapper>
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ colorHover } />
+					</ColorIndicatorWrapper>
+				</ZStack>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
 }
 
+function ButtonColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'buttonColor' );
+	const [ color ] = useStyle( 'elements.button.color.text', name );
+	const [ bgColor ] = useStyle( 'elements.button.color.background', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem path={ parentMenu + '/colors/button' }>
+			<HStack justify="flex-start">
+				<ZStack isLayered={ false } offset={ -8 }>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ bgColor } />
+					</ColorIndicatorWrapper>
+					<ColorIndicatorWrapper expanded={ false }>
+						<ColorIndicator colorValue={ color } />
+					</ColorIndicatorWrapper>
+				</ZStack>
+				<FlexItem>{ __( 'Buttons' ) }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
 function ScreenColors( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
@@ -119,6 +166,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<ButtonColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 						</ItemGroup>
 					</VStack>
 				</VStack>