@wordpress/edit-site 5.23.0 → 5.24.0

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -55,6 +50,7 @@ const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
 function GlobalStylesActionMenu() {
+	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { toggle } = useDispatch( preferencesStore );
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -69,49 +65,56 @@ function GlobalStylesActionMenu() {
 			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	const { goTo } = useNavigator();
-	const loadCustomCSS = () => goTo( '/css' );
+	const loadCustomCSS = () => {
+		setEditorCanvasContainerView( 'global-styles-css' );
+		goTo( '/css' );
+	};
 
 	return (
 		<GlobalStylesMenuFill>
 			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
 				{ ( { onClose } ) => (
-					<MenuGroup>
-						{ canEditCSS && (
-							<MenuItem onClick={ loadCustomCSS }>
-								{ __( 'Additional CSS' ) }
+					<>
+						<MenuGroup>
+							{ canEditCSS && (
+								<MenuItem onClick={ loadCustomCSS }>
+									{ __( 'Additional CSS' ) }
+								</MenuItem>
+							) }
+							<MenuItem
+								onClick={ () => {
+									toggle(
+										'core/edit-site',
+										'welcomeGuideStyles'
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Welcome Guide' ) }
+							</MenuItem>
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+								disabled={ ! canReset }
+							>
+								{ __( 'Reset styles' ) }
 							</MenuItem>
-						) }
-						<MenuItem
-							onClick={ () => {
-								toggle(
-									'core/edit-site',
-									'welcomeGuideStyles'
-								);
-								onClose();
-							} }
-						>
-							{ __( 'Welcome Guide' ) }
-						</MenuItem>
-					</MenuGroup>
+						</MenuGroup>
+					</>
 				) }
 			</DropdownMenu>
 		</GlobalStylesMenuFill>
 	);
 }
 
-function RevisionsCountBadge( { className, children } ) {
-	return (
-		<span
-			className={ classnames(
-				className,
-				'edit-site-global-styles-sidebar__revisions-count-badge'
-			) }
-		>
-			{ children }
-		</span>
-	);
-}
 function GlobalStylesRevisionsMenu() {
 	const { setIsListViewOpened } = useDispatch( editSiteStore );
 	const { revisionsCount } = useSelect( ( select ) => {
@@ -128,56 +131,38 @@ function GlobalStylesRevisionsMenu() {
 				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
 		};
 	}, [] );
-	const [ canReset, onReset ] = useGlobalStylesReset();
 	const { goTo } = useNavigator();
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const isRevisionsOpened = useSelect(
+		( select ) =>
+			'global-styles-revisions' ===
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
 	const loadRevisions = () => {
 		setIsListViewOpened( false );
-		goTo( '/revisions' );
-		setEditorCanvasContainerView( 'global-styles-revisions' );
+
+		if ( ! isRevisionsOpened ) {
+			goTo( '/revisions' );
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		} else {
+			goTo( '/' );
+			setEditorCanvasContainerView( undefined );
+		}
 	};
 	const hasRevisions = revisionsCount > 0;
 
 	return (
 		<GlobalStylesMenuFill>
-			{ canReset || hasRevisions ? (
-				<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ hasRevisions && (
-								<MenuItem
-									onClick={ loadRevisions }
-									icon={
-										<RevisionsCountBadge>
-											{ revisionsCount }
-										</RevisionsCountBadge>
-									}
-								>
-									{ __( 'Revision history' ) }
-								</MenuItem>
-							) }
-							<MenuItem
-								onClick={ () => {
-									onReset();
-									onClose();
-								} }
-								disabled={ ! canReset }
-							>
-								{ __( 'Reset to defaults' ) }
-							</MenuItem>
-						</MenuGroup>
-					) }
-				</DropdownMenu>
-			) : (
-				<Button
-					label={ __( 'Revisions' ) }
-					icon={ backup }
-					disabled
-					__experimentalIsFocusable
-				/>
-			) }
+			<Button
+				label={ __( 'Revisions' ) }
+				icon={ backup }
+				onClick={ loadRevisions }
+				disabled={ ! hasRevisions }
+				isPressed={ isRevisionsOpened }
+			/>
 		</GlobalStylesMenuFill>
 	);
 }

package/src/components/header-edit-mode/document-actions/index.js

@@ -24,8 +24,9 @@ import {
 	symbol,
 } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
-import { useState, useEffect, useRef } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { useRef, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -56,19 +57,18 @@ export default function DocumentActions() {
 }
 
 function PageDocumentActions() {
-	const { hasPageContentFocus, hasResolved, isFound, title } = useSelect(
+	const { isEditingPage, hasResolved, isFound, title } = useSelect(
 		( select ) => {
-			const {
-				hasPageContentFocus: _hasPageContentFocus,
-				getEditedPostContext,
-			} = select( editSiteStore );
+			const { getEditedPostContext } = select( editSiteStore );
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
+			const { getRenderingMode } = select( editorStore );
 			const context = getEditedPostContext();
 			const queryArgs = [ 'postType', context.postType, context.postId ];
 			const page = getEditedEntityRecord( ...queryArgs );
 			return {
-				hasPageContentFocus: _hasPageContentFocus(),
+				isEditingPage:
+					!! context.postId && getRenderingMode() !== 'template-only',
 				hasResolved: hasFinishedResolution(
 					'getEditedEntityRecord',
 					queryArgs
@@ -80,16 +80,16 @@ function PageDocumentActions() {
 		[]
 	);
 
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+	const [ isAnimated, setIsAnimated ] = useState( false );
+	const isLoading = useRef( true );
 
-	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
-	const prevHasPageContentFocus = useRef( false );
 	useEffect( () => {
-		if ( prevHasPageContentFocus.current && ! hasPageContentFocus ) {
-			setHasEditedTemplate( true );
+		if ( ! isLoading.current ) {
+			setIsAnimated( true );
 		}
-		prevHasPageContentFocus.current = hasPageContentFocus;
-	}, [ hasPageContentFocus ] );
+		isLoading.current = false;
+	}, [ isEditingPage ] );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -103,10 +103,10 @@ function PageDocumentActions() {
 		);
 	}
 
-	return hasPageContentFocus ? (
+	return isEditingPage ? (
 		<BaseDocumentActions
 			className={ classnames( 'is-page', {
-				'is-animated': hasEditedTemplate,
+				'is-animated': isAnimated,
 			} ) }
 			icon={ pageIcon }
 		>
@@ -114,8 +114,10 @@ function PageDocumentActions() {
 		</BaseDocumentActions>
 	) : (
 		<TemplateDocumentActions
-			className="is-animated"
-			onBack={ () => setHasPageContentFocus( true ) }
+			className={ classnames( {
+				'is-animated': isAnimated,
+			} ) }
+			onBack={ () => setRenderingMode( 'template-locked' ) }
 		/>
 	);
 }

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

@@ -229,6 +229,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 							isEnabled={
 								! isFocusMode && hasDefaultEditorCanvasView
 							}
+							showIconLabels={ showIconLabels }
 						>
 							{ ( { onClose } ) => (
 								<MenuGroup>

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

@@ -52,7 +52,7 @@ export default function MoreMenu( { showIconLabels } ) {
 
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setPreference( 'core/edit-site', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();

package/src/components/list/added-by.js

@@ -22,20 +22,10 @@ import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_ORIGINS,
-} from '../../utils/constants';
+import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../utils/constants';
 
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
-/** @type {TemplateType} */
-const TEMPLATE_POST_TYPE_NAMES = [
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-];
-
 /**
  * @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
  *
@@ -55,8 +45,6 @@ export function useAddedBy( postType, postId ) {
 	return useSelect(
 		( select ) => {
 			const {
-				getTheme,
-				getPlugin,
 				getEntityRecord,
 				getMedia,
 				getUser,
@@ -67,82 +55,54 @@ export function useAddedBy( postType, postId ) {
 				postType,
 				postId
 			);
+			const originalSource = template?.original_source;
+			const authorText = template?.author_text;
 
-			if ( TEMPLATE_POST_TYPE_NAMES.includes( template.type ) ) {
-				// Added by theme.
-				// Template originally provided by a theme, but customized by a user.
-				// Templates originally didn't have the 'origin' field so identify
-				// older customized templates by checking for no origin and a 'theme'
-				// or 'custom' source.
-				if (
-					template.has_theme_file &&
-					( template.origin === TEMPLATE_ORIGINS.theme ||
-						( ! template.origin &&
-							[
-								TEMPLATE_ORIGINS.theme,
-								TEMPLATE_ORIGINS.custom,
-							].includes( template.source ) ) )
-				) {
+			switch ( originalSource ) {
+				case 'theme': {
 					return {
-						type: 'theme',
+						type: originalSource,
 						icon: themeIcon,
-						text:
-							getTheme( template.theme )?.name?.rendered ||
-							template.theme,
+						text: authorText,
 						isCustomized:
 							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
-
-				// Added by plugin.
-				if (
-					template.has_theme_file &&
-					template.origin === TEMPLATE_ORIGINS.plugin
-				) {
+				case 'plugin': {
 					return {
-						type: TEMPLATE_ORIGINS.plugin,
+						type: originalSource,
 						icon: pluginIcon,
-						text:
-							getPlugin( template.theme )?.name || template.theme,
+						text: authorText,
 						isCustomized:
 							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
-
-				// Added by site.
-				// Template was created from scratch, but has no author. Author support
-				// was only added to templates in WordPress 5.9. Fallback to showing the
-				// site logo and title.
-				if (
-					! template.has_theme_file &&
-					template.source === TEMPLATE_ORIGINS.custom &&
-					! template.author
-				) {
+				case 'site': {
 					const siteData = getEntityRecord(
 						'root',
 						'__unstableBase'
 					);
 					return {
-						type: 'site',
+						type: originalSource,
 						icon: globeIcon,
 						imageUrl: siteData?.site_logo
 							? getMedia( siteData.site_logo )?.source_url
 							: undefined,
-						text: siteData?.name,
+						text: authorText,
+						isCustomized: false,
+					};
+				}
+				default: {
+					const user = getUser( template.author );
+					return {
+						type: 'user',
+						icon: authorIcon,
+						imageUrl: user?.avatar_urls?.[ 48 ],
+						text: authorText,
 						isCustomized: false,
 					};
 				}
 			}
-
-			// Added by user.
-			const user = getUser( template.author );
-			return {
-				type: 'user',
-				icon: authorIcon,
-				imageUrl: user?.avatar_urls?.[ 48 ],
-				text: user?.nickname,
-				isCustomized: false,
-			};
 		},
 		[ postType, postId ]
 	);

package/src/components/list/style.scss

@@ -148,33 +148,31 @@
 .edit-site-list-added-by__icon {
 	display: flex;
 	flex-shrink: 0;
-	align-items: center;
-	justify-content: center;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-	background: $gray-800;
-	border-radius: 100%;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
 
 	svg {
-		fill: $white;
+		fill: currentColor;
 	}
 }
 
 .edit-site-list-added-by__avatar {
 	flex-shrink: 0;
 	overflow: hidden;
-	border-radius: 100%;
-	background: $gray-800;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: center;
+	display: flex;
 
 	img {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: 20px;
+		height: 20px;
 		object-fit: cover;
 		opacity: 0;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
+		border-radius: 100%;
 	}
 
 	&.is-loaded {

package/src/components/{page-content-focus-manager → page-content-focus-notifications}/back-to-page-notification.js

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -25,35 +26,33 @@ export default function BackToPageNotification() {
  * switches from focusing on editing page content to editing a template.
  */
 export function useBackToPageNotification() {
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const renderingMode = useSelect(
+		( select ) => select( editorStore ).getRenderingMode(),
 		[]
 	);
 	const { isPage } = useSelect( editSiteStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
 
 	const alreadySeen = useRef( false );
 
-	const { createInfoNotice } = useDispatch( noticesStore );
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
-
 	useEffect( () => {
-		if ( isPage() && ! alreadySeen.current && ! hasPageContentFocus ) {
+		if (
+			isPage() &&
+			! alreadySeen.current &&
+			renderingMode === 'template-only'
+		) {
 			createInfoNotice( __( 'You are editing a template.' ), {
 				isDismissible: true,
 				type: 'snackbar',
 				actions: [
 					{
 						label: __( 'Back to page' ),
-						onClick: () => setHasPageContentFocus( true ),
+						onClick: () => setRenderingMode( 'template-locked' ),
 					},
 				],
 			} );
 			alreadySeen.current = true;
 		}
-	}, [
-		isPage,
-		hasPageContentFocus,
-		createInfoNotice,
-		setHasPageContentFocus,
-	] );
+	}, [ isPage, renderingMode, createInfoNotice, setRenderingMode ] );
 }

package/src/components/{page-content-focus-manager → page-content-focus-notifications}/edit-template-notification.js

@@ -6,11 +6,7 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Component that:
@@ -27,14 +23,14 @@ import { store as editSiteStore } from '../../store';
  *                                                                  editor iframe canvas.
  */
 export default function EditTemplateNotification( { contentRef } ) {
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const renderingMode = useSelect(
+		( select ) => select( editorStore ).getRenderingMode(),
 		[]
 	);
 	const { getNotices } = useSelect( noticesStore );
 
 	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+	const { setRenderingMode } = useDispatch( editorStore );
 
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
@@ -42,7 +38,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 
 	useEffect( () => {
 		const handleClick = async ( event ) => {
-			if ( ! hasPageContentFocus ) {
+			if ( renderingMode === 'template-only' ) {
 				return;
 			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
@@ -62,7 +58,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 					actions: [
 						{
 							label: __( 'Edit template' ),
-							onClick: () => setHasPageContentFocus( false ),
+							onClick: () => setRenderingMode( 'template-only' ),
 						},
 					],
 				}
@@ -71,7 +67,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 		};
 
 		const handleDblClick = ( event ) => {
-			if ( ! hasPageContentFocus ) {
+			if ( renderingMode === 'template-only' ) {
 				return;
 			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
@@ -90,7 +86,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 			canvas?.removeEventListener( 'click', handleClick );
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [ lastNoticeId, hasPageContentFocus, contentRef.current ] );
+	}, [ lastNoticeId, renderingMode, contentRef.current ] );
 
 	return (
 		<ConfirmDialog
@@ -98,7 +94,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 			confirmButtonText={ __( 'Edit template' ) }
 			onConfirm={ () => {
 				setIsDialogOpen( false );
-				setHasPageContentFocus( false );
+				setRenderingMode( 'template-only' );
 			} }
 			onCancel={ () => setIsDialogOpen( false ) }
 		>

package/src/components/page-content-focus-notifications/index.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import EditTemplateNotification from './edit-template-notification';
+import BackToPageNotification from './back-to-page-notification';
+
+export default function PageContentFocusNotifications( { contentRef } ) {
+	return (
+		<>
+			<EditTemplateNotification contentRef={ contentRef } />
+			<BackToPageNotification />
+		</>
+	);
+}