@wordpress/edit-site 5.8.0 → 5.10.0

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

@@ -10,14 +10,17 @@ 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';
+import { search } from '@wordpress/icons';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
 
 /**
  * Internal dependencies
@@ -26,6 +29,8 @@ import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../private-apis';
 
+const { store: commandsStore } = unlock( commandsPrivateApis );
+
 const HUB_ANIMATION_DURATION = 0.3;
 
 const SiteHub = forwardRef( ( props, ref ) => {
@@ -33,28 +38,37 @@ const SiteHub = forwardRef( ( props, ref ) => {
 		const { getCanvasMode, getSettings } = unlock(
 			select( editSiteStore )
 		);
+
 		return {
 			canvasMode: getCanvasMode(),
-			dashboardLink: getSettings().__experimentalDashboardLink,
+			dashboardLink:
+				getSettings().__experimentalDashboardLink || 'index.php',
 		};
 	}, [] );
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+
 	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',
+				href: dashboardLink,
 				label: __( 'Go back to the Dashboard' ),
 		  }
 		: {
-				label: __( 'Open Navigation Sidebar' ),
-				onClick: () => {
-					clearSelectedBlock();
-					setCanvasMode( 'view' );
+				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
+				role: 'button',
+				label: __( 'Open Navigation' ),
+				onClick: ( event ) => {
+					event.preventDefault();
+					if ( canvasMode === 'edit' ) {
+						clearSelectedBlock();
+						setCanvasMode( 'view' );
+					}
 				},
 		  };
+
 	const siteTitle = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecord( 'root', 'site' )?.title,
@@ -66,40 +80,85 @@ 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,
 				ease: 'easeOut',
 			} }
 		>
-			<HStack
-				justify="flex-start"
-				className="edit-site-site-hub__text-content"
-				spacing="0"
-			>
-				<motion.div
-					className="edit-site-site-hub__view-mode-toggle-container"
-					layout
-					transition={ {
-						type: 'tween',
-						duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
-						ease: 'easeOut',
-					} }
+			<HStack justify="space-between" alignment="center">
+				<HStack
+					justify="flex-start"
+					className="edit-site-site-hub__text-content"
+					spacing="0"
 				>
-					<Button
-						{ ...siteIconButtonProps }
-						className="edit-site-layout__view-mode-toggle"
+					<motion.div
+						className="edit-site-site-hub__view-mode-toggle-container"
+						layout
+						transition={ {
+							type: 'tween',
+							duration: disableMotion
+								? 0
+								: HUB_ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
 					>
-						<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-					</Button>
-				</motion.div>
+						<Button
+							{ ...siteIconButtonProps }
+							className="edit-site-layout__view-mode-toggle"
+						>
+							<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">
-						{ decodeEntities( siteTitle ) }
-					</div>
-				) }
+					<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 ) }
+						</motion.div>
+					</AnimatePresence>
+				</HStack>
+				{ window?.__experimentalEnableCommandCenter &&
+					canvasMode === 'view' && (
+						<Button
+							className="edit-site-site-hub_toggle-command-center"
+							icon={ search }
+							onClick={ () => openCommandCenter() }
+							label={ __( 'Open command center' ) }
+						/>
+					) }
 			</HStack>
 		</motion.div>
 	);

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

@@ -30,3 +30,11 @@
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
 }
+
+.edit-site-site-hub_toggle-command-center {
+	color: $white;
+
+	&:hover {
+		color: $white;
+	}
+}

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Modal } from '@wordpress/components';
+import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import {
@@ -32,12 +32,10 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 				ignore_empty: true,
 			} ),
 		} ).then( ( { content } ) => setTemplateContent( content.raw ) );
-	}, [ slug ] );
+	}, [ isCustom, slug ] );
 	return templateContent;
 }
 
-const START_BLANK_TITLE = __( 'Start blank' );
-
 function useStartPatterns( fallbackContent ) {
 	const { slug, patterns } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
@@ -72,13 +70,6 @@ function useStartPatterns( fallbackContent ) {
 				.map( ( pattern ) => {
 					return { ...pattern, blocks: parse( pattern.content ) };
 				} ),
-			{
-				name: 'start-blank',
-				blocks: parse(
-					'<!-- wp:paragraph --><p></p><!-- /wp:paragraph -->'
-				),
-				title: START_BLANK_TITLE,
-			},
 		];
 	}, [ fallbackContent, slug, patterns ] );
 }
@@ -87,25 +78,15 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
 	const blockPatterns = useStartPatterns( fallbackContent );
 	const shownBlockPatterns = useAsyncList( blockPatterns );
-
 	return (
-		<div
-			className="edit-site-start-template-options__pattern-container"
-			style={ {
-				'--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
+		<BlockPatternsList
+			blockPatterns={ blockPatterns }
+			shownPatterns={ shownBlockPatterns }
+			onClickPattern={ ( pattern, blocks ) => {
+				onChange( blocks, { selection: undefined } );
+				onChoosePattern();
 			} }
-		>
-			<BlockPatternsList
-				blockPatterns={ blockPatterns }
-				shownPatterns={ shownBlockPatterns }
-				onClickPattern={ ( pattern, blocks ) => {
-					onChange( 'start-blank' === pattern.name ? [] : blocks, {
-						selection: undefined,
-					} );
-					onChoosePattern();
-				} }
-			/>
-		</div>
+		/>
 	);
 }
 
@@ -121,6 +102,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
@@ -133,6 +115,17 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 					} }
 				/>
 			</div>
+			<Flex
+				className="edit-site-start-template-options__modal__actions"
+				justify="flex-end"
+				expanded={ false }
+			>
+				<FlexItem>
+					<Button variant="tertiary" onClick={ onClose }>
+						{ __( 'Skip' ) }
+					</Button>
+				</FlexItem>
+			</Flex>
 		</Modal>
 	);
 }
@@ -146,28 +139,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 +177,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,48 @@
-.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 {
+	.components-modal__content {
+		padding-bottom: 0;
 	}
-	@include break-medium() {
-		width: 50%;
+
+	.components-modal__children-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+
+		.edit-site-start-template-options__modal__actions {
+			margin-top: auto;
+			position: sticky;
+			bottom: 0;
+			background-color: $white;
+			margin-left: - $grid-unit-40;
+			margin-right: - $grid-unit-40;
+			padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+			border-top: 1px solid $gray-300;
+			z-index: z-index(".edit-site-start-template-options__modal__actions");
+		}
 	}
-	@include break-large() {
-		height: fit-content;
+
+	.block-editor-block-patterns-list {
+		padding-bottom: $grid-unit-40;
 	}
 }
 
 .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));
+	column-count: 2;
+	column-gap: $grid-unit-30;
 
-	.block-editor-block-patterns-list__list-item {
-		break-inside: avoid-column;
-		margin-bottom: 0;
-		width: 100%;
-		aspect-ratio: 3/4;
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
 
-		.block-editor-block-preview__container {
-			height: 100%;
-		}
+	@include break-medium() {
+		column-count: 3;
+	}
 
-		.block-editor-block-preview__content {
-			width: 100%;
-			position: absolute;
-		}
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
 
 		.block-editor-block-patterns-list__item-title {
 			display: none;
@@ -47,23 +56,4 @@
 			box-shadow: 0 0 0 1px $gray-300;
 		}
 	}
-
-	// The start blank pattern is the last and we are selecting it.
-	.block-editor-block-patterns-list__list-item:nth-last-child(2) {
-		.block-editor-block-preview__container {
-			position: absolute;
-			padding: 0;
-			background: #f0f0f0;
-			&::after {
-				width: 100%;
-				top: 50%;
-				margin-top: -1em;
-				content: var(--wp-edit-site-start-template-options-start-blank);
-				text-align: center;
-			}
-		}
-		iframe {
-			display: none;
-		}
-	}
 }

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

@@ -4,26 +4,30 @@
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
+import { unlock } from '../../private-apis';
+
+const { useLocation } = unlock( routerPrivateApis );
 
 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/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -3,14 +3,16 @@
  */
 import { useEffect, useRef } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { useLocation, useHistory } from '../routes';
 import { unlock } from '../../private-apis';
 
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
 export default function useSyncCanvasModeWithURL() {
 	const history = useHistory();
 	const { params } = useLocation();