@wordpress/edit-site 5.13.0 → 5.15.0

package/src/components/template-actions/rename-menu-item.js

@@ -14,13 +14,17 @@ import {
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 export default function RenameMenuItem( { template, onClose } ) {
-	const [ title, setTitle ] = useState( () => template.title.rendered );
+	const title = decodeEntities( template.title.rendered );
+	const [ editedTitle, setEditedTitle ] = useState( title );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
+	const {
+		editEntityRecord,
+		__experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits,
+	} = useDispatch( coreStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
@@ -33,20 +37,23 @@ export default function RenameMenuItem( { template, onClose } ) {
 
 		try {
 			await editEntityRecord( 'postType', template.type, template.id, {
-				title,
+				title: editedTitle,
 			} );
 
 			// Update state before saving rerenders the list.
-			setTitle( '' );
+			setEditedTitle( '' );
 			setIsModalOpen( false );
 			onClose();
 
 			// Persist edited entity.
-			await saveEditedEntityRecord(
+			await saveSpecifiedEntityEdits(
 				'postType',
 				template.type,
 				template.id,
-				{ throwOnError: true }
+				[ 'title' ], // Only save title to avoid persisting other edits.
+				{
+					throwOnError: true,
+				}
 			);
 
 			createSuccessNotice( __( 'Entity renamed.' ), {
@@ -67,7 +74,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 			<MenuItem
 				onClick={ () => {
 					setIsModalOpen( true );
-					setTitle( template.title.rendered );
+					setEditedTitle( title );
 				} }
 			>
 				{ __( 'Rename' ) }
@@ -85,8 +92,8 @@ export default function RenameMenuItem( { template, onClose } ) {
 							<TextControl
 								__nextHasNoMarginBottom
 								label={ __( 'Name' ) }
-								value={ title }
-								onChange={ setTitle }
+								value={ editedTitle }
+								onChange={ setEditedTitle }
 								required
 							/>
 

package/src/components/use-edited-entity-record/index.js

@@ -10,6 +10,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
+import normalizeRecordKey from '../../utils/normalize-record-key';
 
 export default function useEditedEntityRecord( postType, postId ) {
 	const { record, title, description, isLoaded, icon } = useSelect(
@@ -21,7 +22,11 @@ export default function useEditedEntityRecord( postType, postId ) {
 			const { __experimentalGetTemplateInfo: getTemplateInfo } =
 				select( editorStore );
 			const usedPostType = postType ?? getEditedPostType();
-			const usedPostId = postId ?? getEditedPostId();
+
+			let usedPostId = postId ?? getEditedPostId();
+
+			usedPostId = normalizeRecordKey( usedPostId, usedPostType );
+
 			const _record = getEditedEntityRecord(
 				'postType',
 				usedPostType,

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,21 +4,24 @@
 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';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import getIsListPage from '../../utils/get-is-list-page';
 
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 function useGlobalStylesResetCommands() {
 	const [ canReset, onReset ] = useGlobalStylesReset();
@@ -47,9 +50,12 @@ function useGlobalStylesResetCommands() {
 }
 
 function useGlobalStylesOpenCssCommands() {
-	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
+	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
+		unlock( useDispatch( editSiteStore ) );
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params, isMobileViewport );
+	const isEditorPage = ! isListPage;
 	const history = useHistory();
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -65,6 +71,7 @@ function useGlobalStylesOpenCssCommands() {
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
 		};
 	}, [] );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 
 	const commands = useMemo( () => {
 		if ( ! canEditCSS ) {
@@ -78,10 +85,15 @@ function useGlobalStylesOpenCssCommands() {
 				icon: styles,
 				callback: ( { close } ) => {
 					close();
-					history.push( {
-						path: '/wp_global_styles',
-						canvas: 'edit',
-					} );
+					if ( ! isEditorPage ) {
+						history.push( {
+							path: '/wp_global_styles',
+							canvas: 'edit',
+						} );
+					}
+					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+						setCanvasMode( 'edit' );
+					}
 					openGeneralSidebar( 'edit-site/global-styles' );
 					setEditorCanvasContainerView( 'global-styles-css' );
 				},
@@ -92,6 +104,9 @@ function useGlobalStylesOpenCssCommands() {
 		openGeneralSidebar,
 		setEditorCanvasContainerView,
 		canEditCSS,
+		isEditorPage,
+		getCanvasMode,
+		setCanvasMode,
 	] );
 	return {
 		isLoading: false,
@@ -100,11 +115,29 @@ function useGlobalStylesOpenCssCommands() {
 }
 
 export function useCommonCommands() {
-	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
+	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
+		unlock( useDispatch( editSiteStore ) );
+	const { params } = useLocation();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params, isMobileViewport );
+	const isEditorPage = ! isListPage;
+	const { getCanvasMode } = unlock( useSelect( 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',
@@ -112,10 +145,15 @@ export function useCommonCommands() {
 		icon: backup,
 		callback: ( { close } ) => {
 			close();
-			history.push( {
-				path: '/wp_global_styles',
-				canvas: 'edit',
-			} );
+			if ( ! isEditorPage ) {
+				history.push( {
+					path: '/wp_global_styles',
+					canvas: 'edit',
+				} );
+			}
+			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+				setCanvasMode( 'edit' );
+			}
 			openGeneralSidebar( 'edit-site/global-styles' );
 			setEditorCanvasContainerView( 'global-styles-revisions' );
 		},
@@ -126,10 +164,21 @@ export function useCommonCommands() {
 		label: __( 'Open styles' ),
 		callback: ( { close } ) => {
 			close();
-			history.push( {
-				path: '/wp_global_styles',
-				canvas: 'edit',
-			} );
+			if ( ! isEditorPage ) {
+				history.push( {
+					path: '/wp_global_styles',
+					canvas: 'edit',
+				} );
+			}
+			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+				setCanvasMode( 'edit' );
+			}
+			if ( isDistractionFree ) {
+				set( editSiteStore.name, 'distractionFree', false );
+				createInfoNotice( __( 'Distraction free mode turned off.' ), {
+					type: 'snackbar',
+				} );
+			}
 			openGeneralSidebar( 'edit-site/global-styles' );
 		},
 		icon: styles,
@@ -140,10 +189,15 @@ export function useCommonCommands() {
 		label: __( 'Learn about styles' ),
 		callback: ( { close } ) => {
 			close();
-			history.push( {
-				path: '/wp_global_styles',
-				canvas: 'edit',
-			} );
+			if ( ! isEditorPage ) {
+				history.push( {
+					path: '/wp_global_styles',
+					canvas: 'edit',
+				} );
+			}
+			if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+				setCanvasMode( 'edit' );
+			}
 			openGeneralSidebar( 'edit-site/global-styles' );
 			set( 'core/edit-site', 'welcomeGuideStyles', true );
 			// sometimes there's a focus loss that happens after some time
@@ -155,6 +209,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,