@wordpress/editor 14.33.5 → 14.34.1-next.2f1c7c01b.0

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

@@ -0,0 +1,44 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-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-large;
+	}
+
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.editor-style-book__iframe {
+	display: block;
+	height: 100%;
+	width: 100%;
+
+	&.is-button {
+		border-radius: $radius-large;
+	}
+	&.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));
+	}
+}
+
+.editor-style-book__tablist-container {
+	flex: none;
+
+	display: flex;
+	width: 100%;
+	padding-right: 56px;
+	background: $white;
+}
+
+.editor-style-book__tabpanel {
+	flex: 1 0 auto;
+
+	overflow: auto;
+}

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

@@ -0,0 +1,166 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getExamplesByCategory,
+	getTopLevelStyleBookCategories,
+} from '../categories';
+import { STYLE_BOOK_CATEGORIES } from '../constants';
+
+jest.mock( '@wordpress/blocks', () => {
+	return {
+		getCategories() {
+			return [
+				{
+					slug: 'text',
+					title: 'Text Registered',
+					icon: 'text',
+				},
+				{
+					slug: 'design',
+					title: 'Design Registered',
+					icon: 'design',
+				},
+				{
+					slug: 'funky',
+					title: 'Funky',
+					icon: 'funky',
+				},
+			];
+		},
+	};
+} );
+
+// Fixtures
+const exampleThemeBlocks = [
+	{
+		name: 'core/post-content',
+		title: 'Post Content',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-terms',
+		title: 'Post Terms',
+		category: 'theme',
+	},
+	{
+		name: 'core/home-link',
+		title: 'Home Link',
+		category: 'design',
+	},
+	{
+		name: 'core/site-logo',
+		title: 'Site Logo',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-title',
+		title: 'Site Title',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-tagline',
+		title: 'Site Tagline',
+		category: 'theme',
+	},
+	{
+		name: 'core/group',
+		title: 'Group',
+		category: 'design',
+	},
+	{
+		name: 'core/comments-pagination-numbers',
+		title: 'Comments Page Numbers',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-featured-image',
+		title: 'Featured Image',
+		category: 'theme',
+	},
+];
+
+describe( 'utils', () => {
+	describe( 'getTopLevelStyleBookCategories', () => {
+		it( 'returns theme subcategories examples', () => {
+			expect( getTopLevelStyleBookCategories() ).toEqual( [
+				...STYLE_BOOK_CATEGORIES,
+				{
+					slug: 'funky',
+					title: 'Funky',
+					icon: 'funky',
+				},
+			] );
+		} );
+	} );
+
+	describe( 'getExamplesByCategory', () => {
+		it( 'returns theme subcategories examples', () => {
+			const themeCategory = STYLE_BOOK_CATEGORIES.find(
+				( category ) => category.slug === 'theme'
+			);
+			const themeCategoryExamples = getExamplesByCategory(
+				themeCategory,
+				exampleThemeBlocks
+			);
+
+			expect( themeCategoryExamples.slug ).toEqual( 'theme' );
+
+			const siteIdentity = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'site-identity'
+			);
+			expect( siteIdentity ).toEqual( {
+				title: 'Site Identity',
+				slug: 'site-identity',
+				examples: [
+					{
+						name: 'core/site-logo',
+						title: 'Site Logo',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-title',
+						title: 'Site Title',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-tagline',
+						title: 'Site Tagline',
+						category: 'theme',
+					},
+				],
+			} );
+
+			const design = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'design'
+			);
+			expect( design ).toEqual( {
+				title: 'Design',
+				slug: 'design',
+				examples: [
+					{
+						name: 'core/group',
+						title: 'Group',
+						category: 'design',
+					},
+				],
+			} );
+
+			const posts = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.slug === 'posts'
+			);
+
+			expect( posts ).toEqual( {
+				title: 'Posts',
+				slug: 'posts',
+				examples: [
+					{
+						name: 'core/post-terms',
+						title: 'Post Terms',
+						category: 'theme',
+					},
+				],
+			} );
+		} );
+	} );
+} );

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

