Merge branch 'trunk' into update/theme-json-ref

packages/block-editor/src/components/off-canvas-editor/leaf-more-menu.js

@@ -17,6 +17,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import BlockTitle from '../block-title';
+import { useListViewContext } from './context';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -30,6 +31,7 @@ const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [
 ];
 
 function AddSubmenuItem( { block, onClose } ) {
+	const { expandedState, expand } = useListViewContext();
 	const { insertBlock, replaceBlock, replaceInnerBlocks } =
 		useDispatch( blockEditorStore );
 
@@ -74,6 +76,9 @@ function AddSubmenuItem( { block, onClose } ) {
 						updateSelectionOnInsert
 					);
 				}
+				if ( ! expandedState[ block.clientId ] ) {
+					expand( block.clientId );
+				}
 				onClose();
 			} }
 		>

packages/compose/src/hooks/use-async-list/index.ts

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { flushSync, useEffect, useState } from '@wordpress/element';
 import { createQueue } from '@wordpress/priority-queue';
 
 type AsyncListConfig = {
@@ -57,17 +57,16 @@ function useAsyncList< T >(
 		setCurrent( firstItems );
 
 		const asyncQueue = createQueue();
-		const append = ( nextIndex: number ) => () => {
-			if ( list.length <= nextIndex ) {
-				return;
-			}
-			setCurrent( ( state ) => [
-				...state,
-				...list.slice( nextIndex, nextIndex + step ),
-			] );
-			asyncQueue.add( {}, append( nextIndex + step ) );
-		};
-		asyncQueue.add( {}, append( firstItems.length ) );
+		for ( let i = firstItems.length; i < list.length; i += step ) {
+			asyncQueue.add( {}, () => {
+				flushSync( () => {
+					setCurrent( ( state ) => [
+						...state,
+						...list.slice( i, i + step ),
+					] );
+				} );
+			} );
+		}
 
 		return () => asyncQueue.reset();
 	}, [ list ] );

packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];

packages/customize-widgets/src/components/keyboard-shortcuts/index.js

@@ -7,10 +7,44 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { isAppleOS } from '@wordpress/keycodes';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
 
 function KeyboardShortcuts( { undo, redo, save } ) {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
 	useShortcut( 'core/customize-widgets/undo', ( event ) => {
 		undo();
 		event.preventDefault();
@@ -26,6 +60,21 @@ function KeyboardShortcuts( { undo, redo, save } ) {
 		save();
 	} );
 
+	useShortcut(
+		'core/customize-widgets/transform-heading-to-paragraph',
+		( event ) => handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/customize-widgets/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
 	return null;
 }
 
@@ -77,6 +126,28 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: `core/customize-widgets/transform-heading-to-paragraph`,
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: `0`,
+			},
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/customize-widgets/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
+
 		return () => {
 			unregisterShortcut( 'core/customize-widgets/undo' );
 			unregisterShortcut( 'core/customize-widgets/redo' );

packages/e2e-tests/specs/performance/site-editor.test.js

@@ -90,6 +90,10 @@ describe( 'Site Editor Performance', () => {
 		await visitSiteEditor( {
 			postId: id,
 			postType: 'page',
+			// This shouldn't be necessary, but without it the tests fail.
+			// Could be related to having the necessary cookies in the browser.
+			// See https://github.com/WordPress/gutenberg/pull/48240/files#r1111760556
+			path: '/navigation/single',
 		} );
 	} );
 
@@ -147,7 +151,7 @@ describe( 'Site Editor Performance', () => {
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
 		await enterEditMode();
-		await canvas().click(
+		await canvas().focus(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
 		await insertBlock( 'Paragraph' );

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -70,15 +70,18 @@ function KeyboardShortcuts() {
 		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
 			return;
 		}
-		const currentAttributes = getBlockAttributes( currentClientId );
-		const { content: currentContent, align: currentAlign } =
-			currentAttributes;
+		const attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
 		replaceBlocks(
 			currentClientId,
 			createBlock( destinationBlockName, {
 				level,
-				content: currentContent,
-				align: currentAlign,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
 			} )
 		);
 	};
@@ -181,7 +184,7 @@ function KeyboardShortcuts() {
 		} );
 
 		registerShortcut( {
-			name: `core/block-editor/transform-heading-to-paragraph`,
+			name: `core/edit-post/transform-heading-to-paragraph`,
 			category: 'block-library',
 			description: __( 'Transform heading to paragraph.' ),
 			keyCombination: {
@@ -192,7 +195,7 @@ function KeyboardShortcuts() {
 
 		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
 			registerShortcut( {
-				name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
+				name: `core/edit-post/transform-paragraph-to-heading-${ level }`,
 				category: 'block-library',
 				description: __( 'Transform paragraph to heading.' ),
 				keyCombination: {
@@ -257,17 +260,16 @@ function KeyboardShortcuts() {
 		}
 	} );
 
-	useShortcut(
-		'core/block-editor/transform-heading-to-paragraph',
-		( event ) => handleTextLevelShortcut( event, 0 )
+	useShortcut( 'core/edit-post/transform-heading-to-paragraph', ( event ) =>
+		handleTextLevelShortcut( event, 0 )
 	);
 
 	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
 		//the loop is based off on a constant therefore
 		//the hook will execute the same way every time
 		//eslint-disable-next-line react-hooks/rules-of-hooks
 		useShortcut(
-			`core/block-editor/transform-paragraph-to-heading-${ level }`,
+			`core/edit-post/transform-paragraph-to-heading-${ level }`,
 			( event ) => handleTextLevelShortcut( event, level )
 		);
 	} );

packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];

packages/edit-site/src/components/keyboard-shortcuts/index.js

@@ -10,7 +10,9 @@ import { isAppleOS } from '@wordpress/keycodes';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -41,6 +43,38 @@ function KeyboardShortcuts() {
 		useDispatch( interfaceStore );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();
 
@@ -85,6 +119,20 @@ function KeyboardShortcuts() {
 		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
 	} );
 
+	useShortcut( 'core/edit-site/transform-heading-to-paragraph', ( event ) =>
+		handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/edit-site/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
 	return null;
 }
 
@@ -208,6 +256,28 @@ function KeyboardShortcutsRegister() {
 				character: 'm',
 			},
 		} );
+
+		registerShortcut( {
+			name: `core/edit-site/transform-heading-to-paragraph`,
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: `0`,
+			},
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/edit-site/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];