@wordpress/block-editor 12.14.0 → 12.16.0

package/src/hooks/background.js

@@ -24,6 +24,7 @@ import { Platform, useCallback, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
+import { pure } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -41,13 +42,13 @@ export const IMAGE_BACKGROUND_TYPE = 'image';
  * Checks if there is a current value in the background image block support
  * attributes.
  *
- * @param {Object} props Block props.
+ * @param {Object} style Style attribute.
  * @return {boolean}     Whether or not the block has a background image value set.
  */
-export function hasBackgroundImageValue( props ) {
+export function hasBackgroundImageValue( style ) {
 	const hasValue =
-		!! props.attributes.style?.background?.backgroundImage?.id ||
-		!! props.attributes.style?.background?.backgroundImage?.url;
+		!! style?.background?.backgroundImage?.id ||
+		!! style?.background?.backgroundImage?.url;
 
 	return hasValue;
 }
@@ -82,13 +83,10 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
  * Resets the background image block support attributes. This can be used when disabling
  * the background image controls for a block via a `ToolsPanel`.
  *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
+ * @param {Object}   style         Style attribute.
+ * @param {Function} setAttributes Function to set block's attributes.
  */
-export function resetBackgroundImage( { attributes = {}, setAttributes } ) {
-	const { style = {} } = attributes;
-
+export function resetBackgroundImage( style = {}, setAttributes ) {
 	setAttributes( {
 		style: cleanEmptyObject( {
 			...style,
@@ -145,11 +143,13 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	);
 }
 
-function BackgroundImagePanelItem( props ) {
-	const { attributes, clientId, setAttributes } = props;
-
-	const { id, title, url } =
-		attributes.style?.background?.backgroundImage || {};
+function BackgroundImagePanelItem( { clientId, setAttributes } ) {
+	const style = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
+		[ clientId ]
+	);
+	const { id, title, url } = style?.background?.backgroundImage || {};
 
 	const replaceContainerRef = useRef();
 
@@ -167,9 +167,9 @@ function BackgroundImagePanelItem( props ) {
 	const onSelectMedia = ( media ) => {
 		if ( ! media || ! media.url ) {
 			const newStyle = {
-				...attributes.style,
+				...style,
 				background: {
-					...attributes.style?.background,
+					...style?.background,
 					backgroundImage: undefined,
 				},
 			};
@@ -201,9 +201,9 @@ function BackgroundImagePanelItem( props ) {
 		}
 
 		const newStyle = {
-			...attributes.style,
+			...style,
 			background: {
-				...attributes.style?.background,
+				...style?.background,
 				backgroundImage: {
 					url: media.url,
 					id: media.id,
@@ -244,14 +244,14 @@ function BackgroundImagePanelItem( props ) {
 		};
 	}, [] );
 
-	const hasValue = hasBackgroundImageValue( props );
+	const hasValue = hasBackgroundImageValue( style );
 
 	return (
 		<ToolsPanelItem
 			className="single-column"
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
-			onDeselect={ () => resetBackgroundImage( props ) }
+			onDeselect={ () => resetBackgroundImage( style, setAttributes ) }
 			isShownByDefault={ true }
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
@@ -286,7 +286,7 @@ function BackgroundImagePanelItem( props ) {
 								// closed and focus is redirected to the dropdown toggle button.
 								toggleButton?.focus();
 								toggleButton?.click();
-								resetBackgroundImage( props );
+								resetBackgroundImage( style, setAttributes );
 							} }
 						>
 							{ __( 'Reset ' ) }
@@ -302,7 +302,7 @@ function BackgroundImagePanelItem( props ) {
 	);
 }
 
-export function BackgroundImagePanel( props ) {
+function BackgroundImagePanelPure( props ) {
 	const [ backgroundImage ] = useSettings( 'background.backgroundImage' );
 	if (
 		! backgroundImage ||
@@ -317,3 +317,8 @@ export function BackgroundImagePanel( props ) {
 		</InspectorControls>
 	);
 }
+
+// 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 BackgroundImagePanel = pure( BackgroundImagePanelPure );

package/src/hooks/block-hooks.js

@@ -2,14 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { addFilter } from '@wordpress/hooks';
 import { Fragment, useMemo } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	PanelBody,
 	ToggleControl,
 } from '@wordpress/components';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 
@@ -21,7 +19,7 @@ import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
 
-function BlockHooksControl( props ) {
+function BlockHooksControlPure( { name, clientId } ) {
 	const blockTypes = useSelect(
 		( select ) => select( blocksStore ).getBlockTypes(),
 		[]
@@ -30,10 +28,9 @@ function BlockHooksControl( props ) {
 	const hookedBlocksForCurrentBlock = useMemo(
 		() =>
 			blockTypes?.filter(
-				( { blockHooks } ) =>
-					blockHooks && props.blockName in blockHooks
+				( { blockHooks } ) => blockHooks && name in blockHooks
 			),
-		[ blockTypes, props.blockName ]
+		[ blockTypes, name ]
 	);
 
 	const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
@@ -42,13 +39,12 @@ function BlockHooksControl( props ) {
 				select( blockEditorStore );
 
 			return {
-				blockIndex: getBlockIndex( props.clientId ),
-				innerBlocksLength: getBlock( props.clientId )?.innerBlocks
-					?.length,
-				rootClientId: getBlockRootClientId( props.clientId ),
+				blockIndex: getBlockIndex( clientId ),
+				innerBlocksLength: getBlock( clientId )?.innerBlocks?.length,
+				rootClientId: getBlockRootClientId( clientId ),
 			};
 		},
-		[ props.clientId ]
+		[ clientId ]
 	);
 
 	const hookedBlockClientIds = useSelect(
@@ -65,8 +61,7 @@ function BlockHooksControl( props ) {
 						return clientIds;
 					}
 
-					const relativePosition =
-						block?.blockHooks?.[ props.blockName ];
+					const relativePosition = block?.blockHooks?.[ name ];
 					let candidates;
 
 					switch ( relativePosition ) {
@@ -83,12 +78,12 @@ function BlockHooksControl( props ) {
 							// Any of the current block's child blocks (with the right block type) qualifies
 							// as a hooked first or last child block, as the block might've been automatically
 							// inserted and then moved around a bit by the user.
-							candidates = getBlock( props.clientId ).innerBlocks;
+							candidates = getBlock( clientId ).innerBlocks;
 							break;
 					}
 
 					const hookedBlock = candidates?.find(
-						( { name } ) => name === block.name
+						( candidate ) => name === candidate.name
 					);
 
 					// If the block exists in the designated location, we consider it hooked
@@ -118,12 +113,7 @@ function BlockHooksControl( props ) {
 
 			return EMPTY_OBJECT;
 		},
-		[
-			hookedBlocksForCurrentBlock,
-			props.blockName,
-			props.clientId,
-			rootClientId,
-		]
+		[ hookedBlocksForCurrentBlock, name, clientId, rootClientId ]
 	);
 
 	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
@@ -169,7 +159,7 @@ function BlockHooksControl( props ) {
 					block,
 					// TODO: It'd be great if insertBlock() would accept negative indices for insertion.
 					relativePosition === 'first_child' ? 0 : innerBlocksLength,
-					props.clientId, // Insert as a child of the current block.
+					clientId, // Insert as a child of the current block.
 					false
 				);
 				break;
@@ -207,9 +197,7 @@ function BlockHooksControl( props ) {
 											if ( ! checked ) {
 												// Create and insert block.
 												const relativePosition =
-													block.blockHooks[
-														props.blockName
-													];
+													block.blockHooks[ name ];
 												insertBlockIntoDesignatedLocation(
 													createBlock( block.name ),
 													relativePosition
@@ -218,11 +206,12 @@ function BlockHooksControl( props ) {
 											}
 
 											// Remove block.
-											const clientId =
+											removeBlock(
 												hookedBlockClientIds[
 													block.name
-												];
-											removeBlock( clientId, false );
+												],
+												false
+											);
 										} }
 									/>
 								);
@@ -235,27 +224,9 @@ function BlockHooksControl( props ) {
 	);
 }
 
-export const withBlockHooksControls = createHigherOrderComponent(
-	( BlockEdit ) => {
-		return ( props ) => {
-			return (
-				<>
-					<BlockEdit key="edit" { ...props } />
-					{ props.isSelected && (
-						<BlockHooksControl
-							blockName={ props.name }
-							clientId={ props.clientId }
-						/>
-					) }
-				</>
-			);
-		};
+export default {
+	edit: BlockHooksControlPure,
+	hasSupport() {
+		return true;
 	},
-	'withBlockHooksControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/block-hooks/with-inspector-controls',
-	withBlockHooksControls
-);
+};

package/src/hooks/block-renaming.js

@@ -3,6 +3,13 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -38,6 +45,32 @@ export function addLabelCallback( settings ) {
 	return settings;
 }
 
+function BlockRenameControlPure( { metadata, setAttributes } ) {
+	return (
+		<InspectorControls group="advanced">
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label={ __( 'Block name' ) }
+				value={ metadata?.name || '' }
+				onChange={ ( newName ) => {
+					setAttributes( {
+						metadata: { ...metadata, name: newName },
+					} );
+				} }
+			/>
+		</InspectorControls>
+	);
+}
+
+export default {
+	edit: BlockRenameControlPure,
+	attributeKeys: [ 'metadata' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'renaming', true );
+	},
+};
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addLabelCallback',

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
-);