@wordpress/block-editor 9.8.1-next.957ca95e4c.0 → 10.0.1

package/src/components/warning/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -10,47 +11,49 @@ import Warning from '../index';
 
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
-		const wrapper = shallow( <Warning>error</Warning> );
+		const { container } = render( <Warning>error</Warning> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should have valid class', () => {
-		const wrapper = shallow( <Warning /> );
-
-		expect( wrapper.find( '.block-editor-warning' ) ).toHaveLength( 1 );
-		expect( wrapper.find( '.block-editor-warning__actions' ) ).toHaveLength(
-			0
-		);
-		expect( wrapper.find( '.block-editor-warning__hidden' ) ).toHaveLength(
-			0
-		);
-	} );
-
-	it( 'should show child error message element', () => {
-		const wrapper = shallow(
-			<Warning actions={ <button /> }>Message</Warning>
+	it( 'should show primary actions', () => {
+		render(
+			<Warning actions={ <button>Click me</button> }>Message</Warning>
 		);
 
-		const actions = wrapper.find( '.block-editor-warning__actions' );
-		const action = actions.childAt( 0 );
+		expect(
+			screen.getByRole( 'button', { name: 'Click me' } )
+		).toBeVisible();
 
-		expect( actions ).toHaveLength( 1 );
-		expect( action.hasClass( 'block-editor-warning__action' ) ).toBe(
-			true
-		);
-		expect( action.childAt( 0 ).type() ).toBe( 'button' );
+		expect(
+			screen.queryByRole( 'button', { name: 'More options' } )
+		).not.toBeInTheDocument();
 	} );
 
-	it( 'should show hidden actions', () => {
-		const wrapper = shallow(
+	it( 'should show hidden secondary actions', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
 			<Warning secondaryActions={ [ { title: 'test', onClick: null } ] }>
 				Message
 			</Warning>
 		);
 
-		const actions = wrapper.find( '.block-editor-warning__secondary' );
+		const secondaryActionsBtn = screen.getByRole( 'button', {
+			name: 'More options',
+		} );
+
+		expect( secondaryActionsBtn ).toBeVisible();
+		expect(
+			screen.queryByRole( 'menuitem', { name: 'test' } )
+		).not.toBeInTheDocument();
+
+		await user.click( secondaryActionsBtn );
 
-		expect( actions ).toHaveLength( 1 );
+		expect(
+			screen.getByRole( 'menuitem', { name: 'test' } )
+		).toBeInTheDocument();
 	} );
 } );

package/src/components/writing-flow/use-select-all.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -55,7 +50,10 @@ export default function useSelectAll() {
 				return;
 			}
 
-			multiSelect( first( blockClientIds ), last( blockClientIds ) );
+			multiSelect(
+				blockClientIds[ 0 ],
+				blockClientIds[ blockClientIds.length - 1 ]
+			);
 		}
 
 		node.addEventListener( 'keydown', onKeyDown );

package/src/hooks/align.js

@@ -14,12 +14,14 @@ import {
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { BlockControls, BlockAlignmentControl } from '../components';
 import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';
+import { store as blockEditorStore } from '../store';
 
 /**
  * An array which includes all possible valid alignments,
@@ -116,6 +118,7 @@ export function addAttribute( settings ) {
  */
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		const blockEdit = <BlockEdit { ...props } />;
 		const { name: blockName } = props;
 		// Compute the block valid alignments by taking into account,
 		// if the theme supports wide alignments or not and the layout's
@@ -129,6 +132,17 @@ export const withToolbarControls = createHigherOrderComponent(
 		const validAlignments = useAvailableAlignments(
 			blockAllowedAlignments
 		).map( ( { name } ) => name );
+		const isContentLocked = useSelect(
+			( select ) => {
+				return select(
+					blockEditorStore
+				).__unstableGetContentLockingParent( props.clientId );
+			},
+			[ props.clientId ]
+		);
+		if ( ! validAlignments.length || isContentLocked ) {
+			return blockEdit;
+		}
 
 		const updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {
@@ -143,19 +157,14 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return (
 			<>
-				{ !! validAlignments.length && (
-					<BlockControls
-						group="block"
-						__experimentalShareWithChildBlocks
-					>
-						<BlockAlignmentControl
-							value={ props.attributes.align }
-							onChange={ updateAlignment }
-							controls={ validAlignments }
-						/>
-					</BlockControls>
-				) }
-				<BlockEdit { ...props } />
+				<BlockControls group="block" __experimentalShareWithChildBlocks>
+					<BlockAlignmentControl
+						value={ props.attributes.align }
+						onChange={ updateAlignment }
+						controls={ validAlignments }
+					/>
+				</BlockControls>
+				{ blockEdit }
 			</>
 		);
 	},

package/src/hooks/color-panel.js

@@ -26,9 +26,10 @@ export default function ColorPanel( {
 	const [ detectedColor, setDetectedColor ] = useState();
 	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
 	const ref = useBlockRef( clientId );
+	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
 
 	useEffect( () => {
-		if ( ! enableContrastChecking ) {
+		if ( ! enableContrastChecking || ! definedColors.length ) {
 			return;
 		}
 

package/src/hooks/content-lock-ui.js

@@ -0,0 +1,161 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { BlockControls } from '../components';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+function StopEditingAsBlocksOnOutsideSelect( {
+	clientId,
+	stopEditingAsBlock,
+} ) {
+	const isBlockOrDescendantSelected = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return (
+				isBlockSelected( clientId ) ||
+				hasSelectedInnerBlock( clientId, true )
+			);
+		},
+		[ clientId ]
+	);
+	useEffect( () => {
+		if ( ! isBlockOrDescendantSelected ) {
+			stopEditingAsBlock();
+		}
+	}, [ isBlockOrDescendantSelected ] );
+	return null;
+}
+
+export const withBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { getBlockListSettings, getSettings } =
+			useSelect( blockEditorStore );
+		const focusModeToRevert = useRef();
+		const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
+			( select ) => {
+				const {
+					__unstableGetContentLockingParent,
+					getTemplateLock,
+					__unstableGetTemporarilyEditingAsBlocks,
+				} = select( blockEditorStore );
+				return {
+					templateLock: getTemplateLock( props.clientId ),
+					isLockedByParent: !! __unstableGetContentLockingParent(
+						props.clientId
+					),
+					isEditingAsBlocks:
+						__unstableGetTemporarilyEditingAsBlocks() ===
+						props.clientId,
+				};
+			},
+			[ props.clientId ]
+		);
+
+		const {
+			updateSettings,
+			updateBlockListSettings,
+			__unstableSetTemporarilyEditingAsBlocks,
+		} = useDispatch( blockEditorStore );
+		const isContentLocked =
+			! isLockedByParent && templateLock === 'contentOnly';
+		const {
+			__unstableMarkNextChangeAsNotPersistent,
+			updateBlockAttributes,
+		} = useDispatch( blockEditorStore );
+
+		const stopEditingAsBlock = useCallback( () => {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( props.clientId, {
+				templateLock: 'contentOnly',
+			} );
+			updateBlockListSettings( props.clientId, {
+				...getBlockListSettings( props.clientId ),
+				templateLock: 'contentOnly',
+			} );
+			updateSettings( { focusMode: focusModeToRevert.current } );
+			__unstableSetTemporarilyEditingAsBlocks();
+		}, [
+			props.clientId,
+			focusModeToRevert,
+			updateSettings,
+			updateBlockListSettings,
+			getBlockListSettings,
+			__unstableMarkNextChangeAsNotPersistent,
+			updateBlockAttributes,
+			__unstableSetTemporarilyEditingAsBlocks,
+		] );
+
+		if ( ! isContentLocked && ! isEditingAsBlocks ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		return (
+			<>
+				{ isEditingAsBlocks && ! isContentLocked && (
+					<StopEditingAsBlocksOnOutsideSelect
+						clientId={ props.clientId }
+						stopEditingAsBlock={ stopEditingAsBlock }
+					/>
+				) }
+				<BlockControls group="other">
+					<ToolbarButton
+						onClick={ () => {
+							if ( isEditingAsBlocks && ! isContentLocked ) {
+								stopEditingAsBlock();
+							} else {
+								__unstableMarkNextChangeAsNotPersistent();
+								updateBlockAttributes( props.clientId, {
+									templateLock: undefined,
+								} );
+								updateBlockListSettings( props.clientId, {
+									...getBlockListSettings( props.clientId ),
+									templateLock: false,
+								} );
+								focusModeToRevert.current =
+									getSettings().focusMode;
+								updateSettings( { focusMode: true } );
+								__unstableSetTemporarilyEditingAsBlocks(
+									props.clientId
+								);
+							}
+						} }
+					>
+						{ isEditingAsBlocks && ! isContentLocked
+							? __( 'Done' )
+							: __( 'Modify' ) }
+					</ToolbarButton>
+				</BlockControls>
+				<BlockEdit
+					{ ...props }
+					className={ classnames(
+						props.className,
+						isEditingAsBlocks &&
+							'is-content-locked-editing-as-blocks'
+					) }
+				/>
+			</>
+		);
+	},
+	'withToolbarControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/style/with-block-controls',
+	withBlockControls
+);

package/src/hooks/duotone.js

@@ -12,6 +12,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useContext, createPortal } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ import {
 	__unstableDuotoneStylesheet as DuotoneStylesheet,
 	__unstableDuotoneUnsetStylesheet as DuotoneUnsetStylesheet,
 } from '../components/duotone';
+import { store as blockEditorStore } from '../store';
 
 const EMPTY_ARRAY = [];
 
@@ -157,11 +159,21 @@ const withDuotoneControls = createHigherOrderComponent(
 			props.name,
 			'color.__experimentalDuotone'
 		);
+		const isContentLocked = useSelect(
+			( select ) => {
+				return select(
+					blockEditorStore
+				).__unstableGetContentLockingParent( props.clientId );
+			},
+			[ props.clientId ]
+		);
 
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ hasDuotoneSupport && <DuotonePanel { ...props } /> }
+				{ hasDuotoneSupport && ! isContentLocked && (
+					<DuotonePanel { ...props } />
+				) }
 			</>
 		);
 	},

