@wordpress/edit-site 4.11.0 → 4.13.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,25 @@ function splitStyleValue( value ) {
 	return value;
 }
 
+function splitGapValue( value ) {
+	// Check for shorthand value (a string value).
+	if ( value && typeof value === 'string' ) {
+		// Convert to value for individual sides for BoxControl.
+		return {
+			top: value,
+			right: value,
+			bottom: value,
+			left: value,
+		};
+	}
+
+	return {
+		...value,
+		right: value?.left,
+		bottom: value?.top,
+	};
+}
+
 // Props for managing `layout.contentSize`.
 function useContentSizeProps( name ) {
 	const [ contentSizeValue, setContentSizeValue ] = useSetting(
@@ -160,8 +193,9 @@ function usePaddingProps( name ) {
 		setRawPadding( padding );
 	};
 	const resetPaddingValue = () => setPaddingValues( {} );
-	const hasPaddingValue = () =>
-		!! paddingValues && Object.keys( paddingValues ).length;
+	const [ userSetPaddingValue ] = useStyle( 'spacing.padding', name, 'user' );
+	// The `hasPaddingValue` check does not need a parsed value, as `userSetPaddingValue` will be `undefined` if not set.
+	const hasPaddingValue = () => !! userSetPaddingValue;
 
 	return {
 		paddingValues,
@@ -203,11 +237,29 @@ function useMarginProps( name ) {
 // Props for managing `spacing.blockGap`.
 function useBlockGapProps( name ) {
 	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+	const gapValues = splitGapValue( gapValue );
+	const setGapValues = ( nextBoxGapValue ) => {
+		if ( ! nextBoxGapValue ) {
+			setGapValue( null );
+		}
+		setGapValue( {
+			top: nextBoxGapValue?.top,
+			left: nextBoxGapValue?.left,
+		} );
+	};
+	const gapSides = useCustomSides( name, 'blockGap' );
+	const isAxialGap =
+		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const resetGapValue = () => setGapValue( undefined );
-	const hasGapValue = () => !! gapValue;
+	const [ userSetGapValue ] = useStyle( 'spacing.blockGap', name, 'user' );
+	const hasGapValue = () => !! userSetGapValue;
 	return {
 		gapValue,
+		gapValues,
+		gapSides,
+		isAxialGap,
 		setGapValue,
+		setGapValues,
 		resetGapValue,
 		hasGapValue,
 	};
@@ -219,6 +271,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 ] || [
 			'%',
@@ -266,8 +319,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();
@@ -340,16 +401,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 && (
@@ -358,16 +435,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 && (
@@ -377,14 +470,27 @@ export default function DimensionsPanel( { name } ) {
 					onDeselect={ resetGapValue }
 					isShownByDefault={ true }
 				>
-					<UnitControl
-						label={ __( 'Block spacing' ) }
-						__unstableInputWidth="80px"
-						min={ 0 }
-						onChange={ setGapValue }
-						units={ units }
-						value={ gapValue }
-					/>
+					{ 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 }
+						/>
+					) }
 				</ToolsPanelItem>
 			) }
 		</ToolsPanel>

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

@@ -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 )
 			);
@@ -170,6 +170,7 @@ const ROOT_BLOCK_SUPPORTS = [
 	'padding',
 	'contentSize',
 	'wideSize',
+	'blockGap',
 ];
 
 export function getSupportedGlobalStylesPanels( name ) {

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

@@ -24,7 +24,7 @@ function ScreenColorPalette( { name } ) {
 				tabs={ [
 					{
 						name: 'solid',
-						title: 'Solid color',
+						title: 'Solid',
 						value: 'solid',
 					},
 					{

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

@@ -45,7 +45,9 @@ function BackgroundColorItem( { name, parentMenu } ) {
 						data-testid="background-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
-				<FlexItem>{ __( 'Background' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Background' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -72,7 +74,9 @@ function TextColorItem( { name, parentMenu } ) {
 						data-testid="text-color-indicator"
 					/>
 				</ColorIndicatorWrapper>
-				<FlexItem>{ __( 'Text' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Text' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -102,7 +106,39 @@ function LinkColorItem( { name, parentMenu } ) {
 						<ColorIndicator colorValue={ colorHover } />
 					</ColorIndicatorWrapper>
 				</ZStack>
-				<FlexItem>{ __( 'Links' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Links' ) }
+				</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+function HeadingColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'color' );
+	const [ color ] = useStyle( 'elements.heading.color.text', name );
+	const [ bgColor ] = useStyle( 'elements.heading.color.background', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButtonAsItem
+			path={ parentMenu + '/colors/heading' }
+			aria-label={ __( 'Colors heading styles' ) }
+		>
+			<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>{ __( 'Headings' ) }</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -129,7 +165,9 @@ function ButtonColorItem( { name, parentMenu } ) {
 						<ColorIndicator colorValue={ color } />
 					</ColorIndicatorWrapper>
 				</ZStack>
-				<FlexItem>{ __( 'Buttons' ) }</FlexItem>
+				<FlexItem className="edit-site-global-styles__color-label">
+					{ __( 'Buttons' ) }
+				</FlexItem>
 			</HStack>
 		</NavigationButtonAsItem>
 	);
@@ -166,6 +204,10 @@ function ScreenColors( { name } ) {
 								name={ name }
 								parentMenu={ parentMenu }
 							/>
+							<HeadingColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
 							<ButtonColorItem
 								name={ name }
 								parentMenu={ parentMenu }

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

@@ -0,0 +1,201 @@
+/**
+ * WordPress dependencies
+ */
+import { sprintf, __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { __experimentalColorGradientControl as ColorGradientControl } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import {
+	getSupportedGlobalStylesPanels,
+	useSetting,
+	useStyle,
+	useColorsPerOrigin,
+	useGradientsPerOrigin,
+} from './hooks';
+
+function ScreenHeadingColor( { name } ) {
+	const [ selectedLevel, setCurrentTab ] = useState( 'heading' );
+
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ gradients ] = useSetting( 'color.gradients', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+	const [ areCustomGradientsEnabled ] = useSetting(
+		'color.customGradient',
+		name
+	);
+	const [ isTextEnabled ] = useSetting( 'color.text', name );
+	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
+
+	const colorsPerOrigin = useColorsPerOrigin( name );
+	const gradientsPerOrigin = useGradientsPerOrigin( name );
+
+	const hasTextColor =
+		supports.includes( 'color' ) &&
+		isTextEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const hasBackgroundColor =
+		supports.includes( 'backgroundColor' ) &&
+		isBackgroundEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+	const hasGradientColor =
+		supports.includes( 'background' ) &&
+		( gradients.length > 0 || areCustomGradientsEnabled );
+
+	const [ color, setColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name
+	);
+	const [ userColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.text',
+		name,
+		'user'
+	);
+
+	const [ backgroundColor, setBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name
+	);
+	const [ userBackgroundColor ] = useStyle(
+		'elements.' + selectedLevel + '.color.background',
+		name,
+		'user'
+	);
+	const [ gradient, setGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name
+	);
+	const [ userGradient ] = useStyle(
+		'elements.' + selectedLevel + '.color.gradient',
+		name,
+		'user'
+	);
+
+	if ( ! hasTextColor && ! hasBackgroundColor && ! hasGradientColor ) {
+		return null;
+	}
+
+	let backgroundSettings = {};
+	if ( hasBackgroundColor ) {
+		backgroundSettings = {
+			colorValue: backgroundColor,
+			onColorChange: setBackgroundColor,
+		};
+		if ( backgroundColor ) {
+			backgroundSettings.clearable =
+				backgroundColor === userBackgroundColor;
+		}
+	}
+
+	let gradientSettings = {};
+	if ( hasGradientColor ) {
+		gradientSettings = {
+			gradientValue: gradient,
+			onGradientChange: setGradient,
+		};
+		if ( gradient ) {
+			gradientSettings.clearable = gradient === userGradient;
+		}
+	}
+
+	const controlProps = {
+		...backgroundSettings,
+		...gradientSettings,
+	};
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Headings' ) }
+				description={ __(
+					'Set the default color used for headings across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen-heading-color">
+				<h4>{ __( 'Select heading level' ) }</h4>
+
+				<ToggleGroupControl
+					label={ __( 'Select heading level' ) }
+					hideLabelFromVision={ true }
+					value={ selectedLevel }
+					onChange={ setCurrentTab }
+					isBlock
+				>
+					<ToggleGroupControlOption
+						value="heading"
+						/* translators: 'All' refers to selecting all heading levels 
+						and applying the same style to h1-h6. */
+						label={ __( 'All' ) }
+					/>
+					<ToggleGroupControlOption value="h1" label={ __( 'H1' ) } />
+					<ToggleGroupControlOption value="h2" label={ __( 'H2' ) } />
+					<ToggleGroupControlOption value="h3" label={ __( 'H3' ) } />
+					<ToggleGroupControlOption value="h4" label={ __( 'H4' ) } />
+					<ToggleGroupControlOption value="h5" label={ __( 'H5' ) } />
+					<ToggleGroupControlOption value="h6" label={ __( 'H6' ) } />
+				</ToggleGroupControl>
+			</div>
+			{ hasTextColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Text color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Text color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-text-color__control"
+						colors={ colorsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						colorValue={ color }
+						onColorChange={ setColor }
+						clearable={ color === userColor }
+					/>
+				</div>
+			) }
+			{ hasBackgroundColor && (
+				<div className="edit-site-global-styles-screen-heading-color">
+					<h4>
+						{ selectedLevel === 'heading'
+							? __( 'Background color for all heading levels' )
+							: sprintf(
+									/* translators: %s: heading level (h1-h6) */
+									__( 'Background color for %s' ),
+									selectedLevel.toUpperCase()
+							  ) }
+					</h4>
+					<ColorGradientControl
+						className="edit-site-screen-heading-background-color__control"
+						colors={ colorsPerOrigin }
+						gradients={ gradientsPerOrigin }
+						disableCustomColors={ ! areCustomSolidsEnabled }
+						disableCustomGradients={ ! areCustomGradientsEnabled }
+						__experimentalHasMultipleOrigins
+						showTitle={ false }
+						enableAlpha
+						__experimentalIsRenderedInSidebar
+						{ ...controlProps }
+					/>
+				</div>
+			) }
+		</>
+	);
+}
+
+export default ScreenHeadingColor;

package/src/components/global-styles/screen-typography-element.js

@@ -18,6 +18,10 @@ const elements = {
 		description: __( 'Manage the fonts and typography used on the links.' ),
 		title: __( 'Links' ),
 	},
+	heading: {
+		description: __( 'Manage the fonts and typography used on headings.' ),
+		title: __( 'Headings' ),
+	},
 	button: {
 		description: __( 'Manage the fonts and typography used on buttons.' ),
 		title: __( 'Buttons' ),

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

@@ -104,6 +104,12 @@ function ScreenTypography( { name } ) {
 								element="link"
 								label={ __( 'Links' ) }
 							/>
+							<Item
+								name={ name }
+								parentMenu={ parentMenu }
+								element="heading"
+								label={ __( 'Headings' ) }
+							/>
 							<Item
 								name={ name }
 								parentMenu={ parentMenu }

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

@@ -21,6 +21,12 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-typography-panel__full-width-control {
+	grid-column: 1 / -1;
+	max-width: 100%;
+}
+
+.edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;
 }
@@ -41,6 +47,7 @@
 	.component-color-indicator {
 		// Show a diagonal line (crossed out) for empty swatches.
 		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+		flex-shrink: 0;
 	}
 }
 
@@ -72,12 +79,6 @@
 	padding: $grid-unit-20;
 }
 
-.edit-site-screen-background-color__control {
-	.block-editor-color-gradient-control__tab-panel {
-		padding: $grid-unit-20;
-	}
-}
-
 .edit-site-global-styles-variations_item {
 	box-sizing: border-box;
 
@@ -107,4 +108,11 @@
 .edit-site-global-styles__color-indicator-wrapper {
 	// Match the height of the rest of the icons (24px).
 	height: $grid-unit * 3;
+	flex-shrink: 0;
+}
+
+.edit-site-global-styles__color-label {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }