@wordpress/edit-site 5.6.0 → 5.8.0

package/src/components/global-styles/ui.js

@@ -10,28 +10,30 @@ import {
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ScreenRoot from './screen-root';
-import ScreenBlockList from './screen-block-list';
+import {
+	useBlockHasGlobalStyles,
+	default as ScreenBlockList,
+} from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
 import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
-import ScreenBackgroundColor from './screen-background-color';
-import ScreenTextColor from './screen-text-color';
-import ScreenLinkColor from './screen-link-color';
-import ScreenHeadingColor from './screen-heading-color';
-import ScreenButtonColor from './screen-button-color';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 import { ScreenVariation } from './screen-variations';
@@ -184,6 +186,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenTypographyElement name={ name } element="heading" />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen
+				path={ parentMenu + '/typography/caption' }
+			>
+				<ScreenTypographyElement name={ name } element="caption" />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/typography/button' }
 			>
@@ -200,36 +208,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/background' }
-			>
-				<ScreenBackgroundColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
 				<ScreenFilters name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/text' }>
-				<ScreenTextColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors/link' }>
-				<ScreenLinkColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/heading' }
-			>
-				<ScreenHeadingColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/colors/button' }
-			>
-				<ScreenButtonColor name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
 				<ScreenBorder name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
@@ -280,6 +262,40 @@ function GlobalStylesStyleBook( { onClose } ) {
 	);
 }
 
+function GlobalStylesBlockLink() {
+	const navigator = useNavigator();
+	const isMounted = useRef();
+	const { selectedBlockName, selectedBlockClientId } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockName } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				selectedBlockName: getBlockName( clientId ),
+				selectedBlockClientId: clientId,
+			};
+		},
+		[]
+	);
+	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	useEffect( () => {
+		// Avoid navigating to the block screen on mount.
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+			return;
+		}
+		const path = '/blocks/' + encodeURIComponent( selectedBlockName );
+		// Avoid navigating to the same path. This can happen when selecting
+		// a new block of the same type.
+		if ( path !== navigator.location.path ) {
+			navigator.goTo( path, { skipFocus: true } );
+		}
+	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
+}
+
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 	const blocks = getBlockTypes();
 
@@ -332,6 +348,7 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			) }
 
 			<GlobalStylesActionMenu />
+			<GlobalStylesBlockLink />
 		</NavigatorProvider>
 	);
 }

package/src/components/global-styles-renderer/index.js

@@ -14,7 +14,7 @@ import { unlock } from '../../private-apis';
 const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );
 
 function useGlobalStylesRenderer() {
-	const [ styles, settings, svgFilters ] = useGlobalStylesOutput();
+	const [ styles, settings ] = useGlobalStylesOutput();
 	const { getSettings } = useSelect( editSiteStore );
 	const { updateSettings } = useDispatch( editSiteStore );
 
@@ -30,7 +30,6 @@ function useGlobalStylesRenderer() {
 		updateSettings( {
 			...currentStoreSettings,
 			styles: [ ...nonGlobalStyles, ...styles ],
-			svgFilters,
 			__experimentalFeatures: settings,
 		} );
 	}, [ styles, settings ] );

package/src/components/header-edit-mode/more-menu/index.js

@@ -93,7 +93,7 @@ export default function MoreMenu( { showIconLabels } ) {
 								icon={ external }
 								role="menuitem"
 								href={ __(
-									'https://wordpress.org/support/article/site-editor/'
+									'https://wordpress.org/documentation/article/site-editor/'
 								) }
 								target="_blank"
 								rel="noopener noreferrer"

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,7 @@ 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';
 
 /**
  * Internal dependencies
@@ -42,6 +43,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,6 +62,7 @@ export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
+	useCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();
@@ -123,6 +126,7 @@ export default function Layout() {
 
 	return (
 		<>
+			{ window?.__experimentalEnableCommandCenter && <CommandMenu /> }
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }

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/list-view-sidebar.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -18,6 +18,7 @@ import { ESCAPE } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
@@ -33,7 +34,7 @@ export default function ListViewSidebar() {
 
 	const instanceId = useInstanceId( ListViewSidebar );
 	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
-
+	const { PrivateListView } = unlock( blockEditorPrivateApis );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -59,7 +60,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView />
+				<PrivateListView />
 			</div>
 		</div>
 	);

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