@wordpress/block-editor 11.5.0 → 11.7.0

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

@@ -28,6 +28,7 @@ import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';
 import { cleanEmptyObject } from '../../hooks/utils';
+import { immutableSet } from '../../utils/object';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -223,13 +224,9 @@ export default function DimensionsPanel( {
 		useHasContentSize( settings ) && includeLayoutControls;
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
 	const setContentSizeValue = ( newValue ) => {
-		onChange( {
-			...value,
-			layout: {
-				...value?.layout,
-				contentSize: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'layout', 'contentSize' ], newValue )
+		);
 	};
 	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
 	const resetContentSizeValue = () => setContentSizeValue( undefined );
@@ -239,13 +236,7 @@ export default function DimensionsPanel( {
 		useHasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
 	const setWideSizeValue = ( newValue ) => {
-		onChange( {
-			...value,
-			layout: {
-				...value?.layout,
-				wideSize: newValue,
-			},
-		} );
+		onChange( immutableSet( value, [ 'layout', 'wideSize' ], newValue ) );
 	};
 	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
@@ -262,13 +253,7 @@ export default function DimensionsPanel( {
 		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setPaddingValues = ( newPaddingValues ) => {
 		const padding = filterValuesBySides( newPaddingValues, paddingSides );
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				padding,
-			},
-		} );
+		onChange( immutableSet( value, [ 'spacing', 'padding' ], padding ) );
 	};
 	const hasPaddingValue = () =>
 		!! value?.spacing?.padding &&
@@ -288,13 +273,7 @@ export default function DimensionsPanel( {
 		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setMarginValues = ( newMarginValues ) => {
 		const margin = filterValuesBySides( newMarginValues, marginSides );
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				margin,
-			},
-		} );
+		onChange( immutableSet( value, [ 'spacing', 'margin' ], margin ) );
 	};
 	const hasMarginValue = () =>
 		!! value?.spacing?.margin &&
@@ -312,13 +291,9 @@ export default function DimensionsPanel( {
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setGapValue = ( newGapValue ) => {
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				blockGap: newGapValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'spacing', 'blockGap' ], newGapValue )
+		);
 	};
 	const setGapValues = ( nextBoxGapValue ) => {
 		if ( ! nextBoxGapValue ) {
@@ -341,13 +316,9 @@ export default function DimensionsPanel( {
 	const showMinHeightControl = useHasMinHeight( settings );
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
-		onChange( {
-			...value,
-			dimensions: {
-				...value?.dimensions,
-				minHeight: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'dimensions', 'minHeight' ], newValue )
+		);
 	};
 	const resetMinHeightValue = () => {
 		setMinHeightValue( undefined );

package/src/components/global-styles/get-block-css-selector.js

@@ -0,0 +1,129 @@
+/**
+ * External dependencies
+ */
+import { get, isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { scopeSelector } from './utils';
+
+/**
+ * Determine the CSS selector for the block type and target provided, returning
+ * it if available.
+ *
+ * @param {import('@wordpress/blocks').Block} blockType        The block's type.
+ * @param {string|string[]}                   target           The desired selector's target e.g. `root`, delimited string, or array path.
+ * @param {Object}                            options          Options object.
+ * @param {boolean}                           options.fallback Whether or not to fallback to broader selector.
+ *
+ * @return {?string} The CSS selector or `null` if no selector available.
+ */
+export function getBlockCSSSelector(
+	blockType,
+	target = 'root',
+	options = {}
+) {
+	if ( ! target ) {
+		return null;
+	}
+
+	const { fallback = false } = options;
+	const { name, selectors, supports } = blockType;
+
+	const hasSelectors = ! isEmpty( selectors );
+	const path = Array.isArray( target ) ? target.join( '.' ) : target;
+
+	// Duotone ( no fallback selectors for Duotone ).
+	if ( path === 'filter.duotone' ) {
+		// If selectors API in use, only use its value or null.
+		if ( hasSelectors ) {
+			return get( selectors, path, null );
+		}
+
+		// Selectors API, not available, check for old experimental selector.
+		return get( supports, 'color.__experimentalDuotone', null );
+	}
+
+	// Root selector.
+
+	// Calculated before returning as it can be used as a fallback for feature
+	// selectors later on.
+	let rootSelector = null;
+
+	if ( hasSelectors && selectors.root ) {
+		// Use the selectors API if available.
+		rootSelector = selectors?.root;
+	} else if ( supports?.__experimentalSelector ) {
+		// Use the old experimental selector supports property if set.
+		rootSelector = supports.__experimentalSelector;
+	} else {
+		// If no root selector found, generate default block class selector.
+		rootSelector =
+			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
+	}
+
+	// Return selector if it's the root target we are looking for.
+	if ( path === 'root' ) {
+		return rootSelector;
+	}
+
+	// If target is not `root` or `duotone` we have a feature or subfeature
+	// as the target. If the target is a string convert to an array.
+	const pathArray = Array.isArray( target ) ? target : target.split( '.' );
+
+	// Feature selectors ( may fallback to root selector );
+	if ( pathArray.length === 1 ) {
+		const fallbackSelector = fallback ? rootSelector : null;
+
+		// Prefer the selectors API if available.
+		if ( hasSelectors ) {
+			// Get selector from either `feature.root` or shorthand path.
+			const featureSelector =
+				get( selectors, `${ path }.root`, null ) ||
+				get( selectors, path, null );
+
+			// Return feature selector if found or any available fallback.
+			return featureSelector || fallbackSelector;
+		}
+
+		// Try getting old experimental supports selector value.
+		const featureSelector = get(
+			supports,
+			`${ path }.__experimentalSelector`,
+			null
+		);
+
+		// If nothing to work with, provide fallback selector if available.
+		if ( ! featureSelector ) {
+			return fallbackSelector;
+		}
+
+		// Scope the feature selector by the block's root selector.
+		return scopeSelector( rootSelector, featureSelector );
+	}
+
+	// Subfeature selector.
+	// This may fallback either to parent feature or root selector.
+	let subfeatureSelector;
+
+	// Use selectors API if available.
+	if ( hasSelectors ) {
+		subfeatureSelector = get( selectors, path, null );
+	}
+
+	// Only return if we have a subfeature selector.
+	if ( subfeatureSelector ) {
+		return subfeatureSelector;
+	}
+
+	// To this point we don't have a subfeature selector. If a fallback has been
+	// requested, remove subfeature from target path and return results of a
+	// call for the parent feature's selector.
+	if ( fallback ) {
+		return getBlockCSSSelector( blockType, pathArray[ 0 ], options );
+	}
+
+	// We tried.
+	return null;
+}

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

@@ -10,6 +10,7 @@ import { get, set } from 'lodash';
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -30,6 +31,8 @@ const VALID_SETTINGS = [
 	'shadow.presets',
 	'shadow.defaultPresets',
 	'color.background',
+	'color.button',
+	'color.caption',
 	'color.custom',
 	'color.customDuotone',
 	'color.customGradient',
@@ -38,6 +41,7 @@ const VALID_SETTINGS = [
 	'color.defaultPalette',
 	'color.duotone',
 	'color.gradients',
+	'color.heading',
 	'color.link',
 	'color.palette',
 	'color.text',
@@ -64,6 +68,7 @@ const VALID_SETTINGS = [
 	'typography.fontWeight',
 	'typography.letterSpacing',
 	'typography.lineHeight',
+	'typography.textColumns',
 	'typography.textDecoration',
 	'typography.textTransform',
 ];
@@ -177,7 +182,7 @@ export function useGlobalStyle(
 	switch ( source ) {
 		case 'all':
 			rawResult =
-				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				// The styles.css path is allowed to be empty, so don't revert to base if undefined.
 				finalPath === 'styles.css'
 					? get( userConfig, finalPath )
 					: get( mergedConfig, finalPath );
@@ -249,6 +254,35 @@ export function useSettingsForBlockElement(
 			};
 		}
 
+		updatedSettings.color = {
+			...updatedSettings.color,
+			text:
+				updatedSettings.color?.text &&
+				supportedStyles.includes( 'color' ),
+			background:
+				updatedSettings.color?.background &&
+				( supportedStyles.includes( 'background' ) ||
+					supportedStyles.includes( 'backgroundColor' ) ),
+			button:
+				updatedSettings.color?.button &&
+				supportedStyles.includes( 'buttonColor' ),
+			heading:
+				updatedSettings.color?.heading &&
+				supportedStyles.includes( 'headingColor' ),
+			link:
+				updatedSettings.color?.link &&
+				supportedStyles.includes( 'linkColor' ),
+			caption:
+				updatedSettings.color?.caption &&
+				supportedStyles.includes( 'captionColor' ),
+		};
+
+		// Some blocks can enable background colors but disable gradients.
+		if ( ! supportedStyles.includes( 'background' ) ) {
+			updatedSettings.color.gradients = [];
+			updatedSettings.color.customGradient = false;
+		}
+
 		[
 			'lineHeight',
 			'fontStyle',
@@ -265,6 +299,16 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		// The column-count style is named text column to reduce confusion with
+		// the columns block and manage expectations from the support.
+		// See: https://github.com/WordPress/gutenberg/pull/33587
+		if ( ! supportedStyles.includes( 'columnCount' ) ) {
+			updatedSettings.typography = {
+				...updatedSettings.typography,
+				textColumns: false,
+			};
+		}
+
 		[ 'contentSize', 'wideSize' ].forEach( ( key ) => {
 			if ( ! supportedStyles.includes( key ) ) {
 				updatedSettings.layout = {
@@ -303,6 +347,115 @@ export function useSettingsForBlockElement(
 			};
 		}
 
+		[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
+			if (
+				! supportedStyles.includes(
+					'border' + key.charAt( 0 ).toUpperCase() + key.slice( 1 )
+				)
+			) {
+				updatedSettings.border = {
+					...updatedSettings.border,
+					[ key ]: false,
+				};
+			}
+		} );
+
 		return updatedSettings;
 	}, [ parentSettings, supportedStyles, supports ] );
 }
+
+export function useColorsPerOrigin( settings ) {
+	const customColors = settings?.color?.palette?.custom;
+	const themeColors = settings?.color?.palette?.theme;
+	const defaultColors = settings?.color?.palette?.default;
+	const shouldDisplayDefaultColors = settings?.color?.defaultPalette;
+
+	return useMemo( () => {
+		const result = [];
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				colors: themeColors,
+			} );
+		}
+		if (
+			shouldDisplayDefaultColors &&
+			defaultColors &&
+			defaultColors.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				colors: defaultColors,
+			} );
+		}
+		if ( customColors && customColors.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				colors: customColors,
+			} );
+		}
+		return result;
+	}, [
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+	] );
+}
+
+export function useGradientsPerOrigin( settings ) {
+	const customGradients = settings?.color?.gradients?.custom;
+	const themeGradients = settings?.color?.gradients?.theme;
+	const defaultGradients = settings?.color?.gradients?.default;
+	const shouldDisplayDefaultGradients = settings?.color?.defaultGradients;
+
+	return useMemo( () => {
+		const result = [];
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: _x(
+					'Theme',
+					'Indicates this palette comes from the theme.'
+				),
+				gradients: themeGradients,
+			} );
+		}
+		if (
+			shouldDisplayDefaultGradients &&
+			defaultGradients &&
+			defaultGradients.length
+		) {
+			result.push( {
+				name: _x(
+					'Default',
+					'Indicates this palette comes from WordPress.'
+				),
+				gradients: defaultGradients,
+			} );
+		}
+		if ( customGradients && customGradients.length ) {
+			result.push( {
+				name: _x(
+					'Custom',
+					'Indicates this palette is created by the user.'
+				),
+				gradients: customGradients,
+			} );
+		}
+		return result;
+	}, [
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] );
+}

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