@@ -0,0 +1,80 @@
+export type Block = {
+	name: string;
+	attributes: Record< string, unknown >;
+	innerBlocks?: Block[];
+};
+
+export type StyleBookCategory = {
+	title: string;
+	slug: string;
+	blocks?: string[];
+	exclude?: string[];
+	include?: string[];
+	subcategories?: StyleBookCategory[];
+};
+
+export type BlockExample = {
+	name: string;
+	title: string;
+	category: string;
+	content?: JSX.Element;
+	blocks?: Block | Block[];
+};
+
+export type CategoryExamples = {
+	title: string;
+	slug: string;
+	examples?: BlockExample[];
+	subcategories?: CategoryExamples[];
+};
+
+export type StyleBookColorGroup = {
+	origin: string;
+	slug: string;
+	title: string;
+	type: 'colors' | 'gradients' | 'duotones';
+};
+
+export type Color = { slug: string };
+export type Gradient = { slug: string };
+export type Duotone = {
+	colors: string[];
+	slug: string;
+};
+
+export type ColorExampleProps = {
+	colors: Color[] | Gradient[];
+	type: StyleBookColorGroup[ 'type' ];
+	templateColumns?: string | number;
+	itemHeight?: 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' >;
+};
+
+/*
+ * Typing the items from getBlockTypes from '@wordpress/blocks'
+ * to appease the TS linter.
+ */
+export type BlockType = {
+	name: string;
+	title: string;
+	category: string;
+	example: BlockType;
+	attributes: Record< string, unknown >;
+	supports: Record< string, unknown >;
+};

package/src/components/styles-canvas/index.js

@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { ESCAPE } from '@wordpress/keycodes';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
+import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
+import { store as preferencesStore } from '@wordpress/preferences';
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import StylesCanvasStyleBook from './style-book';
+import StylesCanvasRevisions from './revisions';
+import { store as editorStore } from '../../store';
+import ResizableEditor from '../resizable-editor';
+
+/**
+ * Helper function to get the title for the styles canvas based on current state.
+ *
+ * @param {string}  path          Current styles path.
+ * @param {boolean} showStylebook Whether stylebook is visible.
+ * @return {string} Translated string for the canvas title.
+ */
+export function getStylesCanvasTitle( path, showStylebook ) {
+	if ( showStylebook ) {
+		return __( 'Style Book' );
+	}
+	if ( path?.startsWith( '/revisions' ) ) {
+		return __( 'Style Revisions' );
+	}
+	return '';
+}
+
+/**
+ * Styles canvas component - orchestrates rendering of style book and revisions.
+ * Determines what content to show based on global styles navigation state.
+ *
+ * @return {JSX.Element|null} The styles canvas or null if nothing to render.
+ */
+export default function StylesCanvas() {
+	const { stylesPath, showStylebook, showListViewByDefault } = useSelect(
+		( select ) => {
+			const { getStylesPath, getShowStylebook } = unlock(
+				select( editorStore )
+			);
+
+			const _showListViewByDefault = select( preferencesStore ).get(
+				'core',
+				'showListViewByDefault'
+			);
+
+			return {
+				stylesPath: getStylesPath(),
+				showStylebook: getShowStylebook(),
+				showListViewByDefault: _showListViewByDefault,
+			};
+		},
+		[]
+	);
+	const { resetStylesNavigation, setStylesPath } = unlock(
+		useDispatch( editorStore )
+	);
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const sectionFocusReturnRef = useFocusReturn();
+
+	// Determine what content to render
+	let content = null;
+
+	if ( showStylebook ) {
+		content = (
+			<StylesCanvasStyleBook
+				path={ stylesPath }
+				onPathChange={ setStylesPath }
+				ref={ sectionFocusReturnRef }
+			/>
+		);
+	} else if ( stylesPath?.startsWith( '/revisions' ) ) {
+		content = (
+			<StylesCanvasRevisions
+				path={ stylesPath }
+				ref={ sectionFocusReturnRef }
+			/>
+		);
+	}
+
+	const title = getStylesCanvasTitle( stylesPath, showStylebook );
+	const onCloseCanvas = () => {
+		setIsListViewOpened( showListViewByDefault );
+		resetStylesNavigation();
+	};
+
+	const closeOnEscape = ( event ) => {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			onCloseCanvas();
+		}
+	};
+
+	return (
+		<div className="editor-styles-canvas">
+			<ResizableEditor enableResizing={ false }>
+				{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+				<section
+					className="editor-styles-canvas__section"
+					ref={ focusOnMountRef }
+					onKeyDown={ closeOnEscape }
+					aria-label={ title }
+				>
+					<Button
+						size="compact"
+						className="editor-styles-canvas__close-button"
+						icon={ closeSmall }
+						label={ __( 'Close' ) }
+						onClick={ onCloseCanvas }
+					/>
+					{ content }
+				</section>
+			</ResizableEditor>
+		</div>
+	);
+}

