@wordpress/edit-site 5.9.0 → 5.11.0

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

@@ -19,6 +19,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 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
@@ -27,30 +29,46 @@ 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 ) => {
-	const { canvasMode } = useSelect( ( select ) => {
+	const { canvasMode, dashboardLink } = useSelect( ( select ) => {
 		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 siteIconButtonProps = {
-		label: __( 'Open Admin Sidebar' ),
-		onClick: () => {
-			if ( canvasMode === 'edit' ) {
-				clearSelectedBlock();
-				setCanvasMode( 'view' );
-			}
-		},
-	};
+	const isBackToDashboardButton = canvasMode === 'view';
+	const siteIconButtonProps = isBackToDashboardButton
+		? {
+				href: dashboardLink,
+				label: __( 'Go back to the Dashboard' ),
+		  }
+		: {
+				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,
@@ -69,65 +87,77 @@ const SiteHub = forwardRef( ( props, ref ) => {
 				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',
+						} }
 					>
+						<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>
+
+					<AnimatePresence>
 						<motion.div
-							initial={ false }
+							layout={ canvasMode === 'edit' }
 							animate={ {
-								scale: canvasMode === 'view' ? 0.5 : 1,
+								opacity: canvasMode === 'view' ? 1 : 0,
 							} }
-							whileHover={ {
-								scale: canvasMode === 'view' ? 0.5 : 0.96,
+							exit={ {
+								opacity: 0,
 							} }
+							className="edit-site-site-hub__site-title"
 							transition={ {
 								type: 'tween',
-								duration: disableMotion
-									? 0
-									: HUB_ANIMATION_DURATION,
+								duration: disableMotion ? 0 : 0.2,
 								ease: 'easeOut',
+								delay: canvasMode === 'view' ? 0.1 : 0,
 							} }
 						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+							{ decodeEntities( siteTitle ) }
 						</motion.div>
-					</Button>
-				</motion.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>
+					</AnimatePresence>
+				</HStack>
+				{ 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/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 {
@@ -36,8 +36,6 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 	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>
+		/>
 	);
 }
 
@@ -134,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>
 	);
 }

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

@@ -1,9 +1,36 @@
+$actions-height: 92px;
+
+.edit-site-start-template-options__modal {
+	.edit-site-start-template-options__modal__actions {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: $actions-height;
+		background-color: $white;
+		margin-left: - $grid-unit-40;
+		margin-right: - $grid-unit-40;
+		padding-left: $grid-unit-40;
+		padding-right: $grid-unit-40;
+		border-top: 1px solid $gray-300;
+		z-index: z-index(".edit-site-start-template-options__modal__actions");
+	}
+
+	.block-editor-block-patterns-list {
+		// Since the actions container is positioned absolutely,
+		// this padding bottom ensures that the content wrapper will properly
+		// detect overflowing content and start showing scrollbars at the right
+		// moment. Without this padding, the content would render under the actions
+		// bar without causing the wrapper to show a scrollbar.
+		padding-bottom: $actions-height;
+	}
+}
+
 .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;
+	padding-top: $border-width-focus-fallback;
 
 	@include break-medium() {
 		column-count: 3;
@@ -28,24 +55,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;
-			min-height: $grid-unit-50 * 4;
-			&::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

@@ -13,6 +13,7 @@ import {
 	Disabled,
 	TabPanel,
 } from '@wordpress/components';
+
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	getCategories,
@@ -29,7 +30,8 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, memo } from '@wordpress/element';
+import { useMemo, useState, memo } from '@wordpress/element';
+import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -161,7 +163,14 @@ function getExamples() {
 	return [ headingsExample, ...otherExamples ];
 }
 
-function StyleBook( { isSelected, onSelect } ) {
+function StyleBook( {
+	enableResizing = true,
+	isSelected,
+	onClick,
+	onSelect,
+	showCloseButton = true,
+	showTabs = true,
+} ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
@@ -192,10 +201,16 @@ function StyleBook( { isSelected, onSelect } ) {
 	);
 
 	return (
-		<EditorCanvasContainer closeButtonLabel={ __( 'Close Style Book' ) }>
+		<EditorCanvasContainer
+			enableResizing={ enableResizing }
+			closeButtonLabel={
+				showCloseButton ? __( 'Close Style Book' ) : null
+			}
+		>
 			<div
 				className={ classnames( 'edit-site-style-book', {
 					'is-wide': sizes.width > 600,
+					'is-button': !! onClick,
 				} ) }
 				style={ {
 					color: textColor,
@@ -203,53 +218,125 @@ function StyleBook( { isSelected, onSelect } ) {
 				} }
 			>
 				{ resizeObserver }
-				<TabPanel
-					className="edit-site-style-book__tab-panel"
-					tabs={ tabs }
-				>
-					{ ( tab ) => (
-						<Iframe
-							className="edit-site-style-book__iframe"
-							name="style-book-canvas"
-							tabIndex={ 0 }
-						>
-							<EditorStyles styles={ settings.styles } />
-							<style>
-								{
-									// Forming a "block formatting context" to prevent margin collapsing.
-									// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-									`.is-root-container { display: flow-root; }
-											body { position: relative; padding: 32px !important; }` +
-										STYLE_BOOK_IFRAME_STYLES
-								}
-							</style>
-							<Examples
-								className={ classnames(
-									'edit-site-style-book__examples',
-									{
-										'is-wide': sizes.width > 600,
-									}
-								) }
-								examples={ examples }
+				{ showTabs ? (
+					<TabPanel
+						className="edit-site-style-book__tab-panel"
+						tabs={ tabs }
+					>
+						{ ( tab ) => (
+							<StyleBookBody
 								category={ tab.name }
-								label={ sprintf(
-									// translators: %s: Category of blocks, e.g. Text.
-									__(
-										'Examples of blocks in the %s category'
-									),
-									tab.title
-								) }
+								examples={ examples }
 								isSelected={ isSelected }
 								onSelect={ onSelect }
+								settings={ settings }
+								sizes={ sizes }
+								title={ tab.title }
 							/>
-						</Iframe>
-					) }
-				</TabPanel>
+						) }
+					</TabPanel>
+				) : (
+					<StyleBookBody
+						examples={ examples }
+						isSelected={ isSelected }
+						onClick={ onClick }
+						onSelect={ onSelect }
+						settings={ settings }
+						sizes={ sizes }
+					/>
+				) }
 			</div>
 		</EditorCanvasContainer>
 	);
 }
 
+const StyleBookBody = ( {
+	category,
+	examples,
+	isSelected,
+	onClick,
+	onSelect,
+	settings,
+	sizes,
+	title,
+} ) => {
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	// The presence of an `onClick` prop indicates that the Style Book is being used as a button.
+	// In this case, add additional props to the iframe to make it behave like a button.
+	const buttonModeProps = {
+		role: 'button',
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			const { keyCode } = event;
+			if ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) {
+				event.preventDefault();
+				onClick( event );
+			}
+		},
+		onClick: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+			if ( onClick ) {
+				event.preventDefault();
+				onClick( event );
+			}
+		},
+		readonly: true,
+	};
+
+	const buttonModeStyles = onClick
+		? 'body { cursor: pointer; } body * { pointer-events: none; }'
+		: '';
+
+	return (
+		<Iframe
+			className={ classnames( 'edit-site-style-book__iframe', {
+				'is-focused': isFocused && !! onClick,
+				'is-button': !! onClick,
+			} ) }
+			name="style-book-canvas"
+			tabIndex={ 0 }
+			{ ...( onClick ? buttonModeProps : {} ) }
+		>
+			<EditorStyles styles={ settings.styles } />
+			<style>
+				{
+					// Forming a "block formatting context" to prevent margin collapsing.
+					// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+					`.is-root-container { display: flow-root; }
+						body { position: relative; padding: 32px !important; }` +
+						STYLE_BOOK_IFRAME_STYLES +
+						buttonModeStyles
+				}
+			</style>
+			<Examples
+				className={ classnames( 'edit-site-style-book__examples', {
+					'is-wide': sizes.width > 600,
+				} ) }
+				examples={ examples }
+				category={ category }
+				label={
+					title
+						? sprintf(
+								// translators: %s: Category of blocks, e.g. Text.
+								__( 'Examples of blocks in the %s category' ),
+								title
+						  )
+						: __( 'Examples of blocks' )
+				}
+				isSelected={ isSelected }
+				onSelect={ onSelect }
+			/>
+		</Iframe>
+	);
+};
+
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
 		const composite = useCompositeState( { orientation: 'vertical' } );
@@ -260,7 +347,9 @@ const Examples = memo(
 				aria-label={ label }
 			>
 				{ examples
-					.filter( ( example ) => example.category === category )
+					.filter( ( example ) =>
+						category ? example.category === category : true
+					)
 					.map( ( example ) => (
 						<Example
 							key={ example.name }
@@ -270,7 +359,7 @@ const Examples = memo(
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
 							onClick={ () => {
-								onSelect( example.name );
+								onSelect?.( example.name );
 							} }
 						/>
 					) ) }

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

@@ -1,3 +1,22 @@
+.edit-site-style-book {
+	// Ensure the style book fills the available vertical space.
+	// This is useful when the style book is used to fill a frame.
+	height: 100%;
+	&.is-button {
+		border-radius: $radius-block-ui * 4;
+	}
+}
+
+.edit-site-style-book__iframe {
+	&.is-button {
+		border-radius: $radius-block-ui * 4;
+	}
+	&.is-focused {
+		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+	}
+}
+
 .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,12 +4,15 @@
 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();

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();

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -3,11 +3,14 @@
  */
 import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { useEffect, useRef } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation, useHistory } from '../routes';
+import { unlock } from '../../private-apis';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export function getPathFromURL( urlParams ) {
 	let path = urlParams?.path ?? '/';
@@ -17,6 +20,7 @@ export function getPathFromURL( urlParams ) {
 		switch ( urlParams.postType ) {
 			case 'wp_template':
 			case 'wp_template_part':
+			case 'page':
 				path = `/${ encodeURIComponent(
 					urlParams.postType
 				) }/${ encodeURIComponent( urlParams.postId ) }`;
@@ -73,6 +77,15 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
+		} else if (
+			navigatorLocation.path.startsWith( '/page/' ) &&
+			navigatorParams?.postId
+		) {
+			updateUrlParams( {
+				postType: 'page',
+				postId: navigatorParams?.postId,
+				path: undefined,
+			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,