@wordpress/block-editor 8.0.5 → 8.0.9

package/src/hooks/color.js

@@ -10,7 +10,7 @@ import { isObject, setWith, clone } from 'lodash';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, Platform } from '@wordpress/element';
+import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -31,7 +31,8 @@ import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
-const EMPTY_ARRAY = [];
+
+const EMPTY_OBJECT = {};
 
 const hasColorSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
@@ -217,13 +218,43 @@ function immutableSet( object, path, value ) {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const solids = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	// Some color settings have a special handling for deprecated flags in `useSetting`,
+	// so we can't unwrap them by doing const { ... } = useSetting('color')
+	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
+	const userPalette = useSetting( 'color.palette.custom' );
+	const themePalette = useSetting( 'color.palette.theme' );
+	const defaultPalette = useSetting( 'color.palette.default' );
+	const allSolids = useMemo(
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
+		[ userPalette, themePalette, defaultPalette ]
+	);
+	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
 	const areCustomSolidsEnabled = useSetting( 'color.custom' );
 	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
+	const isBackgroundEnabled = useSetting( 'color.background' );
 	const isLinkEnabled = useSetting( 'color.link' );
 	const isTextEnabled = useSetting( 'color.text' );
-	const isBackgroundEnabled = useSetting( 'color.background' );
+
+	const solidsEnabled =
+		areCustomSolidsEnabled || ! themePalette || themePalette?.length > 0;
+
+	const gradientsEnabled =
+		areCustomGradientsEnabled ||
+		! gradientsPerOrigin?.theme ||
+		gradientsPerOrigin?.theme?.length > 0;
+
+	const allGradients = useMemo(
+		() => [
+			...( gradientsPerOrigin?.custom || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
@@ -239,20 +270,15 @@ export function ColorEdit( props ) {
 	}
 
 	const hasLinkColor =
-		hasLinkColorSupport( blockName ) &&
-		isLinkEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		hasLinkColorSupport( blockName ) && isLinkEnabled && solidsEnabled;
 	const hasTextColor =
-		hasTextColorSupport( blockName ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		hasTextColorSupport( blockName ) && isTextEnabled && solidsEnabled;
 	const hasBackgroundColor =
 		hasBackgroundColorSupport( blockName ) &&
 		isBackgroundEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
+		solidsEnabled;
 	const hasGradientColor =
-		hasGradientSupport( blockName ) &&
-		( gradients.length > 0 || areCustomGradientsEnabled );
+		hasGradientSupport( blockName ) && gradientsEnabled;
 
 	if (
 		! hasLinkColor &&
@@ -266,13 +292,13 @@ export function ColorEdit( props ) {
 	const { style, textColor, backgroundColor, gradient } = attributes;
 	let gradientValue;
 	if ( hasGradientColor && gradient ) {
-		gradientValue = getGradientValueBySlug( gradients, gradient );
+		gradientValue = getGradientValueBySlug( allGradients, gradient );
 	} else if ( hasGradientColor ) {
 		gradientValue = style?.color?.gradient;
 	}
 
 	const onChangeColor = ( name ) => ( value ) => {
-		const colorObject = getColorObjectByColorValue( solids, value );
+		const colorObject = getColorObjectByColorValue( allSolids, value );
 		const attributeName = name + 'Color';
 		const newStyle = {
 			...localAttributes.current.style,
@@ -296,7 +322,7 @@ export function ColorEdit( props ) {
 	};
 
 	const onChangeGradient = ( value ) => {
-		const slug = getGradientSlugByValue( gradients, value );
+		const slug = getGradientSlugByValue( allGradients, value );
 		let newAttributes;
 		if ( slug ) {
 			const newStyle = {
@@ -331,7 +357,7 @@ export function ColorEdit( props ) {
 	};
 
 	const onChangeLinkColor = ( value ) => {
-		const colorObject = getColorObjectByColorValue( solids, value );
+		const colorObject = getColorObjectByColorValue( allSolids, value );
 		const newLinkColorValue = colorObject?.slug
 			? `var:preset|color|${ colorObject.slug }`
 			: value;
@@ -360,7 +386,7 @@ export function ColorEdit( props ) {
 								label: __( 'Text color' ),
 								onColorChange: onChangeColor( 'text' ),
 								colorValue: getColorObjectByAttributeValues(
-									solids,
+									allSolids,
 									textColor,
 									style?.color?.text
 								).color,
@@ -375,7 +401,7 @@ export function ColorEdit( props ) {
 									? onChangeColor( 'background' )
 									: undefined,
 								colorValue: getColorObjectByAttributeValues(
-									solids,
+									allSolids,
 									backgroundColor,
 									style?.color?.background
 								).color,
@@ -392,7 +418,7 @@ export function ColorEdit( props ) {
 								label: __( 'Link Color' ),
 								onColorChange: onChangeLinkColor,
 								colorValue: getLinkColorFromAttributeValue(
-									solids,
+									allSolids,
 									style?.elements?.link?.color?.text
 								),
 								clearable: !! style?.elements?.link?.color
@@ -417,20 +443,34 @@ export const withColorPaletteStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
 		const { backgroundColor, textColor } = attributes;
-		const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+		const userPalette = useSetting( 'color.palette.custom' ) || [];
+		const themePalette = useSetting( 'color.palette.theme' ) || [];
+		const defaultPalette = useSetting( 'color.palette.default' ) || [];
+		const colors = useMemo(
+			() => [
+				...( userPalette || [] ),
+				...( themePalette || [] ),
+				...( defaultPalette || [] ),
+			],
+			[ userPalette, themePalette, defaultPalette ]
+		);
 		if ( ! hasColorSupport( name ) || shouldSkipSerialization( name ) ) {
 			return <BlockListBlock { ...props } />;
 		}
+		const extraStyles = {};
 
-		const extraStyles = {
-			color: textColor
-				? getColorObjectByAttributeValues( colors, textColor )?.color
-				: undefined,
-			backgroundColor: backgroundColor
-				? getColorObjectByAttributeValues( colors, backgroundColor )
-						?.color
-				: undefined,
-		};
+		if ( textColor ) {
+			extraStyles.color = getColorObjectByAttributeValues(
+				colors,
+				textColor
+			)?.color;
+		}
+		if ( backgroundColor ) {
+			extraStyles.backgroundColor = getColorObjectByAttributeValues(
+				colors,
+				backgroundColor
+			)?.color;
+		}
 
 		let wrapperProps = props.wrapperProps;
 		wrapperProps = {

package/src/hooks/test/color.js

@@ -1,7 +1,19 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+
 /**
  * Internal dependencies
  */
+import BlockEditorProvider from '../../components/provider';
 import { cleanEmptyObject } from '../utils';
+import { withColorPaletteStyles } from '../color';
 
 describe( 'cleanEmptyObject', () => {
 	it( 'should remove nested keys', () => {
@@ -10,3 +22,100 @@ describe( 'cleanEmptyObject', () => {
 		);
 	} );
 } );
+
+describe( 'withColorPaletteStyles', () => {
+	const settings = {
+		__experimentalFeatures: {
+			color: {
+				palette: {
+					default: [
+						{
+							name: 'Pale pink',
+							slug: 'pale-pink',
+							color: '#f78da7',
+						},
+						{
+							name: 'Vivid green cyan',
+							slug: 'vivid-green-cyan',
+							color: '#00d084',
+						},
+					],
+				},
+			},
+		},
+	};
+
+	const EnhancedComponent = withColorPaletteStyles(
+		( { getStyleObj, wrapperProps } ) => (
+			<div>{ getStyleObj( wrapperProps.style ) }</div>
+		)
+	);
+
+	beforeAll( () => {
+		registerBlockType( 'core/test-block', {
+			save: () => undefined,
+			edit: () => undefined,
+			category: 'text',
+			title: 'test block',
+			supports: {
+				color: {
+					text: true,
+					background: true,
+				},
+			},
+		} );
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( 'core/test-block' );
+	} );
+
+	it( 'should add color styles from attributes', () => {
+		const getStyleObj = jest.fn();
+
+		render(
+			<BlockEditorProvider settings={ settings } value={ [] }>
+				<EnhancedComponent
+					attributes={ {
+						backgroundColor: 'vivid-green-cyan',
+						textColor: 'pale-pink',
+					} }
+					name="core/test-block"
+					getStyleObj={ getStyleObj }
+				/>
+			</BlockEditorProvider>
+		);
+
+		expect( getStyleObj ).toHaveBeenLastCalledWith( {
+			color: '#f78da7',
+			backgroundColor: '#00d084',
+		} );
+	} );
+
+	it( 'should not add undefined style values', () => {
+		// This test ensures that undefined `color` and `backgroundColor` styles
+		// are not added to the styles object. An undefined `backgroundColor`
+		// style causes a React warning when gradients are used, as the gradient
+		// style currently uses the `background` shorthand syntax.
+		// See: https://github.com/WordPress/gutenberg/issues/36899.
+		const getStyleObj = jest.fn();
+
+		render(
+			<BlockEditorProvider settings={ settings } value={ [] }>
+				<EnhancedComponent
+					attributes={ {
+						backgroundColor: undefined,
+						textColor: undefined,
+					} }
+					name="core/test-block"
+					getStyleObj={ getStyleObj }
+				/>
+			</BlockEditorProvider>
+		);
+		// Check explictly for the object used in the call, because
+		// `toHaveBeenCalledWith` does not check for empty keys.
+		expect(
+			getStyleObj.mock.calls[ getStyleObj.mock.calls.length - 1 ][ 0 ]
+		).toStrictEqual( {} );
+	} );
+} );

package/src/hooks/typography.js

@@ -231,7 +231,7 @@ export function TypographyPanel( props ) {
 	);
 }
 
-const hasTypographySupport = ( blockName ) => {
+export const hasTypographySupport = ( blockName ) => {
 	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
 		hasBlockSupport( blockName, key )
 	);

package/src/hooks/use-color-props.js

@@ -3,6 +3,11 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -24,8 +29,6 @@ import useSetting from '../components/use-setting';
 // block support is being skipped for a block but the color related CSS classes
 // & styles still need to be generated so they can be applied to inner elements.
 
-const EMPTY_ARRAY = [];
-
 /**
  * Provides the CSS class names and inline styles for a block's color support
  * attributes.
@@ -70,6 +73,8 @@ export function getColorClassesAndStyles( attributes ) {
 	};
 }
 
+const EMPTY_OBJECT = {};
+
 /**
  * Determines the color related props for a block derived from its color block
  * support attributes.
@@ -84,8 +89,29 @@ export function getColorClassesAndStyles( attributes ) {
 export function useColorProps( attributes ) {
 	const { backgroundColor, textColor, gradient } = attributes;
 
-	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
-	const gradients = useSetting( 'color.gradients' ) || EMPTY_ARRAY;
+	// Some color settings have a special handling for deprecated flags in `useSetting`,
+	// so we can't unwrap them by doing const { ... } = useSetting('color')
+	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
+	const userPalette = useSetting( 'color.palette.custom' ) || [];
+	const themePalette = useSetting( 'color.palette.theme' ) || [];
+	const defaultPalette = useSetting( 'color.palette.default' ) || [];
+	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const colors = useMemo(
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
+		[ userPalette, themePalette, defaultPalette ]
+	);
+	const gradients = useMemo(
+		() => [
+			...( gradientsPerOrigin?.custom || [] ),
+			...( gradientsPerOrigin?.theme || [] ),
+			...( gradientsPerOrigin?.default || [] ),
+		],
+		[ gradientsPerOrigin ]
+	);
 
 	const colorProps = getColorClassesAndStyles( attributes );
 

package/src/store/selectors.js

@@ -1643,22 +1643,19 @@ export const getInserterItems = createSelector(
 			? getReusableBlocks( state ).map( buildReusableBlockInserterItem )
 			: [];
 
-		// Exclude any block type item that is to be replaced by a default
-		// variation.
-		const visibleBlockTypeInserterItems = blockTypeInserterItems.filter(
-			( { variations = [] } ) =>
-				! variations.some( ( { isDefault } ) => isDefault )
-		);
-
-		const blockVariations = [];
-		// Show all available blocks with variations
-		for ( const item of blockTypeInserterItems ) {
+		const items = blockTypeInserterItems.reduce( ( accumulator, item ) => {
 			const { variations = [] } = item;
+			// Exclude any block type item that is to be replaced by a default variation
+			if ( ! variations.some( ( { isDefault } ) => isDefault ) ) {
+				accumulator.push( item );
+			}
 			if ( variations.length ) {
 				const variationMapper = getItemFromVariation( state, item );
-				blockVariations.push( ...variations.map( variationMapper ) );
+				accumulator.push( ...variations.map( variationMapper ) );
 			}
-		}
+			return accumulator;
+		}, [] );
+
 		// Ensure core blocks are prioritized in the returned results,
 		// because third party blocks can be registered earlier than
 		// the core blocks (usually by using the `init` action),
@@ -1671,20 +1668,11 @@ export const getInserterItems = createSelector(
 			type.push( block );
 			return blocks;
 		};
-		const items = visibleBlockTypeInserterItems.reduce( groupByType, {
-			core: [],
-			noncore: [],
-		} );
-		const variations = blockVariations.reduce( groupByType, {
-			core: [],
-			noncore: [],
-		} );
-		const sortedBlockTypes = [
-			...items.core,
-			...variations.core,
-			...items.noncore,
-			...variations.noncore,
-		];
+		const {
+			core: coreItems,
+			noncore: nonCoreItems,
+		} = items.reduce( groupByType, { core: [], noncore: [] } );
+		const sortedBlockTypes = [ ...coreItems, ...nonCoreItems ];
 		return [ ...sortedBlockTypes, ...reusableBlockInserterItems ];
 	},
 	( state, rootClientId ) => [