@wordpress/edit-site 6.10.0 → 6.12.0

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

@@ -11,18 +11,27 @@ import {
 	Composite,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	BlockList,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
+	useSettings,
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 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';
 
 /**
@@ -51,6 +60,123 @@ 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
+ * theme.json property e.g. defaultPalette, defaultGradients, defaultDuotone.
+ *
+ * @return {Object} Object containing properties for each type of palette.
+ */
+function useMultiOriginPalettes() {
+	const { colors, gradients } = useMultipleOriginColorsAndGradients();
+
+	// Add duotone filters to the palettes data.
+	const [
+		shouldDisplayDefaultDuotones,
+		customDuotones,
+		themeDuotones,
+		defaultDuotones,
+	] = useSettings(
+		'color.defaultDuotone',
+		'color.duotone.custom',
+		'color.duotone.theme',
+		'color.duotone.default'
+	);
+
+	const palettes = useMemo( () => {
+		const result = { colors, gradients, duotones: [] };
+
+		if ( themeDuotones && themeDuotones.length ) {
+			result.duotones.push( {
+				name: _x(
+					'Theme',
+					'Indicates these duotone filters come from the theme.'
+				),
+				slug: 'theme',
+				duotones: themeDuotones,
+			} );
+		}
+
+		if (
+			shouldDisplayDefaultDuotones &&
+			defaultDuotones &&
+			defaultDuotones.length
+		) {
+			result.duotones.push( {
+				name: _x(
+					'Default',
+					'Indicates these duotone filters come from WordPress.'
+				),
+				slug: 'default',
+				duotones: defaultDuotones,
+			} );
+		}
+		if ( customDuotones && customDuotones.length ) {
+			result.duotones.push( {
+				name: _x(
+					'Custom',
+					'Indicates these doutone filters are created by the user.'
+				),
+				slug: 'custom',
+				duotones: customDuotones,
+			} );
+		}
+
+		return result;
+	}, [
+		colors,
+		gradients,
+		customDuotones,
+		themeDuotones,
+		defaultDuotones,
+		shouldDisplayDefaultDuotones,
+	] );
+
+	return palettes;
+}
+
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -60,11 +186,13 @@ function StyleBook( {
 	onClose,
 	showTabs = true,
 	userConfig = {},
+	path = '',
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const [ examples ] = useState( getExamples );
+	const colors = useMultiOriginPalettes();
+	const examples = useMemo( () => getExamples( colors ), [ colors ] );
 	const tabs = useMemo(
 		() =>
 			getTopLevelStyleBookCategories().filter( ( category ) =>
@@ -74,7 +202,25 @@ 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 ) ) {
@@ -89,19 +235,20 @@ function StyleBook( {
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
 
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
-		[ originalSettings ]
+		() => ( {
+			...originalSettings,
+			styles:
+				! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+					? globalStyles
+					: originalSettings.styles,
+			isPreviewMode: true,
+		} ),
+		[ globalStyles, originalSettings, userConfig ]
 	);
 
-	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
-
-	settings.styles =
-		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
-			? globalStyles
-			: settings.styles;
-
 	return (
 		<EditorCanvasContainer
 			onClose={ onClose }
@@ -120,47 +267,48 @@ function StyleBook( {
 			>
 				{ resizeObserver }
 				{ showTabs ? (
-					<div className="edit-site-style-book__tabs">
-						<Tabs>
-							<div className="edit-site-style-book__tablist-container">
-								<Tabs.TabList>
-									{ tabs.map( ( tab ) => (
-										<Tabs.Tab
-											tabId={ tab.slug }
-											key={ tab.slug }
-										>
-											{ tab.title }
-										</Tabs.Tab>
-									) ) }
-								</Tabs.TabList>
-							</div>
-							{ tabs.map( ( tab ) => (
-								<Tabs.TabPanel
-									key={ tab.slug }
-									tabId={ tab.slug }
-									focusable={ false }
-								>
-									<StyleBookBody
-										category={ tab.slug }
-										examples={ examples }
-										isSelected={ isSelected }
-										onSelect={ onSelect }
-										settings={ settings }
-										sizes={ sizes }
-										title={ tab.title }
-									/>
-								</Tabs.TabPanel>
-							) ) }
-						</Tabs>
-					</div>
+					<Tabs>
+						<div className="edit-site-style-book__tablist-container">
+							<Tabs.TabList>
+								{ tabs.map( ( tab ) => (
+									<Tabs.Tab
+										tabId={ tab.slug }
+										key={ tab.slug }
+									>
+										{ tab.title }
+									</Tabs.Tab>
+								) ) }
+							</Tabs.TabList>
+						</div>
+						{ tabs.map( ( tab ) => (
+							<Tabs.TabPanel
+								key={ tab.slug }
+								tabId={ tab.slug }
+								focusable={ false }
+								className="edit-site-style-book__tabpanel"
+							>
+								<StyleBookBody
+									category={ tab.slug }
+									examples={ examples }
+									isSelected={ isSelected }
+									onSelect={ onSelect }
+									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>
@@ -177,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 = {
@@ -208,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,
@@ -272,11 +431,10 @@ const Examples = memo(
 							key={ example.name }
 							id={ `example-${ example.name }` }
 							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 &&
@@ -310,8 +468,9 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 				key={ example.name }
 				id={ `example-${ example.name }` }
 				title={ example.title }
+				content={ example.content }
 				blocks={ example.blocks }
-				isSelected={ isSelected( example.name ) }
+				isSelected={ isSelected?.( example.name ) }
 				onClick={ () => {
 					onSelect?.( example.name );
 				} }
@@ -320,7 +479,9 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
 	);
 };
 
-const Example = ( { id, title, blocks, isSelected, onClick } ) => {
+const disabledExamples = [ 'example-duotones' ];
+
+const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -329,7 +490,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 		() => ( {
 			...originalSettings,
 			focusMode: false, // Disable "Spotlight mode".
-			__unstableIsPreviewMode: true,
+			isPreviewMode: true,
 		} ),
 		[ originalSettings ]
 	);
@@ -340,12 +501,20 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 		[ blocks ]
 	);
 
+	const disabledProps = disabledExamples.includes( id )
+		? {
+				disabled: true,
+				accessibleWhenDisabled: true,
+		  }
+		: {};
+
 	return (
 		<div role="row">
 			<div role="gridcell">
 				<Composite.Item
 					className={ clsx( 'edit-site-style-book__example', {
 						'is-selected': isSelected,
+						'is-disabled-example': !! disabledProps?.disabled,
 					} ) }
 					id={ id }
 					aria-label={ sprintf(
@@ -356,6 +525,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 					render={ <div /> }
 					role="button"
 					onClick={ onClick }
+					{ ...disabledProps }
 				>
 					<span className="edit-site-style-book__example-title">
 						{ title }
@@ -365,12 +535,17 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 						aria-hidden
 					>
 						<Disabled className="edit-site-style-book__example-preview__content">
-							<ExperimentalBlockEditorProvider
-								value={ renderedBlocks }
-								settings={ settings }
-							>
-								<BlockList renderAppender={ false } />
-							</ExperimentalBlockEditorProvider>
+							{ content ? (
+								content
+							) : (
+								<ExperimentalBlockEditorProvider
+									value={ renderedBlocks }
+									settings={ settings }
+								>
+									<EditorStyles />
+									<BlockList renderAppender={ false } />
+								</ExperimentalBlockEditorProvider>
+							) }
 						</Disabled>
 					</div>
 				</Composite.Item>

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

@@ -5,6 +5,10 @@
 	&.is-button {
 		border-radius: $radius-large;
 	}
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }
 
 .edit-site-style-book__iframe {
@@ -18,22 +22,16 @@
 }
 
 .edit-site-style-book__tablist-container {
-	background: $white;
+	flex: none;
+
+	display: flex;
 	width: 100%;
 	padding-right: 56px;
-	display: flex;
-	position: absolute;
-	z-index: 1;
+	background: $white;
 }
 
-.edit-site-style-book__tabs {
-	[role="tabpanel"] {
-		bottom: 0;
-		left: 0;
-		overflow: auto;
-		padding: 0;
-		position: absolute;
-		right: 0;
-		top: $grid-unit-60; // Height of tabs.
-	}
+.edit-site-style-book__tabpanel {
+	flex: 1 0 auto;
+
+	overflow: auto;
 }

package/src/components/style-book/test/categories.js

@@ -48,11 +48,6 @@ const exampleThemeBlocks = [
 		title: 'Home Link',
 		category: 'design',
 	},
-	{
-		name: 'custom/colors',
-		title: 'Colors',
-		category: 'colors',
-	},
 	{
 		name: 'core/site-logo',
 		title: 'Site Logo',

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

@@ -9,6 +9,7 @@ export type StyleBookCategory = {
 	slug: string;
 	blocks?: string[];
 	exclude?: string[];
+	include?: string[];
 	subcategories?: StyleBookCategory[];
 };
 
@@ -16,7 +17,8 @@ export type BlockExample = {
 	name: string;
 	title: string;
 	category: string;
-	blocks: Block | Block[];
+	content?: JSX.Element;
+	blocks?: Block | Block[];
 };
 
 export type CategoryExamples = {
@@ -25,3 +27,34 @@ export type CategoryExamples = {
 	examples?: BlockExample[];
 	subcategories?: CategoryExamples[];
 };
+
+export type StyleBookColorGroup = {
+	origin: string;
+	slug: string;
+	title: string;
+	type: string;
+};
+
+export type Color = { slug: string };
+export type Gradient = { slug: string };
+export type Duotone = {
+	colors: string[];
+	slug: string;
+};
+
+export type ColorOrigin = {
+	name: string;
+	slug: string;
+	colors?: Color[];
+	gradients?: Gradient[];
+	duotones?: Duotone[];
+};
+
+export type MultiOriginPalettes = {
+	disableCustomColors: boolean;
+	disableCustomGradients: boolean;
+	hasColorsOrGradients: boolean;
+	colors: Omit< ColorOrigin, 'gradients' | 'duotones' >;
+	duotones: Omit< ColorOrigin, 'colors' | 'gradients' >;
+	gradients: Omit< ColorOrigin, 'colors' | 'duotones' >;
+};