Global styles concept

[jwold]

Feature description

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Global styles prototype

  • 🚩Prototype global styles based on discussion
    • https://www.figma.com/file/xxVSqFZtokpFyva2vCGXid/global-styles?node-id=56%3A301&viewport=973%2C241%2C0.5845028758049011
    • Edit Site: Expose "global style" tools WordPress/gutenberg#19255
    • Exploring beyond a sidebar for exposing styling tools WordPress/gutenberg#20212
    • If I’m editing a heading on a post, how do I apply that and make a global style.
    • Look at G2 Demo of Gutenberg. PR called “Try/G2”

• Proposal:

  • Explore concept beyond Customizer for post-map, think about Riad’s Unsplash
  • Themes coming with a plugin that hooks into the editor
  • Probably take advantage of variables. CSS variables.

• Idea

  • Load into Gutenberg editor. Modal to choose theme
  • And then custom options
  • Full site editing not ready. She thinks there’s a middle ground to explore half way into Gutenberg.
  • Perhaps load theme, have theme config page to select base.
  • Maybe Gutenberg demo page, load with as many blocks.

• Toolbar (vs sidebar) likely shipping in Gutenberg end of the year

Global styles

• If we could use global styles sidebar (talk to Q) makes a lot of sense
• For local have a switch to view it as an option. Maybe an option in plugin.
• Goal: keep me in editor
• Need to work on
• 🎈Show what’s happening in Figma, and what phase 2 looks like
• Components, typography scale, font pairings

Button

• If by block its local and if its in sidebar its global
• Perhaps: demo page is global and blocks is local.

Actions

• Give feedback on global styles tickets
• Checkout Riad’s plugin
• Checkout global styles (slots down over)
• Yoast doing in full on way (using sidebar as site area)
• Simple shipit is Customizer, but still explore whether we can do Gutenberg.
• If start using CSS variables today, setting self up later for that in a good way.
• Research global styles a bit
• Ask Devs if they want to talk to Q, to learn about CSS variables and infrastructure and APIs, etc

Implementation brief

QA testing instructions

Demo

Changelog entry

[jwold]

Closing. We can revisit based on further discussion and feedback.