Part of:

• Tracking: Style Book iterative tasks #64707

Depends on:

• Style book: create static categories #65430

What?

Adds a "Color" tab to the Style Book.

Why?

An important aspect of a theme's styles are its available colors, gradients, and duotone filters. The proposed color tab for the style book provides a means through which these can be displayed alongside other global styles for blocks.

See #53431 for further context.

How?

• Adds a slug to the multi-origin colors and gradients data so they can be identified regardless of name translation
• Fixes some translation context strings for the multi-origin colors and gradients
• Updates the Global Styles onSelect handler to accept navigation to color palette screen
• Creates custom components to render color, gradient, and duotone examples in desired layout
• Adds constant for defining the different groups within the Color tab
• Tweaks style book categories as needed
• Adds new styles for the style book's iframe to handle grid layout of color examples etc
• Switches examples.ts to examples.tsx and adds/updates utils for generating color tab examples
• Adds custom hook to retrieve duotone palette alongside colors and gradients
• Wires up the color tab and examples to the Style Book itself
• Adds means of disabling examples (makes CompositeItem disabled and turns off pointer events).

Testing Instructions

To save some extra configuration to see all the various types of color examples activate a theme such as TT2 that defines not only color palettes but also duotones, gradients, and keeps default palettes enabled.

1. Navigate to Appearance > Editor
2. Open the Global Styles sidebar and toggle on the Style Book
3. Switch between the Style Book's various tabs and smoke test existing behaviour
4. Confirm the different type of color examples display appropriately
5. Test clicking on color and gradient examples, they should open the "Edit Palette" screen in the Global Styles sidebar. The one catch here is the gradients will not open the appropriate tab. Improving this can be a follow-up.
6. Note that duotone examples shouldn't navigate to any new Global Styles screen as duotone filters aren't configurable in Global Styles.
7. Try editing the different palettes and ensure your custom colors and gradients appear in the correct section under the Color tab.
8. Switch back to the root of the Site Editor i.e. Appearance > Editor
9. Select Styles and toggle on the Style Book
10. The color examples should render here as well

Screenshots or screencast