Merge branch 'trunk' into ts-combobox-control

lib/class-wp-theme-json-gutenberg.php

@@ -971,7 +971,7 @@ public function get_settings() {
 	 *
 	 * @return string The processed CSS.
 	 */
-	public function process_blocks_custom_css( $css, $selector ) {
+	protected function process_blocks_custom_css( $css, $selector ) {
 		$processed_css = '';
 
 		// Split CSS nested rules.

lib/experimental/class-wp-rest-block-editor-settings-controller.php

@@ -168,12 +168,6 @@ public function get_item_schema() {
 					'context'     => array( 'mobile' ),
 				),
 
-				'__experimentalBlockInspectorAnimation'  => array(
-					'description' => __( 'Whether to enable animation when showing and hiding the block inspector.', 'gutenberg' ),
-					'type'        => 'object',
-					'context'     => array( 'site-editor' ),
-				),
-
 				'alignWide'                              => array(
 					'description' => __( 'Enable/Disable Wide/Full Alignments.', 'gutenberg' ),
 					'type'        => 'boolean',

package.json

@@ -19,7 +19,8 @@
 		"npm": ">=6.9.0 <7"
 	},
 	"config": {
-		"IS_GUTENBERG_PLUGIN": true
+		"IS_GUTENBERG_PLUGIN": true,
+		"ALLOW_EXPERIMENT_REREGISTRATION": true
 	},
 	"dependencies": {
 		"@wordpress/a11y": "file:packages/a11y",

packages/block-editor/package.json

@@ -54,6 +54,7 @@
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/notices": "file:../notices",
+		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
 		"@wordpress/style-engine": "file:../style-engine",

packages/block-editor/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
 				];

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -21,7 +21,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
-import { unlock } from '../../experiments';
+import { unlock } from '../../lock-unlock';
 
 function selector( select ) {
 	const {

packages/block-editor/src/components/colors-gradients/control.js

@@ -55,6 +55,7 @@ function ColorGradientControlInner( {
 	clearable,
 	showTitle = true,
 	enableAlpha,
+	headingLevel,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -84,6 +85,7 @@ function ColorGradientControlInner( {
 				}
 				clearable={ clearable }
 				enableAlpha={ enableAlpha }
+				headingLevel={ headingLevel }
 			/>
 		),
 		[ TAB_GRADIENT.value ]: (
@@ -103,6 +105,7 @@ function ColorGradientControlInner( {
 					__experimentalIsRenderedInSidebar
 				}
 				clearable={ clearable }
+				headingLevel={ headingLevel }
 			/>
 		),
 	};

packages/block-editor/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 (

packages/block-editor/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>
+	);
+}

packages/block-editor/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 />
 	</>
 );
 

packages/block-editor/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;
+}

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

@@ -12,7 +12,7 @@ import { forwardRef, useEffect, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../experiments';
+import { unlock } from '../../lock-unlock';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';

packages/block-editor/src/components/provider/index.js

@@ -11,7 +11,7 @@ import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
-import { unlock } from '../../experiments';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 

packages/block-editor/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 ] );
 }

packages/block-editor/src/components/rich-text/index.js

@@ -110,7 +110,6 @@ function RichTextWrapper(
 		__unstableEmbedURLOnPaste,
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
-		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
 		...props
 	},
@@ -449,7 +448,6 @@ function RichTextWrapper(
 					props.className,
 					'rich-text'
 				) }
-				onFocus={ unstableOnFocus }
 				onKeyDown={ onKeyDown }
 			/>
 		</>

packages/block-editor/src/experiments.js

@@ -1,21 +1,11 @@
-/**
- * WordPress dependencies
- */
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
-
 /**
  * Internal dependencies
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
+import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
 
-export const { lock, unlock } =
-	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
-		'@wordpress/block-editor'
-	);
-
 /**
  * Experimental @wordpress/block-editor APIs.
  */

packages/block-editor/src/hooks/dimensions.js

@@ -59,7 +59,7 @@ import {
 } from './child-layout';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
-import { unlock } from '../experiments';
+import { unlock } from '../lock-unlock';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';

packages/block-editor/src/hooks/position.js

@@ -8,7 +8,10 @@ import classnames from 'classnames';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { BaseControl, CustomSelectControl } from '@wordpress/components';
+import {
+	BaseControl,
+	experiments as componentsExperiments,
+} from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import {
@@ -26,8 +29,11 @@ import BlockList from '../components/block-list';
 import useSetting from '../components/use-setting';
 import InspectorControls from '../components/inspector-controls';
 import { cleanEmptyObject } from './utils';
+import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
+const { CustomSelectControl } = unlock( componentsExperiments );
+
 const POSITION_SUPPORT_KEY = 'position';
 
 const OPTION_CLASSNAME =

packages/block-editor/src/lock-unlock.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/experiments';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
+		'@wordpress/block-editor'
+	);

packages/block-editor/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.

packages/block-editor/src/store/index.js

@@ -12,7 +12,7 @@ import * as privateActions from './private-actions';
 import * as privateSelectors from './private-selectors';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
-import { unlock } from '../experiments';
+import { unlock } from '../lock-unlock';
 
 /**
  * Block editor data store configuration.

packages/block-editor/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

packages/block-editor/tsconfig.json

@@ -16,6 +16,7 @@
 		{ "path": "../dom" },
 		{ "path": "../element" },
 		{ "path": "../escape-html" },
+		{ "path": "../experiments" },
 		{ "path": "../hooks" },
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },