@wordpress/block-editor 11.6.0 → 11.8.0

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

@@ -31,6 +31,8 @@ const VALID_SETTINGS = [
 	'shadow.presets',
 	'shadow.defaultPresets',
 	'color.background',
+	'color.button',
+	'color.caption',
 	'color.custom',
 	'color.customDuotone',
 	'color.customGradient',
@@ -39,6 +41,7 @@ const VALID_SETTINGS = [
 	'color.defaultPalette',
 	'color.duotone',
 	'color.gradients',
+	'color.heading',
 	'color.link',
 	'color.palette',
 	'color.text',
@@ -251,6 +254,41 @@ 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;
+		}
+
+		// If filters are not supported by the block/element, disable duotone.
+		if ( ! supportedStyles.includes( 'filter' ) ) {
+			updatedSettings.color.defaultDuotone = false;
+			updatedSettings.color.customDuotone = false;
+		}
+
 		[
 			'lineHeight',
 			'fontStyle',
@@ -328,6 +366,10 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		updatedSettings.shadow = supportedStyles.includes( 'shadow' )
+			? updatedSettings.shadow
+			: false;
+
 		return updatedSettings;
 	}, [ parentSettings, supportedStyles, supports ] );
 }
@@ -379,3 +421,51 @@ export function useColorsPerOrigin( settings ) {
 		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

@@ -3,8 +3,8 @@ export {
 	useGlobalSetting,
 	useGlobalStyle,
 	useSettingsForBlockElement,
-	useColorsPerOrigin,
 } from './hooks';
+export { getBlockCSSSelector } from './get-block-css-selector';
 export { useGlobalStylesOutput } from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
 export {
@@ -16,3 +16,6 @@ export {
 	useHasDimensionsPanel,
 } from './dimensions-panel';
 export { default as BorderPanel, useHasBorderPanel } from './border-panel';
+export { default as ColorPanel, useHasColorPanel } from './color-panel';
+export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
+export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';

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

@@ -0,0 +1,42 @@
+.block-editor-global-styles-effects-panel__toggle-icon {
+	fill: currentColor;
+}
+
+.block-editor-global-styles-effects-panel__shadow-popover-container {
+	width: 230px;
+}
+
+.block-editor-global-styles-effects-panel__shadow-dropdown {
+	display: block;
+	padding: 0;
+
+	> button {
+		width: 100%;
+		padding: $grid-unit-10;
+
+		&.is-open {
+			background-color: $gray-100;
+		}
+	}
+}
+
+// wrapper to clip the shadow beyond 6px
+.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+	padding: 6px;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+// These styles are similar to the color palette.
+.block-editor-global-styles-effects-panel__shadow-indicator {
+	color: $gray-800;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+	cursor: pointer;
+	padding: 0;
+
+	height: 24px;
+	width: 24px;
+}

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;}'
 			);
 		} );
@@ -612,7 +612,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }body .is-layout-flex { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -628,7 +628,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }body .is-layout-flex { gap: 12px; }body { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.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; }'
+				'.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; }'
 			);
 		} );
 
@@ -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,
@@ -685,9 +713,10 @@ describe( 'global styles renderer', () => {
 				'core/image': {
 					name: imageBlock.name,
 					selector: imageSupports.__experimentalSelector,
-					duotoneSelector: imageSupports.color.__experimentalDuotone,
+					duotoneSelector: '.my-image img',
 					fallbackGapValue: undefined,
 					featureSelectors: {
+						root: '.my-image',
 						border: '.my-image img, .my-image .crop-area',
 					},
 					hasLayoutSupport: false,

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

@@ -20,6 +20,7 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import { getValueFromVariable } from './utils';
+import { immutableSet } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -161,15 +162,13 @@ export default function TypographyPanel( {
 		const slug = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				fontFamily: slug
-					? `var:preset|font-family|${ slug }`
-					: newValue,
-			},
-		} );
+		onChange(
+			immutableSet(
+				value,
+				[ 'typography', 'fontFamily' ],
+				slug ? `var:preset|font-family|${ slug }` : newValue
+			)
+		);
 	};
 	const hasFontFamily = () => !! value?.typography?.fontFamily;
 	const resetFontFamily = () => setFontFamily( undefined );
@@ -188,13 +187,9 @@ export default function TypographyPanel( {
 			? `var:preset|font-size|${ metadata?.slug }`
 			: newValue;
 
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				fontSize: actualValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'fontSize' ], actualValue )
+		);
 	};
 	const hasFontSize = () => !! value?.typography?.fontSize;
 	const resetFontSize = () => setFontSize( undefined );
@@ -229,13 +224,9 @@ export default function TypographyPanel( {
 	const hasLineHeightEnabled = useHasLineHeightControl( settings );
 	const lineHeight = decodeValue( inheritedValue?.typography?.lineHeight );
 	const setLineHeight = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				lineHeight: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'lineHeight' ], newValue )
+		);
 	};
 	const hasLineHeight = () => !! value?.typography?.lineHeight;
 	const resetLineHeight = () => setLineHeight( undefined );
@@ -246,13 +237,9 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.letterSpacing
 	);
 	const setLetterSpacing = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				letterSpacing: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'letterSpacing' ], newValue )
+		);
 	};
 	const hasLetterSpacing = () => !! value?.typography?.letterSpacing;
 	const resetLetterSpacing = () => setLetterSpacing( undefined );
@@ -261,13 +248,9 @@ export default function TypographyPanel( {
 	const hasTextColumnsControl = useHasTextColumnsControl( settings );
 	const textColumns = decodeValue( inheritedValue?.typography?.textColumns );
 	const setTextColumns = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textColumns: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textColumns' ], newValue )
+		);
 	};
 	const hasTextColumns = () => !! value?.typography?.textColumns;
 	const resetTextColumns = () => setTextColumns( undefined );
@@ -278,13 +261,9 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.textTransform
 	);
 	const setTextTransform = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textTransform: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textTransform' ], newValue )
+		);
 	};
 	const hasTextTransform = () => !! value?.typography?.textTransform;
 	const resetTextTransform = () => setTextTransform( undefined );
@@ -295,13 +274,9 @@ export default function TypographyPanel( {
 		inheritedValue?.typography?.textDecoration
 	);
 	const setTextDecoration = ( newValue ) => {
-		onChange( {
-			...value,
-			typography: {
-				...value?.typography,
-				textDecoration: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'typography', 'textDecoration' ], newValue )
+		);
 	};
 	const hasTextDecoration = () => !! value?.typography?.textDecoration;
 	const resetTextDecoration = () => setTextDecoration( undefined );