package/src/hooks/index.js

@@ -15,10 +15,14 @@ import './duotone';
 import './font-size';
 import './border';
 import './layout';
+import './content-lock-ui';
+import './metadata';
+import './metadata-name';
 
 export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/layout.js

@@ -63,7 +63,12 @@ function useLayoutClasses( layout, layoutDefinitions ) {
 		);
 	}
 
-	if ( ( layout?.inherit || layout?.contentSize ) && rootPaddingAlignment ) {
+	if (
+		( layout?.inherit ||
+			layout?.contentSize ||
+			layout?.type === 'constrained' ) &&
+		rootPaddingAlignment
+	) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -138,8 +143,10 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		return null;
 	}
 	const layoutType = getLayoutType( type );
-
 	const constrainedType = getLayoutType( 'constrained' );
+	const displayControlsForLegacyLayouts =
+		! usedLayout.type && ( contentSize || inherit );
+	const hasContentSizeOrLegacySettings = !! inherit || !! contentSize;
 
 	const onChangeType = ( newType ) =>
 		setAttributes( { layout: { type: newType } } );
@@ -153,36 +160,35 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 					{ showInheritToggle && (
 						<>
 							<ToggleControl
-								label={ __(
-									'Inner blocks respect content width'
-								) }
+								className="block-editor-hooks__toggle-control"
+								label={ __( 'Inner blocks use content width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
-									!! inherit ||
-									!! contentSize
+									hasContentSizeOrLegacySettings
 								}
 								onChange={ () =>
 									setAttributes( {
 										layout: {
 											type:
 												layoutType?.name ===
-												'constrained'
+													'constrained' ||
+												hasContentSizeOrLegacySettings
 													? 'default'
 													: 'constrained',
 										},
 									} )
 								}
+								help={
+									layoutType?.name === 'constrained' ||
+									hasContentSizeOrLegacySettings
+										? __(
+												'Nested blocks use content width with options for full and wide widths.'
+										  )
+										: __(
+												'Nested blocks will fill the width of this container. Toggle to constrain.'
+										  )
+								}
 							/>
-							<p className="block-editor-hooks__layout-controls-helptext">
-								{ !! inherit ||
-								layoutType?.name === 'constrained'
-									? __(
-											'Nested blocks use theme content width with options for full and wide widths.'
-									  )
-									: __(
-											'Nested blocks will fill the width of this container.'
-									  ) }
-							</p>
 						</>
 					) }
 
@@ -200,7 +206,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 							layoutBlockSupport={ layoutBlockSupport }
 						/>
 					) }
