@wordpress/block-editor 11.3.0 → 11.3.2

package/build-style/style-rtl.css

@@ -1591,6 +1591,24 @@
   content: attr(aria-label);
 }
 
+.block-editor-inspector-controls-tabs__hint {
+  align-items: top;
+  background: #f0f0f0;
+  border-radius: 2px;
+  color: #1e1e1e;
+  display: flex;
+  flex-direction: row;
+  margin: 16px;
+}
+
+.block-editor-inspector-controls-tabs__hint-content {
+  margin: 12px 12px 12px 0;
+}
+
+.block-editor-inspector-controls-tabs__hint-dismiss {
+  margin: 4px 0 4px 4px;
+}
+
 .block-editor-inspector-popover-header {
   margin-bottom: 16px;
 }

package/build-style/style.css

@@ -1591,6 +1591,24 @@
   content: attr(aria-label);
 }
 
+.block-editor-inspector-controls-tabs__hint {
+  align-items: top;
+  background: #f0f0f0;
+  border-radius: 2px;
+  color: #1e1e1e;
+  display: flex;
+  flex-direction: row;
+  margin: 16px;
+}
+
+.block-editor-inspector-controls-tabs__hint-content {
+  margin: 12px 0 12px 12px;
+}
+
+.block-editor-inspector-controls-tabs__hint-dismiss {
+  margin: 4px 4px 4px 0;
+}
+
 .block-editor-inspector-popover-header {
   margin-bottom: 16px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.3.0",
+	"version": "11.3.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,34 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.26.0",
-		"@wordpress/api-fetch": "^6.23.0",
-		"@wordpress/blob": "^3.26.0",
-		"@wordpress/blocks": "^12.3.0",
-		"@wordpress/components": "^23.3.0",
-		"@wordpress/compose": "^6.3.0",
-		"@wordpress/data": "^8.3.0",
-		"@wordpress/date": "^4.26.0",
-		"@wordpress/deprecated": "^3.26.0",
-		"@wordpress/dom": "^3.26.0",
-		"@wordpress/element": "^5.3.0",
-		"@wordpress/escape-html": "^2.26.0",
-		"@wordpress/experiments": "^0.8.0",
-		"@wordpress/hooks": "^3.26.0",
-		"@wordpress/html-entities": "^3.26.0",
-		"@wordpress/i18n": "^4.26.0",
-		"@wordpress/icons": "^9.17.0",
-		"@wordpress/is-shallow-equal": "^4.26.0",
-		"@wordpress/keyboard-shortcuts": "^4.3.0",
-		"@wordpress/keycodes": "^3.26.0",
-		"@wordpress/notices": "^3.26.0",
-		"@wordpress/rich-text": "^6.3.0",
-		"@wordpress/shortcode": "^3.26.0",
-		"@wordpress/style-engine": "^1.9.0",
-		"@wordpress/token-list": "^2.26.0",
-		"@wordpress/url": "^3.27.0",
-		"@wordpress/warning": "^2.26.0",
-		"@wordpress/wordcount": "^3.26.0",
+		"@wordpress/a11y": "^3.26.1",
+		"@wordpress/api-fetch": "^6.23.1",
+		"@wordpress/blob": "^3.26.1",
+		"@wordpress/blocks": "^12.3.1",
+		"@wordpress/components": "^23.3.1",
+		"@wordpress/compose": "^6.3.1",
+		"@wordpress/data": "^8.3.1",
+		"@wordpress/date": "^4.26.1",
+		"@wordpress/deprecated": "^3.26.1",
+		"@wordpress/dom": "^3.26.1",
+		"@wordpress/element": "^5.3.1",
+		"@wordpress/escape-html": "^2.26.1",
+		"@wordpress/experiments": "^0.8.1",
+		"@wordpress/hooks": "^3.26.1",
+		"@wordpress/html-entities": "^3.26.1",
+		"@wordpress/i18n": "^4.26.1",
+		"@wordpress/icons": "^9.17.1",
+		"@wordpress/is-shallow-equal": "^4.26.1",
+		"@wordpress/keyboard-shortcuts": "^4.3.1",
+		"@wordpress/keycodes": "^3.26.1",
+		"@wordpress/notices": "^3.26.1",
+		"@wordpress/preferences": "^3.3.1",
+		"@wordpress/rich-text": "^6.3.1",
+		"@wordpress/shortcode": "^3.26.1",
+		"@wordpress/style-engine": "^1.9.1",
+		"@wordpress/token-list": "^2.26.1",
+		"@wordpress/url": "^3.27.1",
+		"@wordpress/warning": "^2.26.1",
+		"@wordpress/wordcount": "^3.26.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -82,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "cab6ebe2b4c5dbacfd753dcae4a2406559c4813c"
+	"gitHead": "3eb2c536278d5a17f698b9c378fe3db746a89622"
 }

