@wordpress/edit-site 6.11.0 → 6.12.0

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

@@ -121,17 +121,27 @@ export const SiteHubMobile = memo(
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
 
-		const { homeUrl, siteTitle } = useSelect( ( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			const _site = getEntityRecord( 'root', 'site' );
-			return {
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
-			};
-		}, [] );
+		const { dashboardLink, isBlockTheme, homeUrl, siteTitle } = useSelect(
+			( select ) => {
+				const { getSettings } = unlock( select( editSiteStore ) );
+
+				const { getEntityRecord, getCurrentTheme } =
+					select( coreStore );
+				const _site = getEntityRecord( 'root', 'site' );
+				return {
+					dashboardLink:
+						getSettings().__experimentalDashboardLink ||
+						'index.php',
+					isBlockTheme: getCurrentTheme()?.is_block_theme,
+					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+					siteTitle:
+						! _site?.title && !! _site?.url
+							? filterURLForDisplay( _site?.url )
+							: _site?.title,
+				};
+			},
+			[]
+		);
 		const { open: openCommandCenter } = useDispatch( commandsStore );
 
 		return (
@@ -148,16 +158,23 @@ export const SiteHubMobile = memo(
 						<Button
 							__next40pxDefaultSize
 							ref={ ref }
-							label={ __( 'Go to Site Editor' ) }
 							className="edit-site-layout__view-mode-toggle"
 							style={ {
 								transform: 'scale(0.5)',
 								borderRadius: 4,
 							} }
-							onClick={ () => {
-								history.push( {} );
-								navigate( 'back' );
-							} }
+							{ ...( ! isBlockTheme
+								? {
+										href: dashboardLink,
+										label: __( 'Go to the Dashboard' ),
+								  }
+								: {
+										onClick: () => {
+											history.push( {} );
+											navigate( 'back' );
+										},
+										label: __( 'Go to Site Editor' ),
+								  } ) }
 						>
 							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 						</Button>

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

@@ -20,3 +20,19 @@
 		border-radius: 0;
 	}
 }
+
+.edit-site-editor__view-mode-toggle button:focus {
+	position: relative;
+
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(#{ $border-width } + var(--wp-admin-border-width-focus)) $white;
+	}
+}

package/src/components/style-book/constants.ts

@@ -107,6 +107,11 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
 ];
 
 export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'overview',
