Site / Template editor welcome guide

[jameskoster]

When a user first encounters the site editing context, whether that is via editing a post or clicking the "Site Editor" menu item in the main navigation, a welcome guide would help outline some of the functionality in this powerful feature.

We can use the same Guide component as the post editor introduction:

[jameskoster]

Before looking at the graphics, let's discuss the slide contents. Here's a few ideas to kick-off discussion:

Welcome to the Site Editor
The Site Editor takes the block editor beyond posts and pages, making all areas of your web site visually editable.

Create and edit templates
Templates express the overall layout of content like posts and pages. It is now easy to add layout elements like sidebars to posts, or customise the appearance of search results, and 404 pages.

Customize your site header
Use blocks like Site Title and Navigation to create and customise elaborate header and footer layouts.

[annezazu]

So excited to see this being done! I think you've nicely touched on some key parts to nail down in this intro: edit everywhere, introduce editing templates (new experience), and give a direct action people can take as the final option. For some reason, I feel like introducing Global Styles as a concept is needed along with Site Editing specific blocks. Global Styles, like template editing, will be a new experience that unlocks obvious user value add.

[jameskoster]

Yeah Global Styles is certainly something to consider highlighting here. I didn't include it initially as I wasn't 100% sure whether they will end up being be a site-editor-only feature. IE this may not be the first time a user encounters them, and they may need an intro guide of their own elsewhere.

[mtias]

Welcome to the Site Editor

Are we confident in this name? Now that we are moving ahead, I'd like to reconsider it. Maybe "Design Editor" is better? Curious what you all think.

Suggested copy:

Welcome to the design editor
The Design Editor allows customizing all aspects of the site using the tools of blocks and patterns. Discover a whole new set of blocks to help build a site.

Create and edit templates
Templates express the layout of the site, including the homepage, archives, posts and pages. Add new layout elements like sidebars, edit the navigation, or customise the appearance of search results.

Paint with global styles
Change how different elements and blocks look across the entire site, including colors, typography, and spacing tools.

[jameskoster]

Are we confident in this name? Now that we are moving ahead, I'd like to reconsider it. Maybe "Design Editor" is better? Curious what you all think.

This is tough. Right now, template editing is clearly the chief focus of the Site Editor. But after it becomes an all-encompassing template+content+style editor, it seems unlikely to me that we'll continue send folks directly to the template editing functionality upon launch. Obviously we don't know for sure, but a mosaic view of content / templates, or the homepage seem to be more likely candidates.

All that to say, I think the guide is still warranted, but we might consider only showing it the first time a user encounters the template editing context specifically, and present it as the "Template" or "Theme" editor.

Edit: I suppose "Design Editor" works too :D

[mtias]

Let's get the content and welcome tour in place anyways, we can always adapt based on the flows :)

[jameskoster]

I'll work up some graphics asap.

[david-szabo97]

I thought there is an issue opened for interactive tour / guide for the block editor, but I couldn't find any so I'll leave my thoughts here.

As a first iteration using this simple Guide makes sense. But in the long run, we should think about an interactive guide where the user can follow certain steps to get familiar with the workings of the Site Editor (we could reuse it for the post editor as well).

Since the editor gets more complex every day, it's difficult to figure out for a new user, what to do, how to do it, and what all the icons in the Editor mean. I think a new user couldn't even use the site editor at all without previous knowledge + watching a few tutorial videos. Recommending an official tutorial video series in the Guide would be a great iteration as well. But nothing can beat a guide where the user itself does the changes.

[mtias]

We had an interactive guide in the post editor (NUX tips #3670) that has been removed since it never accomplished its goals super well. In core the site editor could have very different experiences based on what is locked / unlocked, and how a site is setup, so tours get more convoluted and harder to maintain. The current welcome screens are a compromise in offering something without making it too complicated. I'd prefer to keep more involved tours plugin territory until something shows significant promise.

[carolinan]

There does need to be a decision about the name asap as it will block https://make.wordpress.org/docs/2021/02/18/a-home-and-a-name-for-site-editor-documentation-full-site-editing-feature/

[aurooba]

During the meeting today, the Documentation team as a whole was wondering when we can expect a decision on the name, so we can decide on the slug and start working on the documentation setup. Would it make sense to open another issue for this or is this the best place to have this discussion (both the name and when a decision can be expected)?

[mtias]

I think we should do a new issue for the name and placement of the menu item and how it interacts with the other items within Appearance.

[jameskoster]

Adding the Needs Dev label. I think we can fine tune the language / graphics in a PR.

[carolinan]

We had an interactive guide in the post editor (NUX tips #3670) that has been removed since it never accomplished its goals super well. In core the site editor could have very different experiences based on what is locked / unlocked, and how a site is setup, so tours get more convoluted and harder to maintain. The current welcome screens are a compromise in offering something without making it too complicated. I'd prefer to keep more involved tours plugin territory until something shows significant promise.

I wonder if the detailed guide could be something themes could provide instead because the theme author would know how the theme is intended to be set up.

[hedgefield]

The setup and draft copy sounds good to me, in terms of design we'd just need to come up with the three graphics to go along with the text.

[jameskoster]

I think we may actually need some small revisions for 5.8, since global styles aren't included.

It could be as simple as removing that last slide :)

[Mamaduka]

Adding the Needs Dev label. I think we can fine tune the language / graphics in a PR.

@jameskoster will duplicate of post editor welcome guide for works this?

[jameskoster]

Do you mean using the Guide component? If so, yes :)

[Mamaduka]

Sounds good will start working on PR.

[Mamaduka]

PR is ready #31330.

[paaljoachim]

"Design Editor" is a good strong name that most people can understand.

[annezazu]

Wanted to pass along some feedback from the sixth call for testing for the FSE Outreach Program from @shaunandrews to keep in mind for future iterations:

It was a little jarring entering into the template editor. The “snackbar” notification that appears for a few seconds appeared below the welcome tour, which was a little strange. I think the welcome tour’s copy could probably be improved. I’m not sure what it means to “express the layout of the site.” Additionally, that generic WordPress page “illustration” leaves a lot to be desired. I’d expect something more relevant to blocks and templates. I also think the “Get started” button should be a primary button — white text on a blue shape. As-is, its not obvious what I need to touch to move ahead.

TLDR:

• Have the snackbar appear afterwards.
• Improve the illustration for the generic WordPress page to be more in line with a template
• Make "Get Started" a primary button.

[Mamaduka]

Thanks for the feedback, @annezazu

Have the snackbar appear afterwards.

I think we can disable snackbar, if the welcome guide is enabled.

Improve the illustration for the generic WordPress page to be more in line with a template

There's PR for graphic update - #32055.

Make "Get Started" a primary button.

I need to check if this is possible for the <Guide /> component.

[annezazu]

Amazing! Thank you for the speedy reply - so glad to see that much of this is underway.

[Mamaduka]

@annezazu Created PR for snackbar update - #32076.

[Mamaduka]

I think we can close this one and create a new issue for the last remaining item from @annezazu's list.

[youknowriad]

Closing this as it seems the biggest changes are already in.