@wordpress/edit-site 5.8.0 → 5.9.0

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -4,9 +4,9 @@
 import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-
-import { useState, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -15,19 +15,39 @@ import DefaultSidebar from './default-sidebar';
 import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
+import { unlock } from '../../private-apis';
 
 export default function GlobalStylesSidebar() {
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
-	const editorMode = useSelect(
-		( select ) => select( editSiteStore ).getEditorMode(),
+	const { shouldClearCanvasContainerView, isStyleBookOpened } = useSelect(
+		( select ) => {
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const _isVisualEditorMode =
+				'visual' === select( editSiteStore ).getEditorMode();
+
+			return {
+				isStyleBookOpened:
+					'style-book' ===
+					unlock(
+						select( editSiteStore )
+					).getEditorCanvasContainerView(),
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core/edit-site' ) ||
+					! _isVisualEditorMode,
+			};
+		},
 		[]
 	);
 
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
 	useEffect( () => {
-		if ( editorMode !== 'visual' ) {
-			setIsStyleBookOpened( false );
+		if ( shouldClearCanvasContainerView ) {
+			setEditorCanvasContainerView( undefined );
 		}
-	}, [ editorMode ] );
+	}, [ shouldClearCanvasContainerView ] );
+
 	return (
 		<DefaultSidebar
 			className="edit-site-global-styles-sidebar"
@@ -46,10 +66,12 @@ export default function GlobalStylesSidebar() {
 							icon={ seen }
 							label={ __( 'Style Book' ) }
 							isPressed={ isStyleBookOpened }
-							disabled={ editorMode !== 'visual' }
-							onClick={ () => {
-								setIsStyleBookOpened( ! isStyleBookOpened );
-							} }
+							disabled={ shouldClearCanvasContainerView }
+							onClick={ () =>
+								setEditorCanvasContainerView(
+									isStyleBookOpened ? undefined : 'style-book'
+								)
+							}
 						/>
 					</FlexItem>
 					<FlexItem>
@@ -58,10 +80,7 @@ export default function GlobalStylesSidebar() {
 				</Flex>
 			}
 		>
-			<GlobalStylesUI
-				isStyleBookOpened={ isStyleBookOpened }
-				onCloseStyleBook={ () => setIsStyleBookOpened( false ) }
-			/>
+			<GlobalStylesUI />
 		</DefaultSidebar>
 	);
 }

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

@@ -10,14 +10,15 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useReducedMotion } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
-import { forwardRef } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -29,7 +30,7 @@ import { unlock } from '../../private-apis';
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
-	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
+	const { canvasMode } = useSelect( ( select ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
@@ -41,20 +42,15 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	const disableMotion = useReducedMotion();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-	const isBackToDashboardButton = canvasMode === 'view';
-	const showLabels = canvasMode !== 'edit';
-	const siteIconButtonProps = isBackToDashboardButton
-		? {
-				href: dashboardLink || 'index.php',
-				label: __( 'Go back to the Dashboard' ),
-		  }
-		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setCanvasMode( 'view' );
-				},
-		  };
+	const siteIconButtonProps = {
+		label: __( 'Open Admin Sidebar' ),
+		onClick: () => {
+			if ( canvasMode === 'edit' ) {
+				clearSelectedBlock();
+				setCanvasMode( 'view' );
+			}
+		},
+	};
 	const siteTitle = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
@@ -66,7 +62,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 			ref={ ref }
 			{ ...props }
 			className={ classnames( 'edit-site-site-hub', props.className ) }
-			layout
+			initial={ false }
 			transition={ {
 				type: 'tween',
 				duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
@@ -91,15 +87,47 @@ const SiteHub = forwardRef( ( props, ref ) => {
 						{ ...siteIconButtonProps }
 						className="edit-site-layout__view-mode-toggle"
 					>
-						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						<motion.div
+							initial={ false }
+							animate={ {
+								scale: canvasMode === 'view' ? 0.5 : 1,
+							} }
+							whileHover={ {
+								scale: canvasMode === 'view' ? 0.5 : 0.96,
+							} }
+							transition={ {
+								type: 'tween',
+								duration: disableMotion
+									? 0
+									: HUB_ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</motion.div>
 					</Button>
 				</motion.div>
 
-				{ showLabels && (
-					<div className="edit-site-site-hub__site-title">
+				<AnimatePresence>
+					<motion.div
+						layout={ canvasMode === 'edit' }
+						animate={ {
+							opacity: canvasMode === 'view' ? 1 : 0,
+						} }
+						exit={ {
+							opacity: 0,
+						} }
+						className="edit-site-site-hub__site-title"
+						transition={ {
+							type: 'tween',
+							duration: disableMotion ? 0 : 0.2,
+							ease: 'easeOut',
+							delay: canvasMode === 'view' ? 0.1 : 0,
+						} }
+					>
 						{ decodeEntities( siteTitle ) }
-					</div>
-				) }
+					</motion.div>
+				</AnimatePresence>
 			</HStack>
 		</motion.div>
 	);

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

@@ -14,22 +14,17 @@ import { store as coreDataStore } from '@wordpress/core-data';
 
 function SiteIcon( { className } ) {
 	const { isRequestingSite, siteIconUrl } = useSelect( ( select ) => {
-		const { getEntityRecord, isResolving } = select( coreDataStore );
-		const siteData =
-			getEntityRecord( 'root', '__unstableBase', undefined ) || {};
+		const { getEntityRecord } = select( coreDataStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
-			isRequestingSite: isResolving( 'core', 'getEntityRecord', [
-				'root',
-				'__unstableBase',
-				undefined,
-			] ),
-			siteIconUrl: siteData.site_icon_url,
+			isRequestingSite: ! siteData,
+			siteIconUrl: siteData?.site_icon_url,
 		};
 	}, [] );
 
 	if ( isRequestingSite && ! siteIconUrl ) {
-		return null;
+		return <div className="edit-site-site-icon__image" />;
 	}
 
 	const icon = siteIconUrl ? (
@@ -41,7 +36,7 @@ function SiteIcon( { className } ) {
 	) : (
 		<Icon
 			className="edit-site-site-icon__icon"
-			size="32px"
+			size="48px"
 			icon={ wordpress }
 		/>
 	);

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

@@ -3,8 +3,13 @@
 }
 
 .edit-site-site-icon__image {
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-	border-radius: $radius-block-ui;
+	width: 100%;
+	height: auto;
+	border-radius: $radius-block-ui * 2;
 	object-fit: cover;
+	background: #333;
+
+	.edit-site-layout.is-full-canvas.is-edit-mode & {
+		border-radius: 0;
+	}
 }

package/src/components/start-template-options/index.js

@@ -32,7 +32,7 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 				ignore_empty: true,
 			} ),
 		} ).then( ( { content } ) => setTemplateContent( content.raw ) );
-	}, [ slug ] );
+	}, [ isCustom, slug ] );
 	return templateContent;
 }
 
