@wordpress/edit-site 5.12.10 → 5.12.12

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

@@ -7,7 +7,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -18,7 +17,6 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 
 const TemplateItem = ( { postType, postId, ...props } ) => {
@@ -31,11 +29,6 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 
 export default function SidebarNavigationScreenTemplates() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-
-		return !! settings.supportsTemplatePartsMode;
-	}, [] );
 
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
@@ -51,10 +44,9 @@ export default function SidebarNavigationScreenTemplates() {
 	);
 
 	const browseAllLink = useLink( { path: '/wp_template/all' } );
-	const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
+	const canCreate = ! isMobileViewport;
 	return (
 		<SidebarNavigationScreen
-			isRoot={ isTemplatePartsMode }
 			title={ __( 'Templates' ) }
 			description={ __(
 				'Express the layout of your site with templates'

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -2,12 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { store as editSiteStore } from '../../store';
 
 const config = {
 	wp_template: {
@@ -29,8 +31,16 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 	const {
 		params: { postType },
 	} = useNavigator();
+
+	const isTemplatePartsMode = useSelect( ( select ) => {
+		const settings = select( editSiteStore ).getSettings();
+
+		return !! settings.supportsTemplatePartsMode;
+	}, [] );
+
 	return (
 		<SidebarNavigationScreen
+			isRoot={ isTemplatePartsMode }
 			title={ config[ postType ].title }
 			description={ config[ postType ].description }
 			backPath={ config[ postType ].backPath }

package/src/components/site-hub/index.js

@@ -31,7 +31,7 @@ import { unlock } from '../../lock-unlock';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
-const SiteHub = forwardRef( ( props, ref ) => {
+const SiteHub = forwardRef( ( { isTransparent, ...restProps }, ref ) => {
 	const { canvasMode, dashboardLink, homeUrl } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
@@ -85,8 +85,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	return (
 		<motion.div
 			ref={ ref }
-			{ ...props }
-			className={ classnames( 'edit-site-site-hub', props.className ) }
+			{ ...restProps }
+			className={ classnames(
+				'edit-site-site-hub',
+				restProps.className
+			) }
 			initial={ false }
 			transition={ {
 				type: 'tween',
@@ -105,7 +108,12 @@ const SiteHub = forwardRef( ( props, ref ) => {
 					spacing="0"
 				>
 					<motion.div
-						className="edit-site-site-hub__view-mode-toggle-container"
+						className={ classnames(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
 						layout
 						transition={ {
 							type: 'tween',
@@ -149,7 +157,10 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							exit={ {
 								opacity: 0,
 							} }
-							className="edit-site-site-hub__site-title"
+							className={ classnames(
+								'edit-site-site-hub__site-title',
+								{ 'is-transparent': isTransparent }
+							) }
 							transition={ {
 								type: 'tween',
 								duration: disableMotion ? 0 : 0.2,
@@ -164,7 +175,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 						<Button
 							href={ homeUrl }
 							target="_blank"
-							label={ __( 'View site' ) }
+							label={ __( 'View site (opens in a new tab)' ) }
 							aria-label={ __(
 								'View site (opens in a new tab)'
 							) }
@@ -175,7 +186,10 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button
-						className="edit-site-site-hub_toggle-command-center"
+						className={ classnames(
+							'edit-site-site-hub_toggle-command-center',
+							{ 'is-transparent': isTransparent }
+						) }
 						icon={ search }
 						onClick={ () => openCommandCenter() }
 						label={ __( 'Open command palette' ) }

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

@@ -11,17 +11,20 @@
 	.edit-site-site-hub__site-title,
 	.edit-site-site-hub_toggle-command-center {
 		transition: opacity ease 0.1s;
+
+		&.is-transparent {
+			opacity: 0 !important;
+		}
 	}
 
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
+		margin-right: var(--wp-admin-border-width-focus);
 		@include break-mobile() {
 			opacity: 0;
 			transition: opacity 0.2s ease-in-out;
 		}
 		&:focus {
-			outline: none;
-			box-shadow: none;
 			opacity: 1;
 		}
 		svg {
@@ -44,6 +47,10 @@
 	width: $header-height;
 	flex-shrink: 0;
 	background: $gray-900;
+
+	&.has-transparent-background {
+		background: transparent;
+	}
 }
 
 .edit-site-site-hub__text-content {

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

@@ -11,15 +11,17 @@ 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();
@@ -48,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 } =
@@ -66,6 +71,7 @@ function useGlobalStylesOpenCssCommands() {
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
 		};
 	}, [] );
+	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 
 	const commands = useMemo( () => {
 		if ( ! canEditCSS ) {
@@ -79,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' );
 				},
@@ -93,6 +104,9 @@ function useGlobalStylesOpenCssCommands() {
 		openGeneralSidebar,
 		setEditorCanvasContainerView,
 		canEditCSS,
+		isEditorPage,
+		getCanvasMode,
+		setCanvasMode,
 	] );
 	return {
 		isLoading: false,
@@ -101,9 +115,13 @@ 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();
@@ -127,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' );
 		},
@@ -141,10 +164,15 @@ 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.' ), {
@@ -161,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

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

@@ -19,6 +19,7 @@ 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';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -137,8 +138,13 @@ function useManipulateDocumentCommands() {
 }
 
 function useEditUICommands() {
-	const { openGeneralSidebar, closeGeneralSidebar, switchEditorMode } =
-		useDispatch( editSiteStore );
+	const {
+		openGeneralSidebar,
+		closeGeneralSidebar,
+		setIsInserterOpened,
+		setIsListViewOpened,
+		switchEditorMode,
+	} = useDispatch( editSiteStore );
 	const { canvasMode, editorMode, activeSidebar } = useSelect(
 		( select ) => ( {
 			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
@@ -150,7 +156,9 @@ function useEditUICommands() {
 		[]
 	);
 	const { openModal } = useDispatch( interfaceStore );
-	const { toggle } = useDispatch( preferencesStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { set: setPreference, toggle } = useDispatch( preferencesStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
 
 	if ( canvasMode !== 'edit' ) {
 		return { isLoading: false, commands: [] };
@@ -196,6 +204,29 @@ function useEditUICommands() {
 		},
 	} );
 
+	commands.push( {
+		name: 'core/toggle-distraction-free',
+		label: __( 'Toggle distraction free' ),
+		icon: cog,
+		callback: ( { close } ) => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+			toggle( 'core/edit-site', 'distractionFree' );
+			createInfoNotice(
+				getPreference( 'core/edit-site', 'distractionFree' )
+					? __( 'Distraction free mode turned on.' )
+					: __( 'Distraction free mode turned off.' ),
+				{
+					id: 'core/edit-site/distraction-free-mode/notice',
+					type: 'snackbar',
+				}
+			);
+			close();
+		},
+	} );
+
 	commands.push( {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Toggle top toolbar' ),

package/src/store/private-actions.js

@@ -18,11 +18,15 @@ export const setCanvasMode =
 			mode,
 		} );
 		// Check if the block list view should be open by default.
+		// If `distractionFree` mode is enabled, the block list view should not be open.
 		if (
 			mode === 'edit' &&
 			registry
 				.select( preferencesStore )
-				.get( 'core/edit-site', 'showListViewByDefault' )
+				.get( 'core/edit-site', 'showListViewByDefault' ) &&
+			! registry
+				.select( preferencesStore )
+				.get( 'core/edit-site', 'distractionFree' )
 		) {
 			dispatch.setIsListViewOpened( true );
 		}