@wordpress/block-editor 12.2.0 → 12.3.0

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

@@ -2,22 +2,107 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { SelectControl } from '@wordpress/components';
+import {
+	SelectControl,
+	Button,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { select } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { InspectorControls } from '../components';
 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.
@@ -30,55 +115,26 @@ import merge from 'deepmerge';
  */
 export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
-		// Only add behaviors to the core/image block.
-		if ( props.name !== 'core/image' ) {
-			return <BlockEdit { ...props } />;
+		const blockEdit = <BlockEdit key="edit" { ...props } />;
+		// Only add behaviors to blocks with support.
+		if ( ! hasBlockSupport( props.name, 'behaviors' ) ) {
+			return blockEdit;
 		}
-
-		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 || {} );
-
+		const blockHasLink =
+			typeof props.attributes?.linkDestination !== 'undefined' &&
+			props.attributes?.linkDestination !== 'none';
 		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 ) => {
+				{ 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( {
@@ -86,19 +142,19 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 									lightbox: nextValue === 'lightbox',
 								},
 							} );
-						} }
-						hideCancelButton={ true }
-						help={ __( 'Add behaviors.' ) }
-						size="__unstable-large"
-					/>
-				</InspectorControls>
+						}
+					} }
+					disabled={ blockHasLink }
+				/>
 			</>
 		);
 	};
 }, 'withBehaviors' );
 
-addFilter(
-	'editor.BlockEdit',
-	'core/behaviors/with-inspector-control',
-	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/layout.js

@@ -329,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/store/private-selectors.js

@@ -6,7 +6,7 @@ import createSelector from 'rememo';
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { select } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -16,6 +16,7 @@ import {
 	getBlockRootClientId,
 	getTemplateLock,
 	getBlockName,
+	getBlockOrder,
 } from './selectors';
 
 /**
@@ -71,45 +72,66 @@ export function getLastInsertedBlocksClientIds( state ) {
  * @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 );
+export const getBlockEditingMode = createSelector(
+	( state, clientId = '' ) => {
+		if ( state.blockEditingModes.has( clientId ) ) {
+			return state.blockEditingModes.get( clientId );
+		}
+		if ( ! clientId ) {
+			return 'default';
+		}
+		const rootClientId = getBlockRootClientId( state, clientId );
+		const templateLock = getTemplateLock( state, rootClientId );
+		if ( templateLock === 'contentOnly' ) {
 			const name = getBlockName( state, clientId );
+			// TODO: Terrible hack! We're calling the global select() function
+			// here instead of using createRegistrySelector(). The problem with
+			// using createRegistrySelector() is that then the public
+			// block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't
+			// call this private block-editor selector due to a bug in
+			// @wordpress/data. See
+			// https://github.com/WordPress/gutenberg/pull/50985.
 			const isContent =
 				select( blocksStore ).__experimentalHasContentRoleAttribute(
 					name
 				);
-			if (
-				explicitEditingMode === 'disabled' ||
-				( templateLock === 'contentOnly' && ! isContent )
-			) {
-				return 'disabled';
-			}
-			if (
-				explicitEditingMode === 'contentOnly' ||
-				( templateLock === 'contentOnly' && isContent )
-			) {
-				return 'contentOnly';
-			}
-			return 'default';
+			return isContent ? 'contentOnly' : 'disabled';
 		}
+		const parentMode = getBlockEditingMode( state, rootClientId );
+		return parentMode === 'contentOnly' ? 'default' : parentMode;
+	},
+	( state ) => [
+		state.blockEditingModes,
+		state.blocks.parents,
+		state.settings.templateLock,
+		state.blockListSettings,
+	]
 );
 
-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';
+/**
+ * Returns true if the block with the given client ID and all of its descendants
+ * have an editing mode of 'disabled', or false otherwise.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {boolean} Whether the block and its descendants are disabled.
+ */
+export const isBlockSubtreeDisabled = createSelector(
+	( state, clientId ) => {
+		const isChildSubtreeDisabled = ( childClientId ) => {
+			const mode = state.blockEditingModes.get( childClientId );
+			return (
+				( mode === undefined || mode === 'disabled' ) &&
+				getBlockOrder( state, childClientId ).every(
+					isChildSubtreeDisabled
+				)
+			);
+		};
+		return (
+			getBlockEditingMode( state, clientId ) === 'disabled' &&
+			getBlockOrder( state, clientId ).every( isChildSubtreeDisabled )
+		);
 	},
 	( state ) => [ state.blockEditingModes, state.blocks.parents ]
 );

package/src/store/reducer.js

@@ -1604,18 +1604,17 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 		case 'REPLACE_BLOCKS':
 			return action.blocks.reduce( ( prevState, block ) => {
 				const { attributes, name: blockName } = block;
+				let id = blockName;
+				// If a block variation match is found change the name to be the same with the
+				// one that is used for block variations in the Inserter (`getItemFromVariation`).
 				const match = select( blocksStore ).getActiveBlockVariation(
 					blockName,
 					attributes
 				);
-				// If a block variation match is found change the name to be the same with the
-				// one that is used for block variations in the Inserter (`getItemFromVariation`).
-				let id = match?.name
-					? `${ blockName }/${ match.name }`
-					: blockName;
-				const insert = { name: id };
+				if ( match?.name ) {
+					id += '/' + match.name;
+				}
 				if ( blockName === 'core/block' ) {
-					insert.ref = attributes.ref;
 					id += '/' + attributes.ref;
 				}
 
@@ -1628,7 +1627,6 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 							count: prevState.insertUsage[ id ]
 								? prevState.insertUsage[ id ].count + 1
 								: 1,
-							insert,
 						},
 					},
 				};

