@wordpress/block-editor 12.3.0 → 12.3.2

package/src/components/index.js

@@ -26,6 +26,7 @@ export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockStyles } from './block-styles';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
 export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
@@ -110,7 +111,6 @@ export { default as __experimentalUseResizeCanvas } from './use-resize-canvas';
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { useBlockProps } from './block-list/use-block-props';
-export { LayoutStyle as __experimentalLayoutStyle } from './block-list/layout';
 export { default as BlockMover } from './block-mover';
 export {
 	default as BlockPreview,

package/src/components/index.native.js

@@ -28,6 +28,7 @@ export {
 	JustifyContentControl,
 } from './justify-content-control';
 export { default as LineHeightControl } from './line-height-control';
+export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';
 export { default as PlainText } from './plain-text';
 export {
 	default as RichText,

package/src/components/inner-blocks/index.js

@@ -88,7 +88,9 @@ function UncontrolledInnerBlocks( props ) {
 	);
 
 	const defaultLayoutBlockSupport =
-		getBlockSupport( name, '__experimentalLayout' ) || EMPTY_OBJECT;
+		getBlockSupport( name, 'layout' ) ||
+		getBlockSupport( name, '__experimentalLayout' ) ||
+		EMPTY_OBJECT;
 
 	const { allowSizingOnChildren = false } = defaultLayoutBlockSupport;
 
@@ -116,7 +118,7 @@ function UncontrolledInnerBlocks( props ) {
 				rootClientId={ clientId }
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				__experimentalLayout={ memoedLayout }
+				layout={ memoedLayout }
 				wrapperRef={ wrapperRef }
 				placeholder={ placeholder }
 			/>

package/src/components/inner-blocks/index.native.js

@@ -93,7 +93,7 @@ function UncontrolledInnerBlocks( props ) {
 		horizontalAlignment,
 		filterInnerBlocks,
 		blockWidth,
-		__experimentalLayout: layout = defaultLayout,
+		layout = defaultLayout,
 		gridProperties,
 	} = props;
 

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -3,7 +3,6 @@
  */
 import { useLayoutEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
-import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -52,13 +51,11 @@ export default function useNestedSettingsUpdate(
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 	const registry = useRegistry();
 
-	const { blockListSettings, parentLock } = useSelect(
+	const { parentLock } = useSelect(
 		( select ) => {
 			const rootClientId =
 				select( blockEditorStore ).getBlockRootClientId( clientId );
 			return {
-				blockListSettings:
-					select( blockEditorStore ).getBlockListSettings( clientId ),
 				parentLock:
 					select( blockEditorStore ).getTemplateLock( rootClientId ),
 			};
@@ -83,14 +80,16 @@ export default function useNestedSettingsUpdate(
 		prioritizedInserterBlocks
 	);
 
+	const _templateLock =
+		templateLock === undefined || parentLock === 'contentOnly'
+			? parentLock
+			: templateLock;
+
 	useLayoutEffect( () => {
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
 			prioritizedInserterBlocks: _prioritizedInserterBlocks,
-			templateLock:
-				templateLock === undefined || parentLock === 'contentOnly'
-					? parentLock
-					: templateLock,
+			templateLock: _templateLock,
 		};
 
 		// These values are not defined for RN, so only include them if they
@@ -116,41 +115,37 @@ export default function useNestedSettingsUpdate(
 			newSettings.__experimentalDirectInsert = __experimentalDirectInsert;
 		}
 
-		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
-			// Batch updates to block list settings to avoid triggering cascading renders
-			// for each container block included in a tree and optimize initial render.
-			// To avoid triggering updateBlockListSettings for each container block
-			// causing X re-renderings for X container blocks,
-			// we batch all the updatedBlockListSettings in a single "data" batch
-			// which results in a single re-render.
-			if ( ! pendingSettingsUpdates.get( registry ) ) {
-				pendingSettingsUpdates.set( registry, [] );
-			}
-			pendingSettingsUpdates
-				.get( registry )
-				.push( [ clientId, newSettings ] );
-			window.queueMicrotask( () => {
-				if ( pendingSettingsUpdates.get( registry )?.length ) {
-					registry.batch( () => {
-						pendingSettingsUpdates
-							.get( registry )
-							.forEach( ( args ) => {
-								updateBlockListSettings( ...args );
-							} );
-						pendingSettingsUpdates.set( registry, [] );
-					} );
-				}
-			} );
+		// Batch updates to block list settings to avoid triggering cascading renders
+		// for each container block included in a tree and optimize initial render.
+		// To avoid triggering updateBlockListSettings for each container block
+		// causing X re-renderings for X container blocks,
+		// we batch all the updatedBlockListSettings in a single "data" batch
+		// which results in a single re-render.
+		if ( ! pendingSettingsUpdates.get( registry ) ) {
+			pendingSettingsUpdates.set( registry, [] );
 		}
+		pendingSettingsUpdates
+			.get( registry )
+			.push( [ clientId, newSettings ] );
+		window.queueMicrotask( () => {
+			if ( pendingSettingsUpdates.get( registry )?.length ) {
+				registry.batch( () => {
+					pendingSettingsUpdates
+						.get( registry )
+						.forEach( ( args ) => {
+							updateBlockListSettings( ...args );
+						} );
+					pendingSettingsUpdates.set( registry, [] );
+				} );
+			}
+		} );
 	}, [
 		clientId,
-		blockListSettings,
 		_allowedBlocks,
 		_prioritizedInserterBlocks,
+		_templateLock,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
-		templateLock,
-		parentLock,
 		captureToolbars,
 		orientation,
 		updateBlockListSettings,

package/src/components/inserter/block-patterns-tab.js

@@ -8,7 +8,7 @@ import {
 	useRef,
 	useEffect,
 } from '@wordpress/element';
-import { _x, __ } from '@wordpress/i18n';
+import { _x, __, isRTL } from '@wordpress/i18n';
 import { useAsyncList, useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
@@ -17,7 +17,8 @@ import {
 	FlexBlock,
 	Button,
 } from '@wordpress/components';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { parse } from '@wordpress/blocks';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -27,6 +28,7 @@ import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
+import useBlockTypesState from './hooks/use-block-types-state';
 
 const noop = () => {};
 
@@ -49,6 +51,18 @@ function usePatternsCategories( rootClientId ) {
 		rootClientId
 	);
 
+	const [ unsyncedPatterns ] = useBlockTypesState(
+		rootClientId,
+		undefined,
+		'unsynced'
+	);
+
+	const filteredUnsyncedPatterns = useMemo( () => {
+		return unsyncedPatterns.filter(
+			( { category: unsyncedPatternCategory } ) =>
+				unsyncedPatternCategory === 'reusable'
+		);
+	}, [ unsyncedPatterns ] );
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
 			if ( ! pattern.categories || ! pattern.categories.length ) {
@@ -93,9 +107,20 @@ function usePatternsCategories( rootClientId ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
+		if ( filteredUnsyncedPatterns.length > 0 ) {
+			categories.push( {
+				name: 'reusable',
+				label: _x( 'Custom patterns' ),
+			} );
+		}
 
 		return categories;
-	}, [ allPatterns, allCategories ] );
+	}, [
+		allCategories,
+		allPatterns,
+		filteredUnsyncedPatterns.length,
+		hasRegisteredCategory,
+	] );
 
 	return populatedCategories;
 }
@@ -144,6 +169,24 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
+	const [ unsyncedPatterns ] = useBlockTypesState(
+		rootClientId,
+		onInsert,
+		'unsynced'
+	);
+	const filteredUnsyncedPatterns = useMemo( () => {
+		return unsyncedPatterns
+			.filter(
+				( { category: unsyncedPatternCategory } ) =>
+					unsyncedPatternCategory === 'reusable'
+			)
+			.map( ( syncedPattern ) => ( {
+				...syncedPattern,
+				blocks: parse( syncedPattern.content, {
+					__unstableSkipMigrationLogs: true,
+				} ),
+			} ) );
+	}, [ unsyncedPatterns ] );
 
 	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
@@ -167,13 +210,19 @@ export function BlockPatternsCategoryPanel( {
 			} ),
 		[ allPatterns, category ]
 	);
-
-	const currentShownPatterns = useAsyncList( currentCategoryPatterns );
+	const patterns =
+		category.name === 'reusable'
+			? filteredUnsyncedPatterns
+			: currentCategoryPatterns;
+	const currentShownPatterns = useAsyncList( patterns );
 
 	// Hide block pattern preview on unmount.
 	useEffect( () => () => onHover( null ), [] );
 
-	if ( ! currentCategoryPatterns.length ) {
+	if (
+		! currentCategoryPatterns.length &&
+		! filteredUnsyncedPatterns.length
+	) {
 		return null;
 	}
 
@@ -185,7 +234,7 @@ export function BlockPatternsCategoryPanel( {
 			<p>{ category.description }</p>
 			<BlockPatternList
 				shownPatterns={ currentShownPatterns }
-				blockPatterns={ currentCategoryPatterns }
+				blockPatterns={ patterns }
 				onClickPattern={ onClick }
 				onHover={ onHover }
 				label={ category.label }
@@ -240,7 +289,13 @@ function BlockPatternsTabs( {
 										<FlexBlock>
 											{ category.label }
 										</FlexBlock>
-										<Icon icon={ chevronRight } />
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
 									</HStack>
 								</Item>
 							) ) }

package/src/components/inserter/hooks/use-block-types-state.js

@@ -19,9 +19,10 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string=}  rootClientId Insertion's root client ID.
  * @param {Function} onInsert     function called when inserter a list of blocks.
+ * @param {?string}  syncStatus   Optional sync status to filter pattern blocks by.
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
-const useBlockTypesState = ( rootClientId, onInsert ) => {
+const useBlockTypesState = ( rootClientId, onInsert, syncStatus ) => {
 	const { categories, collections, items } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
@@ -30,10 +31,10 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 			return {
 				categories: getCategories(),
 				collections: getCollections(),
-				items: getInserterItems( rootClientId ),
+				items: getInserterItems( rootClientId, syncStatus ),
 			};
 		},
-		[ rootClientId ]
+		[ rootClientId, syncStatus ]
 	);
 
 	const onSelectItem = useCallback(

package/src/components/inserter/hooks/use-insertion-point.js

@@ -135,6 +135,7 @@ function useInsertionPoint( {
 			destinationIndex,
 			onSelect,
 			shouldFocusBlock,
+			selectBlockOnInsert,
 		]
 	);
 

package/src/components/inserter/library.js

@@ -36,7 +36,8 @@ function InserterLibrary(
 			return {
 				destinationRootClientId: _rootClientId,
 				prioritizePatterns:
-					getSettings().__experimentalPreferPatternsOnRoot,
+					getSettings().__experimentalPreferPatternsOnRoot &&
+					! _rootClientId,
 			};
 		},
 		[ clientId, rootClientId ]

package/src/components/inserter/media-tab/media-tab.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
@@ -16,7 +16,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
-import { Icon, chevronRight } from '@wordpress/icons';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -89,7 +89,13 @@ function MediaTab( {
 										<FlexBlock>
 											{ mediaCategory.labels.name }
 										</FlexBlock>
-										<Icon icon={ chevronRight } />
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
 									</HStack>
 								</Item>
 							) ) }

package/src/components/inserter/reusable-blocks-tab.js

@@ -29,12 +29,12 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	}
 
 	return (
-		<InserterPanel title={ __( 'Reusable blocks' ) }>
+		<InserterPanel title={ __( 'Synced patterns' ) }>
 			<BlockTypesList
 				items={ filteredItems }
 				onSelect={ onSelectItem }
 				onHover={ onHover }
-				label={ __( 'Reusable blocks' ) }
+				label={ __( 'Synced patterns' ) }
 			/>
 		</InserterPanel>
 	);
@@ -67,7 +67,7 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 						post_type: 'wp_block',
 					} ) }
 				>
-					{ __( 'Manage Reusable blocks' ) }
+					{ __( 'Manage custom patterns' ) }
 				</Button>
 			</div>
 		</>

package/src/components/inserter/tabs.js

@@ -13,13 +13,13 @@ const blocksTab = {
 };
 const patternsTab = {
 	name: 'patterns',
-	/* translators: Patterns tab title in the block inserter. */
+	/* translators: Theme and Directory Patterns tab title in the block inserter. */
 	title: __( 'Patterns' ),
 };
 const reusableBlocksTab = {
 	name: 'reusable',
-	/* translators: Reusable blocks tab title in the block inserter. */
-	title: __( 'Reusable' ),
+	/* translators: Locally created Patterns tab title in the block inserter. */
+	title: __( 'Synced patterns' ),
 	icon: reusableBlockIcon,
 };
 const mediaTab = {

package/src/components/link-control/index.js

@@ -181,12 +181,6 @@ function LinkControl( {
 			isMounting.current = false;
 			return;
 		}
-		// Unless we are mounting, we always want to focus either:
-		// - the URL input
-		// - the first focusable element in the Link UI.
-		// But in editing mode if there is a text input present then
-		// the URL input is at index 1. If not then it is at index 0.
-		const whichFocusTargetIndex = textInputRef?.current ? 1 : 0;
 
 		// Scenario - when:
 		// - switching between editable and non editable LinkControl
@@ -194,9 +188,8 @@ function LinkControl( {
 		// ...then move focus to the *first* element to avoid focus loss
 		// and to ensure focus is *within* the Link UI.
 		const nextFocusTarget =
-			focus.focusable.find( wrapperNode.current )[
-				whichFocusTargetIndex
-			] || wrapperNode.current;
+			focus.focusable.find( wrapperNode.current )[ 0 ] ||
+			wrapperNode.current;
 
 		nextFocusTarget.focus();
 
@@ -299,7 +292,8 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettings = !! settings?.length;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
+	const showActions = isEditingLink && hasLinkValue;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
@@ -329,6 +323,18 @@ function LinkControl( {
 							'has-text-control': showTextControl,
 						} ) }
 					>
+						{ showTextControl && (
+							<TextControl
+								__nextHasNoMarginBottom
+								ref={ textInputRef }
+								className="block-editor-link-control__field block-editor-link-control__text-content"
+								label={ __( 'Text' ) }
+								value={ internalControlValue?.title }
+								onChange={ setInternalTextInputValue }
+								onKeyDown={ handleSubmitWithEnter }
+								size="__unstable-large"
+							/>
+						) }
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -346,19 +352,8 @@ function LinkControl( {
 							createSuggestionButtonText={
 								createSuggestionButtonText
 							}
-							useLabel={ showTextControl }
+							hideLabelFromVision={ ! showTextControl }
 						/>
-						{ showTextControl && (
-							<TextControl
-								__nextHasNoMarginBottom
-								ref={ textInputRef }
-								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label={ __( 'Text' ) }
-								value={ internalControlValue?.title }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -383,9 +378,9 @@ function LinkControl( {
 				/>
 			) }
 
-			{ isEditing && (
+			{ showSettings && (
 				<div className="block-editor-link-control__tools">
-					{ showSettings && (
+					{ ! currentInputIsEmpty && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
@@ -399,20 +394,22 @@ function LinkControl( {
 							/>
 						</LinkControlSettingsDrawer>
 					) }
+				</div>
+			) }
 
-					<div className="block-editor-link-control__search-actions">
-						<Button
-							variant="primary"
-							onClick={ isDisabled ? noop : handleSubmit }
-							className="block-editor-link-control__search-submit"
-							aria-disabled={ isDisabled }
-						>
-							{ __( 'Save' ) }
-						</Button>
-						<Button variant="tertiary" onClick={ handleCancel }>
-							{ __( 'Cancel' ) }
-						</Button>
-					</div>
+			{ showActions && (
+				<div className="block-editor-link-control__search-actions">
+					<Button
+						variant="primary"
+						onClick={ isDisabled ? noop : handleSubmit }
+						className="block-editor-link-control__search-submit"
+						aria-disabled={ isDisabled }
+					>
+						{ __( 'Save' ) }
+					</Button>
+					<Button variant="tertiary" onClick={ handleCancel }>
+						{ __( 'Cancel' ) }
+					</Button>
 				</div>
 			) }
 

package/src/components/link-control/search-input.js

@@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
-			useLabel = false,
+			hideLabelFromVision = false,
 		},
 		ref
 	) => {
@@ -120,14 +120,16 @@ const LinkControlSearchInput = forwardRef(
 		};
 
 		const inputClasses = classnames( className, {
-			'has-no-label': ! useLabel,
+			// 'has-no-label': ! hideLabelFromVision,
 		} );
 
 		return (
 			<div className="block-editor-link-control__search-input-container">
 				<URLInput
+					disableSuggestions={ currentLink?.url === value }
 					__nextHasNoMarginBottom
-					label={ useLabel ? 'URL' : undefined }
+					label={ __( 'Link' ) }
+					hideLabelFromVision={ hideLabelFromVision }
 					className={ inputClasses }
 					value={ value }
 					onChange={ onInputChange }

package/src/components/link-control/settings-drawer.js

@@ -6,9 +6,9 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { settings as settingsIcon } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { _x, isRTL } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
 function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
@@ -28,10 +28,11 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
-				icon={ settingsIcon }
-				label={ __( 'Link Settings' ) }
+				icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
 				aria-controls={ settingsDrawerId }
-			/>
+			>
+				{ _x( 'Advanced', 'Additional link settings' ) }
+			</Button>
 			<MaybeAnimatePresence>
 				{ settingsOpen && (
 					<MaybeMotionDiv