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

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

@@ -0,0 +1,308 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { StyleBookCategory, StyleBookColorGroup } from './types';
+
+export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [
+	{
+		slug: 'theme-colors',
+		title: __( 'Theme Colors' ),
+		origin: 'theme',
+		type: 'colors',
+	},
+	{
+		slug: 'theme-gradients',
+		title: __( 'Theme Gradients' ),
+		origin: 'theme',
+		type: 'gradients',
+	},
+	{
+		slug: 'custom-colors',
+		title: __( 'Custom Colors' ),
+		origin: 'custom',
+		type: 'colors',
+	},
+	{
+		slug: 'custom-gradients',
+		title: __( 'Custom Gradients' ),
+		origin: 'custom', // User.
+		type: 'gradients',
+	},
+	{
+		slug: 'duotones',
+		title: __( 'Duotones' ),
+		origin: 'theme',
+		type: 'duotones',
+	},
+	{
+		slug: 'default-colors',
+		title: __( 'Default Colors' ),
+		origin: 'default',
+		type: 'colors',
+	},
+	{
+		slug: 'default-gradients',
+		title: __( 'Default Gradients' ),
+		origin: 'default',
+		type: 'gradients',
+	},
+];
+
+export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit<
+	StyleBookCategory,
+	'subcategories'
+>[] = [
+	{
+		slug: 'site-identity',
+		title: __( 'Site Identity' ),
+		blocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],
+	},
+	{
+		slug: 'design',
+		title: __( 'Design' ),
+		blocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],
+		exclude: [ 'core/home-link', 'core/navigation-link' ],
+	},
+	{
+		slug: 'posts',
+		title: __( 'Posts' ),
+		blocks: [
+			'core/post-title',
+			'core/post-excerpt',
+			'core/post-author',
+			'core/post-author-name',
+			'core/post-author-biography',
+			'core/post-date',
+			'core/post-terms',
+			'core/term-description',
+			'core/query-title',
+			'core/query-no-results',
+			'core/query-pagination',
+			'core/query-numbers',
+		],
+	},
+	{
+		slug: 'comments',
+		title: __( 'Comments' ),
+		blocks: [
+			'core/comments-title',
+			'core/comments-pagination',
+			'core/comments-pagination-numbers',
+			'core/comments',
+			'core/comments-author-name',
+			'core/comment-content',
+			'core/comment-date',
+			'core/comment-edit-link',
+			'core/comment-reply-link',
+			'core/comment-template',
+			'core/post-comments-count',
+			'core/post-comments-link',
+		],
+	},
+];
+
+export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'overview',
+		title: __( 'Overview' ),
+		blocks: [],
+	},
+	{
+		slug: 'text',
+		title: __( 'Text' ),
+		blocks: [
+			'core/post-content',
+			'core/home-link',
+			'core/navigation-link',
+		],
+	},
+	{
+		slug: 'colors',
+		title: __( 'Colors' ),
+		blocks: [],
+	},
+	{
+		slug: 'theme',
+		title: __( 'Theme' ),
+		subcategories: STYLE_BOOK_THEME_SUBCATEGORIES,
+	},
+	{
+		slug: 'media',
+		title: __( 'Media' ),
+		blocks: [ 'core/post-featured-image' ],
+	},
+	{
+		slug: 'widgets',
+		title: __( 'Widgets' ),
+		blocks: [],
+	},
+	{
+		slug: 'embed',
+		title: __( 'Embeds' ),
+		include: [],
+	},
+];
+
+// Style book preview subcategories for all blocks section.
+export const STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [
+	...STYLE_BOOK_THEME_SUBCATEGORIES,
+	{
+		slug: 'media',
+		title: __( 'Media' ),
+		blocks: [ 'core/post-featured-image' ],
+	},
+	{
+		slug: 'widgets',
+		title: __( 'Widgets' ),
+		blocks: [],
+	},
+	{
+		slug: 'embed',
+		title: __( 'Embeds' ),
+		include: [],
+	},
+];
+
+// Style book preview categories are organized slightly differently to the editor ones.
+export const STYLE_BOOK_PREVIEW_CATEGORIES: StyleBookCategory[] = [
+	{
+		slug: 'overview',
+		title: __( 'Overview' ),
+		blocks: [],
+	},
+	{
+		slug: 'text',
+		title: __( 'Text' ),
+		blocks: [
+			'core/post-content',
+			'core/home-link',
+			'core/navigation-link',
+		],
+	},
+	{
+		slug: 'colors',
+		title: __( 'Colors' ),
+		blocks: [],
+	},
+	{
+		slug: 'blocks',
+		title: __( 'All Blocks' ),
+		blocks: [],
+		subcategories: STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES,
+	},
+];
+
+// Forming a "block formatting context" to prevent margin collapsing.
+// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+const ROOT_CONTAINER = `
+	.is-root-container {
+		display: flow-root;
+	}
+`;
+// The content area of the Style Book is rendered within an iframe so that global styles
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.editor-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+export const STYLE_BOOK_IFRAME_STYLES = `
+	body {
+		position: relative;
+		padding: 32px !important;
+	}
+
+	${ ROOT_CONTAINER }
+
+	.editor-style-book__examples {
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.editor-style-book__example {
+	    max-width: 900px;
+		border-radius: 2px;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
+		margin: 0 auto 40px auto;
+	}
+
+	.editor-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.editor-style-book__example.is-disabled-example {
+		pointer-events: none;
+	}
+
+	.editor-style-book__example:focus:not(:disabled) {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	.editor-style-book__duotone-example > div:first-child {
+		display: flex;
+		aspect-ratio: 16 / 9;
+		grid-row: span 1;
+		grid-column: span 2;
+	}
+	.editor-style-book__duotone-example img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	.editor-style-book__duotone-example > div:not(:first-child) {
+		height: 20px;
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+	}
+
+	.editor-style-book__color-example {
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+	}
+
+	.editor-style-book__subcategory-title,
+	.editor-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 13px;
+		font-weight: normal;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		padding-top: 8px;
+		border-top: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+		color: color-mix( in srgb, currentColor 60%, transparent );
+	}
+
+	.editor-style-book__subcategory-title {
+		font-size: 16px;
+		margin-bottom: 40px;
+    	padding-bottom: 8px;
+	}
+
+	.editor-style-book__example-preview {
+		width: 100%;
+	}
+
+	.editor-style-book__example-preview .block-editor-block-list__insertion-point,
+	.editor-style-book__example-preview .block-list-appender {
+		display: none;
+	}
+	:where(.is-root-container > .wp-block:first-child) {
+		margin-top: 0;
+	}
+	:where(.is-root-container > .wp-block:last-child) {
+		margin-bottom: 0;
+	}
+`;

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

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGrid as Grid } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { Duotone } from './types';
+
+const DuotoneExamples = ( {
+	duotones,
+}: {
+	duotones: Duotone[];
+} ): JSX.Element | null => {
+	if ( ! duotones ) {
+		return null;
+	}
+
+	return (
+		<Grid columns={ 2 } rowGap={ 16 } columnGap={ 16 }>
+			{ duotones.map( ( duotone: Duotone ) => {
+				return (
+					<Grid
+						key={ duotone.slug }
+						className="editor-style-book__duotone-example"
+						columns={ 2 }
+						rowGap={ 8 }
+						columnGap={ 8 }
+					>
+						<div>
+							<img
+								alt={ `Duotone example: ${ duotone.slug }` }
+								src="https://s.w.org/images/core/5.3/MtBlanc1.jpg"
+								style={ {
+									filter: `url(#wp-duotone-${ duotone.slug })`,
+								} }
+							/>
+						</div>
+						{ duotone.colors.map( ( color ) => {
+							return (
+								<div
+									key={ color }
+									className="editor-style-book__color-example"
+									style={ { backgroundColor: color } }
+								/>
+							);
+						} ) }
+					</Grid>
+				);
+			} ) }
+		</Grid>
+	);
+};
+
+export default DuotoneExamples;

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

