@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.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,14 @@ 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,
+	addSaveProps,
+	attributeKeys: [ 'className' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customClassName', true );
 	},
-	'withCustomClassNameControls'
-);
+};
 
 /**
  * Override props assigned to save component to inject the className, if block
@@ -167,16 +141,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',
-	addSaveProps
-);
 
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',

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

@@ -60,8 +60,11 @@ addFilter(
 	'core/custom-class-name/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/custom-class-name/save-props',
-	addSaveProps
-);
+
+export default {
+	addSaveProps,
+	attributeKeys: [ 'className' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customClassName', true );
+	},
+};

package/src/hooks/dimensions.js

@@ -2,7 +2,7 @@
  * 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';
 
@@ -19,7 +19,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 +65,13 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function DimensionsPanel( props ) {
-	const {
-		clientId,
-		name,
-		attributes,
-		setAttributes,
-		__unstableParentLayout,
-	} = props;
-	const settings = useBlockSettings( name, __unstableParentLayout );
+export function DimensionsPanel( { 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 +83,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,13 +110,15 @@ 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 }
 				/>
 			) }
 		</>

package/src/hooks/duotone.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
@@ -13,7 +12,7 @@ import {
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
 
@@ -95,8 +94,7 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanel( { attributes, setAttributes, name } ) {
-	const style = attributes?.style;
+function DuotonePanelPure( { style, setAttributes, name } ) {
 	const duotoneStyle = style?.color?.duotone;
 	const settings = useBlockSettings( name );
 	const blockEditingMode = useBlockEditingMode();
@@ -176,6 +174,16 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 	);
 }
 
+export default {
+	shareWithChildBlocks: true,
+	edit: DuotonePanelPure,
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'filter.duotone' );
+	},
+};
+
 /**
  * Filters registered block settings, extending attributes to include
  * the `duotone` attribute.
@@ -204,38 +212,7 @@ function addDuotoneAttributes( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include toolbar controls for duotone if the
- * block supports duotone.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withDuotoneControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		// Previous `color.__experimentalDuotone` support flag is migrated via
-		// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
-		const hasDuotoneSupport = hasBlockSupport(
-			props.name,
-			'filter.duotone'
-		);
-
-		// CAUTION: code added before this line will be executed
-		// for all blocks, not just those that support duotone. Code added
-		// above this line should be carefully evaluated for its impact on
-		// performance.
-		return (
-			<>
-				{ hasDuotoneSupport && <DuotonePanel { ...props } /> }
-				<BlockEdit { ...props } />
-			</>
-		);
-	},
-	'withDuotoneControls'
-);
-
-function DuotoneStyles( {
+function useDuotoneStyles( {
 	clientId,
 	id: filterId,
 	selector: duotoneSelector,
@@ -333,103 +310,69 @@ function DuotoneStyles( {
 			blockElement.style.display = display;
 		}
 	}, [ isValidFilter, blockElement ] );
-
-	return null;
 }
 
-/**
- * Override the default block element to include duotone styles.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withDuotoneStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const id = useInstanceId( BlockListBlock );
-
-		const selector = useMemo( () => {
-			const blockType = getBlockType( props.name );
-
-			if ( blockType ) {
-				// Backwards compatibility for `supports.color.__experimentalDuotone`
-				// is provided via the `block_type_metadata_settings` filter. If
-				// `supports.filter.duotone` has not been set and the
-				// experimental property has been, the experimental property
-				// value is copied into `supports.filter.duotone`.
-				const duotoneSupport = getBlockSupport(
-					blockType,
-					'filter.duotone',
-					false
-				);
-				if ( ! duotoneSupport ) {
-					return null;
-				}
-
-				// If the experimental duotone support was set, that value is
-				// to be treated as a selector and requires scoping.
-				const experimentalDuotone = getBlockSupport(
-					blockType,
-					'color.__experimentalDuotone',
-					false
-				);
-				if ( experimentalDuotone ) {
-					const rootSelector = getBlockCSSSelector( blockType );
-					return typeof experimentalDuotone === 'string'
-						? scopeSelector( rootSelector, experimentalDuotone )
-						: rootSelector;
-				}
-
-				// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
-				return getBlockCSSSelector( blockType, 'filter.duotone', {
-					fallback: true,
-				} );
+function useBlockProps( { name, style } ) {
+	const id = useInstanceId( useBlockProps );
+	const selector = useMemo( () => {
+		const blockType = getBlockType( name );
+
+		if ( blockType ) {
+			// Backwards compatibility for `supports.color.__experimentalDuotone`
+			// is provided via the `block_type_metadata_settings` filter. If
+			// `supports.filter.duotone` has not been set and the
+			// experimental property has been, the experimental property
+			// value is copied into `supports.filter.duotone`.
+			const duotoneSupport = getBlockSupport(
+				blockType,
+				'filter.duotone',
+				false
+			);
+			if ( ! duotoneSupport ) {
+				return null;
 			}
-		}, [ props.name ] );
-
-		const attribute = props?.attributes?.style?.color?.duotone;
-
-		const filterClass = `wp-duotone-${ id }`;
-
-		const shouldRender = selector && attribute;
-
-		const className = shouldRender
-			? classnames( props?.className, filterClass )
-			: props?.className;
-
-		// CAUTION: code added before this line will be executed
-		// for all blocks, not just those that support duotone. Code added
-		// above this line should be carefully evaluated for its impact on
-		// performance.
-		return (
-			<>
-				{ shouldRender && (
-					<DuotoneStyles
-						clientId={ props.clientId }
-						id={ filterClass }
-						selector={ selector }
-						attribute={ attribute }
-					/>
-				) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
-		);
-	},
-	'withDuotoneStyles'
-);
+
+			// If the experimental duotone support was set, that value is
+			// to be treated as a selector and requires scoping.
+			const experimentalDuotone = getBlockSupport(
+				blockType,
+				'color.__experimentalDuotone',
+				false
+			);
+			if ( experimentalDuotone ) {
+				const rootSelector = getBlockCSSSelector( blockType );
+				return typeof experimentalDuotone === 'string'
+					? scopeSelector( rootSelector, experimentalDuotone )
+					: rootSelector;
+			}
+
+			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
+			return getBlockCSSSelector( blockType, 'filter.duotone', {
+				fallback: true,
+			} );
+		}
+	}, [ name ] );
+
+	const attribute = style?.color?.duotone;
+
+	const filterClass = `wp-duotone-${ id }`;
+
+	const shouldRender = selector && attribute;
+
+	useDuotoneStyles( {
+		clientId: id,
+		id: filterClass,
+		selector,
+		attribute,
+	} );
+
+	return {
+		className: shouldRender ? filterClass : '',
+	};
+}
 
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',
 	addDuotoneAttributes
 );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/duotone/with-editor-controls',
-	withDuotoneControls
-);
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/duotone/with-styles',
-	withDuotoneStyles
-);