@wordpress/block-editor 12.14.0 → 12.16.0

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',

package/src/hooks/content-lock-ui.js

@@ -2,9 +2,7 @@
  * WordPress dependencies
  */
 import { ToolbarButton, MenuItem } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useCallback } from '@wordpress/element';
 
@@ -37,129 +35,119 @@ function StopEditingAsBlocksOnOutsideSelect( {
 	return null;
 }
 
-export const withContentLockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { getBlockListSettings, getSettings } =
-			useSelect( blockEditorStore );
-		const focusModeToRevert = useRef();
-		const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-			( select ) => {
-				const {
-					__unstableGetContentLockingParent,
-					getTemplateLock,
-					__unstableGetTemporarilyEditingAsBlocks,
-				} = select( blockEditorStore );
-				return {
-					templateLock: getTemplateLock( props.clientId ),
-					isLockedByParent: !! __unstableGetContentLockingParent(
-						props.clientId
-					),
-					isEditingAsBlocks:
-						__unstableGetTemporarilyEditingAsBlocks() ===
-						props.clientId,
-				};
-			},
-			[ props.clientId ]
-		);
+function ContentLockControlsPure( { clientId, isSelected } ) {
+	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
+	const focusModeToRevert = useRef();
+	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+		( select ) => {
+			const {
+				__unstableGetContentLockingParent,
+				getTemplateLock,
+				__unstableGetTemporarilyEditingAsBlocks,
+			} = select( blockEditorStore );
+			return {
+				templateLock: getTemplateLock( clientId ),
+				isLockedByParent:
+					!! __unstableGetContentLockingParent( clientId ),
+				isEditingAsBlocks:
+					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+			};
+		},
+		[ clientId ]
+	);
 
-		const {
-			updateSettings,
-			updateBlockListSettings,
-			__unstableSetTemporarilyEditingAsBlocks,
-		} = useDispatch( blockEditorStore );
-		const isContentLocked =
-			! isLockedByParent && templateLock === 'contentOnly';
-		const {
-			__unstableMarkNextChangeAsNotPersistent,
-			updateBlockAttributes,
-		} = useDispatch( blockEditorStore );
+	const {
+		updateSettings,
+		updateBlockListSettings,
+		__unstableSetTemporarilyEditingAsBlocks,
+	} = useDispatch( blockEditorStore );
+	const isContentLocked =
+		! isLockedByParent && templateLock === 'contentOnly';
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
 
-		const stopEditingAsBlock = useCallback( () => {
-			__unstableMarkNextChangeAsNotPersistent();
-			updateBlockAttributes( props.clientId, {
-				templateLock: 'contentOnly',
-			} );
-			updateBlockListSettings( props.clientId, {
-				...getBlockListSettings( props.clientId ),
-				templateLock: 'contentOnly',
-			} );
-			updateSettings( { focusMode: focusModeToRevert.current } );
-			__unstableSetTemporarilyEditingAsBlocks();
-		}, [
-			props.clientId,
-			updateSettings,
-			updateBlockListSettings,
-			getBlockListSettings,
-			__unstableMarkNextChangeAsNotPersistent,
-			updateBlockAttributes,
-			__unstableSetTemporarilyEditingAsBlocks,
-		] );
+	const stopEditingAsBlock = useCallback( () => {
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( clientId, {
+			templateLock: 'contentOnly',
+		} );
+		updateBlockListSettings( clientId, {
+			...getBlockListSettings( clientId ),
+			templateLock: 'contentOnly',
+		} );
+		updateSettings( { focusMode: focusModeToRevert.current } );
+		__unstableSetTemporarilyEditingAsBlocks();
+	}, [
+		clientId,
+		updateSettings,
+		updateBlockListSettings,
+		getBlockListSettings,
+		__unstableMarkNextChangeAsNotPersistent,
+		updateBlockAttributes,
+		__unstableSetTemporarilyEditingAsBlocks,
+	] );
 
-		if ( ! isContentLocked && ! isEditingAsBlocks ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
+	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+		return null;
+	}
 
-		const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
-		const showStartEditingAsBlocks =
-			! isEditingAsBlocks && isContentLocked && props.isSelected;
+	const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
+	const showStartEditingAsBlocks =
+		! isEditingAsBlocks && isContentLocked && isSelected;
 
