@wordpress/block-editor 11.3.2 → 11.4.0

package/src/components/off-canvas-editor/block-contents.js

@@ -12,7 +12,7 @@ import { forwardRef, useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../lock-unlock';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
@@ -73,7 +73,7 @@ const ListViewBlockContents = forwardRef(
 			setInsertedBlockAttributes,
 		} = useInsertedBlock( lastInsertedBlockClientId );
 
-		const hasExistingLinkValue = insertedBlockAttributes?.id;
+		const hasExistingLinkValue = insertedBlockAttributes?.url;
 
 		useEffect( () => {
 			if (
@@ -121,6 +121,7 @@ const ListViewBlockContents = forwardRef(
 							);
 							setIsLinkUIOpen( false );
 						} }
+						onCancel={ () => setIsLinkUIOpen( false ) }
 					/>
 				) }
 				<BlockDraggable clientIds={ draggableClientIds }>

package/src/components/off-canvas-editor/leaf-more-menu.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { addSubmenu, moreVertical } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockTitle from '../block-title';
+
+const POPOVER_PROPS = {
+	className: 'block-editor-block-settings-menu__popover',
+	position: 'bottom right',
+	variant: 'toolbar',
+};
+
+const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
+
+function AddSubmenuItem( { block, onClose } ) {
+	const { insertBlock, replaceBlock, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
+
+	const clientId = block.clientId;
+	const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes(
+		block.name
+	);
+	return (
+		<MenuItem
+			icon={ addSubmenu }
+			disabled={ isDisabled }
+			onClick={ () => {
+				const updateSelectionOnInsert = false;
+				const newLink = createBlock( 'core/navigation-link' );
+
+				if ( block.name === 'core/navigation-submenu' ) {
+					insertBlock(
+						newLink,
+						block.innerBlocks.length,
+						clientId,
+						updateSelectionOnInsert
+					);
+				} else {
+					// Convert to a submenu if the block currently isn't one.
+					const newSubmenu = createBlock(
+						'core/navigation-submenu',
+						block.attributes,
+						block.innerBlocks
+					);
+
+					// The following must happen as two independent actions.
+					// Why? Because the offcanvas editor relies on the getLastInsertedBlocksClientIds
+					// selector to determine which block is "active". As the UX needs the newLink to be
+					// the "active" block it must be the last block to be inserted.
+					// Therefore the Submenu is first created and **then** the newLink is inserted
+					// thus ensuring it is the last inserted block.
+					replaceBlock( clientId, newSubmenu );
+
+					replaceInnerBlocks(
+						newSubmenu.clientId,
+						[ newLink ],
+						updateSelectionOnInsert
+					);
+				}
+				onClose();
+			} }
+		>
+			{ __( 'Add submenu link' ) }
+		</MenuItem>
+	);
+}
+
+export default function LeafMoreMenu( props ) {
+	const { clientId, block } = props;
+
+	const { removeBlocks } = useDispatch( blockEditorStore );
+
+	const label = sprintf(
+		/* translators: %s: block name */
+		__( 'Remove %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			className="block-editor-block-settings-menu"
+			popoverProps={ POPOVER_PROPS }
+			noIcons
+			{ ...props }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					<AddSubmenuItem block={ block } onClose={ onClose } />
+					<MenuItem
+						onClick={ () => {
+							removeBlocks( [ clientId ], false );
+							onClose();
+						} }
+					>
+						{ label }
+					</MenuItem>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/off-canvas-editor/link-ui.js

@@ -151,6 +151,7 @@ export function LinkUI( props ) {
 				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
 				onChange={ props.onChange }
 				onRemove={ props.onRemove }
+				onCancel={ props.onCancel }
 				renderControlBottom={
 					! url
 						? () => (

package/src/components/provider/index.js

@@ -11,7 +11,7 @@ import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
-import { unlock } from '../../experiments';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 

package/src/components/rich-text/index.js

@@ -110,7 +110,6 @@ function RichTextWrapper(
 		__unstableEmbedURLOnPaste,
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
-		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
 		...props
 	},
@@ -449,7 +448,6 @@ function RichTextWrapper(
 					props.className,
 					'rich-text'
 				) }
-				onFocus={ unstableOnFocus }
 				onKeyDown={ onKeyDown }
 			/>
 		</>

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

@@ -468,7 +468,7 @@ class URLInput extends Component {
 			'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label
 			'aria-expanded': showSuggestions,
 			'aria-autocomplete': 'list',
-			'aria-controls': suggestionsListboxId,
+			'aria-owns': suggestionsListboxId,
 			'aria-activedescendant':
 				selectedSuggestion !== null
 					? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`
@@ -531,7 +531,8 @@ class URLInput extends Component {
 				tabIndex: '-1',
 				id: `${ suggestionOptionIdPrefix }-${ index }`,
 				ref: this.bindSuggestionNode( index ),
-				'aria-selected': index === selectedSuggestion,
+				'aria-selected':
+					index === selectedSuggestion ? true : undefined,
 			};
 		};
 

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

@@ -6,7 +6,7 @@ import { useState } from '@wordpress/element';
 import {
 	Button,
 	Popover,
-	__experimentalPopoverPositionToPlacement as positionToPlacement,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
@@ -16,6 +16,11 @@ import deprecated from '@wordpress/deprecated';
  */
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
+import { unlock } from '../../lock-unlock';
+
+const { __experimentalPopoverLegacyPositionToPlacement } = unlock(
+	componentsPrivateApis
+);
 
 const DEFAULT_PLACEMENT = 'bottom';
 
@@ -46,7 +51,8 @@ function URLPopover( {
 	if ( placement !== undefined ) {
 		computedPlacement = placement;
 	} else if ( position !== undefined ) {
-		computedPlacement = positionToPlacement( position );
+		computedPlacement =
+			__experimentalPopoverLegacyPositionToPlacement( position );
 	}
 	computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
 

package/src/hooks/dimensions.js

@@ -59,7 +59,7 @@ import {
 } from './child-layout';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
-import { unlock } from '../experiments';
+import { unlock } from '../lock-unlock';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -347,5 +347,17 @@ export function useIsDimensionsSupportValid( blockName, feature ) {
 		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/font-family.js

@@ -13,8 +13,6 @@ import TokenList from '@wordpress/token-list';
 /**
  * Internal dependencies
  */
-import useSetting from '../components/use-setting';
-import FontFamilyControl from '../components/font-family';
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 
@@ -105,62 +103,6 @@ function addEditProps( settings ) {
 	return settings;
 }
 
-export function FontFamilyEdit( {
-	setAttributes,
-	attributes: { fontFamily },
-} ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-
-	const value = fontFamilies?.find(
-		( { slug } ) => fontFamily === slug
-	)?.fontFamily;
-
-	function onChange( newValue ) {
-		const predefinedFontFamily = fontFamilies?.find(
-			( { fontFamily: f } ) => f === newValue
-		);
-		setAttributes( {
-			fontFamily: predefinedFontFamily?.slug,
-		} );
-	}
-
-	return (
-		<FontFamilyControl
-			className="block-editor-hooks-font-family-control"
-			fontFamilies={ fontFamilies }
-			value={ value }
-			onChange={ onChange }
-			size="__unstable-large"
-			__nextHasNoMarginBottom
-		/>
-	);
-}
-
-/**
- * Custom hook that checks if font-family functionality is disabled.
- *
- * @param {string} name The name of the block.
- * @return {boolean} Whether setting is disabled.
- */
-export function useIsFontFamilyDisabled( { name } ) {
-	const fontFamilies = useSetting( 'typography.fontFamilies' );
-	return (
-		! fontFamilies ||
-		fontFamilies.length === 0 ||
-		! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )
-	);
-}
-
-/**
- * Checks if there is a current value set for the font family block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a font family value set.
- */
-export function hasFontFamilyValue( props ) {
-	return !! props.attributes.fontFamily;
-}
-
 /**
  * Resets the font family block support attribute. This can be used when
  * disabling the font family support controls for a block via a progressive

package/src/hooks/font-size.js

@@ -157,41 +157,6 @@ export function FontSizeEdit( props ) {
 	);
 }
 
-/**
- * Checks if there is a current value set for the font size block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a font size value set.
- */
-export function hasFontSizeValue( props ) {
-	const { fontSize, style } = props.attributes;
-	return !! fontSize || !! style?.typography?.fontSize;
-}
-
-/**
- * Resets the font size block support attribute. This can be used when
- * disabling the font size support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetFontSize( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		fontSize: undefined,
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				fontSize: undefined,
-			},
-		} ),
-	} );
-}
-
 /**
  * Custom hook that checks if font-size settings have been disabled.
  *
@@ -268,7 +233,7 @@ const MIGRATION_PATHS = {
 	fontSize: [ [ 'fontSize' ], [ 'style', 'typography', 'fontSize' ] ],
 };
 
-export function addTransforms( result, source, index, results ) {
+function addTransforms( result, source, index, results ) {
 	const destinationBlockType = result.name;
 	const activeSupports = {
 		fontSize: hasBlockSupport(

package/src/hooks/gap.js

@@ -17,7 +17,12 @@ import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/u
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import SpacingSizesControl from '../components/spacing-sizes-control';
 import useSetting from '../components/use-setting';
-import { AXIAL_SIDES, SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
+import {
+	AXIAL_SIDES,
+	SPACING_SUPPORT_KEY,
+	useCustomSides,
+	useIsDimensionsSupportValid,
+} from './dimensions';
 import { cleanEmptyObject } from './utils';
 
 /**
@@ -113,7 +118,9 @@ export function resetGap( { attributes = {}, setAttributes } ) {
  */
 export function useIsGapDisabled( { name: blockName } = {} ) {
 	const isDisabled = ! useSetting( 'spacing.blockGap' );
-	return ! hasGapSupport( blockName ) || isDisabled;
+	const isInvalid = ! useIsDimensionsSupportValid( blockName, 'blockGap' );
+
+	return ! hasGapSupport( blockName ) || isDisabled || isInvalid;
 }
 
 /**

package/src/hooks/index.js

@@ -12,6 +12,7 @@ import './style';
 import './settings';
 import './color';
 import './duotone';
+import './font-family';
 import './font-size';
 import './border';
 import './position';

package/src/hooks/line-height.js

@@ -60,36 +60,3 @@ export function useIsLineHeightDisabled( { name: blockName } = {} ) {
 		! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled
 	);
 }
-
-/**
- * Checks if there is a current value set for the line height block support.
- *
- * @param {Object} props Block props.
- * @return {boolean}     Whether or not the block has a line height value set.
- */
-export function hasLineHeightValue( props ) {
-	return !! props.attributes.style?.typography?.lineHeight;
-}
-
-/**
- * Resets the line height block support attribute. This can be used when
- * disabling the line height support controls for a block via a progressive
- * discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block's attributes.
- * @param {Object} props.setAttributes Function to set block's attributes.
- */
-export function resetLineHeight( { attributes = {}, setAttributes } ) {
-	const { style } = attributes;
-
-	setAttributes( {
-		style: cleanEmptyObject( {
-			...style,
-			typography: {
-				...style?.typography,
-				lineHeight: undefined,
-			},
-		} ),
-	} );
-}

package/src/hooks/metadata.js

@@ -7,6 +7,10 @@ import { getBlockSupport } from '@wordpress/blocks';
 const META_ATTRIBUTE_NAME = 'metadata';
 
 export function hasBlockMetadataSupport( blockType, feature = '' ) {
+	// Only core blocks are allowed to use __experimentalMetadata until the fetaure is stablised.
+	if ( ! blockType.name.startsWith( 'core/' ) ) {
+		return false;
+	}
 	const support = getBlockSupport( blockType, '__experimentalMetadata' );
 	return !! ( true === support || support?.[ feature ] );
 }

package/src/hooks/position.js

@@ -8,7 +8,10 @@ import classnames from 'classnames';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { BaseControl, CustomSelectControl } from '@wordpress/components';
+import {
+	BaseControl,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import {
@@ -26,8 +29,11 @@ import BlockList from '../components/block-list';
 import useSetting from '../components/use-setting';
 import InspectorControls from '../components/inspector-controls';
 import { cleanEmptyObject } from './utils';
+import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
+const { CustomSelectControl } = unlock( componentsPrivateApis );
+
 const POSITION_SUPPORT_KEY = 'position';
 
 const OPTION_CLASSNAME =