@wordpress/edit-site 6.10.0 → 6.11.0

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

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getBlockType,
+	getBlockTypes,
+	getBlockFromExample,
+	createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
+import ColorExamples from './color-examples';
+import DuotoneExamples from './duotone-examples';
+import { STYLE_BOOK_COLOR_GROUPS } from './constants';
+
+/**
+ * Returns examples color examples for each origin
+ * e.g. Core (Default), Theme, and User.
+ *
+ * @param {MultiOriginPalettes} colors Global Styles color palettes per origin.
+ * @return {BlockExample[]} An array of color block examples.
+ */
+function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	if ( ! colors ) {
+		return [];
+	}
+
+	const examples: BlockExample[] = [];
+
+	STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => {
+		const palette = colors[ group.type ].find(
+			( origin: ColorOrigin ) => origin.slug === group.origin
+		);
+
+		if ( palette?.[ group.type ] ) {
+			const example: BlockExample = {
+				name: group.slug,
+				title: group.title,
+				category: 'colors',
+			};
+			if ( group.type === 'duotones' ) {
+				example.content = (
+					<DuotoneExamples duotones={ palette[ group.type ] } />
+				);
+				examples.push( example );
+			} else {
+				example.content = (
+					<ColorExamples
+						colors={ palette[ group.type ] }
+						type={ group.type }
+					/>
+				);
+				examples.push( example );
+			}
+		}
+	} );
+
+	return examples;
+}
+
+/**
+ * Returns a list of examples for registered block types.
+ *
+ * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User.
+ * @return {BlockExample[]} An array of block examples.
+ */
+export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	const nonHeadingBlockExamples = getBlockTypes()
+		.filter( ( blockType ) => {
+			const { name, example, supports } = blockType;
+			return (
+				name !== 'core/heading' &&
+				!! example &&
+				supports?.inserter !== false
+			);
+		} )
+		.map( ( blockType ) => ( {
+			name: blockType.name,
+			title: blockType.title,
+			category: blockType.category,
+			blocks: getBlockFromExample( blockType.name, blockType.example ),
+		} ) );
+	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
+
+	if ( ! isHeadingBlockRegistered ) {
+		return nonHeadingBlockExamples;
+	}
+
+	// Use our own example for the Heading block so that we can show multiple
+	// heading levels.
+	const headingsExample = {
+		name: 'core/heading',
+		title: __( 'Headings' ),
+		category: 'text',
+		blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
+			return createBlock( 'core/heading', {
+				content: sprintf(
+					// translators: %d: heading level e.g: "1", "2", "3"
+					__( 'Heading %d' ),
+					level
+				),
+				level,
+			} );
+		} ),
+	};
+	const colorExamples = getColorExamples( colors );
+
+	return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];
+}

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

@@ -11,13 +11,15 @@ 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';
@@ -51,6 +53,81 @@ function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
+/**
+ * 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,
@@ -64,7 +141,8 @@ function StyleBook( {
 	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,6 +152,7 @@ function StyleBook( {
 			),
 		[ examples ]
 	);
+
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 
 	const mergedConfig = useMemo( () => {
@@ -89,19 +168,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,39 +200,38 @@ 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 }
+								/>
+							</Tabs.TabPanel>
+						) ) }
+					</Tabs>
 				) : (
 					<StyleBookBody
 						examples={ examples }
@@ -272,6 +351,7 @@ const Examples = memo(
 							key={ example.name }
 							id={ `example-${ example.name }` }
 							title={ example.title }
+							content={ example.content }
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
 							onClick={ () => {
@@ -310,6 +390,7 @@ 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 ) }
 				onClick={ () => {
@@ -320,7 +401,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 +412,7 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 		() => ( {
 			...originalSettings,
 			focusMode: false, // Disable "Spotlight mode".
-			__unstableIsPreviewMode: true,
+			isPreviewMode: true,
 		} ),
 		[ originalSettings ]
 	);
@@ -340,12 +423,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 +447,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 +457,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' >;
+};

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

@@ -5,6 +5,7 @@ import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -248,10 +249,19 @@ export default function useInitEditedEntityFromURL() {
 		useResolveEditedEntityAndContext( params );
 
 	const { setEditedEntity } = useDispatch( editSiteStore );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	useEffect( () => {
 		if ( isReady ) {
+			resetZoomLevel();
 			setEditedEntity( postType, postId, context );
 		}
-	}, [ isReady, postType, postId, context, setEditedEntity ] );
+	}, [
+		isReady,
+		postType,
+		postId,
+		context,
+		setEditedEntity,
+		resetZoomLevel,
+	] );
 }