@wordpress/edit-site 6.11.0 → 6.12.1-next.082ed6819.0

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

@@ -62,6 +62,114 @@ 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',
+				/*
+				 * CSS generated from style attributes will take precedence over global styles CSS,
+				 * so remove the style attribute from the example to ensure the example
+				 * demonstrates changes to global styles.
+				 */
+				blocks: getBlockFromExample( blockName, {
+					...blockType.example,
+					attributes: {
+						...blockType.example.attributes,
+						style: undefined,
+					},
+				} ),
+			};
+			examples.push( blockExample );
+		}
+	} );
+
+	return examples;
+}
+
 /**
  * Returns a list of examples for registered block types.
  *
@@ -82,7 +190,18 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 			name: blockType.name,
 			title: blockType.title,
 			category: blockType.category,
-			blocks: getBlockFromExample( blockType.name, blockType.example ),
+			/*
+			 * CSS generated from style attributes will take precedence over global styles CSS,
+			 * so remove the style attribute from the example to ensure the example
+			 * demonstrates changes to global styles.
+			 */
+			blocks: getBlockFromExample( blockType.name, {
+				...blockType.example,
+				attributes: {
+					...blockType.example.attributes,
+					style: undefined,
+				},
+			} ),
 		} ) );
 	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
 
@@ -109,5 +228,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/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;