@@ -0,0 +1,273 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	getBlockType,
+	getBlockTypes,
+	getBlockFromExample,
+	createBlock,
+	// @wordpress/blocks imports are not typed.
+	// @ts-expect-error
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	BlockExample,
+	ColorOrigin,
+	MultiOriginPalettes,
+	BlockType,
+} 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 as keyof MultiOriginPalettes ];
+		const paletteFiltered = Array.isArray( palette )
+			? palette.find(
+					( origin: ColorOrigin ) => origin.slug === group.origin
+			  )
+			: undefined;
+
+		if ( paletteFiltered?.[ group.type ] ) {
+			const example: BlockExample = {
+				name: group.slug,
+				title: group.title,
+				category: 'colors',
+			};
+			if ( group.type === 'duotones' ) {
+				example.content = (
+					<DuotoneExamples
+						duotones={ paletteFiltered[ group.type ] }
+					/>
+				);
+				examples.push( example );
+			} else {
+				example.content = (
+					<ColorExamples
+						colors={ paletteFiltered[ group.type ] }
+						type={ group.type }
+					/>
+				);
+				examples.push( example );
+			}
+		}
+	} );
+
+	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 if they exist.
+	const themePalette = Array.isArray( colors?.colors )
+		? colors.colors.find(
+				( origin: ColorOrigin ) => origin.slug === 'theme'
+		  )
+		: undefined;
+
+	if ( themePalette ) {
+		const themeColorexample: BlockExample = {
+			name: 'theme-colors',
+			title: __( 'Colors' ),
+			category: 'overview',
+			content: (
+				<ColorExamples
+					colors={ themePalette.colors }
+					type="colors"
+					templateColumns="repeat(auto-fill, minmax( 200px, 1fr ))"
+					itemHeight="32px"
+				/>
+			),
+		};
+
+		examples.push( themeColorexample );
+	}
+
+	// Get examples for typography blocks.
+	const typographyBlockExamples: BlockType[] = [];
+
+	if ( getBlockType( 'core/heading' ) ) {
+		const headingBlock = createBlock( 'core/heading', {
+			// translators: Typography example. Your local alphabet, numbers and some common special characters.
+			content: __(
+				`AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789X{(…)},.-<>?!*&:/A@HELFO™©`
+			),
+			level: 1,
+		} );
+		typographyBlockExamples.push( headingBlock );
+	}
+
+	if ( getBlockType( 'core/paragraph' ) ) {
+		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.`
+			),
+		} );
+
+		if ( getBlockType( 'core/group' ) ) {
+			const groupBlock = createBlock(
+				'core/group',
+				{
+					layout: {
+						type: 'grid',
+						columnCount: 2,
+						minimumColumnWidth: '12rem',
+					},
+					style: {
+						spacing: {
+							blockGap: '1.5rem',
+						},
+					},
+				},
+				[ firstParagraphBlock, secondParagraphBlock ]
+			);
+			typographyBlockExamples.push( groupBlock );
+		} else {
+			typographyBlockExamples.push( firstParagraphBlock );
+		}
+	}
+
+	if ( !! typographyBlockExamples.length ) {
+		examples.push( {
+			name: 'typography',
+			title: __( 'Typography' ),
+			category: 'overview',
+			blocks: typographyBlockExamples,
+		} );
+	}
+
+	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.
+ *
+ * @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: BlockType ) => {
+			const { name, example, supports } = blockType;
+			return (
+				name !== 'core/heading' &&
+				!! example &&
+				supports?.inserter !== false
+			);
+		} )
+		.map( ( blockType: BlockType ) => ( {
+			name: blockType.name,
+			title: blockType.title,
+			category: blockType.category,
+			/*
+			 * 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' );
+
+	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 );
+
+	const overviewBlockExamples = getOverviewBlockExamples( colors );
+
+	return [
+		headingsExample,
+		...colorExamples,
+		...nonHeadingBlockExamples,
+		...overviewBlockExamples,
+	];
+}