@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.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,41 @@ 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,
+	addSaveProps,
+	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,142 +360,99 @@ 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'
-);
+			}
 
-addFilter(
-	'blocks.registerBlockType',
-	'core/style/addAttribute',
-	addAttribute
-);
+			// 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 ]
+								),
+							} )
+						);
+					}
+				} );
+			}
+		} );
 
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/style/addSaveProps',
-	addSaveProps
-);
+		return elementCSSRules.length > 0
+			? elementCSSRules.join( '' )
+			: undefined;
+	}, [ baseElementSelector, blockElementStyles, name ] );
 
-addFilter(
-	'blocks.registerBlockType',
-	'core/style/addEditProps',
-	addEditProps
-);
+	useStyleOverride( { css: styles } );
 
-addFilter(
-	'editor.BlockEdit',
-	'core/style/with-block-controls',
-	withBlockStyleControls
-);
+	return addSaveProps(
+		{ className: blockElementsContainerIdentifier },
+		name,
+		{ style },
+		skipSerializationPathsEdit
+	);
+}
 
 addFilter(
-	'editor.BlockListBlock',
-	'core/editor/with-elements-styles',
-	withElementsStyles
+	'blocks.registerBlockType',
+	'core/style/addAttribute',
+	addAttribute
 );

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/test/anchor.js

@@ -6,7 +6,7 @@ import { applyFilters } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import '../anchor';
+import anchor from '../anchor';
 
 const noop = () => {};
 
@@ -62,14 +62,9 @@ describe( 'anchor', () => {
 	} );
 
 	describe( 'addSaveProps', () => {
-		const getSaveContentExtraProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
-		);
-
 		it( 'should do nothing if the block settings do not define anchor support', () => {
 			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
+			const extraProps = anchor.addSaveProps(
 				{},
 				blockSettings,
 				attributes
@@ -80,7 +75,7 @@ describe( 'anchor', () => {
 
 		it( 'should inject anchor attribute ID', () => {
 			const attributes = { anchor: 'foo' };
-			const extraProps = getSaveContentExtraProps(
+			const extraProps = anchor.addSaveProps(
 				{},
 				{
 					...blockSettings,
@@ -96,7 +91,7 @@ describe( 'anchor', () => {
 
 		it( 'should remove an anchor attribute ID when field is cleared', () => {
 			const attributes = { anchor: '' };
-			const extraProps = getSaveContentExtraProps(
+			const extraProps = anchor.addSaveProps(
 				{},
 				{
 					...blockSettings,

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

@@ -6,7 +6,7 @@ import { applyFilters } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
-import '../custom-class-name';
+import customClassName from '../custom-class-name';
 
 describe( 'custom className', () => {
 	const blockSettings = {
@@ -40,14 +40,9 @@ describe( 'custom className', () => {
 	} );
 
 	describe( 'addSaveProps', () => {
-		const addSaveProps = applyFilters.bind(
-			null,
-			'blocks.getSaveContent.extraProps'
-		);
-
 		it( 'should do nothing if the block settings do not define custom className support', () => {
 			const attributes = { className: 'foo' };
-			const extraProps = addSaveProps(
+			const extraProps = customClassName.addSaveProps(
 				{},
 				{
 					...blockSettings,
@@ -63,7 +58,7 @@ describe( 'custom className', () => {
 
 		it( 'should inject the custom className', () => {
 			const attributes = { className: 'bar' };
-			const extraProps = addSaveProps(
+			const extraProps = customClassName.addSaveProps(
 				{ className: 'foo' },
 				blockSettings,
 				attributes