@wordpress/block-editor 12.1.0 → 12.3.0

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/components/writing-flow/use-tab-nav.js

@@ -43,13 +43,24 @@ export default function useTabNav() {
 		} else {
 			setNavigationMode( true );
 
+			const canvasElement =
+				container.current.ownerDocument === event.target.ownerDocument
+					? container.current
+					: container.current.ownerDocument.defaultView.frameElement;
+
 			const isBefore =
 				// eslint-disable-next-line no-bitwise
-				event.target.compareDocumentPosition( container.current ) &
+				event.target.compareDocumentPosition( canvasElement ) &
 				event.target.DOCUMENT_POSITION_FOLLOWING;
-			const action = isBefore ? 'findNext' : 'findPrevious';
+			const tabbables = focus.tabbable.find( container.current );
+
+			if ( tabbables.length ) {
+				const next = isBefore
+					? tabbables[ 0 ]
+					: tabbables[ tabbables.length - 1 ];
 
-			focus.tabbable[ action ]( event.target ).focus();
+				next.focus();
+			}
 		}
 	}
 

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

@@ -12,6 +12,7 @@ import { Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * Regular expression matching invalid anchor characters for replacement.
@@ -63,6 +64,7 @@ export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
 			const hasAnchor = hasBlockSupport( props.name, 'anchor' );
+			const blockEditingMode = useBlockEditingMode();
 
 			if ( hasAnchor && props.isSelected ) {
 				const isWeb = Platform.OS === 'web';
@@ -104,7 +106,7 @@ export const withInspectorControl = createHigherOrderComponent(
 				return (
 					<>
 						<BlockEdit { ...props } />
-						{ isWeb && (
+						{ isWeb && blockEditingMode === 'default' && (
 							<InspectorControls group="advanced">
 								{ textControl }
 							</InspectorControls>

package/src/hooks/behaviors.js

@@ -0,0 +1,160 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import {
+	SelectControl,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { InspectorControls } from '../components';
+
+/**
+ * External dependencies
+ */
+import merge from 'deepmerge';
+
+function BehaviorsControl( {
+	blockName,
+	blockBehaviors,
+	onChange,
+	disabled = false,
+} ) {
+	const { settings, themeBehaviors } = useSelect(
+		( select ) => {
+			const { getBehaviors, getSettings } = select( blockEditorStore );
+
+			return {
+				settings:
+					getSettings()?.__experimentalFeatures?.blocks?.[ blockName ]
+						?.behaviors,
+				themeBehaviors: getBehaviors()?.blocks?.[ blockName ],
+			};
+		},
+		[ blockName ]
+	);
+
+	const noBehaviorsOption = {
+		value: '',
+		label: __( 'No behaviors' ),
+	};
+
+	const behaviorsOptions = Object.entries( settings )
+		.filter(
+			( [ behaviorName, behaviorValue ] ) =>
+				hasBlockSupport( blockName, 'behaviors.' + behaviorName ) &&
+				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(),
+		} ) );
+
+	// If every behavior is disabled, do not show the behaviors inspector control.
+	if ( behaviorsOptions.length === 0 ) return null;
+
+	const options = [ noBehaviorsOption, ...behaviorsOptions ];
+
+	// Block behaviors take precedence over theme behaviors.
+	const behaviors = merge( themeBehaviors, blockBehaviors || {} );
+
+	const helpText = disabled
+		? __( 'The lightbox behavior is disabled for linked images.' )
+		: __( 'Add behaviors.' );
+
+	return (
+		<InspectorControls group="advanced">
+			{ /* This div is needed to prevent a margin bottom between the dropdown and the button. */ }
+			<div>
+				<SelectControl
+					label={ __( 'Behaviors' ) }
+					// At the moment we are only supporting one behavior (Lightbox)
+					value={ behaviors?.lightbox ? 'lightbox' : '' }
+					options={ options }
+					onChange={ onChange }
+					hideCancelButton={ true }
+					help={ helpText }
+					size="__unstable-large"
+					disabled={ disabled }
+				/>
+			</div>
+			<HStack justify="flex-end">
+				<Button
+					isSmall
+					disabled={ disabled }
+					onClick={ () => onChange( undefined ) }
+				>
+					{ __( 'Reset' ) }
+				</Button>
+			</HStack>
+		</InspectorControls>
+	);
+}
+
+/**
+ * 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 ) => {
+		const blockEdit = <BlockEdit key="edit" { ...props } />;
+		// Only add behaviors to blocks with support.
+		if ( ! hasBlockSupport( props.name, 'behaviors' ) ) {
+			return blockEdit;
+		}
+		const blockHasLink =
+			typeof props.attributes?.linkDestination !== 'undefined' &&
+			props.attributes?.linkDestination !== 'none';
+		return (
+			<>
+				{ blockEdit }
+				<BehaviorsControl
+					blockName={ props.name }
+					blockBehaviors={ props.attributes.behaviors }
+					onChange={ ( nextValue ) => {
+						if ( nextValue === undefined ) {
+							props.setAttributes( {
+								behaviors: undefined,
+							} );
+						} else {
+							// 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',
+								},
+							} );
+						}
+					} }
+					disabled={ blockHasLink }
+				/>
+			</>
+		);
+	};
+}, 'withBehaviors' );
+
+if ( window?.__experimentalInteractivityAPI ) {
+	addFilter(
+		'editor.BlockEdit',
+		'core/behaviors/with-inspector-control',
+		withBehaviors
+	);
+}

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

@@ -16,6 +16,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  * Internal dependencies
  */
 import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * Filters registered block settings, extending attributes to include `className`.
@@ -50,6 +51,7 @@ export function addAttribute( settings ) {
 export const withInspectorControl = createHigherOrderComponent(
 	( BlockEdit ) => {
 		return ( props ) => {
+			const blockEditingMode = useBlockEditingMode();
 			const hasCustomClassName = hasBlockSupport(
 				props.name,
 				'customClassName',
@@ -59,25 +61,27 @@ export const withInspectorControl = createHigherOrderComponent(
 				return (
 					<>
 						<BlockEdit { ...props } />
-						<InspectorControls group="advanced">
-							<TextControl
-								__nextHasNoMarginBottom
-								autoComplete="off"
-								label={ __( 'Additional CSS class(es)' ) }
-								value={ props.attributes.className || '' }
-								onChange={ ( nextValue ) => {
-									props.setAttributes( {
-										className:
-											nextValue !== ''
-												? nextValue
-												: undefined,
-									} );
-								} }
-								help={ __(
-									'Separate multiple classes with spaces.'
-								) }
-							/>
-						</InspectorControls>
+						{ blockEditingMode === 'default' && (
+							<InspectorControls group="advanced">
+								<TextControl
+									__nextHasNoMarginBottom
+									autoComplete="off"
+									label={ __( 'Additional CSS class(es)' ) }
+									value={ props.attributes.className || '' }
+									onChange={ ( nextValue ) => {
+										props.setAttributes( {
+											className:
+												nextValue !== ''
+													? nextValue
+													: undefined,
+										} );
+									} }
+									help={ __(
+										'Separate multiple classes with spaces.'
+									) }
+								/>
+							</InspectorControls>
+						) }
 					</>
 				);
 			}

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 }
@@ -337,8 +329,11 @@ export const withInspectorControls = createHigherOrderComponent(
 			layoutBlockSupportKey
 		);
 
+		const blockEditingMode = useBlockEditingMode();
 		return [
-			supportLayout && <LayoutPanel key="layout" { ...props } />,
+			supportLayout && blockEditingMode === 'default' && (
+				<LayoutPanel key="layout" { ...props } />
+			),
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},

package/src/hooks/style.js

@@ -34,6 +34,7 @@ import {
 } from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
 import { shouldSkipSerialization } from './utils';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
@@ -347,10 +348,11 @@ export function addEditProps( settings ) {
 export const withBlockControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const shouldDisplayControls = useDisplayBlockControls();
+		const blockEditingMode = useBlockEditingMode();
 
 		return (
 			<>
-				{ shouldDisplayControls && (
+				{ shouldDisplayControls && blockEditingMode === 'default' && (
 					<>
 						<ColorEdit { ...props } />
 						<TypographyPanel { ...props } />

package/src/hooks/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, get } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,12 +30,13 @@ export const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( object )
-			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
-			.filter( ( [ , value ] ) => value !== undefined )
-	);
-	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
+
+	const cleanedNestedObjects = Object.entries( object )
+		.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
+		.filter( ( [ , value ] ) => value !== undefined );
+	return ! cleanedNestedObjects.length
+		? undefined
+		: Object.fromEntries( cleanedNestedObjects );
 };
 
 export function transformStyles(

package/src/layouts/grid.js

@@ -35,7 +35,9 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
-		return (
+		return layout?.columnCount ? (
+			<GridLayoutColumnsControl layout={ layout } onChange={ onChange } />
+		) : (
 			<GridLayoutMinimumWidthControl
 				layout={ layout }
 				onChange={ onChange }
@@ -53,7 +55,7 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const { minimumColumnWidth = '12rem' } = layout;
+		const { minimumColumnWidth = '12rem', columnCount = null } = layout;
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
@@ -66,7 +68,11 @@ export default {
 		let output = '';
 		const rules = [];
 
-		if ( minimumColumnWidth ) {
+		if ( columnCount ) {
+			rules.push(
+				`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`
+			);
+		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`
 			);
@@ -170,3 +176,23 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 		</fieldset>
 	);
 }
+
+// Enables setting number of grid columns
+function GridLayoutColumnsControl( { layout, onChange } ) {
+	const { columnCount = 3 } = layout;
+
+	return (
+		<RangeControl
+			label={ __( 'Columns' ) }
+			value={ columnCount }
+			onChange={ ( value ) =>
+				onChange( {
+					...layout,
+					columnCount: value,
+				} )
+			}
+			min={ 1 }
+			max={ 6 }
+		/>
+	);
+}

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,
 } );