package/src/components/block-actions/index.js

@@ -58,6 +58,8 @@ export default function BlockActions( {
 		setBlockMovingClientId,
 		setNavigationMode,
 		selectBlock,
+		clearSelectedBlock,
+		multiSelect,
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
@@ -132,6 +134,13 @@ export default function BlockActions( {
 		},
 		async onPasteStyles() {
 			await pasteStyles( blocks );
+
+			// Need to reselect the block(s) in order for optional tool panel control changes to register.
+			clearSelectedBlock();
+			multiSelect(
+				blocks[ 0 ].clientId,
+				blocks[ blocks.length - 1 ].clientId
+			);
 		},
 	} );
 }

package/src/components/block-inspector/index.js

@@ -178,7 +178,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			if ( blockType ) {
 				const globalBlockInspectorAnimationSettings =
 					select( blockEditorStore ).getSettings()
-						.__experimentalBlockInspectorAnimation;
+						.blockInspectorAnimation;
 				return globalBlockInspectorAnimationSettings?.[
 					blockType.name
 				];

package/src/components/iframe/index.js

@@ -19,6 +19,7 @@ import {
 	useResizeObserver,
 	useMergeRefs,
 	useRefEffect,
+	useDisabled,
 } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -207,7 +208,13 @@ function Iframe( {
 				forceRender();
 			} );
 	}, [] );
-	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
+	const disabledRef = useDisabled( { isDisabled: ! readonly } );
+	const bodyRef = useMergeRefs( [
+		contentRef,
+		clearerRef,
+		writingFlowRef,
+		disabledRef,
+	] );
 
 	const styleAssets = (
 		<>
@@ -284,7 +291,6 @@ function Iframe( {
 									marginTop: frameSize,
 									transform: `scale( ${ scale } )`,
 								} }
-								inert={ readonly ? 'true' : undefined }
 							>
 								{ contentResizeListener }
 								<StyleProvider document={ iframeDocument }>

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

@@ -28,6 +28,19 @@ 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
+// be at the bottom without any re-ordering.
+const patternCategoriesOrder = [
+	'featured',
+	'posts',
+	'text',
+	'gallery',
+	'call-to-action',
+	'banner',
+	'header',
+	'footer',
+];
+
 function usePatternsCategories( rootClientId ) {
 	const [ allPatterns, allCategories ] = usePatternsState(
 		undefined,
@@ -56,17 +69,27 @@ function usePatternsCategories( rootClientId ) {
 				)
 			)
 			.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 ) =>
-						[ 'featured', 'text' ].includes( categoryName )
+						patternCategoriesOrder.includes( categoryName )
 					)
 				) {
 					return 0;
 				}
