@wordpress/block-editor 12.14.0 → 12.16.0

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 )

package/src/hooks/utils.js

@@ -2,17 +2,28 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useEffect, useId } from '@wordpress/element';
+import { useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { createHigherOrderComponent, pure } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from '../components/block-edit/context';
 import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 
 /**
  * Removed falsy values from nested object.
@@ -101,14 +112,18 @@ export function transformStyles(
  * Check whether serialization of specific block support feature or set should
  * be skipped.
  *
- * @param {string|Object} blockType  Block name or block type object.
- * @param {string}        featureSet Name of block support feature set.
- * @param {string}        feature    Name of the individual feature to check.
+ * @param {string|Object} blockNameOrType Block name or block type object.
+ * @param {string}        featureSet      Name of block support feature set.
+ * @param {string}        feature         Name of the individual feature to check.
  *
  * @return {boolean} Whether serialization should occur.
  */
-export function shouldSkipSerialization( blockType, featureSet, feature ) {
-	const support = getBlockSupport( blockType, featureSet );
+export function shouldSkipSerialization(
+	blockNameOrType,
+	featureSet,
+	feature
+) {
+	const support = getBlockSupport( blockNameOrType, featureSet );
 	const skipSerialization = support?.__experimentalSkipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
@@ -362,3 +377,169 @@ export function useBlockSettings( name, parentLayout ) {
 
 	return useSettingsForBlockElement( rawSettings, name );
 }
+
+export function createBlockEditFilter( features ) {
+	// 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.
+	features = features.map( ( settings ) => {
+		return { ...settings, Edit: pure( settings.edit ) };
+	} );
+	const withBlockEditHooks = createHigherOrderComponent(
+		( OriginalBlockEdit ) => ( props ) => {
+			const context = useBlockEditContext();
+			// CAUTION: code added before this line will be executed for all
+			// blocks, not just those that support the feature! Code added
+			// above this line should be carefully evaluated for its impact on
+			// performance.
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						Edit,
+						hasSupport,
+						attributeKeys = [],
+						shareWithChildBlocks,
+					} = feature;
+					const shouldDisplayControls =
+						context[ mayDisplayControlsKey ] ||
+						( context[ mayDisplayParentControlsKey ] &&
+							shareWithChildBlocks );
+
+					if (
+						! shouldDisplayControls ||
+						! hasSupport( props.name )
+					) {
+						return null;
+					}
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+					return (
+						<Edit
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							name={ props.name }
+							clientId={ props.clientId }
+							setAttributes={ props.setAttributes }
+							__unstableParentLayout={
+								props.__unstableParentLayout
+							}
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<OriginalBlockEdit key="edit" { ...props } />,
+			];
+		},
+		'withBlockEditHooks'
+	);
+	addFilter( 'editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks );
+}
+
+function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) {
+	const wrapperProps = useBlockProps( props );
+	const setWrapperProps = ( next ) =>
+		setAllWrapperProps( ( prev ) => {
+			const nextAll = [ ...prev ];
+			nextAll[ index ] = next;
+			return nextAll;
+		} );
+	// Setting state after every render is fine because this component is
+	// pure and will only re-render when needed props change.
+	useEffect( () => {
+		// We could shallow compare the props, but since this component only
+		// changes when needed attributes change, the benefit is probably small.
+		setWrapperProps( wrapperProps );
+		return () => {
+			setWrapperProps( undefined );
+		};
+	} );
+	return null;
+}
+
+const BlockPropsPure = pure( BlockProps );
+
+export function createBlockListBlockFilter( features ) {
+	const withBlockListBlockHooks = createHigherOrderComponent(
+		( BlockListBlock ) => ( props ) => {
+			const [ allWrapperProps, setAllWrapperProps ] = useState(
+				Array( features.length ).fill( undefined )
+			);
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						hasSupport,
+						attributeKeys = [],
+						useBlockProps,
+					} = feature;
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+
+					if (
+						! hasSupport( props.name ) ||
+						// Skip rendering if none of the needed attributes are
+						// set.
+						! Object.keys( neededProps ).length
+					) {
+						return null;
+					}
+
+					return (
+						<BlockPropsPure
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							index={ i }
+							useBlockProps={ useBlockProps }
+							// This component is pure, so we must pass a stable
+							// function reference.
+							setAllWrapperProps={ setAllWrapperProps }
+							name={ props.name }
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<BlockListBlock
+					key="edit"
+					{ ...props }
+					wrapperProps={ allWrapperProps
+						.filter( Boolean )
+						.reduce( ( acc, wrapperProps ) => {
+							return {
+								...acc,
+								...wrapperProps,
+								className: classnames(
+									acc.className,
+									wrapperProps.className
+								),
+								style: {
+									...acc.style,
+									...wrapperProps.style,
+								},
+							};
+						}, props.wrapperProps || {} ) }
+				/>,
+			];
+		},
+		'withBlockListBlockHooks'
+	);
+	addFilter(
+		'editor.BlockListBlock',
+		'core/editor/hooks',
+		withBlockListBlockHooks
+	);
+}

package/src/layouts/constrained.js

@@ -36,7 +36,10 @@ export default {
 		layoutBlockSupport = {},
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
-		const { allowJustification = true } = layoutBlockSupport;
+		const {
+			allowJustification = true,
+			allowCustomContentAndWideSize = true,
+		} = layoutBlockSupport;
 		const onJustificationChange = ( value ) => {
 			onChange( {
 				...layout,
@@ -66,55 +69,59 @@ export default {
 		} );
 		return (
 			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							className="block-editor-hooks__layout-controls-unit-input"
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							className="block-editor-hooks__layout-controls-unit-input"
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
+				{ allowCustomContentAndWideSize && (
+					<>
+						<div className="block-editor-hooks__layout-controls">
+							<div className="block-editor-hooks__layout-controls-unit">
+								<UnitControl
+									className="block-editor-hooks__layout-controls-unit-input"
+									label={ __( 'Content' ) }
+									labelPosition="top"
+									__unstableInputWidth="80px"
+									value={ contentSize || wideSize || '' }
+									onChange={ ( nextWidth ) => {
+										nextWidth =
+											0 > parseFloat( nextWidth )
+												? '0'
+												: nextWidth;
+										onChange( {
+											...layout,
+											contentSize: nextWidth,
+										} );
+									} }
+									units={ units }
+								/>
+								<Icon icon={ positionCenter } />
+							</div>
+							<div className="block-editor-hooks__layout-controls-unit">
+								<UnitControl
+									className="block-editor-hooks__layout-controls-unit-input"
+									label={ __( 'Wide' ) }
+									labelPosition="top"
+									__unstableInputWidth="80px"
+									value={ wideSize || contentSize || '' }
+									onChange={ ( nextWidth ) => {
+										nextWidth =
+											0 > parseFloat( nextWidth )
+												? '0'
+												: nextWidth;
+										onChange( {
+											...layout,
+											wideSize: nextWidth,
+										} );
+									} }
+									units={ units }
+								/>
+								<Icon icon={ stretchWide } />
+							</div>
+						</div>
+						<p className="block-editor-hooks__layout-controls-helptext">
+							{ __(
+								'Customize the width for all elements that are assigned to the center or wide columns.'
+							) }
+						</p>
+					</>
+				) }
 				{ allowJustification && (
 					<ToggleGroupControl
 						__nextHasNoMarginBottom

package/src/private-apis.js

@@ -10,7 +10,6 @@ import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
-import BlockContextualToolbar from './components/block-tools/block-contextual-toolbar';
 import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
@@ -42,7 +41,6 @@ lock( privateApis, {
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
-	BlockContextualToolbar,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
 	useStyleOverride,

package/src/store/private-actions.js

@@ -290,3 +290,11 @@ export function deleteStyleOverride( id ) {
 		id,
 	};
 }
+
+export function syncDerivedBlockAttributes( clientId, attributes ) {
+	return {
+		type: 'SYNC_DERIVED_BLOCK_ATTRIBUTES',
+		clientIds: [ clientId ],
+		attributes,
+	};
+}

package/src/store/private-selectors.js

@@ -10,7 +10,12 @@ import {
 	getBlockOrder,
 	getBlockParents,
 	getBlockEditingMode,
+	getSettings,
+	__experimentalGetParsedPattern,
+	canInsertBlockType,
+	__experimentalGetAllowedPatterns,
 } from './selectors';
+import { getUserPatterns, checkAllowListRecursive } from './utils';
 
 /**
  * Returns true if the block interface is hidden, or false otherwise.
@@ -236,3 +241,43 @@ export const getInserterMediaCategories = createSelector(
 		state.registeredInserterMediaCategories,
 	]
 );
+
+/**
+ * Returns whether there is at least one allowed pattern for inner blocks children.
+ * This is useful for deferring the parsing of all patterns until needed.
+ *
+ * @param {Object} state               Editor state.
+ * @param {string} [rootClientId=null] Target root client ID.
+ *
+ * @return {boolean} If there is at least one allowed pattern.
+ */
+export const hasAllowedPatterns = createSelector(
+	( state, rootClientId = null ) => {
+		const patterns = state.settings.__experimentalBlockPatterns;
+		const userPatterns = getUserPatterns( state );
+		const { allowedBlockTypes } = getSettings( state );
+		return [ ...userPatterns, ...patterns ].some(
+			( { name, inserter = true } ) => {
+				if ( ! inserter ) {
+					return false;
+				}
+				const { blocks } = __experimentalGetParsedPattern(
+					state,
+					name
+				);
+				return (
+					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
+					blocks.every( ( { name: blockName } ) =>
+						canInsertBlockType( state, blockName, rootClientId )
+					)
+				);
+			}
+		);
+	},
+	( state, rootClientId ) => [
+		...__experimentalGetAllowedPatterns.getDependants(
+			state,
+			rootClientId
+		),
+	]
+);