@wordpress/block-editor 12.2.0 → 12.3.1

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/inspector-controls/README.md

@@ -23,7 +23,7 @@ import {
 } from '@wordpress/block-editor';
 
 registerBlockType( 'my-plugin/inspector-controls-example', {
-	apiVersion: 2,
+	apiVersion: 3,
 
 	title: 'Inspector controls example',
 

package/src/components/inspector-controls/fill.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -82,7 +77,8 @@ function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
 	// access to any React Context whose Provider is part of
 	// the InspectorControlsSlot tree. So we re-create the
 	// Provider in this subtree.
-	const value = ! isEmpty( fillProps ) ? fillProps : null;
+	const value =
+		fillProps && Object.keys( fillProps ).length > 0 ? fillProps : null;
 	return (
 		<ToolsPanelContext.Provider value={ value }>
 			{ children }

package/src/components/inspector-controls-tabs/index.js

@@ -26,7 +26,6 @@ export default function InspectorControlsTabs( {
 	const initialTabName = ! useIsListViewTabDisabled( blockName )
 		? TAB_LIST_VIEW.name
 		: undefined;
-
 	return (
 		<TabPanel
 			className="block-editor-block-inspector__tabs"

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -90,6 +90,5 @@ export default function useInspectorControlsTabs( blockName ) {
 	}, [] );
 
 	const showTabs = getShowTabs( blockName, tabSettings );
-
 	return showTabs ? tabs : EMPTY_ARRAY;
 }

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

@@ -6,11 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice } from '@wordpress/components';
+import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
+import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -18,8 +19,9 @@ import { ENTER } from '@wordpress/keycodes';
 import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
+import LinkSettings from './settings';
 import useCreatePage from './use-create-page';
-import useInternalInputValue from './use-internal-input-value';
+import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
 
@@ -136,13 +138,20 @@ function LinkControl( {
 	const textInputRef = useRef();
 	const isEndingEditWithFocus = useRef( false );
 
+	const settingsKeys = settings.map( ( { id } ) => id );
+
 	const [ settingsOpen, setSettingsOpen ] = useState( false );
 
-	const [ internalUrlInputValue, setInternalUrlInputValue ] =
-		useInternalInputValue( value?.url || '' );
+	const [
+		internalControlValue,
+		setInternalControlValue,
+		setInternalURLInputValue,
+		setInternalTextInputValue,
+		createSetInternalSettingValueHandler,
+	] = useInternalValue( value );
 
-	const [ internalTextInputValue, setInternalTextInputValue ] =
-		useInternalInputValue( value?.title || '' );
+	const valueHasChanges =
+		value && ! isShallowEqualObjects( internalControlValue, value );
 
 	const [ isEditingLink, setIsEditingLink ] = useState(
 		forceIsEditingLink !== undefined
@@ -160,6 +169,8 @@ function LinkControl( {
 		) {
 			setIsEditingLink( forceIsEditingLink );
 		}
+		// Todo: bug if the missing dep is introduced. Will need a fix.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ forceIsEditingLink ] );
 
 	useEffect( () => {
@@ -170,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
@@ -183,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();
 
@@ -208,22 +212,39 @@ function LinkControl( {
 	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
+		// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
+		// which should not overide any existing settings values set by the
+		// user. This filters out any settings values from the suggestion.
+		const nonSettingsChanges = Object.keys( updatedValue ).reduce(
+			( acc, key ) => {
+				if ( ! settingsKeys.includes( key ) ) {
+					acc[ key ] = updatedValue[ key ];
+				}
+				return acc;
+			},
+			{}
+		);
+
 		onChange( {
-			...updatedValue,
-			title: internalTextInputValue || updatedValue?.title,
+			...internalControlValue,
+			...nonSettingsChanges,
+			// As title is not a setting, it must be manually applied
+			// in such a way as to preserve the users changes over
+			// any "title" value provided by the "suggestion".
+			title: internalControlValue?.title || updatedValue?.title,
 		} );
+
 		stopEditing();
 	};
 
 	const handleSubmit = () => {
-		if (
-			currentUrlInputValue !== value?.url ||
-			internalTextInputValue !== value?.title
-		) {
+		if ( valueHasChanges ) {
+			// Submit the original value with new stored values applied
+			// on top. URL is a special case as it may also be a prop.
 			onChange( {
 				...value,
+				...internalControlValue,
 				url: currentUrlInputValue,
-				title: internalTextInputValue,
 			} );
 		}
 		stopEditing();
@@ -231,6 +252,7 @@ function LinkControl( {
 
 	const handleSubmitWithEnter = ( event ) => {
 		const { keyCode } = event;
+
 		if (
 			keyCode === ENTER &&
 			! currentInputIsEmpty // Disallow submitting empty values.
@@ -241,8 +263,7 @@ function LinkControl( {
 	};
 
 	const resetInternalValues = () => {
-		setInternalUrlInputValue( value?.url );
-		setInternalTextInputValue( value?.title );
+		setInternalControlValue( value );
 	};
 
 	const handleCancel = ( event ) => {
@@ -263,7 +284,8 @@ function LinkControl( {
 		onCancel?.();
 	};
 
-	const currentUrlInputValue = propInputValue || internalUrlInputValue;
+	const currentUrlInputValue =
+		propInputValue || internalControlValue?.url || '';
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
 
@@ -278,6 +300,7 @@ function LinkControl( {
 	const showTextControl = hasLinkValue && hasTextControl;
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
+	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
 
 	return (
 		<div
@@ -306,7 +329,7 @@ function LinkControl( {
 							value={ currentUrlInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
 							onCreateSuggestion={ createPage }
-							onChange={ setInternalUrlInputValue }
+							onChange={ setInternalURLInputValue }
 							onSelect={ handleSelectSuggestion }
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }
@@ -318,6 +341,17 @@ function LinkControl( {
 							}
 							useLabel={ 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
@@ -344,32 +378,29 @@ function LinkControl( {
 
 			{ isEditing && (
 				<div className="block-editor-link-control__tools">
-					{ ( showSettings || showTextControl ) && (
+					{ showSettings && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
-							showTextControl={ showTextControl }
-							showSettings={ showSettings }
-							textInputRef={ textInputRef }
-							internalTextInputValue={ internalTextInputValue }
-							setInternalTextInputValue={
-								setInternalTextInputValue
-							}
-							handleSubmitWithEnter={ handleSubmitWithEnter }
-							value={ value }
-							settings={ settings }
-							onChange={ onChange }
-						/>
+						>
+							<LinkSettings
+								value={ internalControlValue }
+								settings={ settings }
+								onChange={ createSetInternalSettingValueHandler(
+									settingsKeys
+								) }
+							/>
+						</LinkControlSettingsDrawer>
 					) }
 
 					<div className="block-editor-link-control__search-actions">
 						<Button
 							variant="primary"
-							onClick={ handleSubmit }
+							onClick={ isDisabled ? noop : handleSubmit }
 							className="block-editor-link-control__search-submit"
-							disabled={ currentInputIsEmpty } // Disallow submitting empty values.
+							aria-disabled={ isDisabled }
 						>
-							{ __( 'Apply' ) }
+							{ __( 'Save' ) }
 						</Button>
 						<Button variant="tertiary" onClick={ handleCancel }>
 							{ __( 'Cancel' ) }