@wordpress/edit-site 5.12.1 → 5.12.2

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

@@ -12,7 +12,6 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	color: $gray-400;
 	padding: 0 $grid-unit-20;
 
 	.components-item-group {
@@ -65,6 +64,8 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	padding: $grid-unit-15 * 0.5 0 0 0;
+	overflow: hidden;
+	overflow-wrap: break-word;
 }
 
 .edit-site-sidebar-navigation-screen__actions {

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

@@ -1,5 +1,5 @@
 .edit-site-sidebar-navigation-details-screen-panel {
-	margin-bottom: $grid-unit-30;
+	margin: $grid-unit-30 0;
 
 	&:last-of-type {
 		margin-bottom: 0;

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

@@ -15,6 +15,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -31,8 +32,9 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
 const noop = () => {};
 
 export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { openGeneralSidebar, toggleFeature } = useDispatch( editSiteStore );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { createNotice } = useDispatch( noticesStore );
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -53,9 +55,19 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				// switch to edit mode.
+				// Disable distraction free mode.
+				toggleFeature( 'distractionFree', false );
+				createNotice(
+					'info',
+					__( 'Distraction free mode turned off' ),
+					{
+						isDismissible: true,
+						type: 'snackbar',
+					}
+				);
+				// Switch to edit mode.
 				setCanvasMode( 'edit' );
-				// open global styles sidebar.
+				// Open global styles sidebar.
 				openGeneralSidebar( 'edit-site/global-styles' );
 			} }
 		/>

package/src/components/sidebar-navigation-screen-library/category-item.js

@@ -35,7 +35,7 @@ export default function CategoryItem( {
 			{ ...linkInfo }
 			icon={ icon }
 			suffix={ <span>{ count }</span> }
-			className={ isActive ? 'is-active-category' : undefined }
+			aria-current={ isActive ? 'true' : undefined }
 		>
 			{ label }
 		</SidebarNavigationItem>

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

@@ -1,7 +1,3 @@
 .edit-site-sidebar-navigation-screen-library__group {
 	margin-bottom: $grid-unit-30;
 }
-
-.edit-site-sidebar-navigation-item.is-active-category {
-	background: $gray-800;
-}

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

@@ -60,7 +60,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		useNavigationMenuHandlers();
 
 	const _handleDelete = () => handleDelete( navigationMenu );
-	const _handleSave = () => handleSave( navigationMenu );
+	const _handleSave = ( edits ) => handleSave( navigationMenu, edits );
 	const _handleDuplicate = () => handleDuplicate( navigationMenu );
 
 	if ( isLoading ) {

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -11,9 +11,16 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
+const notEmptyString = ( testString ) => testString?.trim()?.length > 0;
+
 export default function RenameModal( { menuTitle, onClose, onSave } ) {
 	const [ editedMenuTitle, setEditedMenuTitle ] = useState( menuTitle );
 
+	const titleHasChanged = editedMenuTitle !== menuTitle;
+
+	const isEditedMenuTitleValid =
+		titleHasChanged && notEmptyString( editedMenuTitle );
+
 	return (
 		<Modal title={ __( 'Rename' ) } onRequestClose={ onClose }>
 			<form className="sidebar-navigation__rename-modal-form">
@@ -30,11 +37,15 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						</Button>
 
 						<Button
-							disabled={ editedMenuTitle === menuTitle }
+							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"
 							onClick={ ( e ) => {
 								e.preventDefault();
+
+								if ( ! isEditedMenuTitleValid ) {
+									return;
+								}
 								onSave( { title: editedMenuTitle } );
 
 								// Immediate close avoids ability to hit save multiple times.

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

@@ -1,10 +1,10 @@
 .sidebar-navigation__more-menu {
 	.components-button {
-		color: $gray-600;
+		color: $gray-200;
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: $white;
+			color: $gray-100;
 		}
 	}
 }

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -71,7 +71,11 @@ function useSaveNavigationMenu() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	const handleSave = async ( navigationMenu, edits = {} ) => {
+	const handleSave = async ( navigationMenu, edits ) => {
+		if ( ! edits ) {
+			return;
+		}
+
 		const postId = navigationMenu?.id;
 		// Prepare for revert in case of error.
 		const originalRecord = getEditedEntityRecord(

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

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 import { decodeEntities } from '@wordpress/html-entities';
 import {
@@ -41,15 +42,35 @@ function buildMenuLabel( title, id, status ) {
 }
 
 export default function SidebarNavigationScreenNavigationMenus() {
-	const { records: navigationMenus, isResolving: isLoading } =
-		useEntityRecords(
-			'postType',
-			`wp_navigation`,
-			PRELOADED_NAVIGATION_MENUS_QUERY
-		);
+	const {
+		records: navigationMenus,
+		isResolving: isResolvingNavigationMenus,
+		hasResolved: hasResolvedNavigationMenus,
+	} = useEntityRecords(
+		'postType',
+		`wp_navigation`,
+		PRELOADED_NAVIGATION_MENUS_QUERY
+	);
+
+	const isLoading =
+		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
+
+	const getNavigationFallbackId = useSelect(
+		( select ) => select( coreStore ).getNavigationFallbackId
+	);
 
 	const firstNavigationMenu = navigationMenus?.[ 0 ];
 
+	// If there is no navigation menu found
+	// then trigger fallback algorithm to create one.
+	if (
+		! firstNavigationMenu &&
+		! isResolvingNavigationMenus &&
+		hasResolvedNavigationMenus
+	) {
+		getNavigationFallbackId();
+	}
+
 	const { handleSave, handleDelete, handleDuplicate } =
 		useNavigationMenuHandlers();
 
@@ -78,7 +99,9 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				navigationMenu={ firstNavigationMenu }
 				handleDelete={ () => handleDelete( firstNavigationMenu ) }
 				handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) }
-				handleSave={ () => handleSave( firstNavigationMenu ) }
+				handleSave={ ( edits ) =>
+					handleSave( firstNavigationMenu, edits )
+				}
 			/>
 		);
 	}

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

@@ -0,0 +1,25 @@
+.edit-site-sidebar-navigation-screen-pattern__added-by-description {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-top: $grid-unit-30;
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
+
+	img {
+		border-radius: $grid-unit-15;
+	}
+
+	svg {
+		fill: $gray-600;
+	}
+}
+
+.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}

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

@@ -3,27 +3,27 @@
 	align-items: center;
 	justify-content: space-between;
 	margin-top: $grid-unit-30;
+}
 
-	&-author {
-		display: inline-flex;
-		align-items: center;
-
-		img {
-			border-radius: $grid-unit-15;
-		}
+.edit-site-sidebar-navigation-screen-template__added-by-description-author {
+	display: inline-flex;
+	align-items: center;
 
-		svg {
-			fill: $gray-600;
-		}
+	img {
+		border-radius: $grid-unit-15;
+	}
 
-		&-icon {
-			width: 24px;
-			height: 24px;
-			margin-right: $grid-unit-10;
-		}
+	svg {
+		fill: $gray-600;
 	}
 }
 
+.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
+	width: 24px;
+	height: 24px;
+	margin-right: $grid-unit-10;
+}
+
 .edit-site-sidebar-navigation-screen-template__template-area-button {
 	color: $white;
 	display: flex;

package/src/components/site-hub/style.scss

@@ -20,7 +20,7 @@
 			opacity: 1;
 		}
 		svg {
-			fill: $white;
+			fill: $gray-200;
 		}
 	}
 	&:hover {
@@ -55,12 +55,13 @@
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
 	flex-grow: 1;
+	color: $gray-200;
 }
 
 .edit-site-site-hub_toggle-command-center {
-	color: $white;
+	color: $gray-200;
 
 	&:hover {
-		color: $white;
+		color: $gray-100;
 	}
 }

package/src/hooks/commands/use-common-commands.js

@@ -4,7 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { trash, backup, help, styles } from '@wordpress/icons';
+import { trash, backup, help, styles, external } from '@wordpress/icons';
 import { useCommandLoader, useCommand } from '@wordpress/commands';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -105,6 +105,15 @@ export function useCommonCommands() {
 	);
 	const { set } = useDispatch( preferencesStore );
 	const history = useHistory();
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
 
 	useCommand( {
 		name: 'core/edit-site/open-global-styles-revisions',
@@ -155,6 +164,16 @@ export function useCommonCommands() {
 		icon: help,
 	} );
 
+	useCommand( {
+		name: 'core/edit-site/view-site',
+		label: __( 'View site' ),
+		callback: ( { close } ) => {
+			close();
+			window.open( homeUrl, '_blank' );
+		},
+		icon: external,
+	} );
+
 	useCommandLoader( {
 		name: 'core/edit-site/reset-global-styles',
 		hook: useGlobalStylesResetCommands,

package/src/hooks/commands/use-edit-mode-commands.js

@@ -2,10 +2,22 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { trash, backup, layout, page } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	code,
+	cog,
+	trash,
+	backup,
+	layout,
+	page,
+	drawerLeft,
+	drawerRight,
+	blockDefault,
+} from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -18,51 +30,63 @@ import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-function useEditModeCommandLoader() {
-	const { isLoaded, record: template } = useEditedEntityRecord();
-	const { removeTemplate, revertTemplate, setHasPageContentFocus } =
-		useDispatch( editSiteStore );
-	const history = useHistory();
-	const { isPage, hasPageContentFocus } = useSelect(
+function usePageContentFocusCommands() {
+	const { isPage, canvasMode, hasPageContentFocus } = useSelect(
 		( select ) => ( {
 			isPage: select( editSiteStore ).isPage(),
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
 			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
 		} ),
 		[]
 	);
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
-	if ( ! isLoaded ) {
-		return { isLoading: true, commands: [] };
+	if ( ! isPage || canvasMode !== 'edit' ) {
+		return { isLoading: false, commands: [] };
 	}
 
 	const commands = [];
 
-	if ( isPage ) {
-		if ( hasPageContentFocus ) {
-			commands.push( {
-				name: 'core/switch-to-template-focus',
-				label: __( 'Edit template' ),
-				icon: layout,
-				context: 'site-editor-edit',
-				callback: ( { close } ) => {
-					setHasPageContentFocus( false );
-					close();
-				},
-			} );
-		} else {
-			commands.push( {
-				name: 'core/switch-to-page-focus',
-				label: __( 'Back to page' ),
-				icon: page,
-				context: 'site-editor-edit',
-				callback: ( { close } ) => {
-					setHasPageContentFocus( true );
-					close();
-				},
-			} );
-		}
+	if ( hasPageContentFocus ) {
+		commands.push( {
+			name: 'core/switch-to-template-focus',
+			label: __( 'Edit template' ),
+			icon: layout,
+			callback: ( { close } ) => {
+				setHasPageContentFocus( false );
+				close();
+			},
+		} );
+	} else {
+		commands.push( {
+			name: 'core/switch-to-page-focus',
+			label: __( 'Back to page' ),
+			icon: page,
+			callback: ( { close } ) => {
+				setHasPageContentFocus( true );
+				close();
+			},
+		} );
+	}
+
+	return { isLoading: false, commands };
+}
+
+function useManipulateDocumentCommands() {
+	const { isLoaded, record: template } = useEditedEntityRecord();
+	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+	const history = useHistory();
+	const hasPageContentFocus = useSelect(
+		( select ) => select( editSiteStore ).hasPageContentFocus(),
+		[]
+	);
+
+	if ( ! isLoaded ) {
+		return { isLoading: true, commands: [] };
 	}
 
+	const commands = [];
+
 	if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
 		const label =
 			template.type === 'wp_template'
@@ -88,7 +112,6 @@ function useEditModeCommandLoader() {
 			name: 'core/remove-template',
 			label,
 			icon: trash,
-			context: 'site-editor-edit',
 			callback: ( { close } ) => {
 				removeTemplate( template );
 				// Navigate to the template list
@@ -106,10 +129,106 @@ function useEditModeCommandLoader() {
 	};
 }
 
+function useEditUICommands() {
+	const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
+		useDispatch( editSiteStore );
+	const { canvasMode, editorMode, activeSidebar } = useSelect(
+		( select ) => ( {
+			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
+			editorMode: select( editSiteStore ).getEditorMode(),
+			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
+				editSiteStore.name
+			),
+		} ),
+		[]
+	);
+	const { toggle } = useDispatch( preferencesStore );
+
+	if ( canvasMode !== 'edit' ) {
+		return { isLoading: false, commands: [] };
+	}
+
+	const commands = [];
+
+	commands.push( {
+		name: 'core/open-settings-sidebar',
+		label: __( 'Toggle settings sidebar' ),
+		icon: isRTL() ? drawerLeft : drawerRight,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-site/template' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-site/template' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-block-inspector',
+		label: __( 'Toggle block inspector' ),
+		icon: blockDefault,
+		callback: ( { close } ) => {
+			close();
+			if ( activeSidebar === 'edit-site/block-inspector' ) {
+				closeGeneralSidebar();
+			} else {
+				openGeneralSidebar( 'edit-site/block-inspector' );
+			}
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-spotlight-mode',
+		label: __( 'Toggle spotlight mode' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'focusMode' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-top-toolbar',
+		label: __( 'Toggle top toolbar' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			toggle( 'core/edit-site', 'fixedToolbar' );
+			close();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/toggle-code-editor',
+		label: __( 'Toggle code editor' ),
+		icon: code,
+		callback: ( { close } ) => {
+			switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
+			close();
+		},
+	} );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
 export function useEditModeCommands() {
+	useCommandLoader( {
+		name: 'core/edit-site/page-content-focus',
+		hook: usePageContentFocusCommands,
+		context: 'site-editor-edit',
+	} );
+
 	useCommandLoader( {
 		name: 'core/edit-site/manipulate-document',
-		hook: useEditModeCommandLoader,
+		hook: useManipulateDocumentCommands,
 		context: 'site-editor-edit',
 	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/edit-ui',
+		hook: useEditUICommands,
+	} );
 }

package/src/index.js

@@ -63,6 +63,7 @@ export function initializeEditor( id, settings ) {
 		editorMode: 'visual',
 		fixedToolbar: false,
 		focusMode: false,
+		distractionFree: false,
 		keepCaretInsideBlock: false,
 		welcomeGuide: true,
 		welcomeGuideStyles: true,

package/src/store/selectors.js

@@ -107,6 +107,10 @@ export const getSettings = createSelector(
 			...state.settings,
 			outlineMode: true,
 			focusMode: !! __unstableGetPreference( state, 'focusMode' ),
+			isDistractionFree: !! __unstableGetPreference(
+				state,
+				'distractionFree'
+			),
 			hasFixedToolbar: !! __unstableGetPreference(
 				state,
 				'fixedToolbar'
@@ -143,6 +147,7 @@ export const getSettings = createSelector(
 		getCanUserCreateMedia( state ),
 		state.settings,
 		__unstableGetPreference( state, 'focusMode' ),
+		__unstableGetPreference( state, 'distractionFree' ),
 		__unstableGetPreference( state, 'fixedToolbar' ),
 		__unstableGetPreference( state, 'keepCaretInsideBlock' ),
 		__unstableGetPreference( state, 'showIconLabels' ),

package/src/store/test/selectors.js

@@ -77,6 +77,7 @@ describe( 'selectors', () => {
 				outlineMode: true,
 				focusMode: false,
 				hasFixedToolbar: false,
+				isDistractionFree: false,
 				keepCaretInsideBlock: false,
 				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,
@@ -102,6 +103,7 @@ describe( 'selectors', () => {
 				key: 'value',
 				focusMode: true,
 				hasFixedToolbar: true,
+				isDistractionFree: false,
 				keepCaretInsideBlock: false,
 				showIconLabels: false,
 				__experimentalSetIsInserterOpened: setInserterOpened,

package/src/style.scss

@@ -37,6 +37,7 @@
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";
+@import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";