@wordpress/block-editor 12.15.0 → 12.16.0

package/src/hooks/border.js

@@ -8,9 +8,10 @@ import classnames from 'classnames';
  */
 import { getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { pure } from '@wordpress/compose';
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,15 +19,12 @@ import { addFilter } from '@wordpress/hooks';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import {
-	cleanEmptyObject,
-	shouldSkipSerialization,
-	useBlockSettings,
-} from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 import {
 	useHasBorderPanel,
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
+import { store as blockEditorStore } from '../store';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
@@ -135,16 +133,17 @@ function BordersInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function BorderPanel( props ) {
-	const { clientId, name, attributes, setAttributes } = props;
-	const settings = useBlockSettings( name );
+function BorderPanelPure( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasBorderPanel( settings );
+	function selector( select ) {
+		const { style, borderColor } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, borderColor };
+	}
+	const { style, borderColor } = useSelect( selector, [ clientId ] );
 	const value = useMemo( () => {
-		return attributesToStyle( {
-			style: attributes.style,
-			borderColor: attributes.borderColor,
-		} );
-	}, [ attributes.style, attributes.borderColor ] );
+		return attributesToStyle( { style, borderColor } );
+	}, [ style, borderColor ] );
 
 	const onChange = ( newStyle ) => {
 		setAttributes( styleToAttributes( newStyle ) );
@@ -154,7 +153,7 @@ export function BorderPanel( props ) {
 		return null;
 	}
 
-	const defaultControls = getBlockSupport( props.name, [
+	const defaultControls = getBlockSupport( name, [
 		BORDER_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
@@ -171,6 +170,11 @@ export function BorderPanel( props ) {
 	);
 }
 
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+export const BorderPanel = pure( BorderPanelPure );
+
 /**
  * Determine whether there is block support for border properties.
  *
@@ -254,16 +258,16 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject border color.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type definition.
- * @param {Object} attributes Block's attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type definition.
+ * @param {Object}        attributes      Block's attributes.
  *
  * @return {Object} Filtered props to apply to save element.
  */
-function addSaveProps( props, blockType, attributes ) {
+function addSaveProps( props, blockNameOrType, attributes ) {
 	if (
-		! hasBorderSupport( blockType, 'color' ) ||
-		shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )
+		! hasBorderSupport( blockNameOrType, 'color' ) ||
+		shouldSkipSerialization( blockNameOrType, BORDER_SUPPORT_KEY, 'color' )
 	) {
 		return props;
 	}
@@ -296,102 +300,59 @@ export function getBorderClasses( attributes ) {
 	} );
 }
 
-/**
- * Filters the registered block settings to apply border color styles and
- * classnames to the block edit wrapper.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
+function useBlockProps( { name, borderColor, style } ) {
+	const { colors } = useMultipleOriginColorsAndGradients();
+
 	if (
-		! hasBorderSupport( settings, 'color' ) ||
-		shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )
+		! hasBorderSupport( name, 'color' ) ||
+		shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
 	) {
-		return settings;
+		return {};
 	}
 
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
+	const { color: borderColorValue } = getMultiOriginColor( {
+		colors,
+		namedColor: borderColor,
+	} );
+	const { color: borderTopColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.top?.color ),
+	} );
+	const { color: borderRightColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.right?.color ),
+	} );
 
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
+	const { color: borderBottomColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.bottom?.color ),
+	} );
+	const { color: borderLeftColor } = getMultiOriginColor( {
+		colors,
+		namedColor: getColorSlugFromVariable( style?.border?.left?.color ),
+	} );
 
-		return addSaveProps( props, settings, attributes );
+	const extraStyles = {
+		borderTopColor: borderTopColor || borderColorValue,
+		borderRightColor: borderRightColor || borderColorValue,
+		borderBottomColor: borderBottomColor || borderColorValue,
+		borderLeftColor: borderLeftColor || borderColorValue,
 	};
 
-	return settings;
+	return addSaveProps(
+		{ style: cleanEmptyObject( extraStyles ) || {} },
+		name,
+		{ borderColor, style }
+	);
 }
 
-/**
- * This adds inline styles for color palette colors.
- * Ideally, this is not needed and themes should load their palettes on the editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withBorderColorPaletteStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const { borderColor, style } = attributes;
-		const { colors } = useMultipleOriginColorsAndGradients();
-
-		if (
-			! hasBorderSupport( name, 'color' ) ||
-			shouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )
-		) {
-			return <BlockListBlock { ...props } />;
-		}
-
-		const { color: borderColorValue } = getMultiOriginColor( {
-			colors,
-			namedColor: borderColor,
-		} );
-		const { color: borderTopColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable( style?.border?.top?.color ),
-		} );
-		const { color: borderRightColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable( style?.border?.right?.color ),
-		} );
-
-		const { color: borderBottomColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable(
-				style?.border?.bottom?.color
-			),
-		} );
-		const { color: borderLeftColor } = getMultiOriginColor( {
-			colors,
-			namedColor: getColorSlugFromVariable( style?.border?.left?.color ),
-		} );
-
-		const extraStyles = {
-			borderTopColor: borderTopColor || borderColorValue,
-			borderRightColor: borderRightColor || borderColorValue,
-			borderBottomColor: borderBottomColor || borderColorValue,
-			borderLeftColor: borderLeftColor || borderColorValue,
-		};
-		const cleanedExtraStyles = cleanEmptyObject( extraStyles ) || {};
-
-		let wrapperProps = props.wrapperProps;
-		wrapperProps = {
-			...props.wrapperProps,
-			style: {
-				...props.wrapperProps?.style,
-				...cleanedExtraStyles,
-			},
-		};
-
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
+export default {
+	useBlockProps,
+	attributeKeys: [ 'borderColor', 'style' ],
+	hasSupport( name ) {
+		return hasBorderSupport( name, 'color' );
 	},
-	'withBorderColorPaletteStyles'
-);
+};
 
 addFilter(
 	'blocks.registerBlockType',
@@ -404,15 +365,3 @@ addFilter(
 	'core/border/addSaveProps',
 	addSaveProps
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/border/addEditProps',
-	addEditProps
-);
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/border/with-border-color-palette-styles',
-	withBorderColorPaletteStyles
-);

package/src/hooks/color.js

@@ -9,7 +9,8 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { useMemo, Platform, useCallback } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { pure } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -23,7 +24,6 @@ import {
 	cleanEmptyObject,
 	transformStyles,
 	shouldSkipSerialization,
-	useBlockSettings,
 } from './utils';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
@@ -32,11 +32,12 @@ import {
 	default as StylesColorPanel,
 } from '../components/global-styles/color-panel';
 import BlockColorContrastChecker from './contrast-checker';
+import { store as blockEditorStore } from '../store';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
-const hasColorSupport = ( blockType ) => {
-	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
+const hasColorSupport = ( blockNameOrType ) => {
+	const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );
 	return (
 		colorSupport &&
 		( colorSupport.link === true ||
@@ -60,8 +61,8 @@ const hasLinkColorSupport = ( blockType ) => {
 	);
 };
 
-const hasGradientSupport = ( blockType ) => {
-	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
+const hasGradientSupport = ( blockNameOrType ) => {
+	const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );
 
 	return (
 		colorSupport !== null &&
@@ -125,27 +126,31 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject colors classnames.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Block attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type.
+ * @param {Object}        attributes      Block attributes.
  *
  * @return {Object} Filtered props applied to save element.
  */
-export function addSaveProps( props, blockType, attributes ) {
+export function addSaveProps( props, blockNameOrType, attributes ) {
 	if (
-		! hasColorSupport( blockType ) ||
-		shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY )
+		! hasColorSupport( blockNameOrType ) ||
+		shouldSkipSerialization( blockNameOrType, COLOR_SUPPORT_KEY )
 	) {
 		return props;
 	}
 
-	const hasGradient = hasGradientSupport( blockType );
+	const hasGradient = hasGradientSupport( blockNameOrType );
 
 	// I'd have preferred to avoid the "style" attribute usage here
 	const { backgroundColor, textColor, gradient, style } = attributes;
 
 	const shouldSerialize = ( feature ) =>
-		! shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY, feature );
+		! shouldSkipSerialization(
+			blockNameOrType,
+			COLOR_SUPPORT_KEY,
+			feature
+		);
 
 	// Primary color classes must come before the `has-text-color`,
 	// `has-background` and `has-link-color` classes to maintain backwards
@@ -191,33 +196,6 @@ export function addSaveProps( props, blockType, attributes ) {
 	return props;
 }
 
-/**
- * Filters registered block settings to extend the block edit wrapper
- * to apply the desired styles and classnames properly.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-export function addEditProps( settings ) {
-	if (
-		! hasColorSupport( settings ) ||
-		shouldSkipSerialization( settings, COLOR_SUPPORT_KEY )
-	) {
-		return settings;
-	}
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-		return addSaveProps( props, settings, attributes );
-	};
-
-	return settings;
-}
-
 function styleToAttributes( style ) {
 	const textColorValue = style?.color?.text;
 	const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
@@ -289,23 +267,25 @@ function ColorInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function ColorEdit( props ) {
-	const { clientId, name, attributes, setAttributes } = props;
-	const settings = useBlockSettings( name );
+function ColorEditPure( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasColorPanel( settings );
+	function selector( select ) {
+		const { style, textColor, backgroundColor, gradient } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, textColor, backgroundColor, gradient };
+	}
+	const { style, textColor, backgroundColor, gradient } = useSelect(
+		selector,
+		[ clientId ]
+	);
 	const value = useMemo( () => {
 		return attributesToStyle( {
-			style: attributes.style,
-			textColor: attributes.textColor,
-			backgroundColor: attributes.backgroundColor,
-			gradient: attributes.gradient,
+			style,
+			textColor,
+			backgroundColor,
+			gradient,
 		} );
-	}, [
-		attributes.style,
-		attributes.textColor,
-		attributes.backgroundColor,
-		attributes.gradient,
-	] );
+	}, [ style, textColor, backgroundColor, gradient ] );
 
 	const onChange = ( newStyle ) => {
 		setAttributes( styleToAttributes( newStyle ) );
@@ -315,7 +295,7 @@ export function ColorEdit( props ) {
 		return null;
 	}
 
-	const defaultControls = getBlockSupport( props.name, [
+	const defaultControls = getBlockSupport( name, [
 		COLOR_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
@@ -328,7 +308,7 @@ export function ColorEdit( props ) {
 		// Deactivating it requires `enableContrastChecker` to have
 		// an explicit value of `false`.
 		false !==
-			getBlockSupport( props.name, [
+			getBlockSupport( name, [
 				COLOR_SUPPORT_KEY,
 				'enableContrastChecker',
 			] );
@@ -343,7 +323,7 @@ export function ColorEdit( props ) {
 			defaultControls={ defaultControls }
 			enableContrastChecker={
 				false !==
-				getBlockSupport( props.name, [
+				getBlockSupport( name, [
 					COLOR_SUPPORT_KEY,
 					'enableContrastChecker',
 				] )
@@ -356,72 +336,72 @@ export function ColorEdit( props ) {
 	);
 }
 
-/**
- * This adds inline styles for color palette colors.
- * Ideally, this is not needed and themes should load their palettes on the editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withColorPaletteStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const { backgroundColor, textColor } = attributes;
-		const [ userPalette, themePalette, defaultPalette ] = useSettings(
-			'color.palette.custom',
-			'color.palette.theme',
-			'color.palette.default'
-		);
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+export const ColorEdit = pure( ColorEditPure );
+
+function useBlockProps( {
+	name,
+	backgroundColor,
+	textColor,
+	gradient,
+	style,
+} ) {
+	const [ userPalette, themePalette, defaultPalette ] = useSettings(
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default'
+	);
 
-		const colors = useMemo(
-			() => [
-				...( userPalette || [] ),
-				...( themePalette || [] ),
-				...( defaultPalette || [] ),
-			],
-			[ userPalette, themePalette, defaultPalette ]
-		);
-		if (
-			! hasColorSupport( name ) ||
-			shouldSkipSerialization( name, COLOR_SUPPORT_KEY )
-		) {
-			return <BlockListBlock { ...props } />;
-		}
-		const extraStyles = {};
-
-		if (
-			textColor &&
-			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
-		) {
-			extraStyles.color = getColorObjectByAttributeValues(
-				colors,
-				textColor
-			)?.color;
-		}
-		if (
-			backgroundColor &&
-			! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
-		) {
-			extraStyles.backgroundColor = getColorObjectByAttributeValues(
-				colors,
-				backgroundColor
-			)?.color;
-		}
+	const colors = useMemo(
+		() => [
+			...( userPalette || [] ),
+			...( themePalette || [] ),
+			...( defaultPalette || [] ),
+		],
+		[ userPalette, themePalette, defaultPalette ]
+	);
+	if (
+		! hasColorSupport( name ) ||
+		shouldSkipSerialization( name, COLOR_SUPPORT_KEY )
+	) {
+		return {};
+	}
+	const extraStyles = {};
 
-		let wrapperProps = props.wrapperProps;
-		wrapperProps = {
-			...props.wrapperProps,
-			style: {
-				...extraStyles,
-				...props.wrapperProps?.style,
-			},
-		};
+	if (
+		textColor &&
+		! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'text' )
+	) {
+		extraStyles.color = getColorObjectByAttributeValues(
+			colors,
+			textColor
+		)?.color;
+	}
+	if (
+		backgroundColor &&
+		! shouldSkipSerialization( name, COLOR_SUPPORT_KEY, 'background' )
+	) {
+		extraStyles.backgroundColor = getColorObjectByAttributeValues(
+			colors,
+			backgroundColor
+		)?.color;
+	}
 
-		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
-	},
-	'withColorPaletteStyles'
-);
+	return addSaveProps( { style: extraStyles }, name, {
+		textColor,
+		backgroundColor,
+		gradient,
+		style,
+	} );
+}
+
+export default {
+	useBlockProps,
+	attributeKeys: [ 'backgroundColor', 'textColor', 'gradient', 'style' ],
+	hasSupport: hasColorSupport,
+};
 
 const MIGRATION_PATHS = {
 	linkColor: [ [ 'style', 'elements', 'link', 'color', 'text' ] ],
@@ -463,18 +443,6 @@ addFilter(
 	addSaveProps
 );
 
-addFilter(
-	'blocks.registerBlockType',
-	'core/color/addEditProps',
-	addEditProps
-);
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/color/with-color-palette-styles',
-	withColorPaletteStyles
-);
-
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
 	'core/color/addTransforms',