package/src/components/styles-canvas/revisions.js

@@ -0,0 +1,144 @@
+/**
+ * WordPress dependencies
+ */
+import { Disabled } from '@wordpress/components';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo, forwardRef } from '@wordpress/element';
+import { useGlobalStylesRevisions } from '@wordpress/global-styles-ui';
+import { mergeGlobalStyles } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStyles } from '../global-styles/hooks';
+import { useGlobalStylesOutputWithConfig } from '../../hooks/use-global-styles-output';
+import { unlock } from '../../lock-unlock';
+
+const {
+	ExperimentalBlockEditorProvider,
+	__unstableBlockStyleVariationOverridesWithConfig,
+} = unlock( blockEditorPrivateApis );
+
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
+/**
+ * Revisions content component for global styles.
+ * Coordinates with ScreenRevisions through the path parameter to display
+ * the currently selected revision.
+ *
+ * @param {Object}                       props      Component props.
+ * @param {string}                       props.path Current path in global styles.
+ * @param {import('react').ForwardedRef} ref        Ref to the Revisions component.
+ * @return {JSX.Element|null} The Revisions component or null if loading.
+ */
+function StylesCanvasRevisions( { path }, ref ) {
+	const blocks = useSelect( ( select ) => {
+		// This is not ideal: it's like a loop (reading from block-editor to render it).
+		return select( blockEditorStore ).getBlocks();
+	}, [] );
+	const { user: userConfig, base: baseConfig } = useGlobalStyles();
+
+	// Fetch all revisions (includes unsaved, parent, and enriched with authors)
+	const { revisions, isLoading } = useGlobalStylesRevisions();
+
+	// Parse revision ID from path (e.g., "/revisions/123" -> "123")
+	const revisionId = useMemo( () => {
+		const match = path?.match( /^\/revisions\/(.+)$/ );
+		return match ? match[ 1 ] : null;
+	}, [ path ] );
+
+	// Find the selected revision from the fetched list
+	const selectedRevision = useMemo( () => {
+		if ( ! revisionId || ! revisions.length ) {
+			return null;
+		}
+		return revisions.find(
+			( rev ) => String( rev.id ) === String( revisionId )
+		);
+	}, [ revisionId, revisions ] );
+
+	// Use the selected revision's config if available, otherwise use current user config
+	const displayConfig = selectedRevision || userConfig;
+
+	// Merge the display config with the base config
+	const mergedConfig = useMemo( () => {
+		if (
+			! isObjectEmpty( displayConfig ) &&
+			! isObjectEmpty( baseConfig )
+		) {
+			return mergeGlobalStyles( baseConfig, displayConfig );
+		}
+		return {};
+	}, [ baseConfig, displayConfig ] );
+
+	const renderedBlocksArray = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( {
+			...originalSettings,
+			isPreviewMode: true,
+		} ),
+		[ originalSettings ]
+	);
+
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	const editorStyles =
+		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( displayConfig )
+			? globalStyles
+			: settings.styles;
+
+	if ( isLoading ) {
+		return null;
+	}
+
+	return (
+		<Iframe
+			ref={ ref }
+			className="editor-revisions__iframe"
+			name="revisions"
+			tabIndex={ 0 }
+		>
+			<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; }`
+				}
+			</style>
+			<Disabled className="editor-revisions__example-preview__content">
+				<ExperimentalBlockEditorProvider
+					value={ renderedBlocksArray }
+					settings={ settings }
+				>
+					<BlockList renderAppender={ false } />
+					{ /*
+					 * Styles are printed inside the block editor provider,
+					 * so they can access any registered style overrides.
+					 */ }
+					<EditorStyles styles={ editorStyles } />
+					<__unstableBlockStyleVariationOverridesWithConfig
+						config={ mergedConfig }
+					/>
+				</ExperimentalBlockEditorProvider>
+			</Disabled>
+		</Iframe>
+	);
+}
+export default forwardRef( StylesCanvasRevisions );

package/src/components/styles-canvas/style-book.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import StyleBook from '../style-book';
+import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
+
+/**
+ * Style Book content component for global styles.
+ * Provides the business logic for StyleBook behavior in the global styles context.
+ *
+ * @param {Object}                       props              Component props.
+ * @param {string}                       props.path         Current path in global styles.
+ * @param {Function}                     props.onPathChange Callback when the path changes.
+ * @param {import('react').ForwardedRef} ref                Ref to the Style Book component.
+ * @return {JSX.Element} The Style Book component.
+ */
+function StylesCanvasStyleBook( { path, onPathChange }, ref ) {
+	return (
+		<StyleBook
+			ref={ ref }
+			isSelected={ ( blockName ) =>
+				// Match '/blocks/core%2Fbutton' and
+				// '/blocks/core%2Fbutton/typography', but not
+				// '/blocks/core%2Fbuttons'.
+				path === `/blocks/${ encodeURIComponent( blockName ) }` ||
+				path?.startsWith(
+					`/blocks/${ encodeURIComponent( blockName ) }/`
+				)
+			}
+			onSelect={ ( blockName ) => {
+				if (
+					STYLE_BOOK_COLOR_GROUPS.find(
+						( group ) => group.slug === blockName
+					)
+				) {
+					// Go to color palettes Global Styles.
+					onPathChange?.( '/colors/palette' );
+					return;
+				}
+				if ( blockName === 'typography' ) {
+					// Go to typography Global Styles.
+					onPathChange?.( '/typography' );
+					return;
+				}
+
+				// Now go to the selected block.
+				onPathChange?.( '/blocks/' + encodeURIComponent( blockName ) );
+			} }
+		/>
+	);
+}
+export default forwardRef( StylesCanvasStyleBook );

package/src/components/styles-canvas/style.scss

@@ -0,0 +1,40 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.editor-styles-canvas {
+	height: 100%;
+	padding: $grid-unit-20;
+
+	// This is the gray background color that's applied behind "isolation mode".
+	// The color normally comes from .editor-visual-editor, but that class is missing here.
+	background-color: var(--wp-editor-canvas-background);
+
+	// Controls height of editor and styles canvas (style book, global styles revisions previews etc.)
+	iframe {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.editor-styles-canvas__section {
+	background: $white; // Fallback color, overridden by JavaScript.
+	border-radius: $radius-large;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+	@media not (prefers-reduced-motion) {
+		transition: all 0.3s; // Match .block-editor-iframe__body transition.
+	}
+}
+
+.editor-styles-canvas__close-button {
+	position: absolute;
+	right: $grid-unit-10;
+	top: $grid-unit-10;
+	z-index: 2;
+	background: $white;
+}

package/src/components/visual-editor/index.js

@@ -96,7 +96,6 @@ function checkForPostContentAtRootLevel( blocks ) {
 function VisualEditor( {
 	// Ideally as we unify post and site editors, we won't need these props.
 	autoFocus,
-	styles,
 	disableIframe = false,
 	iframeProps,
 	contentRef,
@@ -114,6 +113,7 @@ function VisualEditor( {
 		isDesignPostType,
 		postType,
 		isPreview,
+		styles,
 		canvasMinHeight,
 	} = useSelect( ( select ) => {
 		const {
@@ -164,6 +164,7 @@ function VisualEditor( {
 			isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
 			postType: postTypeSlug,
 			isPreview: editorSettings.isPreviewMode,
+			styles: editorSettings.styles,
 			canvasMinHeight: getCanvasMinHeight(),
 		};
 	}, [] );

package/src/dataviews/fields/content-preview/content-preview-view.tsx

@@ -3,7 +3,9 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	// @ts-ignore
 	BlockPreview,
+	// @ts-ignore
 	privateApis as blockEditorPrivateApis,
 	// @ts-ignore
 } from '@wordpress/block-editor';

package/src/hooks/index.js

@@ -7,3 +7,4 @@ import './media-upload';
 import './pattern-overrides';
 import './navigation-link-view-button';
 import './template-part-navigation-edit-button';
+import './push-changes-to-global-styles';