@wordpress/block-editor 12.15.0 → 12.16.0

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

package/src/hooks/custom-fields.js

@@ -5,7 +5,6 @@ import { addFilter } from '@wordpress/hooks';
 import { PanelBody, TextControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -34,7 +33,7 @@ function addAttribute( settings ) {
 	return settings;
 }
 
-function CustomFieldsControl( props ) {
+function CustomFieldsControlPure( { name, connections, setAttributes } ) {
 	const blockEditingMode = useBlockEditingMode();
 	if ( blockEditingMode !== 'default' ) {
 		return null;
@@ -44,8 +43,8 @@ function CustomFieldsControl( props ) {
 	// attribute to use for the connection. Only the `content` attribute
 	// of the paragraph block and the `url` attribute of the image block are supported.
 	let attributeName;
-	if ( props.name === 'core/paragraph' ) attributeName = 'content';
-	if ( props.name === 'core/image' ) attributeName = 'url';
+	if ( name === 'core/paragraph' ) attributeName = 'content';
+	if ( name === 'core/image' ) attributeName = 'url';
 
 	return (
 		<InspectorControls>
@@ -55,19 +54,17 @@ function CustomFieldsControl( props ) {
 					autoComplete="off"
 					label={ __( 'Custom field meta_key' ) }
 					value={
-						props.attributes?.connections?.attributes?.[
-							attributeName
-						]?.value || ''
+						connections?.attributes?.[ attributeName ]?.value || ''
 					}
 					onChange={ ( nextValue ) => {
 						if ( nextValue === '' ) {
-							props.setAttributes( {
+							setAttributes( {
 								connections: undefined,
 								[ attributeName ]: undefined,
 								placeholder: undefined,
 							} );
 						} else {
-							props.setAttributes( {
+							setAttributes( {
 								connections: {
 									attributes: {
 										// The attributeName will be either `content` or `url`.
@@ -93,50 +90,26 @@ function CustomFieldsControl( props ) {
 	);
 }
 
-/**
- * Override the default edit UI to include a new block inspector control for
- * assigning a connection to blocks that has support for connections.
- * Currently, only the `core/paragraph` block is supported and there is only a relation
- * between paragraph content and a custom field.
- *
- * @param {Component} BlockEdit Original component.
- *
- * @return {Component} Wrapped component.
- */
-const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
-	return ( props ) => {
-		const hasCustomFieldsSupport = hasBlockSupport(
-			props.name,
-			'__experimentalConnections',
-			false
-		);
-
-		// Check if the current block is a paragraph or image block.
-		// Currently, only these two blocks are supported.
-		if ( ! [ 'core/paragraph', 'core/image' ].includes( props.name ) ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
-
+export default {
+	edit: CustomFieldsControlPure,
+	attributeKeys: [ 'connections' ],
+	hasSupport( name ) {
 		return (
-			<>
-				<BlockEdit key="edit" { ...props } />
-				{ hasCustomFieldsSupport && props.isSelected && (
-					<CustomFieldsControl { ...props } />
-				) }
-			</>
+			hasBlockSupport( name, '__experimentalConnections', false ) &&
+			// Check if the current block is a paragraph or image block.
+			// Currently, only these two blocks are supported.
+			[ 'core/paragraph', 'core/image' ].includes( name )
 		);
-	};
-}, 'withCustomFieldsControls' );
+	},
+};
 
-if ( window.__experimentalConnections ) {
+if (
+	window.__experimentalConnections ||
+	window.__experimentalPatternPartialSyncing
+) {
 	addFilter(
 		'blocks.registerBlockType',
 		'core/editor/connections/attribute',
 		addAttribute
 	);
-	addFilter(
-		'editor.BlockEdit',
-		'core/editor/connections/with-inspector-controls',
-		withCustomFieldsControls
-	);
 }

package/src/hooks/dimensions.js

@@ -2,9 +2,10 @@
  * WordPress dependencies
  */
 import { useState, useEffect, useCallback } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
+import { pure } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,7 +20,7 @@ import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
-import { cleanEmptyObject, useBlockSettings } from './utils';
+import { cleanEmptyObject } from './utils';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -65,17 +66,13 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function DimensionsPanel( props ) {
-	const {
-		clientId,
-		name,
-		attributes,
-		setAttributes,
-		__unstableParentLayout,
-	} = props;
-	const settings = useBlockSettings( name, __unstableParentLayout );
+function DimensionsPanelPure( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasDimensionsPanel( settings );
-	const value = attributes.style;
+	const value = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
+		[ clientId ]
+	);
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const onChange = ( newStyle ) => {
 		setAttributes( {
@@ -87,11 +84,11 @@ export function DimensionsPanel( props ) {
 		return null;
 	}
 
-	const defaultDimensionsControls = getBlockSupport( props.name, [
+	const defaultDimensionsControls = getBlockSupport( name, [
 		DIMENSIONS_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
-	const defaultSpacingControls = getBlockSupport( props.name, [
+	const defaultSpacingControls = getBlockSupport( name, [
 		SPACING_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
@@ -114,19 +111,26 @@ export function DimensionsPanel( props ) {
 			{ !! settings?.spacing?.padding && (
 				<PaddingVisualizer
 					forceShow={ visualizedProperty === 'padding' }
-					{ ...props }
+					clientId={ clientId }
+					value={ value }
 				/>
 			) }
 			{ !! settings?.spacing?.margin && (
 				<MarginVisualizer
 					forceShow={ visualizedProperty === 'margin' }
-					{ ...props }
+					clientId={ clientId }
+					value={ value }
 				/>
 			) }
 		</>
 	);
 }
 
+// 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 DimensionsPanel = pure( DimensionsPanelPure );
+
 /**
  * @deprecated
  */