-					{ constrainedType && !! contentSize && (
+					{ constrainedType && displayControlsForLegacyLayouts && (
 						<constrainedType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }

package/src/hooks/layout.scss

@@ -1,6 +1,6 @@
 .block-editor-hooks__layout-controls {
 	display: flex;
-	margin-bottom: $grid-unit-20;
+	margin-bottom: $grid-unit-10;
 
 	.block-editor-hooks__layout-controls-unit {
 		display: flex;
@@ -19,7 +19,9 @@
 }
 
 .block-editor-hooks__layout-controls-helptext {
+	color: $gray-700;
 	font-size: $helptext-font-size;
+	margin-bottom: $grid-unit-20;
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -29,3 +31,7 @@
 		margin-bottom: $grid-unit-10;
 	}
 }
+
+.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
+	margin-bottom: $grid-unit-20;
+}

package/src/hooks/metadata-name.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import { hasBlockMetadataSupport } from './metadata';
+
+/**
+ * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addLabelCallback( settings ) {
+	// If blocks provide their own label callback, do not override it.
+	if ( settings.__experimentalLabel ) {
+		return settings;
+	}
+
+	const supportsBlockNaming = hasBlockMetadataSupport(
+		settings,
+		'name',
+		false // default value
+	);
+
+	// Check whether block metadata is supported before using it.
+	if ( supportsBlockNaming ) {
+		settings.__experimentalLabel = ( attributes, { context } ) => {
+			const { metadata } = attributes;
+
+			// In the list view, use the block's name attribute as the label.
+			if ( context === 'list-view' && metadata?.name ) {
+				return metadata.name;
+			}
+		};
+	}
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/metadata/addLabelCallback',
+	addLabelCallback
+);

package/src/hooks/metadata.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { getBlockSupport } from '@wordpress/blocks';
+
+const META_ATTRIBUTE_NAME = 'metadata';
+
+export function hasBlockMetadataSupport( blockType, feature = '' ) {
+	const support = getBlockSupport( blockType, '__experimentalMetadata' );
+	return !! ( true === support || support?.[ feature ] );
+}
+
+/**
+ * Filters registered block settings, extending attributes to include `metadata`.
+ *
+ * see: https://github.com/WordPress/gutenberg/pull/40393/files#r864632012
+ *
+ * @param {Object} blockTypeSettings Original block settings.
+ * @return {Object} Filtered block settings.
+ */
+export function addMetaAttribute( blockTypeSettings ) {
+	// Allow blocks to specify their own attribute definition with default values if needed.
+	if ( blockTypeSettings?.attributes?.[ META_ATTRIBUTE_NAME ]?.type ) {
+		return blockTypeSettings;
+	}
+
+	const supportsBlockNaming = hasBlockMetadataSupport(
+		blockTypeSettings,
+		'name',
+		false
+	);
+
+	if ( supportsBlockNaming ) {
+		blockTypeSettings.attributes = {
+			...blockTypeSettings.attributes,
+			[ META_ATTRIBUTE_NAME ]: {
+				type: 'object',
+			},
+		};
+	}
+
+	return blockTypeSettings;
+}
+
+export function addSaveProps( extraProps, blockType, attributes ) {
+	if ( hasBlockMetadataSupport( blockType ) ) {
+		extraProps[ META_ATTRIBUTE_NAME ] = attributes[ META_ATTRIBUTE_NAME ];
+	}
+
+	return extraProps;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/metadata/addMetaAttribute',
+	addMetaAttribute
+);
+
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/metadata/save-props',
+	addSaveProps
+);

package/src/hooks/test/use-typography-props.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import { getTypographyClassesAndStyles } from '../use-typography-props';
+
+describe( 'getTypographyClassesAndStyles', () => {
+	it( 'should return styles and classes', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			fontSize: 'large',
+			style: {
+				typography: {
+					letterSpacing: '22px',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
+			className: 'has-tofu-font-family has-large-font-size',
+			style: {
+				letterSpacing: '22px',
+				fontSize: '2rem',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
+} );