From 4184b4b02f0b4f53454f8437580e3523129aaff2 Mon Sep 17 00:00:00 2001 From: benazeer Date: Fri, 25 Oct 2024 16:14:51 +0530 Subject: [PATCH] Revert "Style Book: Add color tab (#65692)" This reverts commit 54371146e6515a15118c6feceb34ade061b44a1b. --- ...se-multiple-origin-colors-and-gradients.js | 8 +- .../src/components/global-styles/ui.js | 11 -- .../components/style-book/color-examples.tsx | 44 ------ .../src/components/style-book/constants.ts | 80 +---------- .../style-book/duotone-examples.tsx | 53 -------- .../src/components/style-book/examples.ts | 63 +++++++++ .../src/components/style-book/examples.tsx | 113 ---------------- .../src/components/style-book/index.js | 128 ++---------------- .../components/style-book/test/categories.js | 5 + .../src/components/style-book/types.ts | 35 +---- 10 files changed, 85 insertions(+), 455 deletions(-) delete mode 100644 packages/edit-site/src/components/style-book/color-examples.tsx delete mode 100644 packages/edit-site/src/components/style-book/duotone-examples.tsx create mode 100644 packages/edit-site/src/components/style-book/examples.ts delete mode 100644 packages/edit-site/src/components/style-book/examples.tsx diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js index cfa5930ba7034c..ee27960529ede3 100644 --- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js @@ -55,7 +55,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Theme', 'Indicates this palette comes from the theme.' ), - slug: 'theme', colors: themeColors, } ); } @@ -69,7 +68,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Default', 'Indicates this palette comes from WordPress.' ), - slug: 'default', colors: defaultColors, } ); } @@ -77,9 +75,8 @@ export default function useMultipleOriginColorsAndGradients() { result.push( { name: _x( 'Custom', - 'Indicates this palette is created by the user.' + 'Indicates this palette comes from the theme.' ), - slug: 'custom', colors: customColors, } ); } @@ -99,7 +96,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Theme', 'Indicates this palette comes from the theme.' ), - slug: 'theme', gradients: themeGradients, } ); } @@ -113,7 +109,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Default', 'Indicates this palette comes from WordPress.' ), - slug: 'default', gradients: defaultGradients, } ); } @@ -123,7 +118,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Custom', 'Indicates this palette is created by the user.' ), - slug: 'custom', gradients: customGradients, } ); } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 9ca88f40f1f001..6cd465e237100a 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -45,7 +45,6 @@ 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 ); @@ -192,16 +191,6 @@ function GlobalStylesStyleBook() { ) } onSelect={ ( blockName ) => { - 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 ) ); } } diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx deleted file mode 100644 index 97bdeecee32d3d..00000000000000 --- a/packages/edit-site/src/components/style-book/color-examples.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/** - * 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 ( - - { 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 ; - } ) } - - ); -}; - -export default ColorExamples; diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 1ba1bf5e3dffa9..fc06d8f1409f0d 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -6,52 +6,7 @@ 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', - }, -]; +import type { StyleBookCategory } from './types'; export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit< StyleBookCategory, @@ -119,7 +74,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ { slug: 'colors', title: __( 'Colors' ), - blocks: [], + blocks: [ 'custom/colors' ], }, { slug: 'theme', @@ -156,7 +111,7 @@ export const STYLE_BOOK_IFRAME_STYLES = ` .is-root-container { display: flow-root; } - + body { position: relative; padding: 32px !important; @@ -186,40 +141,15 @@ export const STYLE_BOOK_IFRAME_STYLES = ` box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); } - .edit-site-style-book__example.is-disabled-example { - pointer-events: none; - } - .edit-site-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; } - .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; } - + .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; @@ -230,7 +160,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; diff --git a/packages/edit-site/src/components/style-book/duotone-examples.tsx b/packages/edit-site/src/components/style-book/duotone-examples.tsx deleted file mode 100644 index 7ee90e61f1c6aa..00000000000000 --- a/packages/edit-site/src/components/style-book/duotone-examples.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/** - * 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 ( - - { duotones.map( ( duotone: Duotone ) => { - return ( - - - { - - { duotone.colors.map( ( color ) => { - return ( - - ); - } ) } - - ); - } ) } - - ); -}; - -export default DuotoneExamples; diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts new file mode 100644 index 00000000000000..80807b10374c68 --- /dev/null +++ b/packages/edit-site/src/components/style-book/examples.ts @@ -0,0 +1,63 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { + getBlockType, + getBlockTypes, + getBlockFromExample, + createBlock, +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import type { BlockExample } from './types'; + +/** + * Returns a list of examples for registered block types. + * + * @return {BlockExample[]} An array of block examples. + */ +export function getExamples(): 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, + } ); + } ), + }; + + return [ headingsExample, ...nonHeadingBlockExamples ]; +} diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx deleted file mode 100644 index 9f4badd99a6582..00000000000000 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ /dev/null @@ -1,113 +0,0 @@ -/** - * 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 = ( - - ); - examples.push( example ); - } else { - example.content = ( - - ); - 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 ]; -} diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 93bbc6311c6865..0d8c49d76af507 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -11,26 +11,18 @@ import { Composite, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { __, _x, sprintf } from '@wordpress/i18n'; +import { __, 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'; import { useResizeObserver } from '@wordpress/compose'; -import { - useMemo, - useState, - memo, - useContext, - useEffect, -} from '@wordpress/element'; +import { useMemo, useState, memo, useContext } from '@wordpress/element'; import { ENTER, SPACE } from '@wordpress/keycodes'; /** @@ -59,81 +51,6 @@ 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, @@ -147,8 +64,7 @@ function StyleBook( { const [ resizeObserver, sizes ] = useResizeObserver(); const [ textColor ] = useGlobalStyle( 'color.text' ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); - const colors = useMultiOriginPalettes(); - const [ examples, setExamples ] = useState( () => getExamples( colors ) ); + const [ examples ] = useState( getExamples ); const tabs = useMemo( () => getTopLevelStyleBookCategories().filter( ( category ) => @@ -158,12 +74,6 @@ function StyleBook( { ), [ examples ] ); - - // Ensure color examples are kept in sync with Global Styles palette changes. - useEffect( () => { - setExamples( getExamples( colors ) ); - }, [ colors ] ); - const { base: baseConfig } = useContext( GlobalStylesContext ); const mergedConfig = useMemo( () => { @@ -364,7 +274,6 @@ const Examples = memo( key={ example.name } id={ `example-${ example.name }` } title={ example.title } - content={ example.content } blocks={ example.blocks } isSelected={ isSelected( example.name ) } onClick={ () => { @@ -403,7 +312,6 @@ 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={ () => { @@ -414,9 +322,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => { ); }; -const disabledExamples = [ 'example-duotones' ]; - -const Example = ( { id, title, blocks, isSelected, onClick, content } ) => { +const Example = ( { id, title, blocks, isSelected, onClick } ) => { const originalSettings = useSelect( ( select ) => select( blockEditorStore ).getSettings(), [] @@ -436,20 +342,12 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => { [ blocks ] ); - const disabledProps = disabledExamples.includes( id ) - ? { - disabled: true, - accessibleWhenDisabled: true, - } - : {}; - return (
{ render={
} role="button" onClick={ onClick } - { ...disabledProps } > { title } @@ -470,17 +367,12 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => { aria-hidden > - { content ? ( - content - ) : ( - - - - - ) } + + +
diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js index 128eaf282a9c5d..5629689e260f89 100644 --- a/packages/edit-site/src/components/style-book/test/categories.js +++ b/packages/edit-site/src/components/style-book/test/categories.js @@ -48,6 +48,11 @@ const exampleThemeBlocks = [ title: 'Home Link', category: 'design', }, + { + name: 'custom/colors', + title: 'Colors', + category: 'colors', + }, { name: 'core/site-logo', title: 'Site Logo', diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts index e7be17b17dd4df..4729b38b1b2bb1 100644 --- a/packages/edit-site/src/components/style-book/types.ts +++ b/packages/edit-site/src/components/style-book/types.ts @@ -9,7 +9,6 @@ export type StyleBookCategory = { slug: string; blocks?: string[]; exclude?: string[]; - include?: string[]; subcategories?: StyleBookCategory[]; }; @@ -17,8 +16,7 @@ export type BlockExample = { name: string; title: string; category: string; - content?: JSX.Element; - blocks?: Block | Block[]; + blocks: Block | Block[]; }; export type CategoryExamples = { @@ -27,34 +25,3 @@ 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' >; -};