Site Editor: add WP.com Global Styles

[ianstewart]

This may require a UI update, refactoring, or simply replacing core font options with our own but we should reconcile the two versions of Global Styles that we have live now. Compare the (core) Typography module on the left with the (wpcom) Font Selection module on the right available in the Post Editor.

[ianstewart]

It would be nice to start seeing our colour schemes in here as well.

cc @rickybanister @simison

[ianstewart]

I'll make a separate issue for the colour scheme idea. We'll likely be able to close this issue out with this one:

73-gh-view-design#issue-703691097

… if the site editor inherits our WP.com global style fonts updates.

[ianstewart]

There have been some updates to the core global styles since this issue was created.

We may really need to only do two things here to satisfy an MVP.

1. Replace the single select menu in core's global styles with our split Heading/Base menus.
2. Add in our font pairing options, which now use simpler gutenberg styles.

Current wpcom UI:

[simison]

@ianstewart @nosolosw:

• Are there plans for Global styles in core to support Headings/Base font separately instead of just one font?

  

• Is there a slot-fill in Global styles panel to easily add such quick-selector into that panel?
  

• Is Global styles font-list extendable via filters with Google fonts?

[oandregal]

👋 There's a few things here. Core is now in the middle of updating the component system and reviewing the design of the sidebars (starting with Global Styles in the Site Editor I believe), see WordPress/gutenberg#27331 and WordPress/gutenberg#27484 Until those efforts are settled, I don't think we'll start developing the mechanisms for 3rd parties to extend the UI of Global Styles. On the other hand, there's also a task to implement the necessary hooks to allow changing all of this at the infrastructure level, see WordPress/gutenberg#27504

[simison]

@nosolosw what if those extension-points would be __experimental, then it really wouldn't be official (and you wouldn't need to worry about any breakage)?

[oandregal]

The site editor is already experimental, so I presume that should be enough as far as UI extension goes. My larger point was that the GS sidebar is changing, so it seems best to wait until that dust is settled to avoid duplicated work.

[simison]

@nosolosw I think it's fine (although I'm not familiar with details so bare that in mind!). It's generally more valuable for us on .com get all FSE flows into internal testing earlier (like, next month), rather than in a perfect-shape much later on. We're fully aware that it's a moving target and we're prepared for it. :-)

[ianstewart]

+1 on adapting to the moving target. We'll need to do that from a UX standpoint for our Site Editor testing flow …

1. User picks a design pre-site-creation.
2. User picks a font pairing.
3. User lands in Site Editor.
4. […]

Current status for step four lands them in the site editor with a version of global styles in the Site Editor that offers one font interface, that doesn't match what they saw before they got to the site editor, and if they travel to the page or post editor, they'll only then see a UI that matches what they saw in the site editor.

[olaolusoga]

With FSE in a better shape, and having the pieces necessary for a true FSE experience, I question the value of the font pairing step in Gutenboarding. With Global styles, we can move the font selection step, and maybe preview into FSE where we could use a guidance system (TBD) to inform folks they can modify their site fonts with the global styles sidebar.

Also, with global styles getting the needed attention in core, assuming the UI will be changing maybe for the better towards something more contextual that provides affordance.

[ianstewart]

+1. I might keep a large preview after the design picker step though? Just because it gives you a chance to evaluate what you're selecting. That opinion on the preview isn't a blocker for my +1.

Removing the font selection in onboarding also opens up a chance to be more creative with font pairings. Right now they're the design options are tied to the small list of pairings.