@wordpress/block-editor 11.3.6 → 11.5.0

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

@@ -28,7 +28,7 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 
-// Preffered order of pattern categories. Any other categories should
+// Preferred order of pattern categories. Any other categories should
 // be at the bottom without any re-ordering.
 const patternCategoriesOrder = [
 	'featured',
@@ -68,28 +68,14 @@ function usePatternsCategories( rootClientId ) {
 					pattern.categories?.includes( category.name )
 				)
 			)
-			.sort( ( { name: currentName }, { name: nextName } ) => {
-				// The pattern categories should be ordered as follows:
-				// 1. The categories from `patternCategoriesOrder` in that specific order should be at the top.
-				// 2. The rest categories should be at the bottom without any re-ordering.
-				if (
-					! [ currentName, nextName ].some( ( categoryName ) =>
-						patternCategoriesOrder.includes( categoryName )
-					)
-				) {
-					return 0;
-				}
-				if (
-					[ currentName, nextName ].every( ( categoryName ) =>
-						patternCategoriesOrder.includes( categoryName )
-					)
-				) {
-					return (
-						patternCategoriesOrder.indexOf( currentName ) -
-						patternCategoriesOrder.indexOf( nextName )
-					);
-				}
-				return patternCategoriesOrder.includes( currentName ) ? -1 : 1;
+			.sort( ( { name: aName }, { name: bName } ) => {
+				// Sort categories according to `patternCategoriesOrder`.
+				let aIndex = patternCategoriesOrder.indexOf( aName );
+				let bIndex = patternCategoriesOrder.indexOf( bName );
+				// All other categories should come after that.
+				if ( aIndex < 0 ) aIndex = patternCategoriesOrder.length;
+				if ( bIndex < 0 ) bIndex = patternCategoriesOrder.length;
+				return aIndex - bIndex;
 			} );
 
 		if (

package/src/components/inserter/block-types-tab.native.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -66,6 +67,7 @@ function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 			sections={ sections }
 			onSelect={ handleSelect }
 			listProps={ listProps }
+			label={ __( 'Blocks menu' ) }
 		/>
 	);
 }

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
 			sections={ sections }
 			onSelect={ onSelect }
 			listProps={ listProps }
+			label={ __( 'Reusable blocks' ) }
 		/>
 	);
 }

package/src/components/inserter/search-results.native.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -54,6 +55,7 @@ function InserterSearchResults( {
 			sections={ [ createInserterSection( { key: 'search', items } ) ] }
 			onSelect={ handleSelect }
 			listProps={ listProps }
+			label={ __( 'Blocks' ) }
 		/>
 	);
 }

package/src/components/inserter/test/__snapshots__/index.native.js.snap