@@ -4,6 +4,7 @@ export {
 	useGlobalStyle,
 	useSettingsForBlockElement,
 } from './hooks';
+export { getBlockCSSSelector } from './get-block-css-selector';
 export { useGlobalStylesOutput } from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
 export {
@@ -14,3 +15,5 @@ export {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
+export { default as BorderPanel, useHasBorderPanel } from './border-panel';
+export { default as ColorPanel, useHasColorPanel } from './color-panel';

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

@@ -480,7 +480,7 @@ describe( 'global styles renderer', () => {
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
 					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
-					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px }.wp-block-image{color: red;}.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; }' +
+					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px}.wp-block-image{color: red;}.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; }' +
 					'.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;}'
 			);
 		} );
@@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group.is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group.is-layout-flex { gap: 12px; }'
+				'.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex.wp-block-group-is-layout-flex { gap: 12px; }'
 			);
 		} );
 
@@ -668,6 +668,34 @@ describe( 'global styles renderer', () => {
 
 	describe( 'getBlockSelectors', () => {
 		it( 'should return block selectors data', () => {
+			const imageSelectors = {
+				root: '.my-image',
+				border: '.my-image img, .my-image .crop-area',
+				filter: { duotone: 'img' },
+			};
+			const imageBlock = {
+				name: 'core/image',
+				selectors: imageSelectors,
+			};
+			const blockTypes = [ imageBlock ];
+
+			expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
+				'core/image': {
+					name: imageBlock.name,
+					selector: imageSelectors.root,
+					duotoneSelector: imageSelectors.filter.duotone,
+					fallbackGapValue: undefined,
+					featureSelectors: {
+						root: '.my-image',
+						border: '.my-image img, .my-image .crop-area',
+						filter: { duotone: 'img' },
+					},
+					hasLayoutSupport: false,
+				},
+			} );
+		} );
+
+		it( 'should return block selectors data with old experimental selectors', () => {
 			const imageSupports = {
 				__experimentalBorder: {
 					radius: true,
@@ -688,6 +716,7 @@ describe( 'global styles renderer', () => {
 					duotoneSelector: imageSupports.color.__experimentalDuotone,
 					fallbackGapValue: undefined,
 					featureSelectors: {
+						root: '.my-image',
 						border: '.my-image img, .my-image .crop-area',
 					},
 					hasLayoutSupport: false,