-		return (
-			<>
-				{ showStopEditingAsBlocks && (
-					<>
-						<StopEditingAsBlocksOnOutsideSelect
-							clientId={ props.clientId }
-							stopEditingAsBlock={ stopEditingAsBlock }
-						/>
-						<BlockControls group="other">
-							<ToolbarButton
-								onClick={ () => {
-									stopEditingAsBlock();
-								} }
-							>
-								{ __( 'Done' ) }
-							</ToolbarButton>
-						</BlockControls>
-					</>
-				) }
-				{ showStartEditingAsBlocks && (
-					<BlockSettingsMenuControls>
-						{ ( { onClose } ) => (
-							<MenuItem
-								onClick={ () => {
-									__unstableMarkNextChangeAsNotPersistent();
-									updateBlockAttributes( props.clientId, {
-										templateLock: undefined,
-									} );
-									updateBlockListSettings( props.clientId, {
-										...getBlockListSettings(
-											props.clientId
-										),
-										templateLock: false,
-									} );
-									focusModeToRevert.current =
-										getSettings().focusMode;
-									updateSettings( { focusMode: true } );
-									__unstableSetTemporarilyEditingAsBlocks(
-										props.clientId
-									);
-									onClose();
-								} }
-							>
-								{ __( 'Modify' ) }
-							</MenuItem>
-						) }
-					</BlockSettingsMenuControls>
-				) }
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
-	},
-	'withContentLockControls'
-);
+	return (
+		<>
+			{ showStopEditingAsBlocks && (
+				<>
+					<StopEditingAsBlocksOnOutsideSelect
+						clientId={ clientId }
+						stopEditingAsBlock={ stopEditingAsBlock }
+					/>
+					<BlockControls group="other">
+						<ToolbarButton
+							onClick={ () => {
+								stopEditingAsBlock();
+							} }
+						>
+							{ __( 'Done' ) }
+						</ToolbarButton>
+					</BlockControls>
+				</>
+			) }
+			{ showStartEditingAsBlocks && (
+				<BlockSettingsMenuControls>
+					{ ( { onClose } ) => (
+						<MenuItem
+							onClick={ () => {
+								__unstableMarkNextChangeAsNotPersistent();
+								updateBlockAttributes( clientId, {
+									templateLock: undefined,
+								} );
+								updateBlockListSettings( clientId, {
+									...getBlockListSettings( clientId ),
+									templateLock: false,
+								} );
+								focusModeToRevert.current =
+									getSettings().focusMode;
+								updateSettings( { focusMode: true } );
+								__unstableSetTemporarilyEditingAsBlocks(
+									clientId
+								);
+								onClose();
+							} }
+						>
+							{ __( 'Modify' ) }
+						</MenuItem>
+					) }
+				</BlockSettingsMenuControls>
+			) }
+		</>
+	);
+}
 
-addFilter(
-	'editor.BlockEdit',
-	'core/content-lock-ui/with-block-controls',
-	withContentLockControls
-);
+export default {
+	edit: ContentLockControlsPure,
+	hasSupport() {
+		return true;
+	},
+};

package/src/hooks/custom-class-name.js

@@ -10,7 +10,6 @@ import { addFilter } from '@wordpress/hooks';
 import { TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -39,7 +38,7 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function CustomClassNameControls( { attributes, setAttributes } ) {
+function CustomClassNameControlsPure( { className, setAttributes } ) {
 	const blockEditingMode = useBlockEditingMode();
 	if ( blockEditingMode !== 'default' ) {
 		return null;
@@ -52,7 +51,7 @@ function CustomClassNameControls( { attributes, setAttributes } ) {
 				__next40pxDefaultSize
 				autoComplete="off"
 				label={ __( 'Additional CSS class(es)' ) }
-				value={ attributes.className || '' }
+				value={ className || '' }
 				onChange={ ( nextValue ) => {
 					setAttributes( {
 						className: nextValue !== '' ? nextValue : undefined,
@@ -64,39 +63,13 @@ function CustomClassNameControls( { attributes, setAttributes } ) {
 	);
 }
 
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning the custom class name, if block supports custom class name.
- * The control is displayed within the Advanced panel in the block inspector.
- *
- * @param {Component} BlockEdit Original component.
- *
- * @return {Component} Wrapped component.
- */
-export const withCustomClassNameControls = createHigherOrderComponent(
-	( BlockEdit ) => {
-		return ( props ) => {
-			const hasCustomClassName = hasBlockSupport(
-				props.name,
-				'customClassName',
-				true
-			);
-
-			return (
-				<>
-					<BlockEdit { ...props } />
-					{ hasCustomClassName && props.isSelected && (
-						<CustomClassNameControls
-							attributes={ props.attributes }
-							setAttributes={ props.setAttributes }
-						/>
-					) }
-				</>
-			);
-		};
+export default {
+	edit: CustomClassNameControlsPure,
+	attributeKeys: [ 'className' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customClassName', true );
 	},
-	'withCustomClassNameControls'
-);
+};
 
 /**
  * Override props assigned to save component to inject the className, if block
@@ -167,11 +140,6 @@ addFilter(
 	'core/editor/custom-class-name/attribute',
 	addAttribute
 );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/custom-class-name/with-inspector-controls',
-	withCustomClassNameControls
-);
 addFilter(
 	'blocks.getSaveContent.extraProps',
 	'core/editor/custom-class-name/save-props',