@wordpress/block-editor 12.14.0 → 12.16.0

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,106 +33,83 @@ function addAttribute( settings ) {
 	return settings;
 }
 
-/**
- * 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 blockEditingMode = useBlockEditingMode();
-		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 { ...props } />;
-		}
+function CustomFieldsControlPure( { name, connections, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 
-		// If the block is a paragraph or image block, we need to know which
-		// 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 the block is a paragraph or image block, we need to know which
+	// 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 ( name === 'core/paragraph' ) attributeName = 'content';
+	if ( name === 'core/image' ) attributeName = 'url';
 
-		if ( hasCustomFieldsSupport && props.isSelected ) {
-			return (
-				<>
-					<BlockEdit { ...props } />
-					{ blockEditingMode === 'default' && (
-						<InspectorControls>
-							<PanelBody
-								title={ __( 'Connections' ) }
-								initialOpen={ true }
-							>
-								<TextControl
-									__nextHasNoMarginBottom
-									autoComplete="off"
-									label={ __( 'Custom field meta_key' ) }
-									value={
-										props.attributes?.connections
-											?.attributes?.[ attributeName ]
-											?.value || ''
-									}
-									onChange={ ( nextValue ) => {
-										if ( nextValue === '' ) {
-											props.setAttributes( {
-												connections: undefined,
-												[ attributeName ]: undefined,
-												placeholder: undefined,
-											} );
-										} else {
-											props.setAttributes( {
-												connections: {
-													attributes: {
-														// The attributeName will be either `content` or `url`.
-														[ attributeName ]: {
-															// Source will be variable, could be post_meta, user_meta, term_meta, etc.
-															// Could even be a custom source like a social media attribute.
-															source: 'meta_fields',
-															value: nextValue,
-														},
-													},
-												},
-												[ attributeName ]: undefined,
-												placeholder: sprintf(
-													'This content will be replaced on the frontend by the value of "%s" custom field.',
-													nextValue
-												),
-											} );
-										}
-									} }
-								/>
-							</PanelBody>
-						</InspectorControls>
-					) }
-				</>
-			);
-		}
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Connections' ) } initialOpen={ true }>
+				<TextControl
+					__nextHasNoMarginBottom
+					autoComplete="off"
+					label={ __( 'Custom field meta_key' ) }
+					value={
+						connections?.attributes?.[ attributeName ]?.value || ''
+					}
+					onChange={ ( nextValue ) => {
+						if ( nextValue === '' ) {
+							setAttributes( {
+								connections: undefined,
+								[ attributeName ]: undefined,
+								placeholder: undefined,
+							} );
+						} else {
+							setAttributes( {
+								connections: {
+									attributes: {
+										// The attributeName will be either `content` or `url`.
+										[ attributeName ]: {
+											// Source will be variable, could be post_meta, user_meta, term_meta, etc.
+											// Could even be a custom source like a social media attribute.
+											source: 'meta_fields',
+											value: nextValue,
+										},
+									},
+								},
+								[ attributeName ]: undefined,
+								placeholder: sprintf(
+									'This content will be replaced on the frontend by the value of "%s" custom field.',
+									nextValue
+								),
+							} );
+						}
+					} }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
 
-		return <BlockEdit { ...props } />;
-	};
-}, 'withCustomFieldsControls' );
+export default {
+	edit: CustomFieldsControlPure,
+	attributeKeys: [ 'connections' ],
+	hasSupport( name ) {
+		return (
+			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 )
+		);
+	},
+};
 
-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
  */

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

package/src/hooks/font-family.js

@@ -74,31 +74,18 @@ function addSaveProps( props, blockType, attributes ) {
 	return props;
 }
 
-/**
- * Filters registered block settings to expand the block edit wrapper
- * by applying the desired styles and classnames.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
-	if ( ! hasBlockSupport( settings, FONT_FAMILY_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 useBlockProps( { name, fontFamily } ) {
+	return addSaveProps( {}, name, { fontFamily } );
 }
 
+export default {
+	useBlockProps,
+	attributeKeys: [ 'fontFamily' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY );
+	},
+};
+
 /**
  * Resets the font family block support attribute. This can be used when
  * disabling the font family support controls for a block via a progressive
@@ -122,9 +109,3 @@ addFilter(
 	'core/fontFamily/addSaveProps',
 	addSaveProps
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/fontFamily/addEditProps',
-	addEditProps
-);