@wordpress/edit-site 5.7.0 → 5.9.0

package/src/components/keyboard-shortcuts/index.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
-import {
-	useShortcut,
-	store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { isAppleOS } from '@wordpress/keycodes';
+import { useShortcut } from '@wordpress/keyboard-shortcuts';
 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';
@@ -136,152 +130,4 @@ function KeyboardShortcuts() {
 	return null;
 }
 
-function KeyboardShortcutsRegister() {
-	// Registering the shortcuts.
-	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	useEffect( () => {
-		registerShortcut( {
-			name: 'core/edit-site/save',
-			category: 'global',
-			description: __( 'Save your changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 's',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/undo',
-			category: 'global',
-			description: __( 'Undo your last changes.' ),
-			keyCombination: {
-				modifier: 'primary',
-				character: 'z',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/redo',
-			category: 'global',
-			description: __( 'Redo your last undo.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: 'z',
-			},
-			// Disable on Apple OS because it conflicts with the browser's
-			// history shortcut. It's a fine alias for both Windows and Linux.
-			// Since there's no conflict for Ctrl+Shift+Z on both Windows and
-			// Linux, we keep it as the default for consistency.
-			aliases: isAppleOS()
-				? []
-				: [
-						{
-							modifier: 'primary',
-							character: 'y',
-						},
-				  ],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-list-view',
-			category: 'global',
-			description: __( 'Open the block list view.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'o',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/toggle-block-settings-sidebar',
-			category: 'global',
-			description: __( 'Show or hide the block settings sidebar.' ),
-			keyCombination: {
-				modifier: 'primaryShift',
-				character: ',',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/keyboard-shortcuts',
-			category: 'main',
-			description: __( 'Display these keyboard shortcuts.' ),
-			keyCombination: {
-				modifier: 'access',
-				character: 'h',
-			},
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/next-region',
-			category: 'global',
-			description: __( 'Navigate to the next part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrl',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'n',
-				},
-			],
-		} );
-
-		registerShortcut( {
-			name: 'core/edit-site/previous-region',
-			category: 'global',
-			description: __( 'Navigate to the previous part of the editor.' ),
-			keyCombination: {
-				modifier: 'ctrlShift',
-				character: '`',
-			},
-			aliases: [
-				{
-					modifier: 'access',
-					character: 'p',
-				},
-				{
-					modifier: 'ctrlShift',
-					character: '~',
-				},
-			],
-		} );
-		registerShortcut( {
-			name: 'core/edit-site/toggle-mode',
-			category: 'global',
-			description: __( 'Switch between visual editor and code editor.' ),
-			keyCombination: {
-				modifier: 'secondary',
-				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;
-}
-
-KeyboardShortcuts.Register = KeyboardShortcutsRegister;
 export default KeyboardShortcuts;

package/src/components/layout/index.js

@@ -22,6 +22,8 @@ import { __ } from '@wordpress/i18n';
 import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
+import { CommandMenu } from '@wordpress/commands';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -42,6 +44,7 @@ import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import { useCommands } from '../../hooks/commands';
 
 const ANIMATION_DURATION = 0.5;
 const emptyResizeHandleStyles = {
@@ -60,13 +63,14 @@ export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
+	useCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();
 	const isListPage = getIsListPage( params );
 	const isEditorPage = ! isListPage;
-	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
-		( select ) => {
+	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
+		useSelect( ( select ) => {
 			const { getAllShortcutKeyCombinations } = select(
 				keyboardShortcutsStore
 			);
@@ -79,10 +83,10 @@ export default function Layout() {
 				nextShortcut: getAllShortcutKeyCombinations(
 					'core/edit-site/next-region'
 				),
+				hasFixedToolbar:
+					select( preferencesStore ).get( 'fixedToolbar' ),
 			};
-		},
-		[]
-	);
+		}, [] );
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
@@ -123,6 +127,7 @@ export default function Layout() {
 
 	return (
 		<>
+			{ window?.__experimentalEnableCommandCenter && <CommandMenu /> }
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }
@@ -135,19 +140,11 @@ export default function Layout() {
 					{
 						'is-full-canvas': isFullCanvas,
 						'is-edit-mode': canvasMode === 'edit',
+						'has-fixed-toolbar': hasFixedToolbar,
 					}
 				) }
 			>
-				<SiteHub
-					ref={ hubRef }
-					className="edit-site-layout__hub"
-					style={ {
-						width:
-							isResizingEnabled && forcedWidth
-								? forcedWidth - 48
-								: undefined,
-					} }
-				/>
+				<SiteHub ref={ hubRef } className="edit-site-layout__hub" />
 
 				<AnimatePresence initial={ false }>
 					{ isEditorPage && canvasMode === 'edit' && (
@@ -172,7 +169,7 @@ export default function Layout() {
 								ease: 'easeOut',
 							} }
 						>
-							{ canvasMode === 'edit' && <Header /> }
+							<Header />
 						</NavigableRegion>
 					) }
 				</AnimatePresence>

package/src/components/layout/style.scss

@@ -15,7 +15,7 @@
 	z-index: z-index(".edit-site-layout__hub");
 
 	.edit-site-layout.is-full-canvas.is-edit-mode & {
-		width: auto;
+		width: $header-height;
 		padding-right: 0;
 	}
 
@@ -135,6 +135,7 @@
 
 		& > div {
 			border-radius: 0;
+			box-shadow: none;
 		}
 	}
 }
@@ -148,13 +149,20 @@
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
 	color: $white;
-	height: 100%;
-	width: 100%;
-	border-radius: $radius-block-ui;
+	border-radius: 0;
+	height: $header-height;
+	width: $header-height;
+	overflow: hidden;
 	padding: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	border-bottom: 1px solid transparent;
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		border-bottom-color: $gray-200;
+		transition: border-bottom-color 0.15s 0.4s ease-out;
+	}
 
 	&:hover,
 	&:active {
@@ -189,6 +197,10 @@
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
 		border-radius: $radius-block-ui;
+		height: $grid-unit-80;
+		width: $grid-unit-80;
+		justify-content: center;
+		align-items: center;
 	}
 }
 
@@ -220,3 +232,18 @@
 		border-left: $border-width solid $gray-300;
 	}
 }
+
+.edit-site-layout.has-fixed-toolbar {
+	// making the header be lower than the content
+	// so the fixed toolbar can be positioned on top of it
+	// but only on desktop
+	@include break-medium() {
+		.edit-site-site-hub {
+			z-index: 4;
+		}
+		.edit-site-layout__header:focus-within {
+			z-index: 3;
+		}
+	}
+
+}

package/src/components/list/table.js

@@ -18,19 +18,33 @@ import Actions from './actions';
 import AddedBy from './added-by';
 
 export default function Table( { templateType } ) {
-	const { records: templates, isResolving: isLoading } = useEntityRecords(
+	const { records: allTemplates } = useEntityRecords(
 		'postType',
 		templateType,
 		{
 			per_page: -1,
 		}
 	);
+
+	const templates = useSelect(
+		( select ) =>
+			allTemplates?.filter(
+				( template ) =>
+					! select( coreStore ).isDeletingEntityRecord(
+						'postType',
+						templateType,
+						template.id
+					)
+			),
+		[ allTemplates ]
+	);
+
 	const postType = useSelect(
 		( select ) => select( coreStore ).getPostType( templateType ),
 		[ templateType ]
 	);
 
-	if ( ! templates || isLoading ) {
+	if ( ! templates ) {
 		return null;
 	}
 

package/src/components/preferences-modal/index.js

@@ -48,6 +48,13 @@ export default function EditSitePreferencesModal( {
 						) }
 						label={ __( 'Always open list view' ) }
 					/>
+					<EnableFeature
+						featureName="showBlockBreadcrumbs"
+						help={ __(
+							'Shows block breadcrumbs at the bottom of the editor.'
+						) }
+						label={ __( 'Display block breadcrumbs' ) }
+					/>
 				</PreferencesModalSection>
 			),
 		},

package/src/components/secondary-sidebar/style.scss

@@ -1,3 +1,8 @@
+/**
+ * Note that this CSS file should be in sync with its counterpart in the other editor:
+ * packages/edit-post/src/components/secondary-sidebar/style.scss
+ */
+
 .edit-site-editor__inserter-panel,
 .edit-site-editor__list-view-panel {
 	height: 100%;
@@ -6,9 +11,11 @@
 }
 
 .edit-site-editor__list-view-panel {
-	// Same width as the Inserter.
-	// @see packages/block-editor/src/components/inserter/style.scss
-	min-width: 350px;
+	@include break-medium() {
+		// Same width as the Inserter.
+		// @see packages/block-editor/src/components/inserter/style.scss
+		width: 350px;
+	}
 }
 
 .edit-site-editor__inserter-panel-header {
@@ -42,6 +49,17 @@
 }
 
 .edit-site-editor__list-view-panel-content {
-	overflow-y: auto;
-	padding: $grid-unit-10;
+	height: 100%;
+
+	// Include custom scrollbars, invisible until hovered.
+	@include custom-scrollbars-on-hover(transparent, $gray-600);
+	overflow: auto;
+
+	// Only reserve space for scrollbars when there is content to scroll.
+	// This allows items in the list view to have equidistant padding left and right
+	// right up until a scrollbar is present.
+	scrollbar-gutter: auto;
+
+	// The table cells use an extra pixels of space left and right. We compensate for that here.
+	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
 }

package/src/components/sidebar/index.js

@@ -17,6 +17,7 @@ import useSyncPathWithURL, {
 	getPathFromURL,
 } from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveHub from '../save-hub';
 import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
@@ -33,6 +34,9 @@ function SidebarScreens() {
 			<NavigatorScreen path="/navigation">
 				<SidebarNavigationScreenNavigationMenus />
 			</NavigatorScreen>
+			<NavigatorScreen path="/wp_global_styles">
+				<SidebarNavigationScreenGlobalStyles />
+			</NavigatorScreen>
 			<NavigatorScreen path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationItem />
 			</NavigatorScreen>

package/src/components/sidebar/style.scss

@@ -3,7 +3,8 @@
 	overflow-y: auto;
 
 	.components-navigator-screen {
-		@include custom-scrollbars-on-hover;
+		@include custom-scrollbars-on-hover(transparent, $gray-700);
+		scrollbar-gutter: stable;
 	}
 }
 

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -4,9 +4,9 @@
 import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-
-import { useState, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -15,19 +15,39 @@ import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
+import { unlock } from '../../private-apis';
 
 export default function GlobalStylesSidebar() {
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
-	const editorMode = useSelect(
-		( select ) => select( editSiteStore ).getEditorMode(),
+	const { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(
+		( select ) => {
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const _isVisualEditorMode =
+				'visual' === select( editSiteStore ).getEditorMode();
+
+			return {
+				isStyleBookOpened:
+					'style-book' ===
+					unlock(
+						select( editSiteStore )
+					).getEditorCanvasContainerView(),
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core/edit-site' ) ||
+					! _isVisualEditorMode,
+			};
+		},
 		[]
 	);
 
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	useEffect( () => {
-		if ( editorMode !== 'visual' ) {
-			setIsStyleBookOpened( false );
+		if ( shouldClearCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
 		}
-	}, [ editorMode ] );
+	}, [ shouldClearCanvasContainerView ] );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
@@ -46,10 +66,12 @@ export default function GlobalStylesSidebar() {
 							icon={ seen }
 							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
-							disabled={ editorMode !== 'visual' }
-							onClick={ () => {
-								setIsStyleBookOpened( ! isStyleBookOpened );
-							} }
+							disabled={ shouldClearCanvasContainerView }
+							onClick={ () =>
+								setEditorCanvasContainerView(
+									isStyleBookOpened ? undefined : 'style-book'
+								)
+							}
 						/>
 					</FlexItem>
 					<FlexItem>
@@ -58,10 +80,7 @@ export default function GlobalStylesSidebar() {
 				</Flex>
 			}
 		>
-			<GlobalStylesUI
-				isStyleBookOpened={ isStyleBookOpened }
-				onCloseStyleBook={ () => setIsStyleBookOpened( false ) }
-			/>
+			<GlobalStylesUI />
 		</DefaultSidebar>
 	);
 }

package/src/components/sidebar-navigation-screen/index.js

@@ -5,6 +5,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -35,7 +36,7 @@ export default function SidebarNavigationScreen( {
 		<VStack spacing={ 2 }>
 			<HStack
 				spacing={ 4 }
-				justify="flex-start"
+				alignment="flex-start"
 				className="edit-site-sidebar-navigation-screen__title-icon"
 			>
 				{ ! isRoot ? (
@@ -47,14 +48,18 @@ export default function SidebarNavigationScreen( {
 				) : (
 					<SidebarButton
 						icon={ isRTL() ? chevronRight : chevronLeft }
-						aria-label={ __( 'Navigate to the Dashboard' ) }
+						label={ __( 'Go back to the Dashboard' ) }
 						href={ dashboardLink || 'index.php' }
-						label={ __( 'Dashboard' ) }
 					/>
 				) }
-				<h2 className="edit-site-sidebar-navigation-screen__title">
+				<Heading
+					className="edit-site-sidebar-navigation-screen__title"
+					color={ 'white' }
+					level={ 2 }
+					size={ 20 }
+				>
 					{ title }
-				</h2>
+				</Heading>
 				{ actions }
 			</HStack>
 

package/src/components/sidebar-navigation-screen/style.scss

@@ -8,6 +8,7 @@
 .edit-site-sidebar-navigation-screen__content {
 	margin: 0 $grid-unit-20 $grid-unit-20 $button-size;
 	color: $gray-600;
+	//z-index: z-index(".edit-site-sidebar-navigation-screen__content");
 }
 
 .edit-site-sidebar-navigation-screen__page-link {
@@ -34,13 +35,27 @@
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	padding-right: $grid-unit-20;
+	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
 }
 
 .edit-site-sidebar-navigation-screen__title {
-	font-size: calc(1.56 * 13px);
-	line-height: normal;
-	font-weight: 500;
 	flex-grow: 1;
-	color: $white;
-	margin: 0;
+	padding: $grid-unit-15 * 0.5 0 0 0;
+}
+
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+	margin-left: $grid-unit-20;
+	.edit-site-global-styles-variations_item-preview {
+		border: $gray-900 $border-width solid;
+	}
+	.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
+		border: $gray-100 $border-width solid;
+	}
+	.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
+		border: var(--wp-admin-theme-color) $border-width solid;
+	}
+
+	.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
+		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
+	}
 }

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import StyleVariationsContainer from '../global-styles/style-variations-container';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+
+export default function SidebarNavigationScreenGlobalStyles() {
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Styles' ) }
+			description={ __(
+				'Choose a different style combination for the theme styles.'
+			) }
+			content={ <StyleVariationsContainer /> }
+			actions={
+				<SidebarButton
+					icon={ edit }
+					label={ __( 'Edit styles' ) }
+					onClick={ () => {
+						// switch to edit mode.
+						setCanvasMode( 'edit' );
+						// open global styles sidebar.
+						openGeneralSidebar( 'edit-site/global-styles' );
+					} }
+				/>
+			}
+		/>
+	);
+}

package/src/components/sidebar-navigation-screen-main/index.js

@@ -6,7 +6,7 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled, navigation } from '@wordpress/icons';
+import { layout, symbolFilled, navigation, styles } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -56,6 +56,14 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Navigation' ) }
 						</NavigatorButton>
 					) }
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/wp_global_styles"
+						withChevron
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/wp_template"