@@ -121,6 +121,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
+			isFullScreen={ true }
 		>
 			<div className="edit-site-start-template-options__modal-content">
 				<PatternSelection
@@ -146,28 +147,28 @@ export default function StartTemplateOptions() {
 	const [ modalState, setModalState ] = useState(
 		START_TEMPLATE_MODAL_STATES.INITIAL
 	);
-	const { shouldOpenModel, slug, isCustom, postType } = useSelect(
+	const { shouldOpenModal, slug, isCustom, postType } = useSelect(
 		( select ) => {
 			const { getEditedPostType, getEditedPostId } =
 				select( editSiteStore );
 			const _postType = getEditedPostType();
 			const postId = getEditedPostId();
-			const {
-				__experimentalGetDirtyEntityRecords,
-				getEditedEntityRecord,
-			} = select( coreStore );
+			const { getEditedEntityRecord, hasEditsForEntityRecord } =
+				select( coreStore );
 			const templateRecord = getEditedEntityRecord(
 				'postType',
 				_postType,
 				postId
 			);
-
-			const hasDirtyEntityRecords =
-				__experimentalGetDirtyEntityRecords().length > 0;
+			const hasEdits = hasEditsForEntityRecord(
+				'postType',
+				_postType,
+				postId
+			);
 
 			return {
-				shouldOpenModel:
-					! hasDirtyEntityRecords &&
+				shouldOpenModal:
+					! hasEdits &&
 					'' === templateRecord.content &&
 					'wp_template' === _postType &&
 					! select( preferencesStore ).get(
@@ -184,7 +185,7 @@ export default function StartTemplateOptions() {
 
 	if (
 		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
-			! shouldOpenModel ) ||
+			! shouldOpenModal ) ||
 		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
 	) {
 		return null;

package/src/components/start-template-options/style.scss

@@ -1,39 +1,20 @@
-.edit-site-start-template-options__modal.components-modal__frame {
-	// To keep modal dimensions consistent as subsections are navigated, width
-	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
+.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus;
+
 	@include break-medium() {
-		width: 50%;
+		column-count: 3;
 	}
-	@include break-large() {
-		height: fit-content;
-	}
-}
 
-.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
-	display: grid;
-	width: 100%;
-	margin-top: $grid-unit-05;
-	gap: $grid-unit-30;
-	grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
+	@include break-wide() {
+		column-count: 4;
+	}
 
 	.block-editor-block-patterns-list__list-item {
 		break-inside: avoid-column;
-		margin-bottom: 0;
-		width: 100%;
-		aspect-ratio: 3/4;
-
-		.block-editor-block-preview__container {
-			height: 100%;
-		}
-
-		.block-editor-block-preview__content {
-			width: 100%;
-			position: absolute;
-		}
 
 		.block-editor-block-patterns-list__item-title {
 			display: none;
@@ -54,6 +35,7 @@
 			position: absolute;
 			padding: 0;
 			background: #f0f0f0;
+			min-height: $grid-unit-50 * 4;
 			&::after {
 				width: 100%;
 				top: 50%;

package/src/components/style-book/index.js

@@ -7,14 +7,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	Button,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
 	Disabled,
 	TabPanel,
-	createSlotFill,
-	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import {
@@ -31,29 +28,19 @@ import {
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { closeSmall } from '@wordpress/icons';
-import {
-	useResizeObserver,
-	useFocusOnMount,
-	useFocusReturn,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useResizeObserver } from '@wordpress/compose';
 import { useMemo, memo } from '@wordpress/element';
-import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
+import EditorCanvasContainer from '../editor-canvas-container';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 
-const SLOT_FILL_NAME = 'EditSiteStyleBook';
-const { Slot: StyleBookSlot, Fill: StyleBookFill } =
-	createSlotFill( SLOT_FILL_NAME );
-
 // The content area of the Style Book is rendered within an iframe so that global styles
 // are applied to elements within the entire content area. To support elements that are
 // not part of the block previews, such as headings and layout for the block previews,
@@ -174,11 +161,8 @@ function getExamples() {
 	return [ headingsExample, ...otherExamples ];
 }
 
-function StyleBook( { isSelected, onSelect, onClose } ) {
+function StyleBook( { isSelected, onSelect } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-	const sectionFocusReturnRef = useFocusReturn();
-
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const examples = useMemo( getExamples, [] );
@@ -207,17 +191,9 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 		[ originalSettings ]
 	);
 
-	function closeOnEscape( event ) {
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			onClose();
-		}
-	}
-
 	return (
-		<StyleBookFill>
-			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-			<section
+		<EditorCanvasContainer closeButtonLabel={ __( 'Close Style Book' ) }>
+			<div
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
 				} ) }
@@ -225,21 +201,8 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					color: textColor,
 					background: backgroundColor,
 				} }
-				aria-label={ __( 'Style Book' ) }
-				onKeyDown={ closeOnEscape }
-				ref={ useMergeRefs( [
-					sectionFocusReturnRef,
-					focusOnMountRef,
-				] ) }
 			>
 				{ resizeObserver }
-				<Button
-					className="edit-site-style-book__close-button"
-					icon={ closeSmall }
-					label={ __( 'Close Style Book' ) }
-					onClick={ onClose }
-					showTooltip={ false }
-				/>
 				<TabPanel
 					className="edit-site-style-book__tab-panel"
 					tabs={ tabs }
@@ -282,8 +245,8 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 						</Iframe>
 					) }
 				</TabPanel>
-			</section>
-		</StyleBookFill>
+			</div>
+		</EditorCanvasContainer>
 	);
 }
 
@@ -365,11 +328,4 @@ const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
 	);
 };
 
-function useHasStyleBook() {
-	const fills = useSlotFills( SLOT_FILL_NAME );
-	return !! fills?.length;
-}
-
-StyleBook.Slot = StyleBookSlot;
 export default StyleBook;
-export { useHasStyleBook };

package/src/components/style-book/style.scss

@@ -1,21 +1,3 @@
-.edit-site-style-book {
-	background: $white; // Fallback color, overridden by JavaScript.
-	border-radius: $radius-block-ui;
-	bottom: 0;
-	left: 0;
-	overflow: hidden;
-	position: absolute;
-	right: 0;
-	top: 0;
-	transition: all 0.3s; // Match .block-editor-iframe__body transition.
-}
-
-.edit-site-style-book__close-button {
-	position: absolute;
-	right: $grid-unit-10;
-	top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2
-}
-
 .edit-site-style-book__tab-panel {
 	.components-tab-panel__tabs {
 		background: $white;

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -14,16 +14,17 @@ import { store as editSiteStore } from '../../store';
 export default function useInitEditedEntityFromURL() {
 	const { params: { postId, postType } = {} } = useLocation();
 	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
-		const { getSite } = select( coreDataStore );
+		const { getSite, getUnstableBase } = select( coreDataStore );
 		const siteData = getSite();
+		const base = getUnstableBase();
 
 		return {
-			isRequestingSite: ! siteData,
+			isRequestingSite: ! base,
 			homepageId:
 				siteData?.show_on_front === 'page'
 					? siteData.page_on_front
 					: null,
-			url: siteData?.url,
+			url: base?.home,
 		};
 	}, [] );
 

package/src/components/template-details/index.js

@@ -102,6 +102,7 @@ export default function TemplateDetails( { template, onClose } ) {
 			<Button
 				className="edit-site-template-details__show-all-button"
 				{ ...browseAllLinkProps }
+				onClick={ () => onClose() }
 			>
 				{ template?.type === 'wp_template'
 					? __( 'Manage all templates' )

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

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { post, page, layout, symbolFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,6 +17,13 @@ import { useHistory } from '../../components/routes';
 
 const { useCommandLoader } = unlock( privateApis );
 
+const icons = {
+	post,
+	page,
+	wp_template: layout,
+	wp_template_part: symbolFilled,
+};
+
 const getNavigationCommandLoaderPerPostType = ( postType ) =>
 	function useNavigationCommandLoader( { search } ) {
 		const supportsSearch = ! [ 'wp_template', 'wp_template_part' ].includes(
@@ -51,6 +59,7 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 					label: record.title?.rendered
 						? record.title?.rendered
 						: __( '(no title)' ),
+					icon: icons[ postType ],
 					callback: ( { close } ) => {
 						history.push( {
 							postType,

package/src/hooks/commands/use-wp-admin-commands.js

@@ -6,6 +6,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import { useMemo } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -43,8 +44,9 @@ const getWPAdminAddCommandLoader = ( postType ) =>
 		const commands = useMemo(
 			() => [
 				{
-					name: 'core/wp-admin/add-' + postType,
+					name: 'core/wp-admin/add-' + postType + '-' + search,
 					label,
+					icon: plus,
 					callback: () => {
 						document.location.href = addQueryArgs( newPostLink, {
 							post_type: postType,

package/src/store/private-actions.js

@@ -27,3 +27,17 @@ export const setCanvasMode =
 			dispatch.setIsListViewOpened( true );
 		}
 	};
+
+/**
+ * Action that switches the editor canvas container view.
+ *
+ * @param {?string} view Editor canvas container view.
+ */
+export const setEditorCanvasContainerView =
+	( view ) =>
+	( { dispatch } ) => {
+		dispatch( {
+			type: 'SET_EDITOR_CANVAS_CONTAINER_VIEW',
+			view,
+		} );
+	};

package/src/store/private-selectors.js

@@ -8,3 +8,14 @@
 export function getCanvasMode( state ) {
 	return state.canvasMode;
 }
+
+/**
+ * Returns the editor canvas container view.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} Editor canvas container view.
+ */
+export function getEditorCanvasContainerView( state ) {
+	return state.editorCanvasContainerView;
+}

package/src/store/reducer.js

@@ -140,6 +140,23 @@ function canvasMode( state = 'init', action ) {
 	return state;
 }
 
+/**
+ * Reducer used to track the site editor canvas container view.
+ * Default is `undefined`, denoting the default, visual block editor.
+ * This could be, for example, `'style-book'` (the style book).
+ *
+ * @param {string|undefined} state  Current state.
+ * @param {Object}           action Dispatched action.
+ */
+function editorCanvasContainerView( state = undefined, action ) {
+	switch ( action.type ) {
+		case 'SET_EDITOR_CANVAS_CONTAINER_VIEW':
+			return action.view;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -148,4 +165,5 @@ export default combineReducers( {
 	listViewPanel,
 	saveViewPanel,
 	canvasMode,
+	editorCanvasContainerView,
 } );

package/src/style.scss

@@ -31,6 +31,7 @@
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
+@import "./components/editor-canvas-container/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 
 html #wpadminbar {