@wordpress/block-editor 12.2.0 → 12.3.1

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();
+			}
 		}
 	}
 
@@ -75,7 +86,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE ) {
+			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
 				event.preventDefault();
 				setNavigationMode( true );
 				return;
@@ -105,17 +116,53 @@ export default function useTabNav() {
 				return;
 			}
 
+			// We want to constrain the tabbing to the block and its child blocks.
+			// If the preceding form element is within a different block,
+			// such as two sibling image blocks in the placeholder state,
+			// we want shift + tab from the first form element to move to the image
+			// block toolbar and not the previous image block's form element.
+			// TODO: Should this become a utility function?
+			/**
+			 * Determine whether an element is part of or is the selected block.
+			 *
+			 * @param {Object} selectedBlockElement
+			 * @param {Object} element
+			 * @return {boolean} Whether the element is part of or is the selected block.
+			 */
+			const isElementPartOfSelectedBlock = (
+				selectedBlockElement,
+				element
+			) => {
+				// Check if the element is or is within the selected block by finding the
+				// closest element with a data-block attribute and seeing if
+				// it matches our current selected block ID
+				const elementBlockId = element
+					.closest( '[data-block]' )
+					?.getAttribute( 'data-block' );
+				const isElementSameBlock =
+					elementBlockId === getSelectedBlockClientId();
+
+				// Check if the element is a child of the selected block. This could be a
+				// child block in a group or column block, etc.
+				const isElementChildOfBlock =
+					selectedBlockElement.contains( element );
+
+				return isElementSameBlock || isElementChildOfBlock;
+			};
+
+			const nextTabbable = focus.tabbable[ direction ]( event.target );
 			// Allow tabbing from the block wrapper to a form element,
-			// and between form elements rendered in a block,
+			// and between form elements rendered in a block and its child blocks,
 			// such as inside a placeholder. Form elements are generally
 			// meant to be UI rather than part of the content. Ideally
 			// these are not rendered in the content and perhaps in the
 			// future they can be rendered in an iframe or shadow DOM.
 			if (
-				( isFormElement( event.target ) ||
-					event.target.getAttribute( 'data-block' ) ===
-						getSelectedBlockClientId() ) &&
-				isFormElement( focus.tabbable[ direction ]( event.target ) )
+				isFormElement( nextTabbable ) &&
+				isElementPartOfSelectedBlock(
+					event.target.closest( '[data-block]' ),
+					nextTabbable
+				)
 			) {
 				return;
 			}

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

@@ -4,19 +4,129 @@
 import { addFilter } from '@wordpress/hooks';
 import { SelectControl } 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,
+	onChangeBehavior,
+	onChangeAnimation,
+	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 defaultBehaviors = {
+		default: {
+			value: 'default',
+			label: __( 'Default' ),
+		},
+		noBehaviors: {
+			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,
+			// Capitalize the first letter of the behavior name.
+			label: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName
+				.slice( 1 )
+				.toLowerCase() }`,
+		} ) );
+
+	const options = [
+		...Object.values( defaultBehaviors ),
+		...behaviorsOptions,
+	];
+
+	// If every behavior is disabled, do not show the behaviors inspector control.
+	if ( behaviorsOptions.length === 0 ) {
+		return null;
+	}
+	// Block behaviors take precedence over theme behaviors.
+	const behaviors = { ...themeBehaviors, ...( blockBehaviors || {} ) };
+
+	const helpText = disabled
+		? __( 'The lightbox behavior is disabled for linked images.' )
+		: '';
+
+	const value = () => {
+		if ( blockBehaviors === undefined ) {
+			return 'default';
+		}
+		if ( behaviors?.lightbox.enabled ) {
+			return 'lightbox';
+		}
+		return '';
+	};
+
+	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={ value() }
+					options={ options }
+					onChange={ onChangeBehavior }
+					hideCancelButton={ true }
+					help={ helpText }
+					size="__unstable-large"
+					disabled={ disabled }
+				/>
+				{ behaviors?.lightbox.enabled && (
+					<SelectControl
+						label={ __( 'Animation' ) }
+						// At the moment we are only supporting one behavior (Lightbox)
+						value={
+							behaviors?.lightbox.animation
+								? behaviors?.lightbox.animation
+								: ''
+						}
+						options={ [
+							{
+								value: 'zoom',
+								label: __( 'Zoom' ),
+							},
+							{ value: 'fade', label: 'Fade' },
+						] }
+						onChange={ onChangeAnimation }
+						hideCancelButton={ false }
+						size="__unstable-large"
+						disabled={ disabled }
+					/>
+				) }
+			</div>
+		</InspectorControls>
+	);
+}
 
 /**
  * Override the default edit UI to include a new block inspector control for
@@ -30,75 +140,64 @@ 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 }
+					onChangeBehavior={ ( nextValue ) => {
+						if ( nextValue === 'default' ) {
+							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',
+									lightbox: {
+										enabled: nextValue === 'lightbox',
+										animation:
+											nextValue === 'lightbox'
+												? 'zoom'
+												: '',
+									},
 								},
 							} );
-						} }
-						hideCancelButton={ true }
-						help={ __( 'Add behaviors.' ) }
-						size="__unstable-large"
-					/>
-				</InspectorControls>
+						}
+					} }
+					onChangeAnimation={ ( nextValue ) => {
+						props.setAttributes( {
+							behaviors: {
+								lightbox: {
+									enabled:
+										props.attributes.behaviors.lightbox
+											.enabled,
+									animation: nextValue,
+								},
+							},
+						} );
+					} }
+					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/font-family.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { kebabCase } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -15,6 +10,7 @@ import TokenList from '@wordpress/token-list';
  */
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+import { kebabCase } from '../utils/object';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 

package/src/hooks/font-size.js

@@ -15,7 +15,6 @@ import {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 	FontSizePicker,
-	getComputedFluidTypographyValue,
 } from '../components/font-sizes';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import {
@@ -25,6 +24,10 @@ import {
 } from './utils';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
+import {
+	getTypographyFontSizeValue,
+	getFluidTypographyOptionsFromSettings,
+} from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -289,23 +292,15 @@ function addEditPropsForFluidCustomFontSizes( blockType ) {
 		// BlockListContext.Provider. If we set fontSize using editor.
 		// BlockListBlock instead of using getEditWrapperProps then the value is
 		// clobbered when the core/style/addEditProps filter runs.
-		const fluidTypographyConfig =
+		const fluidTypographySettings = getFluidTypographyOptionsFromSettings(
 			select( blockEditorStore ).getSettings().__experimentalFeatures
-				?.typography?.fluid;
-
-		const fluidTypographySettings =
-			typeof fluidTypographyConfig === 'object'
-				? fluidTypographyConfig
-				: {};
-
-		const newFontSize =
-			fontSize && !! fluidTypographyConfig
-				? getComputedFluidTypographyValue( {
-						fontSize,
-						minimumFontSizeLimit:
-							fluidTypographySettings?.minFontSize,
-				  } )
-				: null;
+		);
+		const newFontSize = fontSize
+			? getTypographyFontSizeValue(
+					{ size: fontSize },
+					fluidTypographySettings
+			  )
+			: null;
 
 		if ( newFontSize === null ) {
 			return wrapperProps;

package/src/hooks/layout.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,8 +29,17 @@ 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';
+import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
+import { kebabCase } from '../utils/object';
 
-const layoutBlockSupportKey = '__experimentalLayout';
+const layoutBlockSupportKey = 'layout';
+
+function hasLayoutBlockSupport( blockName ) {
+	return (
+		hasBlockSupport( blockName, 'layout' ) ||
+		hasBlockSupport( blockName, '__experimentalLayout' )
+	);
+}
 
 /**
  * Generates the utility classnames for the given block's layout attributes.
@@ -47,8 +55,6 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 		return getSettings().__experimentalFeatures
 			?.useRootPaddingAwareAlignments;
 	}, [] );
-	const globalLayoutSettings = useSetting( 'layout' ) || {};
-
 	const { layout } = blockAttributes;
 
 	const { default: defaultBlockLayout } =
@@ -60,13 +66,9 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 
 	const layoutClassnames = [];
 
-	if (
-		globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
-			?.className
-	) {
+	if ( LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className ) {
 		const baseClassName =
-			globalLayoutSettings?.definitions?.[ usedLayout?.type || 'default' ]
-				?.className;
+			LAYOUT_DEFINITIONS[ usedLayout?.type || 'default' ]?.className;
 		const compoundClassName = `wp-block-${ blockName
 			.split( '/' )
 			.pop() }-${ baseClassName }`;
@@ -118,14 +120,12 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 			? { ...layout, type: 'constrained' }
 			: layout || {};
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
-	const globalLayoutSettings = useSetting( 'layout' ) || {};
 	const blockGapSupport = useSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 	const css = fullLayoutType?.getLayoutStyle?.( {
 		blockName,
 		selector,
 		layout,
-		layoutDefinitions: globalLayoutSettings?.definitions,
 		style,
 		hasBlockGapSupport,
 	} );
@@ -302,7 +302,7 @@ export function addAttribute( settings ) {
 	if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
 		return settings;
 	}
-	if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {
+	if ( hasLayoutBlockSupport( settings ) ) {
 		settings.attributes = {
 			...settings.attributes,
 			layout: {
@@ -324,13 +324,13 @@ export function addAttribute( settings ) {
 export const withInspectorControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		const supportLayout = hasBlockSupport(
-			blockName,
-			layoutBlockSupportKey
-		);
+		const supportLayout = hasLayoutBlockSupport( blockName );
 
+		const blockEditingMode = useBlockEditingMode();
 		return [
-			supportLayout && <LayoutPanel key="layout" { ...props } />,
+			supportLayout && blockEditingMode === 'default' && (
+				<LayoutPanel key="layout" { ...props } />
+			),
 			<BlockEdit key="edit" { ...props } />,
 		];
 	},
@@ -347,18 +347,14 @@ export const withInspectorControls = createHigherOrderComponent(
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
 		const { name, attributes } = props;
-		const hasLayoutBlockSupport = hasBlockSupport(
-			name,
-			layoutBlockSupportKey
-		);
+		const blockSupportsLayout = hasLayoutBlockSupport( name );
 		const disableLayoutStyles = useSelect( ( select ) => {
 			const { getSettings } = select( blockEditorStore );
 			return !! getSettings().disableLayoutStyles;
 		} );
 		const shouldRenderLayoutStyles =
-			hasLayoutBlockSupport && ! disableLayoutStyles;
+			blockSupportsLayout && ! disableLayoutStyles;
 		const id = useInstanceId( BlockListBlock );
-		const defaultThemeLayout = useSetting( 'layout' ) || {};
 		const element = useContext( BlockList.__unstableElementContext );
 		const { layout } = attributes;
 		const { default: defaultBlockLayout } =
@@ -367,7 +363,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 			layout?.inherit || layout?.contentSize || layout?.wideSize
 				? { ...layout, type: 'constrained' }
 				: layout || defaultBlockLayout || {};
-		const layoutClasses = hasLayoutBlockSupport
+		const layoutClasses = blockSupportsLayout
 			? useLayoutClasses( attributes, name )
 			: null;
 		// Higher specificity to override defaults from theme.json.
@@ -386,7 +382,6 @@ export const withLayoutStyles = createHigherOrderComponent(
 				blockName: name,
 				selector,
 				layout: usedLayout,
-				layoutDefinitions: defaultThemeLayout?.definitions,
 				style: attributes?.style,
 				hasBlockGapSupport,
 			} );