Skip to content

Commit

Permalink
Style Book: Add color tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Oct 1, 2024
1 parent cd701e9 commit 2874f35
Show file tree
Hide file tree
Showing 7 changed files with 362 additions and 35 deletions.
6 changes: 6 additions & 0 deletions .../block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export default function useMultipleOriginColorsAndGradients() {
'Theme',
'Indicates this palette comes from the theme.'
),
slug: 'theme',
colors: themeColors,
} );
}
Expand All @@ -68,6 +69,7 @@ export default function useMultipleOriginColorsAndGradients() {
'Default',
'Indicates this palette comes from WordPress.'
),
slug: 'default',
colors: defaultColors,
} );
}
Expand All @@ -77,6 +79,7 @@ export default function useMultipleOriginColorsAndGradients() {
'Custom',
'Indicates this palette comes from the theme.'
),
slug: 'custom',
colors: customColors,
} );
}
Expand All @@ -96,6 +99,7 @@ export default function useMultipleOriginColorsAndGradients() {
'Theme',
'Indicates this palette comes from the theme.'
),
slug: 'theme',
gradients: themeGradients,
} );
}
Expand All @@ -109,6 +113,7 @@ export default function useMultipleOriginColorsAndGradients() {
'Default',
'Indicates this palette comes from WordPress.'
),
slug: 'default',
gradients: defaultGradients,
} );
}
Expand All @@ -118,6 +123,7 @@ export default function useMultipleOriginColorsAndGradients() {
'Custom',
'Indicates this palette is created by the user.'
),
slug: 'custom',
gradients: customGradients,
} );
}
Expand Down
15 changes: 15 additions & 0 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import ScreenCSS from './screen-css';
import ScreenRevisions from './screen-revisions';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';

const SLOT_FILL_NAME = 'GlobalStylesMenu';
const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
Expand Down Expand Up @@ -194,6 +195,20 @@ function GlobalStylesStyleBook() {
)
}
onSelect={ ( blockName ) => {
if ( blockName === 'duotones' ) {
return;
}

if (
STYLE_BOOK_COLOR_GROUPS.find(
( group ) => group.slug === blockName
)
) {
// Go to color palettes Global Styles.
navigator.goTo( '/colors/palette' );
return;
}

// Now go to the selected block.
navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) );
} }
Expand Down
49 changes: 44 additions & 5 deletions packages/edit-site/src/components/style-book/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,46 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import type { StyleBookCategory } from './types';
import type { StyleBookCategory, StyleBookColorGroup } from './types';

export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [
{
slug: 'theme-colors',
title: __( 'Theme Colors' ),
origin: 'theme',
type: 'colors',
},
{
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,
Expand Down Expand Up @@ -74,7 +113,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
{
slug: 'colors',
title: __( 'Colors' ),
blocks: [ 'custom/colors' ],
blocks: [],
},
{
slug: 'theme',
Expand Down Expand Up @@ -111,7 +150,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
.is-root-container {
display: flow-root;
}
body {
position: relative;
padding: 32px !important;
Expand Down Expand Up @@ -149,7 +188,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
flex-direction: row;
}
.edit-site-style-book__subcategory-title,
.edit-site-style-book__example-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
Expand All @@ -160,7 +199,7 @@ export const STYLE_BOOK_IFRAME_STYLES = `
text-align: left;
text-transform: uppercase;
}
.edit-site-style-book__subcategory-title {
font-size: 16px;
margin-bottom: 40px;
Expand Down
146 changes: 142 additions & 4 deletions packages/edit-site/src/components/style-book/examples.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,158 @@ import {
/**
* Internal dependencies
*/
import type { BlockExample } from './types';
import type {
Block,
BlockExample,
ColorItem,
ColorOrigin,
Duotone,
MultiOriginPalettes,
} from './types';
import { STYLE_BOOK_COLOR_GROUPS } from './constants';

// Base CSS styles to be applied to color block examples.
const defaultColorExampleStyles = {
dimensions: { minHeight: '52px' },
border: {
width: '1px',
style: 'solid',
color: '#ddd', // Match horizontal rule under sub title headings
},
};

/**
* Creates an example block to demo a given color item for the Style Book.
* A color example could be for a simple color, gradient, or duotone filter.
*
* @param {ColorItem} color The color for display.
* @param {string} type Type of color e.g. color, gradient, or duotone.
* @return {Block|undefined} Example block.
*/
function getColorExample( color: ColorItem, type: string ): Block | undefined {
if ( type === 'colors' ) {
return createBlock( 'core/group', {
backgroundColor: color.slug,
style: defaultColorExampleStyles,
} );
}

if ( type === 'gradients' ) {
return createBlock( 'core/group', {
gradient: color.slug,
style: defaultColorExampleStyles,
} );
}

if ( type === 'duotones' ) {
return createBlock(
'core/group',
{
layout: {
type: 'grid',
columnCount: 2,
minimumColumnWidth: null,
},
style: { spacing: { blockGap: '8px' } },
},
[
createBlock( 'core/image', {
sizeSlug: 'medium',
url: 'https://s.w.org/images/core/5.3/MtBlanc1.jpg',
aspectRatio: '16/9',
scale: 'cover',
style: {
layout: { columnSpan: 2, rowSpan: 1 },
color: {
duotone: `var:preset|duotone|${ color.slug }`,
},
},
} ),
createBlock( 'core/group', {
style: {
...defaultColorExampleStyles,
color: { background: ( color as Duotone ).colors[ 0 ] },
dimensions: { minHeight: '20px' },
},
} ),
createBlock( 'core/group', {
style: {
...defaultColorExampleStyles,
color: { background: ( color as Duotone ).colors[ 1 ] },
dimensions: { minHeight: '20px' },
},
} ),
]
);
}
}

/**
* 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',
blocks: [
createBlock(
'core/group',
{
layout: {
type: 'grid',
columnCount: 2,
minimumColumnWidth: null,
},
style: {
spacing: {
blockGap: { top: '8px', left: '16px' },
},
},
},
palette[ group.type ].map( ( color: ColorItem ) =>
getColorExample( color, 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(): BlockExample[] {
export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
const nonHeadingBlockExamples = getBlockTypes()
.filter( ( blockType ) => {
const { name, example, supports } = blockType;
return (
name !== 'core/heading' &&
!! example &&
supports.inserter !== false
supports?.inserter !== false
);
} )
.map( ( blockType ) => ( {
Expand Down Expand Up @@ -58,6 +195,7 @@ export function getExamples(): BlockExample[] {
} );
} ),
};
const colorExamples = getColorExamples( colors );

return [ headingsExample, ...nonHeadingBlockExamples ];
return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ];
}
Loading

0 comments on commit 2874f35

Please sign in to comment.