@wordpress/block-editor 12.3.0 → 12.3.1

package/src/components/url-popover/image-url-input-ui.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useState, useCallback } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import {
 	ToolbarButton,
 	Button,
@@ -50,16 +50,16 @@ const ImageURLInputUI = ( {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
-	const openLinkUI = useCallback( () => {
+	const openLinkUI = () => {
 		setIsOpen( true );
-	} );
+	};
 
 	const [ isEditingLink, setIsEditingLink ] = useState( false );
 	const [ urlInput, setUrlInput ] = useState( null );
 
 	const autocompleteRef = useRef( null );
 
-	const startEditLink = useCallback( () => {
+	const startEditLink = () => {
 		if (
 			linkDestination === LINK_DESTINATION_MEDIA ||
 			linkDestination === LINK_DESTINATION_ATTACHMENT
@@ -67,17 +67,17 @@ const ImageURLInputUI = ( {
 			setUrlInput( '' );
 		}
 		setIsEditingLink( true );
-	} );
+	};
 
-	const stopEditLink = useCallback( () => {
+	const stopEditLink = () => {
 		setIsEditingLink( false );
-	} );
+	};
 
-	const closeLinkUI = useCallback( () => {
+	const closeLinkUI = () => {
 		setUrlInput( null );
 		stopEditLink();
 		setIsOpen( false );
-	} );
+	};
 
 	const getUpdatedLinkTargetSettings = ( value ) => {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -106,7 +106,7 @@ const ImageURLInputUI = ( {
 		};
 	};
 
-	const onFocusOutside = useCallback( () => {
+	const onFocusOutside = () => {
 		return ( event ) => {
 			// The autocomplete suggestions list renders in a separate popover (in a portal),
 			// so onFocusOutside fails to detect that a click on a suggestion occurred in the
@@ -123,9 +123,9 @@ const ImageURLInputUI = ( {
 			setUrlInput( null );
 			stopEditLink();
 		};
-	} );
+	};
 
-	const onSubmitLinkChange = useCallback( () => {
+	const onSubmitLinkChange = () => {
 		return ( event ) => {
 			if ( urlInput ) {
 				// It is possible the entered URL actually matches a named link destination.
@@ -144,14 +144,14 @@ const ImageURLInputUI = ( {
 			setUrlInput( null );
 			event.preventDefault();
 		};
-	} );
+	};
 
-	const onLinkRemove = useCallback( () => {
+	const onLinkRemove = () => {
 		onChangeUrl( {
 			linkDestination: LINK_DESTINATION_NONE,
 			href: '',
 		} );
-	} );
+	};
 
 	const getLinkDestinations = () => {
 		const linkDestinations = [

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -53,7 +53,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div
@@ -108,7 +108,7 @@ exports[`URLPopover matches the snapshot when there are no settings 1`] = `
   <span>
     <div
       class="components-popover block-editor-url-popover is-positioned"
-      style="position: absolute; top: 0px; left: 0px; transform: translateZ(0);"
+      style="position: absolute; top: 0px; left: 0px; transform: none;"
       tabindex="-1"
     >
       <div

package/src/components/use-block-display-information/index.js

@@ -7,6 +7,7 @@ import {
 	isReusableBlock,
 	isTemplatePart,
 } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,6 +28,26 @@ import { store as blockEditorStore } from '../../store';
  * @property {string}  anchor      HTML anchor.
  */
 
+/**
+ * Get the display label for a block's position type.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {string} The position type label.
+ */
+function getPositionTypeLabel( attributes ) {
+	const positionType = attributes?.style?.position?.type;
+
+	if ( positionType === 'sticky' ) {
+		return __( 'Sticky' );
+	}
+
+	if ( positionType === 'fixed' ) {
+		return __( 'Fixed' );
+	}
+
+	return null;
+}
+
 /**
  * Hook used to try to find a matching block variation and return
  * the appropriate information for display reasons. In order to
@@ -57,12 +78,15 @@ export default function useBlockDisplayInformation( clientId ) {
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
+			const positionLabel = getPositionTypeLabel( attributes );
 			const blockTypeInfo = {
 				isSynced,
 				title: blockType.title,
 				icon: blockType.icon,
 				description: blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
 			};
 			if ( ! match ) return blockTypeInfo;
 
@@ -72,6 +96,8 @@ export default function useBlockDisplayInformation( clientId ) {
 				icon: match.icon || blockType.icon,
 				description: match.description || blockType.description,
 				anchor: attributes?.anchor,
+				positionLabel,
+				positionType: attributes?.style?.position?.type,
 			};
 		},
 		[ clientId ]

package/src/components/writing-flow/use-drag-selection.js

@@ -88,7 +88,7 @@ export default function useDragSelection() {
 				// child elements of the content editable wrapper are editable
 				// and return true for this property. We only want to start
 				// multi selecting when the mouse leaves the wrapper.
-				if ( ! target.getAttribute( 'contenteditable' ) ) {
+				if ( target.getAttribute( 'contenteditable' ) !== 'true' ) {
 					return;
 				}
 

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

@@ -86,7 +86,7 @@ export default function useTabNav() {
 				return;
 			}
 
-			if ( event.keyCode === ESCAPE ) {
+			if ( event.keyCode === ESCAPE && ! hasMultiSelection() ) {
 				event.preventDefault();
 				setNavigationMode( true );
 				return;
@@ -116,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/behaviors.js

@@ -2,11 +2,7 @@
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import {
-	SelectControl,
-	Button,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -18,15 +14,11 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../store';
 import { InspectorControls } from '../components';
 
-/**
- * External dependencies
- */
-import merge from 'deepmerge';
-
 function BehaviorsControl( {
 	blockName,
 	blockBehaviors,
-	onChange,
+	onChangeBehavior,
+	onChangeAnimation,
 	disabled = false,
 } ) {
 	const { settings, themeBehaviors } = useSelect(
@@ -43,36 +35,56 @@ function BehaviorsControl( {
 		[ blockName ]
 	);
 
-	const noBehaviorsOption = {
-		value: '',
-		label: __( 'No behaviors' ),
+	const defaultBehaviors = {
+		default: {
+			value: 'default',
+			label: __( 'Default' ),
+		},
+		noBehaviors: {
+			value: '',
+			label: __( 'No behaviors' ),
+		},
 	};
 
 	const behaviorsOptions = Object.entries( settings )
 		.filter(
 			( [ behaviorName, behaviorValue ] ) =>
-				hasBlockSupport( blockName, 'behaviors.' + behaviorName ) &&
+				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(),
+			// Capitalize the first letter of the behavior name.
+			label: `${ behaviorName.charAt( 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 ];
+	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 = merge( themeBehaviors, blockBehaviors || {} );
+	const behaviors = { ...themeBehaviors, ...( blockBehaviors || {} ) };
 
 	const helpText = disabled
 		? __( 'The lightbox behavior is disabled for linked images.' )
-		: __( 'Add behaviors.' );
+		: '';
+
+	const value = () => {
+		if ( blockBehaviors === undefined ) {
+			return 'default';
+		}
+		if ( behaviors?.lightbox.enabled ) {
+			return 'lightbox';
+		}
+		return '';
+	};
 
 	return (
 		<InspectorControls group="advanced">
@@ -81,24 +93,37 @@ function BehaviorsControl( {
 				<SelectControl
 					label={ __( 'Behaviors' ) }
 					// At the moment we are only supporting one behavior (Lightbox)
-					value={ behaviors?.lightbox ? 'lightbox' : '' }
+					value={ value() }
 					options={ options }
-					onChange={ onChange }
+					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>
-			<HStack justify="flex-end">
-				<Button
-					isSmall
-					disabled={ disabled }
-					onClick={ () => onChange( undefined ) }
-				>
-					{ __( 'Reset' ) }
-				</Button>
-			</HStack>
 		</InspectorControls>
 	);
 }
@@ -129,8 +154,8 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 				<BehaviorsControl
 					blockName={ props.name }
 					blockBehaviors={ props.attributes.behaviors }
-					onChange={ ( nextValue ) => {
-						if ( nextValue === undefined ) {
+					onChangeBehavior={ ( nextValue ) => {
+						if ( nextValue === 'default' ) {
 							props.setAttributes( {
 								behaviors: undefined,
 							} );
@@ -139,11 +164,29 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 							// 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'
+												: '',
+									},
 								},
 							} );
 						}
 					} }
+					onChangeAnimation={ ( nextValue ) => {
+						props.setAttributes( {
+							behaviors: {
+								lightbox: {
+									enabled:
+										props.attributes.behaviors.lightbox
+											.enabled,
+									animation: nextValue,
+								},
+							},
+						} );
+					} }
 					disabled={ blockHasLink }
 				/>
 			</>

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,10 +324,7 @@ 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 [
@@ -350,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 } =
@@ -370,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.
@@ -389,7 +382,6 @@ export const withLayoutStyles = createHigherOrderComponent(
 				blockName: name,
 				selector,
 				layout: usedLayout,
-				layoutDefinitions: defaultThemeLayout?.definitions,
 				style: attributes?.style,
 				hasBlockGapSupport,
 			} );