Site Editor: Add Welcome Guide

[Copons]

Follow up to #29031

The original issue was about adding the Welcome Guide to both the Template and Site Editor.
The issue closed after #31330 got merged, even though the PR only added the guide to the Template Editor.
This makes sense in a way: the Template Editor will be included in Core 5.8, so it's definitely more urgent than the Site Editor.

This new issue simply tracks the addition of the Welcome Guide to the Site Editor as well, to avoid forgetting about it eventually.

[noisysocks]

Just noting that I saw a hint of a welcome guide design in #29630 (comment).

[Mamaduka]

Hi, @kellychoffman

Is it possible to get images and text copy for Welcome Guide?

[carolynannewells]

Hello! Carolyn here from editorial. We got a ping for a copy review. Please could you direct me to the copy you would like me to look at?

[noisysocks]

Hello! Carolyn here from editorial. We got a ping for a copy review. Please could you direct me to the copy you would like me to look at?

Sorry, I added the wrong label. We're currently awaiting design and copy.

[Mamaduka]

I created PR, but we still need design and copy for the new Welcome Guide.

[kellychoffman]

@carolynannewells: copy for the Styles welcome guide is in this doc.https://docs.google.com/document/d/1LTlLW6M8UjlHo3KUNmVmWElrfm8CRvQl3tRPueyf22Y/edit#heading=h.cjfiamz95gn9

Copying it below as well in case that is easier.

Editor welcome guide:

Edit your site
Enjoy the familiar experience of blocks to edit your full site, from the header all the way down to the footer. Click [Styles icon] to start designing your typography, layout, colors, and blocks.

Styles welcome guide:

Slide 1: Welcome to Styles
Give your entire site a new look in big and small ways - create a default color palette for your buttons or change the font used everywhere.

Slide 2: Set the design
Customize various aspects of your site. Try out and apply different colors, typography, and layouts across your entire site or leave it your theme to handle!

Slide 3: Personalize blocks
Choose the styles for all blocks to ensure a cohesive experience across your site. Create a branded buttons block with your unique colors or set the Heading block to the size of your liking.

Slide 4: Learn more
New to the block themes and styling your site? Here's a detailed guide to learn how to make the most of it.

co-wrote with @annezazu

[kellychoffman]

@javierarce: Would you be able to lend your animation design to the welcome guides?

For reference: To see what the current one looks like, go to: Posts > Add New > kabab menu in upper right > check Welcome Guide. I don't think the style needs to be exactly the same, but just wanted to point you to what the current one looks like.

[jameskoster]

Just to clarify: The "Editor welcome guide" should appear when you click Appearance > Editor (beta).

The "Styles welcome guide" should appear when you click Appearance > Styles.

[javierarce]

@javierarce: Would you be able to lend your animation design to the welcome guides?

Yes 💫

[carolynannewells]

Hello! I made adjustments to the copy on the Googledoc. Please let me know if that does not work or if you need any other help. Thanks!

[kellychoffman]

Thank you so much! cc @Mamaduka for final copy here: https://docs.google.com/document/d/1LTlLW6M8UjlHo3KUNmVmWElrfm8CRvQl3tRPueyf22Y/edit#heading=h.cjfiamz95gn9

[Mamaduka]

Thank you, everyone.

[javierarce]

I'm currently working on the animations and I think I'll be able to have all of them before the freeze.

I've created some mockups in Figma for three of them (Edit your site, Welcome to Styles, Set the design). You can test the animations simply by clicking the screen to advance to the next step.

Because of time constraints, I think we could reuse the "Learn more" animation we currently have.

[javierarce]

Here are the three first gifs (I'll provide the static versions when you've reviewed them). Also, let me know if you want them to loop (the ones we show now only play once).

Edit your site

updated version below

Welcome to styles

updated version below

Set the design

[javierarce]

And here's the gif for "Personalize blocks"

I'll probably try to come up with something a little more exciting for "Edit your site", but in any case let me know what you think of these animations.

[javierarce]

Ok, I added circle bursts to the following animations to make them more interesting:

Welcome to styles

Edit your site

[kellychoffman]

WOW! I love these @javierarce 😍

[javierarce]

An updated version for "Edit your site" focusing more on template manipulation:

Edit your site

And here are the previous ones (adjusted to account for the close button position)

Welcome to styles

Set the design

Personalize blocks