@wordpress/block-editor 11.3.1 → 11.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.3.1",
+	"version": "11.3.2",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -54,6 +54,7 @@
 		"@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",
@@ -82,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e9ff92d836928aba65dde94d9d193bc401a934d7"
+	"gitHead": "3eb2c536278d5a17f698b9c378fe3db746a89622"
 }

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/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 (

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/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/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