@wordpress/block-editor 12.1.0 → 12.2.0

package/src/components/publish-date-time-picker/index.js

@@ -29,8 +29,6 @@ function PublishDateTimePicker(
 			/>
 			<DateTimePicker
 				startOfWeek={ getSettings().l10n.startOfWeek }
-				__nextRemoveHelpButton
-				__nextRemoveResetButton
 				onChange={ onChange }
 				{ ...additionalProps }
 			/>

package/src/components/url-input/README.md

@@ -139,6 +139,12 @@ _Required._ Called when the value changes. The second parameter is `null` unless
 }
 ```
 
+### `onKeydown`: `( event: KeyboardEvent ) => void`
+
+A callback invoked on the keydown event.
+
+-   Required: No
+
 ### `label: String`
 
 _Optional._ If this property is added, a label will be generated using label property as the content.

package/src/components/url-input/index.js

@@ -267,6 +267,7 @@ class URLInput extends Component {
 	}
 
 	onKeyDown( event ) {
+		this.props.onKeyDown?.( event );
 		const { showSuggestions, selectedSuggestion, suggestions, loading } =
 			this.state;
 

package/src/components/use-block-drop-zone/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import {
 	useThrottle,
@@ -19,6 +19,7 @@ import {
 	isPointContainedByRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -142,6 +143,7 @@ export default function useBlockDropZone( {
 	// an empty string to represent top-level blocks.
 	rootClientId: targetRootClientId = '',
 } = {} ) {
+	const registry = useRegistry();
 	const [ dropTarget, setDropTarget ] = useState( {
 		index: null,
 		operation: 'insert',
@@ -150,15 +152,13 @@ export default function useBlockDropZone( {
 	const isDisabled = useSelect(
 		( select ) => {
 			const {
-				getTemplateLock,
 				__unstableIsWithinBlockOverlay,
 				__unstableHasActiveBlockOverlayActive,
-			} = select( blockEditorStore );
-			const templateLock = getTemplateLock( targetRootClientId );
+				getBlockEditingMode,
+			} = unlock( select( blockEditorStore ) );
+			const blockEditingMode = getBlockEditingMode( targetRootClientId );
 			return (
-				[ 'all', 'contentOnly' ].some(
-					( lock ) => lock === templateLock
-				) ||
+				blockEditingMode !== 'default' ||
 				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||
 				__unstableIsWithinBlockOverlay( targetRootClientId )
 			);
@@ -181,9 +181,14 @@ export default function useBlockDropZone( {
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
 				if ( blocks.length === 0 ) {
-					setDropTarget( {
-						index: 0,
-						operation: 'insert',
+					registry.batch( () => {
+						setDropTarget( {
+							index: 0,
+							operation: 'insert',
+						} );
+						showInsertionPoint( targetRootClientId, 0, {
+							operation: 'insert',
+						} );
 					} );
 					return;
 				}
@@ -208,15 +213,24 @@ export default function useBlockDropZone( {
 					getBlockListSettings( targetRootClientId )?.orientation
 				);
 
-				setDropTarget( {
-					index: targetIndex,
-					operation,
-				} );
-				showInsertionPoint( targetRootClientId, targetIndex, {
-					operation,
+				registry.batch( () => {
+					setDropTarget( {
+						index: targetIndex,
+						operation,
+					} );
+					showInsertionPoint( targetRootClientId, targetIndex, {
+						operation,
+					} );
 				} );
 			},
-			[ targetRootClientId ]
+			[
+				getBlocks,
+				targetRootClientId,
+				getBlockListSettings,
+				registry,
+				showInsertionPoint,
+				getBlockIndex,
+			]
 		),
 		200
 	);

package/src/components/use-resize-canvas/index.js

@@ -47,12 +47,20 @@ export default function useResizeCanvas( deviceType ) {
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
+		const marginVertical = marginValue() + 'px';
+		const marginHorizontal = 'auto';
+
 		switch ( device ) {
 			case 'Tablet':
 			case 'Mobile':
 				return {
 					width: getCanvasWidth( device ),
-					margin: marginValue() + 'px auto',
+					// Keeping margin styles separate to avoid warnings
+					// when those props get overridden in the iframe component
+					marginTop: marginVertical,
+					marginBottom: marginVertical,
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
 					height,
 					borderRadius: '2px 2px 2px 2px',
 					border: '1px solid #ddd',

package/src/components/writing-flow/test/index.js

@@ -19,6 +19,9 @@ describe( 'isNavigationCandidate', () => {
 		elements.inputCheckbox = document.createElement( 'input' );
 		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
 
+		elements.inputNumber = document.createElement( 'input' );
+		elements.inputNumber.setAttribute( 'type', 'number' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -47,6 +50,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return false if vertically navigating inputs with vertial support like number', () => {
+		[ UP, DOWN ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputNumber,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( false );
+		} );
+	} );
+
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(

package/src/components/writing-flow/use-arrow-nav.js

@@ -32,19 +32,32 @@ import { store as blockEditorStore } from '../../store';
  */
 export function isNavigationCandidate( element, keyCode, hasModifier ) {
 	const isVertical = keyCode === UP || keyCode === DOWN;
+	const { tagName } = element;
+	const elementType = element.getAttribute( 'type' );
 
-	// Currently, all elements support unmodified vertical navigation.
+	// Native inputs should not navigate vertically, unless they are simple types that don't need up/down arrow keys.
 	if ( isVertical && ! hasModifier ) {
+		if ( tagName === 'INPUT' ) {
+			const verticalInputTypes = [
+				'date',
+				'datetime-local',
+				'month',
+				'number',
+				'range',
+				'time',
+				'week',
+			];
+			return ! verticalInputTypes.includes( elementType );
+		}
 		return true;
 	}
 
-	const { tagName } = element;
-
 	// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.
 	if ( tagName === 'INPUT' ) {
 		const simpleInputTypes = [
 			'button',
 			'checkbox',
+			'number',
 			'color',
 			'file',
 			'image',
@@ -52,7 +65,7 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) {
 			'reset',
 			'submit',
 		];
-		return simpleInputTypes.includes( element.getAttribute( 'type' ) );
+		return simpleInputTypes.includes( elementType );
 	}
 
 	// Native textareas should not navigate horizontally.

package/src/hooks/align.js

@@ -13,14 +13,13 @@ 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';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * An array which includes all possible valid alignments,
@@ -133,15 +132,8 @@ 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 ) {
+		const blockEditingMode = useBlockEditingMode();
+		if ( ! validAlignments.length || blockEditingMode !== 'default' ) {
 			return blockEdit;
 		}
 

package/src/hooks/behaviors.js

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { select } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
+import { store as blockEditorStore } from '../store';
+
+/**
+ * External dependencies
+ */
+import merge from 'deepmerge';
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning behaviors to blocks if behaviors are enabled in the theme.json.
+ *
+ * Currently, only the `core/image` block is supported.
+ *
+ * @param {WPComponent} BlockEdit Original component.
+ *
+ * @return {WPComponent} Wrapped component.
+ */
+export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
+	return ( props ) => {
+		// Only add behaviors to the core/image block.
+		if ( props.name !== 'core/image' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		const settings =
+			select( blockEditorStore ).getSettings()?.__experimentalFeatures
+				?.blocks?.[ props.name ]?.behaviors;
+
+		if (
+			! settings ||
+			// If every behavior is disabled, do not show the behaviors inspector control.
+			Object.entries( settings ).every( ( [ , value ] ) => ! value )
+		) {
+			return <BlockEdit { ...props } />;
+		}
+
+		const { behaviors: blockBehaviors } = props.attributes;
+
+		// Get the theme behaviors for the block from the theme.json.
+		const themeBehaviors =
+			select( blockEditorStore ).getBehaviors()?.blocks?.[ props.name ];
+
+		// Block behaviors take precedence over theme behaviors.
+		const behaviors = merge( themeBehaviors, blockBehaviors || {} );
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				<InspectorControls group="advanced">
+					<SelectControl
+						__nextHasNoMarginBottom
+						label={ __( 'Behaviors' ) }
+						// At the moment we are only supporting one behavior (Lightbox)
+						value={ behaviors?.lightbox ? 'lightbox' : '' }
+						options={ Object.entries( settings )
+							.filter( ( [ , behaviorValue ] ) => behaviorValue ) // Filter out behaviors that are disabled.
+							.map( ( [ behaviorName ] ) => ( {
+								value: behaviorName,
+								label:
+									// Capitalize the first letter of the behavior name.
+									behaviorName[ 0 ].toUpperCase() +
+									behaviorName.slice( 1 ).toLowerCase(),
+							} ) )
+							.concat( {
+								value: '',
+								label: __( 'No behaviors' ),
+							} ) }
+						onChange={ ( nextValue ) => {
+							// If the user selects something, it means that they want to
+							// change the default value (true) so we save it in the attributes.
+							props.setAttributes( {
+								behaviors: {
+									lightbox: nextValue === 'lightbox',
+								},
+							} );
+						} }
+						hideCancelButton={ true }
+						help={ __( 'Add behaviors.' ) }
+						size="__unstable-large"
+					/>
+				</InspectorControls>
+			</>
+		);
+	};
+}, 'withBehaviors' );
+
+addFilter(
+	'editor.BlockEdit',
+	'core/behaviors/with-inspector-control',
+	withBehaviors
+);

package/src/hooks/dimensions.js

@@ -136,43 +136,3 @@ export function useCustomSides() {
 		version: '6.4',
 	} );
 }
-
-/**
- * Custom hook to determine whether the sides configured in the
- * block support are valid. A dimension property cannot declare
- * support for a mix of axial and individual sides.
- *
- * @param {string} blockName Block name.
- * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
- *
- * @return {boolean} If the feature has a valid configuration of sides.
- */
-export function useIsDimensionsSupportValid( blockName, feature ) {
-	const sides = useCustomSides( blockName, feature );
-
-	if (
-		sides &&
-		sides.some( ( side ) => ALL_SIDES.includes( side ) ) &&
-		sides.some( ( side ) => AXIAL_SIDES.includes( side ) )
-	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`The ${ feature } support for the "${ blockName }" block can not be configured to support both axial and arbitrary sides.`
-		);
-		return false;
-	}
-
-	if (
-		sides?.length &&
-		feature === 'blockGap' &&
-		! AXIAL_SIDES.every( ( side ) => sides.includes( side ) )
-	) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`The ${ feature } support for the "${ blockName }" block can not be configured to support arbitrary sides.`
-		);
-		return false;
-	}
-
-	return true;
-}

package/src/hooks/duotone.js

@@ -16,7 +16,6 @@ import {
 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
@@ -36,8 +35,8 @@ import {
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
 import { useBlockSettings } from './utils';
-import { store as blockEditorStore } from '../store';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const EMPTY_ARRAY = [];
 
@@ -226,14 +225,7 @@ const withDuotoneControls = createHigherOrderComponent(
 			'filter.duotone'
 		);
 
-		const isContentLocked = useSelect(
-			( select ) => {
-				return select(
-					blockEditorStore
-				).__unstableGetContentLockingParent( props.clientId );
-			},
-			[ props.clientId ]
-		);
+		const blockEditingMode = useBlockEditingMode();
 
 		// CAUTION: code added before this line will be executed
 		// for all blocks, not just those that support duotone. Code added
@@ -241,7 +233,7 @@ const withDuotoneControls = createHigherOrderComponent(
 		// performance.
 		return (
 			<>
-				{ hasDuotoneSupport && ! isContentLocked && (
+				{ hasDuotoneSupport && blockEditingMode === 'default' && (
 					<DuotonePanel { ...props } />
 				) }
 				<BlockEdit { ...props } />

package/src/hooks/index.js

@@ -20,6 +20,7 @@ import './layout';
 import './content-lock-ui';
 import './metadata';
 import './metadata-name';
+import './behaviors';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/layout.js

@@ -29,6 +29,7 @@ import useSetting from '../components/use-setting';
 import { LayoutStyle } from '../components/block-list/layout';
 import BlockList from '../components/block-list';
 import { getLayoutType, getLayoutTypes } from '../layouts';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const layoutBlockSupportKey = '__experimentalLayout';
 
@@ -131,25 +132,16 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	return css;
 }
 
-function LayoutPanel( {
-	clientId,
-	setAttributes,
-	attributes,
-	name: blockName,
-} ) {
+function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const { layout } = attributes;
 	const defaultThemeLayout = useSetting( 'layout' );
-	const { themeSupportsLayout, isContentLocked } = useSelect(
-		( select ) => {
-			const { getSettings, __unstableGetContentLockingParent } =
-				select( blockEditorStore );
-			return {
-				themeSupportsLayout: getSettings().supportsLayout,
-				isContentLocked: __unstableGetContentLockingParent( clientId ),
-			};
-		},
-		[ clientId ]
-	);
+	const { themeSupportsLayout } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			themeSupportsLayout: getSettings().supportsLayout,
+		};
+	}, [] );
+	const blockEditingMode = useBlockEditingMode();
 
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
@@ -270,7 +262,7 @@ function LayoutPanel( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ ! inherit && ! isContentLocked && layoutType && (
+			{ ! inherit && blockEditingMode === 'default' && layoutType && (
 				<layoutType.toolBarControls
 					layout={ usedLayout }
 					onChange={ onChangeLayout }

package/src/private-apis.js

@@ -4,14 +4,13 @@
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
-import OffCanvasEditor from './components/off-canvas-editor';
-import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
 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 { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
 import { cleanEmptyObject } from './hooks/utils';
+import { useBlockEditingMode } from './components/block-editing-mode';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -20,12 +19,11 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockEditorProvider,
-	LeafMoreMenu,
-	OffCanvasEditor,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
 	useShouldContextualToolbarShow,
 	cleanEmptyObject,
+	useBlockEditingMode,
 } );

package/src/store/private-actions.js

@@ -66,3 +66,42 @@ export function showBlockInterface() {
 		type: 'SHOW_BLOCK_INTERFACE',
 	};
 }
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Sets the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string}           clientId The block client ID, or `''` for the root container.
+ * @param {BlockEditingMode} mode     The block editing mode. One of `'disabled'`,
+ *                                    `'contentOnly'`, or `'default'`.
+ *
+ * @return {Object} Action object.
+ */
+export function setBlockEditingMode( clientId = '', mode ) {
+	return {
+		type: 'SET_BLOCK_EDITING_MODE',
+		clientId,
+		mode,
+	};
+}
+
+/**
+ * Clears the block editing mode for a given block.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {Object} Action object.
+ */
+export function unsetBlockEditingMode( clientId = '' ) {
+	return {
+		type: 'UNSET_BLOCK_EDITING_MODE',
+		clientId,
+	};
+}

package/src/store/private-selectors.js

@@ -1,3 +1,23 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
+/**
+ * WordPress dependencies
+ */
+import { createRegistrySelector } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockRootClientId,
+	getTemplateLock,
+	getBlockName,
+} from './selectors';
+
 /**
  * Returns true if the block interface is hidden, or false otherwise.
  *
@@ -18,3 +38,78 @@ export function isBlockInterfaceHidden( state ) {
 export function getLastInsertedBlocksClientIds( state ) {
 	return state?.lastBlockInserted?.clientIds;
 }
+
+/**
+ * @typedef {import('../components/block-editing-mode').BlockEditingMode} BlockEditingMode
+ */
+
+/**
+ * Returns the block editing mode for a given block.
+ *
+ * The mode can be one of three options:
+ *
+ * - `'disabled'`: Prevents editing the block entirely, i.e. it cannot be
+ *   selected.
+ * - `'contentOnly'`: Hides all non-content UI, e.g. auxiliary controls in the
+ *   toolbar, the block movers, block settings.
+ * - `'default'`: Allows editing the block as normal.
+ *
+ * Blocks can set a mode using the `useBlockEditingMode` hook.
+ *
+ * The mode is inherited by all of the block's inner blocks, unless they have
+ * their own mode.
+ *
+ * A template lock can also set a mode. If the template lock is `'contentOnly'`,
+ * the block's mode is overridden to `'contentOnly'` if the block has a content
+ * role attribute, or `'disabled'` otherwise.
+ *
+ * @see useBlockEditingMode
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID, or `''` for the root container.
+ *
+ * @return {BlockEditingMode} The block editing mode. One of `'disabled'`,
+ *                            `'contentOnly'`, or `'default'`.
+ */
+export const getBlockEditingMode = createRegistrySelector(
+	( select ) =>
+		( state, clientId = '' ) => {
+			const explicitEditingMode = getExplcitBlockEditingMode(
+				state,
+				clientId
+			);
+			const rootClientId = getBlockRootClientId( state, clientId );
+			const templateLock = getTemplateLock( state, rootClientId );
+			const name = getBlockName( state, clientId );
+			const isContent =
+				select( blocksStore ).__experimentalHasContentRoleAttribute(
+					name
+				);
+			if (
+				explicitEditingMode === 'disabled' ||
+				( templateLock === 'contentOnly' && ! isContent )
+			) {
+				return 'disabled';
+			}
+			if (
+				explicitEditingMode === 'contentOnly' ||
+				( templateLock === 'contentOnly' && isContent )
+			) {
+				return 'contentOnly';
+			}
+			return 'default';
+		}
+);
+
+const getExplcitBlockEditingMode = createSelector(
+	( state, clientId = '' ) => {
+		while (
+			! state.blockEditingModes.has( clientId ) &&
+			state.blocks.parents.has( clientId )
+		) {
+			clientId = state.blocks.parents.get( clientId );
+		}
+		return state.blockEditingModes.get( clientId ) ?? 'default';
+	},
+	( state ) => [ state.blockEditingModes, state.blocks.parents ]
+);