@wordpress/edit-site 6.10.0 → 6.12.0

package/src/components/posts-app/index.js

@@ -12,7 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import Layout from '../layout';
-import useLayoutAreas from './router';
+import useActiveRoute from './router';
 import { unlock } from '../../lock-unlock';
 
 const { RouterProvider } = unlock( routerPrivateApis );
@@ -21,7 +21,7 @@ const { GlobalStylesProvider } = unlock( editorPrivateApis );
 function PostsLayout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
-	const route = useLayoutAreas();
+	const route = useActiveRoute();
 	return <Layout route={ route } />;
 }
 

package/src/components/posts-app/router.js

@@ -17,7 +17,7 @@ import PostList from '../post-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function useLayoutAreas() {
+export default function useActiveRoute() {
 	const { params = {} } = useLocation();
 	const { postType, layout, canvas } = params;
 	const labels = useSelect(
@@ -31,7 +31,7 @@ export default function useLayoutAreas() {
 	if ( [ 'post' ].includes( postType ) ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
-			key: 'posts-list',
+			name: 'posts-list',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreen
@@ -59,7 +59,7 @@ export default function useLayoutAreas() {
 
 	// Fallback shows the home page preview
 	return {
-		key: 'default',
+		name: 'default',
 		areas: {
 			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isPostsList />,

package/src/components/resizable-frame/index.js

@@ -13,14 +13,15 @@ import {
 	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { __, isRTL } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 // Removes the inline styles in the drag handles.
 const HANDLE_STYLES_OVERRIDE = {
@@ -86,6 +87,9 @@ function ResizableFrame( {
 	defaultSize,
 	innerContentStyle,
 } ) {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const disableMotion = useReducedMotion();
 	const [ frameSize, setFrameSize ] = useState( INITIAL_FRAME_SIZE );
 	// The width of the resizable frame when a new resize gesture starts.
@@ -93,11 +97,7 @@ function ResizableFrame( {
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ shouldShowHandle, setShouldShowHandle ] = useState( false );
 	const [ resizeRatio, setResizeRatio ] = useState( 1 );
-	const canvasMode = useSelect(
-		( select ) => unlock( select( editSiteStore ) ).getCanvasMode(),
-		[]
-	);
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
 	const FRAME_TRANSITION = { type: 'tween', duration: isResizing ? 0 : 0.5 };
 	const frameRef = useRef( null );
 	const resizableHandleHelpId = useInstanceId(
@@ -158,7 +158,16 @@ function ResizableFrame( {
 			setFrameSize( INITIAL_FRAME_SIZE );
 		} else {
 			// Trigger full screen if the frame is resized far enough to the left.
-			setCanvasMode( 'edit' );
+			history.push(
+				{
+					...params,
+					canvas: 'edit',
+				},
+				undefined,
+				{
+					transition: 'canvas-mode-edit-transition',
+				}
+			);
 		}
 	};
 
@@ -237,7 +246,7 @@ function ResizableFrame( {
 				}
 			} }
 			whileHover={
-				canvasMode === 'view'
+				canvas === 'view'
 					? {
 							scale: 1.005,
 							transition: {
@@ -275,7 +284,7 @@ function ResizableFrame( {
 			onMouseOver={ () => setShouldShowHandle( true ) }
 			onMouseOut={ () => setShouldShowHandle( false ) }
 			handleComponent={ {
-				[ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
+				[ isRTL() ? 'right' : 'left' ]: canvas === 'view' && (
 					<>
 						<Tooltip text={ __( 'Drag to resize' ) }>
 							{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }

package/src/components/revisions/index.js

@@ -53,7 +53,10 @@ function Revisions( { userConfig, blocks } ) {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			isPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 

package/src/components/save-keyboard-shortcut/index.js

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+const shortcutName = 'core/edit-site/save';
+
+/**
+ * Register the save keyboard shortcut in view mode.
+ *
+ * @return {null} Returns null.
+ */
+export default function SaveKeyboardShortcut() {
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
+	const { hasNonPostEntityChanges, isPostSavingLocked } =
+		useSelect( editorStore );
+	const { savePost } = useDispatch( editorStore );
+	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+	useEffect( () => {
+		registerShortcut( {
+			name: shortcutName,
+			category: 'global',
+			description: __( 'Save your changes.' ),
+			keyCombination: {
+				modifier: 'primary',
+				character: 's',
+			},
+		} );
+		return () => {
+			unregisterShortcut( shortcutName );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/edit-site/save', ( event ) => {
+		event.preventDefault();
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const hasDirtyEntities = !! dirtyEntityRecords.length;
+		const isSaving = dirtyEntityRecords.some( ( record ) =>
+			isSavingEntityRecord( record.kind, record.name, record.key )
+		);
+		if ( ! hasDirtyEntities || isSaving ) {
+			return;
+		}
+		if ( hasNonPostEntityChanges() ) {
+			setIsSaveViewOpened( true );
+		} else if ( ! isPostSavingLocked() ) {
+			savePost();
+		}
+	} );
+
+	return null;
+}

package/src/components/save-panel/index.js

@@ -15,6 +15,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,6 +29,7 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
 const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
@@ -47,7 +50,7 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const additionalPrompt = (
 		<p>
 			{ sprintf(
-				/* translators: %1$s: The name of active theme, %2$s: The name of theme to be activated. */
+				/* translators: 1: The name of active theme, 2: The name of theme to be activated. */
 				__(
 					'Saving your changes will change your active theme from %1$s to %2$s.'
 				),
@@ -87,41 +90,36 @@ const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 };
 
 export default function SavePanel() {
-	const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect(
-		( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-				isResolving,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const isActivatingTheme = isResolving( 'activateTheme' );
-			const { isSaveViewOpened, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
+	const { isSaveViewOpen, isDirty, isSaving } = useSelect( ( select ) => {
+		const {
+			__experimentalGetDirtyEntityRecords,
+			isSavingEntityRecord,
+			isResolving,
+		} = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const isActivatingTheme = isResolving( 'activateTheme' );
+		const { isSaveViewOpened } = unlock( select( editSiteStore ) );
 
-			// The currently selected entity to display.
-			// Typically template or template part in the site editor.
-			return {
-				isSaveViewOpen: isSaveViewOpened(),
-				canvasMode: getCanvasMode(),
-				isDirty: dirtyEntityRecords.length > 0,
-				isSaving:
-					dirtyEntityRecords.some( ( record ) =>
-						isSavingEntityRecord(
-							record.kind,
-							record.name,
-							record.key
-						)
-					) || isActivatingTheme,
-			};
-		},
-		[]
-	);
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isSaveViewOpen: isSaveViewOpened(),
+			isDirty: dirtyEntityRecords.length > 0,
+			isSaving:
+				dirtyEntityRecords.some( ( record ) =>
+					isSavingEntityRecord( record.kind, record.name, record.key )
+				) || isActivatingTheme,
+		};
+	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 	const onClose = () => setIsSaveViewOpened( false );
+	useEffect( () => {
+		setIsSaveViewOpened( false );
+	}, [ canvas, setIsSaveViewOpened ] );
 
-	if ( canvasMode === 'view' ) {
+	if ( canvas === 'view' ) {
 		return isSaveViewOpen ? (
 			<Modal
 				className="edit-site-save-panel__modal"

package/src/components/sidebar/index.js

@@ -55,7 +55,7 @@ function createNavState() {
 	};
 }
 
-function SidebarContentWrapper( { children } ) {
+function SidebarContentWrapper( { children, shouldAnimate } ) {
 	const navState = useContext( SidebarNavigationContext );
 	const wrapperRef = useRef();
 	const [ navAnimation, setNavAnimation ] = useState( null );
@@ -66,10 +66,19 @@ function SidebarContentWrapper( { children } ) {
 		setNavAnimation( direction );
 	}, [ navState ] );
 
-	const wrapperCls = clsx( 'edit-site-sidebar__screen-wrapper', {
-		'slide-from-left': navAnimation === 'back',
-		'slide-from-right': navAnimation === 'forward',
-	} );
+	const wrapperCls = clsx(
+		'edit-site-sidebar__screen-wrapper',
+		/*
+		 * Some panes do not have sub-panes and therefore
+		 * should not animate when clicked on.
+		 */
+		shouldAnimate
+			? {
+					'slide-from-left': navAnimation === 'back',
+					'slide-from-right': navAnimation === 'forward',
+			  }
+			: {}
+	);
 
 	return (
 		<div ref={ wrapperRef } className={ wrapperCls }>
@@ -78,13 +87,20 @@ function SidebarContentWrapper( { children } ) {
 	);
 }
 
-export default function SidebarContent( { routeKey, children } ) {
+export default function SidebarContent( {
+	routeKey,
+	shouldAnimate,
+	children,
+} ) {
 	const [ navState ] = useState( createNavState );
 
 	return (
 		<SidebarNavigationContext.Provider value={ navState }>
 			<div className="edit-site-sidebar__content">
-				<SidebarContentWrapper key={ routeKey }>
+				<SidebarContentWrapper
+					shouldAnimate={ shouldAnimate }
+					key={ routeKey }
+				>
 					{ children }
 				</SidebarContentWrapper>
 			</div>

package/src/components/sidebar-dataviews/default-views.js

@@ -31,9 +31,6 @@ export const defaultLayouts = {
 		layout: {
 			primaryField: 'title',
 			styles: {
-				'featured-image': {
-					width: '1%',
-				},
 				title: {
 					maxWidth: 300,
 				},
@@ -42,14 +39,14 @@ export const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 			primaryField: 'title',
 		},
 	},
 	[ LAYOUT_LIST ]: {
 		layout: {
 			primaryField: 'title',
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 		},
 	},
 };

package/src/components/sidebar-global-styles-wrapper/index.js

@@ -0,0 +1,150 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useMemo, useState } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesUI from '../global-styles/ui';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+import StyleBook from '../style-book';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
+const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';
+
+const GlobalStylesPageActions = ( {
+	isStyleBookOpened,
+	setIsStyleBookOpened,
+} ) => {
+	return (
+		<Menu
+			trigger={
+				<Button __next40pxDefaultSize variant="tertiary" size="compact">
+					{ __( 'Preview' ) }
+				</Button>
+			}
+		>
+			<Menu.RadioItem
+				value
+				checked={ isStyleBookOpened }
+				name="styles-preview-actions"
+				onChange={ () => setIsStyleBookOpened( true ) }
+				defaultChecked
+			>
+				<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
+				<Menu.ItemHelpText>
+					{ __( 'Preview blocks and styles.' ) }
+				</Menu.ItemHelpText>
+			</Menu.RadioItem>
+			<Menu.RadioItem
+				value={ false }
+				checked={ ! isStyleBookOpened }
+				name="styles-preview-actions"
+				onChange={ () => setIsStyleBookOpened( false ) }
+			>
+				<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
+				<Menu.ItemHelpText>
+					{ __( 'Preview your site.' ) }
+				</Menu.ItemHelpText>
+			</Menu.RadioItem>
+		</Menu>
+	);
+};
+
+export default function GlobalStylesUIWrapper() {
+	const { params } = useLocation();
+	const history = useHistory();
+	const { canvas = 'view' } = params;
+	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const pathWithPrefix = params.path;
+	const [ path, onPathChange ] = useMemo( () => {
+		const processedPath = pathWithPrefix.substring(
+			GLOBAL_STYLES_PATH_PREFIX.length
+		);
+		return [
+			processedPath ? processedPath : '/',
+			( newPath ) => {
+				history.push( {
+					path:
+						! newPath || newPath === '/'
+							? GLOBAL_STYLES_PATH_PREFIX
+							: `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
+				} );
+			},
+		];
+	}, [ pathWithPrefix, history ] );
+
+	return (
+		<>
+			<Page
+				actions={
+					! isMobileViewport ? (
+						<GlobalStylesPageActions
+							isStyleBookOpened={ isStyleBookOpened }
+							setIsStyleBookOpened={ setIsStyleBookOpened }
+						/>
+					) : null
+				}
+				className="edit-site-styles"
+				title={ __( 'Styles' ) }
+			>
+				<GlobalStylesUI path={ path } onPathChange={ onPathChange } />
+			</Page>
+			{ canvas === 'view' && isStyleBookOpened && (
+				<StyleBook
+					enableResizing={ false }
+					showCloseButton={ false }
+					showTabs={ false }
+					isSelected={ ( blockName ) =>
+						// Match '/blocks/core%2Fbutton' and
+						// '/blocks/core%2Fbutton/typography', but not
+						// '/blocks/core%2Fbuttons'.
+						path ===
+							`/wp_global_styles/blocks/${ encodeURIComponent(
+								blockName
+							) }` ||
+						path.startsWith(
+							`/wp_global_styles/blocks/${ encodeURIComponent(
+								blockName
+							) }/`
+						)
+					}
+					path={ path }
+					onSelect={ ( blockName ) => {
+						if (
+							STYLE_BOOK_COLOR_GROUPS.find(
+								( group ) => group.slug === blockName
+							)
+						) {
+							// Go to color palettes Global Styles.
+							onPathChange( '/colors/palette' );
+							return;
+						}
+						if ( blockName === 'typography' ) {
+							// Go to typography Global Styles.
+							onPathChange( '/typography' );
+							return;
+						}
+
+						// Now go to the selected block.
+						onPathChange(
+							`/blocks/${ encodeURIComponent( blockName ) }`
+						);
+					} }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/sidebar-global-styles-wrapper/style.scss

@@ -0,0 +1,35 @@
+.edit-site-styles .edit-site-page-content {
+	.edit-site-global-styles-screen-root {
+		box-shadow: none;
+		& > div > hr {
+			display: none;
+		}
+	}
+	.edit-site-global-styles-sidebar__navigator-provider {
+		.components-tools-panel {
+			border-top: none;
+		}
+		overflow-y: auto;
+		padding-left: 0;
+		padding-right: 0;
+
+		.edit-site-global-styles-sidebar__navigator-screen {
+			padding-top: $grid-unit-15;
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
+			padding-bottom: $grid-unit-15;
+			outline: none;
+		}
+	}
+	.edit-site-page-header {
+		padding-left: $grid-unit-60;
+		padding-right: $grid-unit-60;
+		@container (max-width: 430px) {
+			padding-left: $grid-unit-30;
+			padding-right: $grid-unit-30;
+		}
+	}
+	.edit-site-sidebar-button {
+		color: $gray-900;
+	}
+}

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

@@ -7,7 +7,7 @@
 
 	&:hover,
 	&:focus,
-	&[aria-current] {
+	&[aria-current="true"] {
 		color: $gray-200;
 		background: $gray-800;
 
@@ -16,7 +16,7 @@
 		}
 	}
 
-	&[aria-current] {
+	&[aria-current="true"] {
 		background: var(--wp-admin-theme-color);
 		color: $white;
 	}

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

@@ -109,7 +109,8 @@ export default function SidebarNavigationScreen( {
 						{ ! isPreviewingTheme()
 							? title
 							: sprintf(
-									'Previewing %1$s: %2$s',
+									/* translators: 1: theme name. 2: title */
+									__( 'Previewing %1$s: %2$s' ),
 									previewingThemeName,
 									title
 							  ) }