@wordpress/edit-site 5.13.0 → 5.14.0

package/src/components/welcome-guide/editor.js

@@ -30,7 +30,7 @@ export default function WelcomeGuideEditor() {
 
 	return (
 		<Guide
-			className="edit-site-welcome-guide"
+			className="edit-site-welcome-guide guide-editor"
 			contentLabel={ __( 'Welcome to the site editor' ) }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }

package/src/components/welcome-guide/index.js

@@ -3,12 +3,16 @@
  */
 import WelcomeGuideEditor from './editor';
 import WelcomeGuideStyles from './styles';
+import WelcomeGuidePage from './page';
+import WelcomeGuideTemplate from './template';
 
 export default function WelcomeGuide() {
 	return (
 		<>
 			<WelcomeGuideEditor />
 			<WelcomeGuideStyles />
+			<WelcomeGuidePage />
+			<WelcomeGuideTemplate />
 		</>
 	);
 }

package/src/components/welcome-guide/page.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuidePage() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const isVisible = useSelect( ( select ) => {
+		const isPageActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuidePage'
+		);
+		const isEditorActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuide'
+		);
+		const { hasPageContentFocus } = select( editSiteStore );
+		return isPageActive && ! isEditorActive && hasPageContentFocus();
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	const heading = __( 'Editing a page' );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide guide-page"
+			contentLabel={ heading }
+			finishButtonText={ __( 'Continue' ) }
+			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuidePage' ) }
+			pages={ [
+				{
+					image: (
+						<video
+							className="edit-site-welcome-guide__video"
+							autoPlay
+							loop
+							muted
+							width="312"
+							height="240"
+						>
+							<source
+								src="https://s.w.org/images/block-editor/editing-your-page.mp4"
+								type="video/mp4"
+							/>
+						</video>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ heading }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'It’s now possible to edit page content in the site editor. To customise other parts of the page like the header and footer switch to editing the template using the settings sidebar.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

package/src/components/welcome-guide/style.scss

@@ -1,8 +1,22 @@
 .edit-site-welcome-guide {
 	width: 312px;
 
-	&__image {
+	&.guide-editor .edit-site-welcome-guide__image
+	&.guide-styles .edit-site-welcome-guide__image {
 		background: #00a0d2;
+	}
+
+	&.guide-page .edit-site-welcome-guide__video {
+		border-right: #3858e9 $grid-unit-20 solid;
+		border-top: #3858e9 $grid-unit-20 solid;
+	}
+
+	&.guide-template .edit-site-welcome-guide__video {
+		border-left: #3858e9 $grid-unit-20 solid;
+		border-top: #3858e9 $grid-unit-20 solid;
+	}
+
+	&__image {
 		margin: 0 0 $grid-unit-20;
 		> img {
 			display: block;

package/src/components/welcome-guide/styles.js

@@ -38,7 +38,7 @@ export default function WelcomeGuideStyles() {
 
 	return (
 		<Guide
-			className="edit-site-welcome-guide"
+			className="edit-site-welcome-guide guide-styles"
 			contentLabel={ welcomeLabel }
 			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }

package/src/components/welcome-guide/template.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as preferencesStore } from '@wordpress/preferences';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuideTemplate() {
+	const { toggle } = useDispatch( preferencesStore );
+
+	const isVisible = useSelect( ( select ) => {
+		const isTemplateActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuideTemplate'
+		);
+		const isEditorActive = !! select( preferencesStore ).get(
+			'core/edit-site',
+			'welcomeGuide'
+		);
+		const { isPage, hasPageContentFocus } = select( editSiteStore );
+		return (
+			isTemplateActive &&
+			! isEditorActive &&
+			isPage() &&
+			! hasPageContentFocus()
+		);
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	const heading = __( 'Editing a template' );
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide guide-template"
+			contentLabel={ heading }
+			finishButtonText={ __( 'Continue' ) }
+			onFinish={ () =>
+				toggle( 'core/edit-site', 'welcomeGuideTemplate' )
+			}
+			pages={ [
+				{
+					image: (
+						<video
+							className="edit-site-welcome-guide__video"
+							autoPlay
+							loop
+							muted
+							width="312"
+							height="240"
+						>
+							<source
+								src="https://s.w.org/images/block-editor/editing-your-template.mp4"
+								type="video/mp4"
+							/>
+						</video>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ heading }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'Note that the same template can be used by multiple pages, so any changes made here may affect other pages on the site. To switch back to editing the page content click the ‘Back’ button in the toolbar.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}

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

@@ -4,12 +4,13 @@
 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';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -104,7 +105,21 @@ export function useCommonCommands() {
 		useDispatch( editSiteStore )
 	);
 	const { set } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
 	const history = useHistory();
+	const { homeUrl, isDistractionFree } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
+		return {
+			homeUrl: getUnstableBase()?.home,
+			isDistractionFree: select( preferencesStore ).get(
+				editSiteStore.name,
+				'distractionFree'
+			),
+		};
+	}, [] );
 
 	useCommand( {
 		name: 'core/edit-site/open-global-styles-revisions',
@@ -130,6 +145,12 @@ export function useCommonCommands() {
 				path: '/wp_global_styles',
 				canvas: 'edit',
 			} );
+			if ( isDistractionFree ) {
+				set( editSiteStore.name, 'distractionFree', false );
+				createInfoNotice( __( 'Distraction free mode turned off.' ), {
+					type: 'snackbar',
+				} );
+			}
 			openGeneralSidebar( 'edit-site/global-styles' );
 		},
 		icon: styles,
@@ -155,6 +176,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,23 @@
  * 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 {
+	trash,
+	backup,
+	layout,
+	page,
+	drawerLeft,
+	drawerRight,
+	blockDefault,
+	cog,
+	code,
+	keyboardClose,
+} 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
@@ -14,55 +27,69 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
+import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
+import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 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'
@@ -84,16 +111,19 @@ function useEditModeCommandLoader() {
 			template.type === 'wp_template'
 				? __( 'Delete template' )
 				: __( 'Delete template part' );
+		const path =
+			template.type === 'wp_template'
+				? '/wp_template'
+				: '/wp_template_part/all';
 		commands.push( {
 			name: 'core/remove-template',
 			label,
 			icon: trash,
-			context: 'site-editor-edit',
 			callback: ( { close } ) => {
 				removeTemplate( template );
 				// Navigate to the template list
 				history.push( {
-					path: '/' + template.type,
+					path,
 				} );
 				close();
 			},
@@ -106,10 +136,124 @@ 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 { openModal } = useDispatch( interfaceStore );
+	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();
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-preferences',
+		label: __( 'Open editor preferences' ),
+		icon: cog,
+		callback: () => {
+			openModal( PREFERENCES_MODAL_NAME );
+		},
+	} );
+
+	commands.push( {
+		name: 'core/open-shortcut-help',
+		label: __( 'Open keyboard shortcuts' ),
+		icon: keyboardClose,
+		callback: () => {
+			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
+		},
+	} );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
 export function useEditModeCommands() {
 	useCommandLoader( {
-		name: 'core/edit-site/manipulate-document',
-		hook: useEditModeCommandLoader,
+		name: 'core/edit-site/page-content-focus',
+		hook: usePageContentFocusCommands,
 		context: 'site-editor-edit',
 	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/manipulate-document',
+		hook: useManipulateDocumentCommands,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/edit-ui',
+		hook: useEditUICommands,
+	} );
 }

package/src/index.js

@@ -63,9 +63,12 @@ export function initializeEditor( id, settings ) {
 		editorMode: 'visual',
 		fixedToolbar: false,
 		focusMode: false,
+		distractionFree: false,
 		keepCaretInsideBlock: false,
 		welcomeGuide: true,
 		welcomeGuideStyles: true,
+		welcomeGuidePage: true,
+		welcomeGuideTemplate: true,
 		showListViewByDefault: false,
 		showBlockBreadcrumbs: true,
 	} );
@@ -106,3 +109,4 @@ export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-
 export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
 export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
 export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
+export { store } from './store';

package/src/store/actions.js

@@ -141,11 +141,18 @@ export const removeTemplate =
 				throw lastError;
 			}
 
+			// Depending on how the entity was retrieved it's title might be
+			// an object or simple string.
+			const templateTitle =
+				typeof template.title === 'string'
+					? template.title
+					: template.title?.rendered;
+
 			registry.dispatch( noticesStore ).createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" deleted.' ),
-					decodeEntities( template.title.rendered )
+					decodeEntities( templateTitle )
 				),
 				{ type: 'snackbar', id: 'site-editor-template-deleted-success' }
 			);

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

@@ -10,7 +10,7 @@
 @import "./components/header-edit-mode/document-actions/style.scss";
 @import "./components/list/style.scss";
 @import "./components/page/style.scss";
-@import "./components/page-library/style.scss";
+@import "./components/page-patterns/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
 @import "./components/sidebar-edit-mode/page-panels/style.scss";
@@ -33,10 +33,11 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-global-styles/style.scss";
-@import "./components/sidebar-navigation-screen-library/style.scss";
 @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-patterns/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";

package/src/utils/get-is-list-page.js

@@ -15,9 +15,10 @@ export default function getIsListPage(
 ) {
 	return (
 		path === '/wp_template/all' ||
-		( path === '/library' &&
-			// Don't treat "/library" without categoryType and categoryId as a list page
-			// in mobile because the sidebar covers the whole page.
+		path === '/wp_template_part/all' ||
+		( path === '/patterns' &&
+			// Don't treat "/patterns" without categoryType and categoryId as a
+			// list page in mobile because the sidebar covers the whole page.
 			( ! isMobileViewport || ( !! categoryType && !! categoryId ) ) )
 	);
 }

package/src/utils/template-part-create.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { kebabCase } from 'lodash';
+import { paramCase as kebabCase } from 'change-case';
 
 /**
  * WordPress dependencies