prep build 2/11

packages/block-editor/src/components/keyboard-shortcuts/index.js

@@ -29,7 +29,7 @@ function KeyboardShortcutsRegister() {
 			category: 'block',
 			description: __( 'Remove the selected block(s).' ),
 			keyCombination: {
-				modifier: 'shift',
+				modifier: 'primaryShift',
 				character: 'backspace',
 			},
 		} );

packages/block-editor/src/components/rich-text/event-listeners/delete.js

@@ -6,7 +6,7 @@ import { isCollapsed, isEmpty } from '@wordpress/rich-text';
 
 export default ( props ) => ( element ) => {
 	function onKeyDown( event ) {
-		const { keyCode, shiftKey } = event;
+		const { keyCode, shiftKey, ctrlKey, metaKey } = event;
 
 		if ( event.defaultPrevented ) {
 			return;
@@ -30,8 +30,8 @@ export default ( props ) => ( element ) => {
 				return;
 			}
 
-			// Exclude shift+backspace as they are shortcuts for deleting blocks.
-			if ( shiftKey ) {
+			// Exclude (command|ctrl)+shift+backspace as they are shortcuts for deleting blocks.
+			if ( shiftKey && ( ctrlKey || metaKey ) ) {
 				return;
 			}
 

packages/edit-site/src/components/editor/index.js

@@ -23,6 +23,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Icon, arrowUpLeft } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -53,7 +54,7 @@ import {
 	useResolveEditedEntity,
 	useSyncDeprecatedEntityIntoState,
 } from './use-resolve-edited-entity';
-import { addQueryArgs } from '@wordpress/url';
+import SitePreview from './site-preview';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -117,7 +118,10 @@ function getNavigationPath( location, postType ) {
 	return addQueryArgs( path, { canvas: undefined } );
 }
 
-export default function EditSiteEditor( { isPostsList = false } ) {
+export default function EditSiteEditor( {
+	isHomeRoute = false,
+	isPostsList = false,
+} ) {
 	const disableMotion = useReducedMotion();
 	const location = useLocation();
 	const { canvas = 'view' } = location.query;
@@ -128,7 +132,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	useSyncDeprecatedEntityIntoState( entity );
 	const { postType, postId, context } = entity;
 	const {
-		supportsGlobalStyles,
+		isBlockBasedTheme,
 		editorCanvasView,
 		currentPostIsTrashed,
 		hasSiteIcon,
@@ -140,7 +144,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
-			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
 			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
@@ -244,7 +248,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		duration: disableMotion ? 0 : 0.2,
 	};
 
-	return (
+	return ! isBlockBasedTheme && isHomeRoute ? (
+		<SitePreview />
+	) : (
 		<>
 			<GlobalStylesRenderer
 				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
@@ -349,7 +355,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 						</BackButton>
 					) }
 					<SiteEditorMoreMenu />
-					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
+					{ isBlockBasedTheme && <GlobalStylesSidebar /> }
 				</Editor>
 			) }
 		</>

packages/edit-site/src/components/maybe-editor/index.js → packages/edit-site/src/components/editor/site-preview.js

@@ -1,32 +1,19 @@
 /**
  * WordPress dependencies
  */
-
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-
-import Editor from '../editor';
-
-export function MaybeEditor( { showEditor = true } ) {
-	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+export default function SitePreview() {
+	const siteUrl = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
-
-		return {
-			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-			siteUrl: siteData?.home,
-		};
+		return siteData?.home;
 	}, [] );
 
 	// If theme is block based, return the Editor, otherwise return the site preview.
-	return isBlockBasedTheme || showEditor ? (
-		<Editor />
-	) : (
+	return (
 		<iframe
 			src={ siteUrl }
 			title={ __( 'Site Preview' ) }

packages/edit-site/src/components/global-styles/screen-root.js

@@ -55,6 +55,7 @@ function ScreenRoot() {
 	return (
 		<Card
 			size="small"
+			isBorderless
 			className="edit-site-global-styles-screen-root"
 			isRounded={ false }
 		>

packages/edit-site/src/components/global-styles/style.scss

@@ -228,9 +228,14 @@
 	}
 }
 
+.edit-site-global-styles-sidebar__navigator-provider {
+	height: 100%;
+}
+
 .edit-site-global-styles-sidebar__navigator-screen {
 	display: flex;
 	flex-direction: column;
+	height: 100%;
 }
 
 .edit-site-global-styles-sidebar__navigator-screen .single-column {

packages/edit-site/src/components/page-patterns/style.scss

@@ -19,6 +19,8 @@
 	.dataviews-view-table & {
 		width: 96px;
 		flex-grow: 0;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
 	}
 }
 

packages/edit-site/src/components/page-templates/style.scss

@@ -23,6 +23,8 @@
 		position: relative;
 		width: 120px;
 		max-height: 160px;
+		text-wrap: balance; // Fallback for Safari.
+		text-wrap: pretty;
 
 		&::after {
 			content: "";

packages/edit-site/src/components/site-editor-routes/home.js

@@ -2,14 +2,14 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
 		sidebar: <SidebarNavigationScreenMain />,
-		preview: <MaybeEditor showEditor={ false } />,
+		preview: <Editor isHomeRoute />,
 		mobile: <SidebarNavigationScreenMain />,
 	},
 };

packages/edit-site/src/components/site-editor-routes/template-item.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 
 export const templateItemRoute = {
 	name: 'template-item',
 	path: '/wp_template/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };

packages/edit-site/src/components/site-editor-routes/template-part-item.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { MaybeEditor } from '../maybe-editor';
+import Editor from '../editor';
 import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 
 export const templatePartItemRoute = {
 	name: 'template-part-item',
 	path: '/wp_template_part/*postId',
 	areas: {
 		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
-		mobile: <MaybeEditor />,
-		preview: <MaybeEditor />,
+		mobile: <Editor />,
+		preview: <Editor />,
 	},
 };

test/e2e/specs/editor/blocks/navigation.spec.js

@@ -276,7 +276,7 @@ test.describe( 'Navigation block', () => {
 			await pageUtils.pressKeys( 'ArrowDown' );
 
 			// remove the child link
-			await pageUtils.pressKeys( 'shift+Backspace' );
+			await pageUtils.pressKeys( 'primaryShift+Backspace' );
 
 			const submenuBlock2 = editor.canvas.getByRole( 'document', {
 				name: 'Block: Submenu',
@@ -494,7 +494,7 @@ test.describe( 'Navigation block', () => {
 		await pageUtils.pressKeys( 'ArrowDown', { times: 4 } );
 		await navigation.checkLabelFocus( 'wordpress.org' );
 		// Delete the nav link
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		// Focus moved to sibling
 		await navigation.checkLabelFocus( 'Dog' );
 		// Add a link back so we can delete the first submenu link and see if focus returns to the parent submenu item
@@ -507,15 +507,15 @@ test.describe( 'Navigation block', () => {
 		await pageUtils.pressKeys( 'ArrowUp', { times: 2 } );
 		await navigation.checkLabelFocus( 'Dog' );
 		// Delete the nav link
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		await pageUtils.pressKeys( 'ArrowDown' );
 		// Focus moved to parent submenu item
 		await navigation.checkLabelFocus( 'example.com' );
 		// Deleting this should move focus to the sibling item
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		await navigation.checkLabelFocus( 'Cat' );
 		// Deleting with no more siblings should focus the navigation block again
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		await expect( navBlock ).toBeFocused();
 		// Wait until the nav block inserter is visible before we continue.
 		await expect( navBlockInserter ).toBeVisible();

test/e2e/specs/editor/various/block-deletion.spec.js

@@ -134,7 +134,7 @@ test.describe( 'Block deletion', () => {
 		).toBeFocused();
 
 		// Remove the current paragraph via dedicated keyboard shortcut.
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 
 		// Ensure the last block was removed.
 		await expect.poll( editor.getBlocks ).toMatchObject( [

test/e2e/specs/editor/various/block-locking.spec.js

@@ -133,7 +133,7 @@ test.describe( 'Block Locking', () => {
 		).toBeVisible();
 
 		await paragraph.click();
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 
 		await expect.poll( editor.getBlocks ).toMatchObject( [
 			{

test/e2e/specs/editor/various/list-view.spec.js

@@ -812,8 +812,8 @@ test.describe( 'List View', () => {
 
 		// Delete remaining blocks.
 		// Keyboard shortcut should also work.
-		await pageUtils.pressKeys( 'shift+Backspace' );
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -845,7 +845,7 @@ test.describe( 'List View', () => {
 				{ name: 'core/heading', selected: false },
 			] );
 
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -868,7 +868,11 @@ test.describe( 'List View', () => {
 			.getByRole( 'gridcell', { name: 'File' } )
 			.getByRole( 'link' )
 			.focus();
-		for ( const keys of [ 'Delete', 'Backspace', 'shift+Backspace' ] ) {
+		for ( const keys of [
+			'Delete',
+			'Backspace',
+			'primaryShift+Backspace',
+		] ) {
 			await pageUtils.pressKeys( keys );
 			await expect
 				.poll(
@@ -1136,7 +1140,7 @@ test.describe( 'List View', () => {
 			optionsForFileMenu,
 			'Pressing Space should also open the menu dropdown'
 		).toBeVisible();
-		await pageUtils.pressKeys( 'shift+Backspace' ); // Keyboard shortcut for Delete.
+		await pageUtils.pressKeys( 'primaryShift+Backspace' ); // Keyboard shortcut for Delete.
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,
@@ -1156,7 +1160,7 @@ test.describe( 'List View', () => {
 			optionsForFileMenu.getByRole( 'menuitem', { name: 'Delete' } ),
 			'The delete menu item should be hidden for locked blocks'
 		).toBeHidden();
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		await expect
 			.poll(
 				listViewUtils.getBlocksWithA11yAttributes,

test/e2e/specs/site-editor/template-part.spec.js

@@ -375,7 +375,7 @@ test.describe( 'Template Part', () => {
 		await editor.selectBlocks( siteTitle );
 
 		// Remove the default site title block.
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 
 		// Insert a group block with a Site Title block inside.
 		await editor.insertBlock( {

test/e2e/specs/widgets/editing-widgets.spec.js

@@ -573,7 +573,7 @@ test.describe( 'Widgets screen', () => {
 			.getByRole( 'document', { name: 'Block: Paragraph' } )
 			.filter( { hasText: 'Second Paragraph' } )
 			.focus();
-		await pageUtils.pressKeys( 'shift+Backspace' );
+		await pageUtils.pressKeys( 'primaryShift+Backspace' );
 		await widgetsScreen.saveWidgets();
 
 		await expect.poll( widgetsScreen.getWidgetAreaBlocks ).toMatchObject( {