@wordpress/block-editor 12.15.0 → 12.16.0

package/src/hooks/style.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -13,7 +8,7 @@ import {
 	hasBlockSupport,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { getCSSRules, compileCSS } from '@wordpress/style-engine';
 
 /**
@@ -32,8 +27,11 @@ import {
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
 } from './dimensions';
-import useDisplayBlockControls from '../components/use-display-block-controls';
-import { shouldSkipSerialization, useStyleOverride } from './utils';
+import {
+	shouldSkipSerialization,
+	useStyleOverride,
+	useBlockSettings,
+} from './utils';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockEditingMode } from '../components/block-editing-mode';
 
@@ -271,20 +269,20 @@ export function omitStyle( style, paths, preserveReference = false ) {
 /**
  * Override props assigned to save component to inject the CSS variables definition.
  *
- * @param {Object}                    props      Additional props applied to save element.
- * @param {Object}                    blockType  Block type.
- * @param {Object}                    attributes Block attributes.
- * @param {?Record<string, string[]>} skipPaths  An object of keys and paths to skip serialization.
+ * @param {Object}                    props           Additional props applied to save element.
+ * @param {Object|string}             blockNameOrType Block type.
+ * @param {Object}                    attributes      Block attributes.
+ * @param {?Record<string, string[]>} skipPaths       An object of keys and paths to skip serialization.
  *
  * @return {Object} Filtered props applied to save element.
  */
 export function addSaveProps(
 	props,
-	blockType,
+	blockNameOrType,
 	attributes,
 	skipPaths = skipSerializationPathsSave
 ) {
-	if ( ! hasStyleSupport( blockType ) ) {
+	if ( ! hasStyleSupport( blockNameOrType ) ) {
 		return props;
 	}
 
@@ -292,7 +290,7 @@ export function addSaveProps(
 	Object.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {
 		const skipSerialization =
 			skipSerializationPathsSaveChecks[ indicator ] ||
-			getBlockSupport( blockType, indicator );
+			getBlockSupport( blockNameOrType, indicator );
 
 		if ( skipSerialization === true ) {
 			style = omitStyle( style, path );
@@ -314,71 +312,40 @@ export function addSaveProps(
 	return props;
 }
 
-/**
- * Filters registered block settings to extend the block edit wrapper
- * to apply the desired styles and classnames properly.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object}.Filtered block settings.
- */
-export function addEditProps( settings ) {
-	if ( ! hasStyleSupport( settings ) ) {
-		return settings;
-	}
-
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-
-		return addSaveProps(
-			props,
-			settings,
-			attributes,
-			skipSerializationPathsEdit
-		);
+function BlockStyleControls( {
+	clientId,
+	name,
+	setAttributes,
+	__unstableParentLayout,
+} ) {
+	const settings = useBlockSettings( name, __unstableParentLayout );
+	const blockEditingMode = useBlockEditingMode();
+	const passedProps = {
+		clientId,
+		name,
+		setAttributes,
+		settings,
 	};
-
-	return settings;
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+	return (
+		<>
+			<ColorEdit { ...passedProps } />
+			<BackgroundImagePanel { ...passedProps } />
+			<TypographyPanel { ...passedProps } />
+			<BorderPanel { ...passedProps } />
+			<DimensionsPanel { ...passedProps } />
+		</>
+	);
 }
 
-/**
- * Override the default edit UI to include new inspector controls for
- * all the custom styles configs.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withBlockStyleControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		if ( ! hasStyleSupport( props.name ) ) {
-			return <BlockEdit key="edit" { ...props } />;
-		}
-
-		const shouldDisplayControls = useDisplayBlockControls();
-		const blockEditingMode = useBlockEditingMode();
-
-		return (
-			<>
-				{ shouldDisplayControls && blockEditingMode === 'default' && (
-					<>
-						<ColorEdit { ...props } />
-						<BackgroundImagePanel { ...props } />
-						<TypographyPanel { ...props } />
-						<BorderPanel { ...props } />
-						<DimensionsPanel { ...props } />
-					</>
-				) }
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
-	},
-	'withBlockStyleControls'
-);
+export default {
+	edit: BlockStyleControls,
+	hasSupport: hasStyleSupport,
+	attributeKeys: [ 'style' ],
+	useBlockProps,
+};
 
 // Defines which element types are supported, including their hover styles or
 // any other elements that have been included under a single element type
@@ -392,115 +359,96 @@ const elementTypes = [
 	},
 ];
 
-/**
- * Override the default block element to include elements styles.
- *
- * @param {Function} BlockListBlock Original component
- * @return {Function}                Wrapped component
- */
-const withElementsStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
-			BlockListBlock
-		) }`;
-
-		// The .editor-styles-wrapper selector is required on elements styles. As it is
-		// added to all other editor styles, not providing it causes reset and global
-		// styles to override element styles because of higher specificity.
-		const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`;
-		const blockElementStyles = props.attributes.style?.elements;
-
-		const styles = useMemo( () => {
-			if ( ! blockElementStyles ) {
+function useBlockProps( { name, style } ) {
+	const blockElementsContainerIdentifier = `wp-elements-${ useInstanceId(
+		useBlockProps
+	) }`;
+
+	// The .editor-styles-wrapper selector is required on elements styles. As it is
+	// added to all other editor styles, not providing it causes reset and global
+	// styles to override element styles because of higher specificity.
+	const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`;
+	const blockElementStyles = style?.elements;
+
+	const styles = useMemo( () => {
+		if ( ! blockElementStyles ) {
+			return;
+		}
+
+		const elementCSSRules = [];
+
+		elementTypes.forEach( ( { elementType, pseudo, elements } ) => {
+			const skipSerialization = shouldSkipSerialization(
+				name,
+				COLOR_SUPPORT_KEY,
+				elementType
+			);
+
+			if ( skipSerialization ) {
 				return;
 			}
 
-			const elementCSSRules = [];
+			const elementStyles = blockElementStyles?.[ elementType ];
 
-			elementTypes.forEach( ( { elementType, pseudo, elements } ) => {
-				const skipSerialization = shouldSkipSerialization(
-					props.name,
-					COLOR_SUPPORT_KEY,
-					elementType
+			// Process primary element type styles.
+			if ( elementStyles ) {
+				const selector = scopeSelector(
+					baseElementSelector,
+					ELEMENTS[ elementType ]
 				);
 
-				if ( skipSerialization ) {
-					return;
-				}
-
-				const elementStyles = blockElementStyles?.[ elementType ];
-
-				// Process primary element type styles.
-				if ( elementStyles ) {
-					const selector = scopeSelector(
-						baseElementSelector,
-						ELEMENTS[ elementType ]
-					);
-
-					elementCSSRules.push(
-						compileCSS( elementStyles, { selector } )
-					);
-
-					// Process any interactive states for the element type.
-					if ( pseudo ) {
-						pseudo.forEach( ( pseudoSelector ) => {
-							if ( elementStyles[ pseudoSelector ] ) {
-								elementCSSRules.push(
-									compileCSS(
-										elementStyles[ pseudoSelector ],
-										{
-											selector: scopeSelector(
-												baseElementSelector,
-												`${ ELEMENTS[ elementType ] }${ pseudoSelector }`
-											),
-										}
-									)
-								);
-							}
-						} );
-					}
-				}
+				elementCSSRules.push(
+					compileCSS( elementStyles, { selector } )
+				);
 
-				// Process related elements e.g. h1-h6 for headings
-				if ( elements ) {
-					elements.forEach( ( element ) => {
-						if ( blockElementStyles[ element ] ) {
+				// Process any interactive states for the element type.
+				if ( pseudo ) {
+					pseudo.forEach( ( pseudoSelector ) => {
+						if ( elementStyles[ pseudoSelector ] ) {
 							elementCSSRules.push(
-								compileCSS( blockElementStyles[ element ], {
+								compileCSS( elementStyles[ pseudoSelector ], {
 									selector: scopeSelector(
 										baseElementSelector,
-										ELEMENTS[ element ]
+										`${ ELEMENTS[ elementType ] }${ pseudoSelector }`
 									),
 								} )
 							);
 						}
 					} );
 				}
-			} );
+			}
 
-			return elementCSSRules.length > 0
-				? elementCSSRules.join( '' )
-				: undefined;
-		}, [ baseElementSelector, blockElementStyles, props.name ] );
-
-		useStyleOverride( { css: styles } );
-
-		return (
-			<BlockListBlock
-				{ ...props }
-				className={
-					props.attributes.style?.elements
-						? classnames(
-								props.className,
-								blockElementsContainerIdentifier
-						  )
-						: props.className
-				}
-			/>
-		);
-	},
-	'withElementsStyles'
-);
+			// Process related elements e.g. h1-h6 for headings
+			if ( elements ) {
+				elements.forEach( ( element ) => {
+					if ( blockElementStyles[ element ] ) {
+						elementCSSRules.push(
+							compileCSS( blockElementStyles[ element ], {
+								selector: scopeSelector(
+									baseElementSelector,
+									ELEMENTS[ element ]
+								),
+							} )
+						);
+					}
+				} );
+			}
+		} );
+
+		return elementCSSRules.length > 0
+			? elementCSSRules.join( '' )
+			: undefined;
+	}, [ baseElementSelector, blockElementStyles, name ] );
+
+	useStyleOverride( { css: styles } );
+
+	return addSaveProps(
+		{ className: blockElementsContainerIdentifier },
+		name,
+		{ style },
+		skipSerializationPathsEdit
+	);
+}
 
 addFilter(
 	'blocks.registerBlockType',
@@ -513,21 +461,3 @@ addFilter(
 	'core/style/addSaveProps',
 	addSaveProps
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/style/addEditProps',
-	addEditProps
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/style/with-block-controls',
-	withBlockStyleControls
-);
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/with-elements-styles',
-	withElementsStyles
-);

package/src/hooks/test/align.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { render, screen } from '@testing-library/react';
-
 /**
  * WordPress dependencies
  */
@@ -12,20 +7,11 @@ import {
 	registerBlockType,
 	unregisterBlockType,
 } from '@wordpress/blocks';
-import { SlotFillProvider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import BlockControls from '../../components/block-controls';
-import BlockEdit from '../../components/block-edit';
-import BlockEditorProvider from '../../components/provider';
-import {
-	getValidAlignments,
-	withAlignmentControls,
-	withDataAlign,
-	addAssignedAlign,
-} from '../align';
+import { getValidAlignments, addAssignedAlign } from '../align';
 
 const noop = () => {};
 
@@ -157,169 +143,6 @@ describe( 'align', () => {
 		} );
 	} );
 
-	describe( 'withAlignControls', () => {
-		const componentProps = {
-			name: 'core/foo',
-			attributes: {},
-			isSelected: true,
-		};
-
-		it( 'should do nothing if no valid alignments', () => {
-			registerBlockType( 'core/foo', blockSettings );
-
-			const EnhancedComponent = withAlignmentControls(
-				( { wrapperProps } ) => <div { ...wrapperProps } />
-			);
-
-			render(
-				<SlotFillProvider>
-					<BlockEdit { ...componentProps }>
-						<EnhancedComponent { ...componentProps } />
-					</BlockEdit>
-					<BlockControls.Slot group="block" />
-				</SlotFillProvider>
-			);
-
-			expect(
-				screen.queryByRole( 'button', {
-					name: 'Align',
-					expanded: false,
-				} )
-			).not.toBeInTheDocument();
-		} );
-
-		it( 'should render toolbar controls if valid alignments', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: false,
-				},
-			} );
-
-			const EnhancedComponent = withAlignmentControls(
-				( { wrapperProps } ) => <div { ...wrapperProps } />
-			);
-
-			render(
-				<SlotFillProvider>
-					<BlockEdit { ...componentProps }>
-						<EnhancedComponent { ...componentProps } />
-					</BlockEdit>
-					<BlockControls.Slot group="block" />
-				</SlotFillProvider>
-			);
-
-			expect(
-				screen.getAllByRole( 'button', {
-					name: 'Align',
-					expanded: false,
-				} )
-			).toHaveLength( 2 );
-		} );
-	} );
-
-	describe( 'withDataAlign', () => {
-		it( 'should render with wrapper props', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: true,
-				},
-			} );
-
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<button { ...wrapperProps } />
-			) );
-
-			render(
-				<BlockEditorProvider
-					settings={ { alignWide: true, supportsLayout: false } }
-					value={ [] }
-				>
-					<EnhancedComponent
-						attributes={ {
-							align: 'wide',
-						} }
-						name="core/foo"
-					/>
-				</BlockEditorProvider>
-			);
-
-			expect( screen.getByRole( 'button' ) ).toHaveAttribute(
-				'data-align',
-				'wide'
-			);
-		} );
-
-		it( 'should not render wide/full wrapper props if wide controls are not enabled', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: true,
-				},
-			} );
-
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<button { ...wrapperProps } />
-			) );
-
-			render(
-				<BlockEditorProvider
-					settings={ { alignWide: false } }
-					value={ [] }
-				>
-					<EnhancedComponent
-						name="core/foo"
-						attributes={ {
-							align: 'wide',
-						} }
-					/>
-				</BlockEditorProvider>
-			);
-
-			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
-				'data-align',
-				'wide'
-			);
-		} );
-
-		it( 'should not render invalid align', () => {
-			registerBlockType( 'core/foo', {
-				...blockSettings,
-				supports: {
-					align: true,
-					alignWide: false,
-				},
-			} );
-
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
-				<button { ...wrapperProps } />
-			) );
-
-			render(
-				<BlockEditorProvider
-					settings={ { alignWide: true } }
-					value={ [] }
-				>
-					<EnhancedComponent
-						name="core/foo"
-						attributes={ {
-							align: 'wide',
-						} }
-					/>
-				</BlockEditorProvider>
-			);
-
-			expect( screen.getByRole( 'button' ) ).not.toHaveAttribute(
-				'data-align',
-				'wide'
-			);
-		} );
-	} );
-
 	describe( 'addAssignedAlign', () => {
 		it( 'should do nothing if block does not support align', () => {
 			registerBlockType( 'core/foo', blockSettings );

package/src/hooks/typography.js

@@ -3,6 +3,8 @@
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useMemo, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { pure } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -16,7 +18,8 @@ import {
 import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
 import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
 import { FONT_SIZE_SUPPORT_KEY } from './font-size';
-import { cleanEmptyObject, useBlockSettings } from './utils';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
 
 function omit( object, keys ) {
 	return Object.fromEntries(
@@ -106,22 +109,18 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function TypographyPanel( {
-	clientId,
-	name,
-	attributes,
-	setAttributes,
-	__unstableParentLayout,
-} ) {
-	const settings = useBlockSettings( name, __unstableParentLayout );
+function TypographyPanelPure( { clientId, name, setAttributes, settings } ) {
+	function selector( select ) {
+		const { style, fontFamily, fontSize } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, fontFamily, fontSize };
+	}
+	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
 	const isEnabled = useHasTypographyPanel( settings );
-	const value = useMemo( () => {
-		return attributesToStyle( {
-			style: attributes.style,
-			fontFamily: attributes.fontFamily,
-			fontSize: attributes.fontSize,
-		} );
-	}, [ attributes.style, attributes.fontSize, attributes.fontFamily ] );
+	const value = useMemo(
+		() => attributesToStyle( { style, fontFamily, fontSize } ),
+		[ style, fontSize, fontFamily ]
+	);
 
 	const onChange = ( newStyle ) => {
 		setAttributes( styleToAttributes( newStyle ) );
@@ -148,6 +147,11 @@ export function TypographyPanel( {
 	);
 }
 
+// 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 TypographyPanel = pure( TypographyPanelPure );
+
 export const hasTypographySupport = ( blockName ) => {
 	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
 		hasBlockSupport( blockName, key )