@wordpress/block-editor 12.15.0 → 12.16.0

package/src/hooks/align.native.js

@@ -8,6 +8,7 @@ import { WIDE_ALIGNMENTS } from '@wordpress/components';
 const ALIGNMENTS = [ 'left', 'center', 'right' ];
 
 export * from './align.js';
+export { default } from './align.js';
 
 // Used to filter out blocks that don't support wide/full alignment on mobile
 addFilter(

package/src/hooks/anchor.js

@@ -5,7 +5,6 @@ import { addFilter } from '@wordpress/hooks';
 import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { Platform } from '@wordpress/element';
 
 /**
@@ -52,7 +51,11 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
+function BlockEditAnchorControlPure( {
+	name: blockName,
+	anchor,
+	setAttributes,
+} ) {
 	const blockEditingMode = useBlockEditingMode();
 
 	const isWeb = Platform.OS === 'web';
@@ -79,7 +82,7 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
 					) }
 				</>
 			}
-			value={ attributes.anchor || '' }
+			value={ anchor || '' }
 			placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
 			onChange={ ( nextValue ) => {
 				nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
@@ -116,31 +119,13 @@ function BlockEditAnchorControl( { blockName, attributes, setAttributes } ) {
 	);
 }
 
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning the anchor ID, if block supports anchor.
- *
- * @param {Component} BlockEdit Original component.
- *
- * @return {Component} Wrapped component.
- */
-export const withAnchorControls = createHigherOrderComponent( ( BlockEdit ) => {
-	return ( props ) => {
-		return (
-			<>
-				<BlockEdit { ...props } />
-				{ props.isSelected &&
-					hasBlockSupport( props.name, 'anchor' ) && (
-						<BlockEditAnchorControl
-							blockName={ props.name }
-							attributes={ props.attributes }
-							setAttributes={ props.setAttributes }
-						/>
-					) }
-			</>
-		);
-	};
-}, 'withAnchorControls' );
+export default {
+	edit: BlockEditAnchorControlPure,
+	attributeKeys: [ 'anchor' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'anchor' );
+	},
+};
 
 /**
  * Override props assigned to save component to inject anchor ID, if block
@@ -162,11 +147,6 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 }
 
 addFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/anchor/with-inspector-controls',
-	withAnchorControls
-);
 addFilter(
 	'blocks.getSaveContent.extraProps',
 	'core/editor/anchor/save-props',

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,7 +3,6 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 
@@ -11,7 +10,6 @@ import { TextControl } from '@wordpress/components';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
-import { useBlockRename } from '../components/block-rename';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -47,43 +45,31 @@ export function addLabelCallback( settings ) {
 	return settings;
 }
 
-export const withBlockRenameControl = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { name, attributes, setAttributes, isSelected } = props;
-
-		const { canRename } = useBlockRename( name );
+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>
+	);
+}
 
-		return (
-			<>
-				{ isSelected && canRename && (
-					<InspectorControls group="advanced">
-						<TextControl
-							__nextHasNoMarginBottom
-							label={ __( 'Block name' ) }
-							value={ attributes?.metadata?.name || '' }
-							onChange={ ( newName ) => {
-								setAttributes( {
-									metadata: {
-										...attributes?.metadata,
-										name: newName,
-									},
-								} );
-							} }
-						/>
-					</InspectorControls>
-				) }
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
+export default {
+	edit: BlockRenameControlPure,
+	attributeKeys: [ 'metadata' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'renaming', true );
 	},
-	'withToolbarControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/block-rename-ui/with-block-rename-control',
-	withBlockRenameControl
-);
+};
 
 addFilter(
 	'blocks.registerBlockType',