@@ -2,21 +2,21 @@
 
 exports[`Inserter can add blocks adds new block at the end of post 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Inserter can add blocks after another block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
@@ -30,7 +30,7 @@ exports[`Inserter can add blocks after another block 1`] = `
 
 exports[`Inserter can add blocks before another block 1`] = `
 "<!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -40,11 +40,11 @@ exports[`Inserter can add blocks before another block 1`] = `
 
 exports[`Inserter can add blocks creates a new Paragraph block tapping on the empty area below the last block 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -54,7 +54,7 @@ exports[`Inserter can add blocks creates a new Paragraph block tapping on the em
 
 exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:more -->
@@ -62,17 +62,17 @@ exports[`Inserter can add blocks inserts between 2 existing blocks 1`] = `
 <!-- /wp:more -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
 
 exports[`Inserter can add blocks inserts block at the end of post when no block is selected 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:more -->
@@ -86,11 +86,11 @@ exports[`Inserter can add blocks to the beginning 1`] = `
 <!-- /wp:more -->
 
 <!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->
@@ -100,11 +100,11 @@ exports[`Inserter can add blocks to the beginning 1`] = `
 
 exports[`Inserter can add blocks to the end 1`] = `
 "<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
 <!-- wp:heading -->
-<h2 class=\\"wp-block-heading\\"></h2>
+<h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->
 
 <!-- wp:paragraph -->

package/src/components/inspector-controls/block-support-tools-panel.js

@@ -52,7 +52,6 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			updateBlockAttributes( clientIds, newAttributes, true );
 		},
 		[
-			cleanEmptyObject,
 			getBlockAttributes,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,

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

@@ -12,6 +12,7 @@ import {
 } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +24,7 @@ export default function InspectorControlsFill( {
 	children,
 	group = 'default',
 	__experimentalGroup,
+	resetAllFilter,
 } ) {
 	if ( __experimentalGroup ) {
 		deprecated(
@@ -50,18 +52,40 @@ export default function InspectorControlsFill( {
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to InspectorControlsFill will not have
-					// 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;
 					return (
-						<ToolsPanelContext.Provider value={ value }>
-							{ children }
-						</ToolsPanelContext.Provider>
+						<ToolsPanelInspectorControl
+							fillProps={ fillProps }
+							children={ children }
+							resetAllFilter={ resetAllFilter }
+						/>
 					);
 				} }
 			</Fill>
 		</StyleProvider>
 	);
 }
+
+function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
+	const { registerResetAllFilter, deregisterResetAllFilter } = fillProps;
+	useEffect( () => {
+		if ( resetAllFilter && registerResetAllFilter ) {
+			registerResetAllFilter( resetAllFilter );
+		}
+		return () => {
+			if ( resetAllFilter && deregisterResetAllFilter ) {
+				deregisterResetAllFilter( resetAllFilter );
+			}
+		};
+	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+
+	// Children passed to InspectorControlsFill will not have
+	// 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;
+	return (
+		<ToolsPanelContext.Provider value={ value }>
+			{ children }
+		</ToolsPanelContext.Provider>
+	);
+}

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

@@ -6,8 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
-import { keyboardReturn } from '@wordpress/icons';
+import { Button, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -113,6 +112,7 @@ function LinkControl( {
 	settings = DEFAULT_LINK_SETTINGS,
 	onChange = noop,
 	onRemove,
+	onCancel,
 	noDirectEntry = false,
 	showSuggestions = true,
 	showInitialSuggestions,
@@ -136,6 +136,8 @@ function LinkControl( {
 	const textInputRef = useRef();
 	const isEndingEditWithFocus = useRef( false );
 
+	const [ settingsOpen, setSettingsOpen ] = useState( false );
+
 	const [ internalUrlInputValue, setInternalUrlInputValue ] =
 		useInternalInputValue( value?.url || '' );
 
@@ -190,6 +192,8 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
+	const hasLinkValue = value?.url?.trim()?.length > 0;
+
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
@@ -199,6 +203,7 @@ function LinkControl( {
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
+		setSettingsOpen( false );
 		setIsEditingLink( false );
 	};
 
@@ -235,6 +240,29 @@ function LinkControl( {
 		}
 	};
 
+	const resetInternalValues = () => {
+		setInternalUrlInputValue( value?.url );
+		setInternalTextInputValue( value?.title );
+	};
+
+	const handleCancel = ( event ) => {
+		event.preventDefault();
+		event.stopPropagation();
+
+		// Ensure that any unsubmitted input changes are reset.
+		resetInternalValues();
+
+		if ( hasLinkValue ) {
+			// If there is a link then exist editing mode and show preview.
+			stopEditing();
+		} else {
+			// If there is no link value, then remove the link entirely.
+			onRemove?.();
+		}
+
+		onCancel?.();
+	};
+
 	const currentUrlInputValue = propInputValue || internalUrlInputValue;
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
@@ -242,12 +270,14 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettingsDrawer = !! settings?.length;
+	const showSettings = !! settings?.length;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
-	const showTextControl = value?.url?.trim()?.length > 0 && hasTextControl;
+	const showTextControl = hasLinkValue && hasTextControl;
+
+	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
 
 	return (
 		<div
@@ -261,7 +291,7 @@ function LinkControl( {
 				</div>
 			) }
 
-			{ ( isEditingLink || ! value ) && ! isCreatingPage && (
+			{ isEditing && (
 				<>
 					<div
 						className={ classnames( {
@@ -269,18 +299,6 @@ 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={ internalTextInputValue }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
-
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -299,17 +317,7 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							useLabel={ showTextControl }
-						>
-							<div className="block-editor-link-control__search-actions">
-								<Button
-									onClick={ handleSubmit }
-									label={ __( 'Submit' ) }
-									icon={ keyboardReturn }
-									className="block-editor-link-control__search-submit"
-									disabled={ currentInputIsEmpty } // Disallow submitting empty values.
-								/>
-							</div>
-						</LinkControlSearchInput>
+						/>
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -334,15 +342,42 @@ function LinkControl( {
 				/>
 			) }
 
-			{ showSettingsDrawer && (
+			{ isEditing && (
 				<div className="block-editor-link-control__tools">
-					<LinkControlSettingsDrawer
-						value={ value }
-						settings={ settings }
-						onChange={ onChange }
-					/>
+					{ ( showSettings || showTextControl ) && (
+						<LinkControlSettingsDrawer
+							settingsOpen={ settingsOpen }
+							setSettingsOpen={ setSettingsOpen }
+							showTextControl={ showTextControl }
+							showSettings={ showSettings }
+							textInputRef={ textInputRef }
+							internalTextInputValue={ internalTextInputValue }
+							setInternalTextInputValue={
+								setInternalTextInputValue
+							}
+							handleSubmitWithEnter={ handleSubmitWithEnter }
+							value={ value }
+							settings={ settings }
+							onChange={ onChange }
+						/>
+					) }
+
+					<div className="block-editor-link-control__search-actions">
+						<Button
+							variant="primary"
+							onClick={ handleSubmit }
+							className="xblock-editor-link-control__search-submit"
+							disabled={ currentInputIsEmpty } // Disallow submitting empty values.
+						>
+							{ __( 'Apply' ) }
+						</Button>
+						<Button variant="tertiary" onClick={ handleCancel }>
+							{ __( 'Cancel' ) }
+						</Button>
+					</div>
 				</div>
 			) }
+
 			{ renderControlBottom && renderControlBottom() }
 		</div>
 	);

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

@@ -1,41 +1,97 @@
 /**
  * WordPress dependencies
  */
+import {
+	Button,
+	TextControl,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { settings as settingsIcon } from '@wordpress/icons';
+import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+import { Fragment } from '@wordpress/element';
 
-const noop = () => {};
+/**
+ * Internal dependencies
+ */
+import Settings from './settings';
 
-const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
-	if ( ! settings || ! settings.length ) {
-		return null;
-	}
+function LinkSettingsDrawer( {
+	settingsOpen,
+	setSettingsOpen,
+	showTextControl,
+	showSettings,
+	textInputRef,
+	internalTextInputValue,
+	setInternalTextInputValue,
+	handleSubmitWithEnter,
+	value,
+	settings,
+	onChange,
+} ) {
+	const prefersReducedMotion = useReducedMotion();
+	const MaybeAnimatePresence = prefersReducedMotion
+		? Fragment
+		: AnimatePresence;
+	const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div;
 
-	const handleSettingChange = ( setting ) => ( newValue ) => {
-		onChange( {
-			...value,
-			[ setting.id ]: newValue,
-		} );
-	};
+	const id = useInstanceId( LinkSettingsDrawer );
 
-	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
-			className="block-editor-link-control__setting"
-			key={ setting.id }
-			label={ setting.title }
-			onChange={ handleSettingChange( setting ) }
-			checked={ value ? !! value[ setting.id ] : false }
-		/>
-	) );
+	const settingsDrawerId = `link-control-settings-drawer-${ id }`;
 
 	return (
-		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
-				{ __( 'Currently selected link settings' ) }
-			</VisuallyHidden>
-			{ theSettings }
-		</fieldset>
+		<>
+			<Button
+				className="block-editor-link-control__drawer-toggle"
+				aria-expanded={ settingsOpen }
+				onClick={ () => setSettingsOpen( ! settingsOpen ) }
+				icon={ settingsIcon }
+				label={ __( 'Link Settings' ) }
+				aria-controls={ settingsDrawerId }
+			/>
+			<MaybeAnimatePresence>
+				{ settingsOpen && (
+					<MaybeMotionDiv
+						className="block-editor-link-control__drawer"
+						hidden={ ! settingsOpen }
+						id={ settingsDrawerId }
+						initial="collapsed"
+						animate="open"
+						exit="collapsed"
+						variants={ {
+							open: { opacity: 1, height: 'auto' },
+							collapsed: { opacity: 0, height: 0 },
+						} }
+						transition={ {
+							duration: 0.1,
+						} }
+					>
+						<div className="block-editor-link-control__drawer-inner">
+							{ showTextControl && (
+								<TextControl
+									__nextHasNoMarginBottom
+									ref={ textInputRef }
+									className="block-editor-link-control__setting block-editor-link-control__text-content"
+									label="Text"
+									value={ internalTextInputValue }
+									onChange={ setInternalTextInputValue }
+									onKeyDown={ handleSubmitWithEnter }
+								/>
+							) }
+							{ showSettings && (
+								<Settings
+									value={ value }
+									settings={ settings }
+									onChange={ onChange }
+								/>
+							) }
+						</div>
+					</MaybeMotionDiv>
+				) }
+			</MaybeAnimatePresence>
+		</>
 	);
-};
+}
 
-export default LinkControlSettingsDrawer;
+export default LinkSettingsDrawer;

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+
+const noop = () => {};
+
+const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
+	if ( ! settings || ! settings.length ) {
+		return null;
+	}
+
+	const handleSettingChange = ( setting ) => ( newValue ) => {
+		onChange( {
+			...value,
+			[ setting.id ]: newValue,
+		} );
+	};
+
+	const theSettings = settings.map( ( setting ) => (
+		<ToggleControl
+			__nextHasNoMarginBottom
+			className="block-editor-link-control__setting"
+			key={ setting.id }
+			label={ setting.title }
+			onChange={ handleSettingChange( setting ) }
+			checked={ value ? !! value[ setting.id ] : false }
+		/>
+	) );
+
+	return (
+		<fieldset className="block-editor-link-control__settings">
+			<VisuallyHidden as="legend">
+				{ __( 'Currently selected link settings' ) }
+			</VisuallyHidden>
+			{ theSettings }
+		</fieldset>
+	);
+};
+
+export default LinkControlSettings;