@wordpress/block-editor 12.14.0 → 12.16.0

package/src/hooks/position.js

@@ -12,10 +12,9 @@ import {
 	BaseControl,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo, Platform } from '@wordpress/element';
-import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -207,14 +206,12 @@ export function useIsPositionDisabled( { name: blockName } = {} ) {
  *
  * @return {Element} Position panel.
  */
-export function PositionPanel( props ) {
-	const {
-		attributes: { style = {} },
-		clientId,
-		name: blockName,
-		setAttributes,
-	} = props;
-
+export function PositionPanelPure( {
+	style = {},
+	clientId,
+	name: blockName,
+	setAttributes,
+} ) {
 	const allowFixed = hasFixedPositionSupport( blockName );
 	const allowSticky = hasStickyPositionSupport( blockName );
 	const value = style?.position?.type;
@@ -316,89 +313,52 @@ export function PositionPanel( props ) {
 	} );
 }
 
-/**
- * Override the default edit UI to include position controls.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withPositionControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { name: blockName } = props;
-		const positionSupport = hasBlockSupport(
-			blockName,
-			POSITION_SUPPORT_KEY
-		);
+export default {
+	edit: function Edit( props ) {
 		const isPositionDisabled = useIsPositionDisabled( props );
-		const showPositionControls = positionSupport && ! isPositionDisabled;
-
-		return [
-			showPositionControls && (
-				<PositionPanel key="position" { ...props } />
-			),
-			<BlockEdit key="edit" { ...props } />,
-		];
+		if ( isPositionDisabled ) {
+			return null;
+		}
+		return <PositionPanelPure { ...props } />;
+	},
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, POSITION_SUPPORT_KEY );
 	},
-	'withPositionControls'
-);
+};
 
-/**
- * Override the default block element to add the position styles.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withPositionStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { name, attributes } = props;
-		const hasPositionBlockSupport = hasBlockSupport(
-			name,
-			POSITION_SUPPORT_KEY
-		);
-		const isPositionDisabled = useIsPositionDisabled( props );
-		const allowPositionStyles =
-			hasPositionBlockSupport && ! isPositionDisabled;
-
-		const id = useInstanceId( BlockListBlock );
-
-		// Higher specificity to override defaults in editor UI.
-		const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
-
-		// Get CSS string for the current position values.
-		let css;
-		if ( allowPositionStyles ) {
-			css =
-				getPositionCSS( {
-					selector: positionSelector,
-					style: attributes?.style,
-				} ) || '';
-		}
+function useBlockProps( { name, style } ) {
+	const hasPositionBlockSupport = hasBlockSupport(
+		name,
+		POSITION_SUPPORT_KEY
+	);
+	const isPositionDisabled = useIsPositionDisabled( { name } );
+	const allowPositionStyles = hasPositionBlockSupport && ! isPositionDisabled;
+
+	const id = useInstanceId( useBlockProps );
+
+	// Higher specificity to override defaults in editor UI.
+	const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
+
+	// Get CSS string for the current position values.
+	let css;
+	if ( allowPositionStyles ) {
+		css =
+			getPositionCSS( {
+				selector: positionSelector,
+				style,
+			} ) || '';
+	}
 
-		// Attach a `wp-container-` id-based class name.
-		const className = classnames( props?.className, {
-			[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
-			[ `is-position-${ attributes?.style?.position?.type }` ]:
-				allowPositionStyles &&
-				!! css &&
-				!! attributes?.style?.position?.type,
-		} );
+	// Attach a `wp-container-` id-based class name.
+	const className = classnames( {
+		[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+		[ `is-position-${ style?.position?.type }` ]:
+			allowPositionStyles && !! css && !! style?.position?.type,
+	} );
 
-		useStyleOverride( { css } );
+	useStyleOverride( { css } );
 
-		return <BlockListBlock { ...props } className={ className } />;
-	},
-	'withPositionStyles'
-);
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/position/with-position-styles',
-	withPositionStyles
-);
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/position/with-inspector-controls',
-	withPositionControls
-);
+	return { className };
+}

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/__snapshots__/align.native.js.snap

@@ -19,25 +19,25 @@ exports[`Align options for group block sets Wide width option 1`] = `
 `;
 
 exports[`Align options for media block sets Align center option 1`] = `
-"<!-- wp:image {"align":"center","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
 <figure class="wp-block-image aligncenter size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align left option 1`] = `
-"<!-- wp:image {"align":"left","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"left"} -->
 <figure class="wp-block-image alignleft size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Align right option 1`] = `
-"<!-- wp:image {"align":"right","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"right"} -->
 <figure class="wp-block-image alignright size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
 
 exports[`Align options for media block sets Full width option 1`] = `
-"<!-- wp:image {"align":"full","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"full"} -->
 <figure class="wp-block-image alignfull size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;
@@ -49,7 +49,7 @@ exports[`Align options for media block sets None option 1`] = `
 `;
 
 exports[`Align options for media block sets Wide width option 1`] = `
-"<!-- wp:image {"align":"wide","id":1,"sizeSlug":"large","linkDestination":"none"} -->
+"<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","align":"wide"} -->
 <figure class="wp-block-image alignwide size-large"><img src="https://test-site.files.wordpress.com/local-image-1.jpeg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->"
 `;