+		title: __( 'Overview' ),
+		blocks: [],
+	},
 	{
 		slug: 'text',
 		title: __( 'Text' ),
@@ -249,16 +254,19 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	.edit-site-style-book__example-preview {
 		width: 100%;
 	}
+	
+	.is-wide .edit-site-style-book__example-preview {
+		width: calc(100% - 120px);
+	}
 
 	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
 	.edit-site-style-book__example-preview .block-list-appender {
 		display: none;
 	}
-
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+	:where(.is-root-container > .wp-block:first-child) {
 		margin-top: 0;
 	}
-	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+	:where(.is-root-container > .wp-block:last-child) {
 		margin-bottom: 0;
 	}
 `;

package/src/components/style-book/examples.tsx

@@ -62,6 +62,103 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	return examples;
 }
 
+/**
+ * Returns examples for the overview page.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of block examples.
+ */
+function getOverviewBlockExamples(
+	colors: MultiOriginPalettes
+): BlockExample[] {
+	const examples: BlockExample[] = [];
+
+	// Get theme palette from colors.
+	const themePalette = colors.colors.find(
+		( origin: ColorOrigin ) => origin.slug === 'theme'
+	);
+
+	if ( themePalette ) {
+		const themeColorexample: BlockExample = {
+			name: 'theme-colors',
+			title: __( 'Colors' ),
+			category: 'overview',
+			content: (
+				<ColorExamples colors={ themePalette.colors } type={ colors } />
+			),
+		};
+
+		examples.push( themeColorexample );
+	}
+
+	const headingBlock = createBlock( 'core/heading', {
+		content: __(
+			`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
+		),
+		level: 1,
+	} );
+	const firstParagraphBlock = createBlock( 'core/paragraph', {
+		content: __(
+			`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
+		),
+	} );
+	const secondParagraphBlock = createBlock( 'core/paragraph', {
+		content: __(
+			`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
+		),
+	} );
+
+	const textExample = {
+		name: 'typography',
+		title: __( 'Typography' ),
+		category: 'overview',
+		blocks: [
+			headingBlock,
+			createBlock(
+				'core/group',
+				{
+					layout: {
+						type: 'grid',
+						columnCount: 2,
+						minimumColumnWidth: '12rem',
+					},
+					style: {
+						spacing: {
+							blockGap: '1.5rem',
+						},
+					},
+				},
+				[ firstParagraphBlock, secondParagraphBlock ]
+			),
+		],
+	};
+	examples.push( textExample );
+
+	const otherBlockExamples = [
+		'core/image',
+		'core/separator',
+		'core/buttons',
+		'core/pullquote',
+		'core/search',
+	];
+
+	// Get examples for other blocks and put them in order of above array.
+	otherBlockExamples.forEach( ( blockName ) => {
+		const blockType = getBlockType( blockName );
+		if ( blockType && blockType.example ) {
+			const blockExample: BlockExample = {
+				name: blockName,
+				title: blockType.title,
+				category: 'overview',
+				blocks: getBlockFromExample( blockName, blockType.example ),
+			};
+			examples.push( blockExample );
+		}
+	} );
+
+	return examples;
+}
+
 /**
  * Returns a list of examples for registered block types.
  *
@@ -109,5 +206,12 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 	};
 	const colorExamples = getColorExamples( colors );
 
-	return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];
+	const overviewBlockExamples = getOverviewBlockExamples( colors );
+
+	return [
+		headingsExample,
+		...colorExamples,
+		...nonHeadingBlockExamples,
+		...overviewBlockExamples,
+	];
 }

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

@@ -24,7 +24,14 @@ import {
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, useState, memo, useContext } from '@wordpress/element';
+import {
+	useMemo,
+	useState,
+	memo,
+	useContext,
+	useRef,
+	useLayoutEffect,
+} from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -53,6 +60,48 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
+/**
+ * Scrolls to a section within an iframe.
+ *
+ * @param {string}            anchorId The id of the element to scroll to.
+ * @param {HTMLIFrameElement} iframe   The target iframe.
+ */
+const scrollToSection = ( anchorId, iframe ) => {
+	if ( ! iframe || ! iframe?.contentDocument ) {
+		return;
+	}
+
+	const element = iframe.contentDocument.getElementById( anchorId );
+	if ( element ) {
+		element.scrollIntoView( {
+			behavior: 'smooth',
+		} );
+	}
+};
+
+/**
+ * Parses a Block Editor navigation path to extract the block name and
+ * build a style book navigation path. The object can be extended to include a category,
+ * representing a style book tab/section.
+ *
+ * @param {string} path An internal Block Editor navigation path.
+ * @return {null|{block: string}} An object containing the example to navigate to.
+ */
+const getStyleBookNavigationFromPath = ( path ) => {
+	if ( path && typeof path === 'string' ) {
+		let block = path.includes( '/blocks/' )
+			? decodeURIComponent( path.split( '/blocks/' )[ 1 ] )
+			: null;
+		// Default to theme-colors if the path ends with /colors.
+		block = path.endsWith( '/colors' ) ? 'theme-colors' : block;
+
+		return {
+			block,
+		};
+	}
+	return null;
+};
+
 /**
  * Retrieves colors, gradients, and duotone filters from Global Styles.
  * The inclusion of default (Core) palettes is controlled by the relevant
@@ -137,6 +186,7 @@ function StyleBook( {
 	onClose,
 	showTabs = true,
 	userConfig = {},
+	path = '',
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
@@ -153,7 +203,24 @@ function StyleBook( {
 		[ examples ]
 	);
 
+	const examplesForSinglePageUse = [];
+	const overviewCategoryExamples = getExamplesByCategory(
+		{ slug: 'overview' },
+		examples
+	);
+	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
+	const otherExamples = examples.filter( ( example ) => {
+		return (
+			example.category !== 'overview' &&
+			! overviewCategoryExamples.examples.find(
+				( overviewExample ) => overviewExample.name === example.name
+			)
+		);
+	} );
+	examplesForSinglePageUse.push( ...otherExamples );
+
 	const { base: baseConfig } = useContext( GlobalStylesContext );
+	const goTo = getStyleBookNavigationFromPath( path );
 
 	const mergedConfig = useMemo( () => {
 		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
@@ -228,18 +295,20 @@ function StyleBook( {
 									settings={ settings }
 									sizes={ sizes }
 									title={ tab.title }
+									goTo={ goTo }
 								/>
 							</Tabs.TabPanel>
 						) ) }
 					</Tabs>
 				) : (
 					<StyleBookBody
-						examples={ examples }
+						examples={ examplesForSinglePageUse }
 						isSelected={ isSelected }
 						onClick={ onClick }
 						onSelect={ onSelect }
 						settings={ settings }
 						sizes={ sizes }
+						goTo={ goTo }
 					/>
 				) }
 			</div>
@@ -256,9 +325,11 @@ const StyleBookBody = ( {
 	settings,
 	sizes,
 	title,
+	goTo,
 } ) => {
 	const [ isFocused, setIsFocused ] = useState( false );
-
+	const [ hasIframeLoaded, setHasIframeLoaded ] = useState( false );
+	const iframeRef = useRef( null );
 	// 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 = {
@@ -287,8 +358,17 @@ const StyleBookBody = ( {
 		readonly: true,
 	};
 
+	const handleLoad = () => setHasIframeLoaded( true );
+	useLayoutEffect( () => {
+		if ( goTo?.block && hasIframeLoaded && iframeRef?.current ) {
+			scrollToSection( `example-${ goTo?.block }`, iframeRef?.current );
+		}
+	}, [ iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded ] );
+
 	return (
 		<Iframe
+			onLoad={ handleLoad }
+			ref={ iframeRef }
 			className={ clsx( 'edit-site-style-book__iframe', {
 				'is-focused': isFocused && !! onClick,
 				'is-button': !! onClick,
@@ -353,10 +433,8 @@ const Examples = memo(
 							title={ example.title }
 							content={ example.content }
 							blocks={ example.blocks }
-							isSelected={ isSelected( example.name ) }
-							onClick={ () => {
-								onSelect?.( example.name );
-							} }
+							isSelected={ isSelected?.( example.name ) }
+							onClick={ () => onSelect?.( example.name ) }
 						/>
 					) ) }
 				{ !! filteredExamples?.subcategories?.length &&
@@ -392,7 +470,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 				title={ example.title }
 				content={ example.content }
 				blocks={ example.blocks }
-				isSelected={ isSelected( example.name ) }
+				isSelected={ isSelected?.( example.name ) }
 				onClick={ () => {
 					onSelect?.( example.name );
 				} }

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

@@ -31,47 +31,33 @@ const postTypesWithoutParentTemplate = [
 const authorizedPostTypes = [ 'page', 'post' ];
 
 function useResolveEditedEntityAndContext( { postId, postType } ) {
-	const {
-		hasLoadedAllDependencies,
-		homepageId,
-		postsPageId,
-		url,
-		frontPageTemplateId,
-	} = useSelect( ( select ) => {
-		const { getEntityRecord, getEntityRecords } = select( coreDataStore );
-		const siteData = getEntityRecord( 'root', 'site' );
-		const base = getEntityRecord( 'root', '__unstableBase' );
-		const templates = getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
-			per_page: -1,
-		} );
-		const _homepageId =
-			siteData?.show_on_front === 'page' &&
-			[ 'number', 'string' ].includes( typeof siteData.page_on_front ) &&
-			!! +siteData.page_on_front // We also need to check if it's not zero(`0`).
-				? siteData.page_on_front.toString()
-				: null;
-		const _postsPageId =
-			siteData?.show_on_front === 'page' &&
-			[ 'number', 'string' ].includes( typeof siteData.page_for_posts )
-				? siteData.page_for_posts.toString()
-				: null;
-		let _frontPageTemplateId;
-		if ( templates ) {
-			const frontPageTemplate = templates.find(
-				( t ) => t.slug === 'front-page'
-			);
-			_frontPageTemplateId = frontPageTemplate
-				? frontPageTemplate.id
-				: false;
-		}
-		return {
-			hasLoadedAllDependencies: !! base && !! siteData,
-			homepageId: _homepageId,
-			postsPageId: _postsPageId,
-			url: base?.home,
-			frontPageTemplateId: _frontPageTemplateId,
-		};
-	}, [] );
+	const { hasLoadedAllDependencies, homepageId, postsPageId } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreDataStore );
+			const siteData = getEntityRecord( 'root', 'site' );
+			const _homepageId =
+				siteData?.show_on_front === 'page' &&
+				[ 'number', 'string' ].includes(
+					typeof siteData.page_on_front
+				) &&
+				!! +siteData.page_on_front // We also need to check if it's not zero(`0`).
+					? siteData.page_on_front.toString()
+					: null;
+			const _postsPageId =
+				siteData?.show_on_front === 'page' &&
+				[ 'number', 'string' ].includes(
+					typeof siteData.page_for_posts
+				)
+					? siteData.page_for_posts.toString()
+					: null;
+			return {
+				hasLoadedAllDependencies: !! siteData,
+				homepageId: _homepageId,
+				postsPageId: _postsPageId,
+			};
+		},
+		[]
+	);
 
 	/**
 	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
@@ -99,7 +85,6 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				getEditedEntityRecord,
 				getEntityRecords,
 				getDefaultTemplateId,
-				__experimentalGetTemplateForLink,
 			} = select( coreDataStore );
 
 			function resolveTemplateForPostTypeAndId(
@@ -111,14 +96,31 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 					postTypeToResolve === 'page' &&
 					homepageId === postIdToResolve
 				) {
-					// We're still checking whether the front page template exists.
-					// Don't resolve the template yet.
-					if ( frontPageTemplateId === undefined ) {
-						return undefined;
-					}
+					// The /lookup endpoint cannot currently handle a lookup
+					// when a page is set as the front page, so specifically in
+					// that case, we want to check if there is a front page
+					// template, and instead of falling back to the home
+					// template, we want to fall back to the page template.
+					const templates = getEntityRecords(
+						'postType',
+						TEMPLATE_POST_TYPE,
+						{
+							per_page: -1,
+						}
+					);
+					if ( templates ) {
+						const id = templates?.find(
+							( { slug } ) => slug === 'front-page'
+						)?.id;
+						if ( id ) {
+							return id;
+						}
 
-					if ( !! frontPageTemplateId ) {
-						return frontPageTemplateId;
+						// If no front page template is found, continue with the
+						// logic below (fetching the page template).
+					} else {
+						// Still resolving `templates`.
+						return undefined;
 					}
 				}
 
@@ -135,8 +137,7 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 					postTypeToResolve === 'page' &&
 					postsPageId === postIdToResolve
 				) {
-					return __experimentalGetTemplateForLink( editedEntity.link )
-						?.id;
+					return getDefaultTemplateId( { slug: 'home' } );
 				}
 				// First see if the post/page has an assigned template and fetch it.
 				const currentTemplateSlug = editedEntity.template;
@@ -194,20 +195,9 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 			}
 
 			// If we're not rendering a specific page, use the front page template.
-			if ( url ) {
-				const template = __experimentalGetTemplateForLink( url );
-				return template?.id;
-			}
+			return getDefaultTemplateId( { slug: 'front-page' } );
 		},
-		[
-			homepageId,
-			postsPageId,
-			hasLoadedAllDependencies,
-			url,
-			postId,
-			postType,
-			frontPageTemplateId,
-		]
+		[ homepageId, postsPageId, hasLoadedAllDependencies, postId, postType ]
 	);
 
 	const context = useMemo( () => {

package/src/components/welcome-guide/index.js

@@ -6,13 +6,13 @@ import WelcomeGuideStyles from './styles';
 import WelcomeGuidePage from './page';
 import WelcomeGuideTemplate from './template';
 
-export default function WelcomeGuide() {
+export default function WelcomeGuide( { postType } ) {
 	return (
 		<>
 			<WelcomeGuideEditor />
 			<WelcomeGuideStyles />
-			<WelcomeGuidePage />
-			<WelcomeGuideTemplate />
+			{ postType === 'page' && <WelcomeGuidePage /> }
+			{ postType === 'wp_template' && <WelcomeGuideTemplate /> }
 		</>
 	);
 }

package/src/components/welcome-guide/page.js

@@ -6,11 +6,6 @@ import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
 export default function WelcomeGuidePage() {
 	const { toggle } = useDispatch( preferencesStore );
 
@@ -23,8 +18,7 @@ export default function WelcomeGuidePage() {
 			'core/edit-site',
 			'welcomeGuide'
 		);
-		const { isPage } = select( editSiteStore );
-		return isPageActive && ! isEditorActive && isPage();
+		return isPageActive && ! isEditorActive;
 	}, [] );
 
 	if ( ! isVisible ) {

package/src/components/welcome-guide/template.js

@@ -7,16 +7,9 @@ import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as editorStore } from '@wordpress/editor';
 
-/**
- * Internal dependencies
- */
-import useEditedEntityRecord from '../use-edited-entity-record';
-
 export default function WelcomeGuideTemplate() {
 	const { toggle } = useDispatch( preferencesStore );
 
-	const { isLoaded, record } = useEditedEntityRecord();
-	const isPostTypeTemplate = isLoaded && record.type === 'wp_template';
 	const { isActive, hasPreviousEntity } = useSelect( ( select ) => {
 		const { getEditorSettings } = select( editorStore );
 		const { get } = select( preferencesStore );
@@ -26,7 +19,7 @@ export default function WelcomeGuideTemplate() {
 				!! getEditorSettings().onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
-	const isVisible = isActive && isPostTypeTemplate && hasPreviousEntity;
+	const isVisible = isActive && hasPreviousEntity;
 
 	if ( ! isVisible ) {
 		return null;