-				// Move `featured` category to the top and `text` to the bottom.
-				return currentName === 'featured' || nextName === 'text'
-					? -1
-					: 1;
+				if (
+					[ currentName, nextName ].every( ( categoryName ) =>
+						patternCategoriesOrder.includes( categoryName )
+					)
+				) {
+					return (
+						patternCategoriesOrder.indexOf( currentName ) -
+						patternCategoriesOrder.indexOf( nextName )
+					);
+				}
+				return patternCategoriesOrder.includes( currentName ) ? -1 : 1;
 			} );
 
 		if (
@@ -195,6 +218,7 @@ function BlockPatternsTabs( {
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 	const categories = usePatternsCategories( rootClientId );
+	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>
@@ -261,7 +285,7 @@ function BlockPatternsTabs( {
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={ selectedCategory }
+					initialCategory={ initialCategory }
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 				/>

package/src/components/inserter/menu.js

@@ -113,6 +113,13 @@ function InserterMenu(
 		[ onToggleInsertionPoint, setHoveredItem ]
 	);
 
+	const onHoverPattern = useCallback(
+		( item ) => {
+			onToggleInsertionPoint( !! item );
+		},
+		[ onToggleInsertionPoint ]
+	);
+
 	const onClickPatternCategory = useCallback(
 		( patternCategory ) => {
 			setSelectedPatternCategory( patternCategory );
@@ -296,7 +303,7 @@ function InserterMenu(
 				<BlockPatternsCategoryDialog
 					rootClientId={ destinationRootClientId }
 					onInsert={ onInsertPattern }
-					onHover={ onHover }
+					onHover={ onHoverPattern }
 					category={ selectedPatternCategory }
 					showTitlesAsTooltip
 				/>

package/src/components/inspector-controls-tabs/settings-tab-hint.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { focus } from '@wordpress/dom';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+const PREFERENCE_NAME = 'isInspectorControlsTabsHintVisible';
+
+export default function InspectorControlsTabsHint() {
+	const isInspectorControlsTabsHintVisible = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true,
+		[]
+	);
+
+	const ref = useRef();
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	if ( ! isInspectorControlsTabsHintVisible ) {
+		return null;
+	}
+
+	return (
+		<div ref={ ref } className="block-editor-inspector-controls-tabs__hint">
+			<div className="block-editor-inspector-controls-tabs__hint-content">
+				{ __(
+					"Looking for other block settings? They've moved to the styles tab."
+				) }
+			</div>
+			<Button
+				className="block-editor-inspector-controls-tabs__hint-dismiss"
+				icon={ close }
+				iconSize="16"
+				label={ __( 'Dismiss hint' ) }
+				onClick={ () => {
+					// Retain focus when dismissing the element.
+					const previousElement = focus.tabbable.findPrevious(
+						ref.current
+					);
+					previousElement?.focus();
+					setPreference( 'core', PREFERENCE_NAME, false );
+				} }
+				showTooltip={ false }
+			/>
+		</div>
+	);
+}

package/src/components/inspector-controls-tabs/settings-tab.js

@@ -4,6 +4,7 @@
 import AdvancedControls from './advanced-controls-panel';
 import PositionControls from './position-controls-panel';
 import { default as InspectorControls } from '../inspector-controls';
+import SettingsTabHint from './settings-tab-hint';
 
 const SettingsTab = ( { showAdvancedControls = false } ) => (
 	<>
@@ -14,6 +15,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => (
 				<AdvancedControls />
 			</div>
 		) }
+		<SettingsTabHint />
 	</>
 );
 

package/src/components/inspector-controls-tabs/style.scss

@@ -13,3 +13,23 @@
 		}
 	}
 }
+
+.block-editor-inspector-controls-tabs__hint {
+	align-items: top;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+	color: $gray-900;
+	display: flex;
+	flex-direction: row;
+	margin: $grid-unit-20;
+}
+
+.block-editor-inspector-controls-tabs__hint-content {
+	margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15;
+}
+
+.block-editor-inspector-controls-tabs__hint-dismiss {
+	// The dismiss button has a lot of empty space through its padding.
+	// Apply margin to visually align the icon with the top of the text to its left.
+	margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0;
+}

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

@@ -12,6 +12,7 @@ import { forwardRef, useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../experiments';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
@@ -52,7 +53,7 @@ const ListViewBlockContents = forwardRef(
 					hasBlockMovingClientId,
 					getSelectedBlockClientId,
 					getLastInsertedBlocksClientIds,
-				} = select( blockEditorStore );
+				} = unlock( select( blockEditorStore ) );
 				const lastInsertedBlocksClientIds =
 					getLastInsertedBlocksClientIds();
 				return {

package/src/components/off-canvas-editor/index.js

@@ -60,12 +60,23 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
+ * @param {string}  props.description     Optional accessible description for the tree grid component.
+ * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
-	{ id, blocks, showBlockMovers = false, isExpanded = false, LeafMoreMenu },
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		LeafMoreMenu,
+		description = __( 'Block navigation structure' ),
+		onSelect,
+	},
 	ref
 ) {
+	const { getBlock } = useSelect( blockEditorStore );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
@@ -105,8 +116,11 @@ function OffCanvasEditor(
 		( event, blockClientId ) => {
 			updateBlockSelection( event, blockClientId );
 			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -208,7 +222,8 @@ function OffCanvasEditor(
 					onCollapseRow={ collapseRow }
 					onExpandRow={ expandRow }
 					onFocusRow={ focusRow }
-					applicationAriaLabel={ __( 'Block navigation structure' ) }
+					// eslint-disable-next-line jsx-a11y/aria-props
+					aria-description={ description }
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch

package/src/components/provider/use-block-sync.js

@@ -265,6 +265,9 @@ export default function useBlockSync( {
 			previousAreBlocksDifferent = areBlocksDifferent;
 		} );
 
-		return () => unsubscribe();
+		return () => {
+			subscribed.current = false;
+			unsubscribe();
+		};
 	}, [ registry, clientId ] );
 }

package/src/hooks/position.js

@@ -365,6 +365,10 @@ export const withPositionStyles = createHigherOrderComponent(
 		// Attach a `wp-container-` id-based class name.
 		const className = classnames( props?.className, {
 			[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+			[ `is-position-${ attributes?.style?.position?.type }` ]:
+				allowPositionStyles &&
+				!! css &&
+				!! attributes?.style?.position?.type,
 		} );
 
 		return (

package/src/store/defaults.js

@@ -170,6 +170,13 @@ export const SETTINGS_DEFAULTS = {
 	__unstableGalleryWithImageBlocks: false,
 	__unstableIsPreviewMode: false,
 
+	// This setting is `private` now with `lock` API.
+	blockInspectorAnimation: {
+		'core/navigation': { enterDirection: 'leftToRight' },
+		'core/navigation-submenu': { enterDirection: 'rightToLeft' },
+		'core/navigation-link': { enterDirection: 'rightToLeft' },
+	},
+
 	generateAnchors: false,
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.

package/src/store/private-actions.js

@@ -11,7 +11,10 @@ import { Platform } from '@wordpress/element';
  *
  * @see https://github.com/WordPress/gutenberg/pull/46131
  */
-const privateSettings = [ 'inserterMediaCategories' ];
+const privateSettings = [
+	'inserterMediaCategories',
+	'blockInspectorAnimation',
+];
 
 /**
  * Action that updates the block editor settings and

package/src/store/private-selectors.js

@@ -8,3 +8,13 @@
 export function isBlockInterfaceHidden( state ) {
 	return state.isBlockInterfaceHidden;
 }
+
+/**
+ * Gets the client ids of the last inserted blocks.
+ *
+ * @param {Object} state Global application state.
+ * @return {Array|undefined} Client Ids of the last inserted block(s).
+ */
+export function getLastInsertedBlocksClientIds( state ) {
+	return state?.lastBlockInserted?.clientIds;
+}

package/src/store/selectors.js

@@ -2703,16 +2703,6 @@ export function wasBlockJustInserted( state, clientId, source ) {
 	);
 }
 
-/**
- * Gets the client ids of the last inserted blocks.
- *
- * @param {Object} state Global application state.
- * @return {Array|undefined} Client Ids of the last inserted block(s).
- */
-export function getLastInsertedBlocksClientIds( state ) {
-	return state?.lastBlockInserted?.clientIds;
-}
-
 /**
  * Tells if the block is visible on the canvas or not.
  *

package/src/store/test/private-selectors.js

@@ -1,7 +1,10 @@
 /**
  * Internal dependencies
  */
-import { isBlockInterfaceHidden } from '../private-selectors';
+import {
+	isBlockInterfaceHidden,
+	getLastInsertedBlocksClientIds,
+} from '../private-selectors';
 
 describe( 'private selectors', () => {
 	describe( 'isBlockInterfaceHidden', () => {
@@ -21,4 +24,29 @@ describe( 'private selectors', () => {
 			expect( isBlockInterfaceHidden( state ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'getLastInsertedBlocksClientIds', () => {
+		it( 'should return undefined if no blocks have been inserted', () => {
+			const state = {
+				lastBlockInserted: {},
+			};
+
+			expect( getLastInsertedBlocksClientIds( state ) ).toEqual(
+				undefined
+			);
+		} );
+
+		it( 'should return clientIds if blocks have been inserted', () => {
+			const state = {
+				lastBlockInserted: {
+					clientIds: [ '123456', '78910' ],
+				},
+			};
+
+			expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
+				'123456',
+				'78910',
+			] );
+		} );
+	} );
 } );

package/src/store/test/selectors.js

@@ -72,7 +72,6 @@ const {
 	__experimentalGetPatternTransformItems,
 	wasBlockJustInserted,
 	__experimentalGetGlobalBlocksByName,
-	getLastInsertedBlocksClientIds,
 } = selectors;
 
 describe( 'selectors', () => {
@@ -4688,26 +4687,3 @@ describe( '__unstableGetClientIdsTree', () => {
 		] );
 	} );
 } );
-
-describe( 'getLastInsertedBlocksClientIds', () => {
-	it( 'should return undefined if no blocks have been inserted', () => {
-		const state = {
-			lastBlockInserted: {},
-		};
-
-		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( undefined );
-	} );
-
-	it( 'should return clientIds if blocks have been inserted', () => {
-		const state = {
-			lastBlockInserted: {
-				clientIds: [ '123456', '78910' ],
-			},
-		};
-
-		expect( getLastInsertedBlocksClientIds( state ) ).toEqual( [
-			'123456',
-			'78910',
-		] );
-	} );
-} );