package/src/store/selectors.js

@@ -26,6 +26,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { mapRichTextSettings } from './utils';
 import { orderBy } from '../utils/sorting';
+import { getBlockEditingMode } from './private-selectors';
 
 /**
  * A block selection object.
@@ -1539,6 +1540,10 @@ const canInsertBlockTypeUnmemoized = (
 		return false;
 	}
 
+	if ( getBlockEditingMode( state, rootClientId ?? '' ) === 'disabled' ) {
+		return false;
+	}
+
 	const parentBlockListSettings = getBlockListSettings( state, rootClientId );
 
 	// The parent block doesn't have settings indicating it doesn't support
@@ -1633,6 +1638,7 @@ export const canInsertBlockType = createSelector(
 		state.blocks.byClientId.get( rootClientId ),
 		state.settings.allowedBlockTypes,
 		state.settings.templateLock,
+		state.blockEditingModes,
 	]
 );
 
@@ -1663,21 +1669,19 @@ export function canInsertBlocks( state, clientIds, rootClientId = null ) {
  */
 export function canRemoveBlock( state, clientId, rootClientId = null ) {
 	const attributes = getBlockAttributes( state, clientId );
-
-	// attributes can be null if the block is already deleted.
 	if ( attributes === null ) {
 		return true;
 	}
-
-	const { lock } = attributes;
-	const parentIsLocked = !! getTemplateLock( state, rootClientId );
-	// If we don't have a lock on the blockType level, we defer to the parent templateLock.
-	if ( lock === undefined || lock?.remove === undefined ) {
-		return ! parentIsLocked;
+	if ( attributes.lock?.remove ) {
+		return false;
 	}
-
-	// When remove is true, it means we cannot remove it.
-	return ! lock?.remove;
+	if ( getTemplateLock( state, rootClientId ) ) {
+		return false;
+	}
+	if ( getBlockEditingMode( state, rootClientId ) === 'disabled' ) {
+		return false;
+	}
+	return true;
 }
 
 /**
@@ -1709,16 +1713,16 @@ export function canMoveBlock( state, clientId, rootClientId = null ) {
 	if ( attributes === null ) {
 		return;
 	}
-
-	const { lock } = attributes;
-	const parentIsLocked = getTemplateLock( state, rootClientId ) === 'all';
-	// If we don't have a lock on the blockType level, we defer to the parent templateLock.
-	if ( lock === undefined || lock?.move === undefined ) {
-		return ! parentIsLocked;
+	if ( attributes.lock?.move ) {
+		return false;
 	}
-
-	// When move is true, it means we cannot move it.
-	return ! lock?.move;
+	if ( getTemplateLock( state, rootClientId ) === 'all' ) {
+		return false;
+	}
+	if ( getBlockEditingMode( state, rootClientId ) === 'disabled' ) {
+		return false;
+	}
+	return true;
 }
 
 /**
@@ -2812,6 +2816,13 @@ export function __unstableGetTemporarilyEditingAsBlocks( state ) {
 }
 
 export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
+	// Prevent overlay on disabled blocks. It's redundant since disabled blocks
+	// can't be selected, and prevents non-disabled nested blocks from being
+	// selected.
+	if ( getBlockEditingMode( state, clientId ) === 'disabled' ) {
+		return false;
+	}
+
 	// If the block editing is locked, the block overlay is always active.
 	if ( ! canEditBlock( state, clientId ) ) {
 		return true;