Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style Book: Add color tab #65692

Merged
merged 9 commits into from
Oct 23, 2024
Prev Previous commit
Next Next commit
Try no using blocks for color tab examples
aaronrobertshaw committed Oct 22, 2024
commit f8c76a35c8166ccb38ba27b7c4e7b6fcc67052a9
44 changes: 44 additions & 0 deletions packages/edit-site/src/components/style-book/color-examples.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
import { __experimentalGrid as Grid } from '@wordpress/components';
import { View } from '@wordpress/primitives';
import {
getColorClassName,
__experimentalGetGradientClass,
} from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import type { Color, Gradient } from './types';

const ColorExamples = ( { colors, type } ): JSX.Element | null => {
if ( ! colors ) {
return null;
}

return (
<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>
{ colors.map( ( color: Color | Gradient ) => {
const className =
type === 'gradients'
? __experimentalGetGradientClass( color.slug )
: getColorClassName( 'background-color', color.slug );
const classes = clsx(
'edit-site-style-book__color-example',
className
);

return <View key={ color.slug } className={ classes } />;
} ) }
</Grid>
);
};

export default ColorExamples;
21 changes: 21 additions & 0 deletions packages/edit-site/src/components/style-book/constants.ts
Original file line number Diff line number Diff line change
@@ -185,6 +185,27 @@ export const STYLE_BOOK_IFRAME_STYLES = `
outline: 3px solid transparent;
}

.edit-site-style-book__duotone-example > div:first-child {
display: flex;
aspect-ratio: 16 / 9;
grid-row: span 1;
grid-column: span 2;
}
.edit-site-style-book__duotone-example img {
width: 100%;
height: 100%;
object-fit: cover;
}
.edit-site-style-book__duotone-example > div:not(:first-child) {
height: 20px;
border: 1px solid #ddd;
}

.edit-site-style-book__color-example {
height: 52px;
border: 1px solid #ddd;
}

.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
flex-direction: row;
}
53 changes: 53 additions & 0 deletions packages/edit-site/src/components/style-book/duotone-examples.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/**
* WordPress dependencies
*/
import { __experimentalGrid as Grid } from '@wordpress/components';
import { View } from '@wordpress/primitives';

/**
* Internal dependencies
*/
import type { Duotone } from './types';

const DuotoneExamples = ( { duotones } ): 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="edit-site-style-book__duotone-example"
columns={ 2 }
rowGap={ 8 }
columnGap={ 8 }
>
<View>
<img
alt={ `Duotone example: ${ duotone.slug }` }
src="https://s.w.org/images/core/5.3/MtBlanc1.jpg"
style={ {
filter: `url(#wp-duotone-${ duotone.slug })`,
} }
/>
</View>
{ duotone.colors.map( ( color ) => {
return (
<View
key={ color }
className="edit-site-style-book__color-example"
style={ { backgroundColor: color } }
/>
);
} ) }
</Grid>
);
} ) }
</Grid>
);
};

export default DuotoneExamples;
202 changes: 0 additions & 202 deletions packages/edit-site/src/components/style-book/examples.ts

This file was deleted.

113 changes: 113 additions & 0 deletions packages/edit-site/src/components/style-book/examples.tsx
Original file line number Diff line number Diff line change
@@ -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 ];
}
22 changes: 14 additions & 8 deletions packages/edit-site/src/components/style-book/index.js
Original file line number Diff line number Diff line change
@@ -363,6 +363,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={ () => {
@@ -401,6 +402,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={ () => {
@@ -411,7 +413,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => {
);
};

const Example = ( { id, title, blocks, isSelected, onClick } ) => {
const Example = ( { id, title, blocks, isSelected, onClick, content } ) => {
const originalSettings = useSelect(
( select ) => select( blockEditorStore ).getSettings(),
[]
@@ -456,13 +458,17 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
aria-hidden
>
<Disabled className="edit-site-style-book__example-preview__content">
<ExperimentalBlockEditorProvider
value={ renderedBlocks }
settings={ settings }
>
<EditorStyles />
<BlockList renderAppender={ false } />
</ExperimentalBlockEditorProvider>
{ content ? (
content
) : (
<ExperimentalBlockEditorProvider
value={ renderedBlocks }
settings={ settings }
>
<EditorStyles />
<BlockList renderAppender={ false } />
</ExperimentalBlockEditorProvider>
) }
</Disabled>
</div>
</Composite.Item>
7 changes: 3 additions & 4 deletions packages/edit-site/src/components/style-book/types.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export type Block = {
type Block = {
name: string;
attributes: Record< string, unknown >;
innerBlocks?: Block[];
@@ -17,7 +17,8 @@ export type BlockExample = {
name: string;
title: string;
category: string;
blocks: Block | Block[];
content?: JSX.Element;
blocks?: Block | Block[];
};

export type CategoryExamples = {
@@ -41,8 +42,6 @@ export type Duotone = {
slug: string;
};

export type ColorItem = Color | Gradient | Duotone;

export type ColorOrigin = {
name: string;
slug: string;