Creator: Add welcome guide on first load.

[StevenDufresne]

This PR closes #96, adding a welcome guide for new users.

I have added the component into the current Creator which will most likely be changed when #59 is resolved. I think it's fine to implement it here and then move it over later.

To Do:
This needs integration with the final pattern-creator.

Screenshots

1	2	3	4	Screencast

How to test the changes in this Pull Request:

1. Create a page with the title new-pattern
2. Navigate to /new-pattern
3. Expect to see the new welcome guide (same as screenshot)
4. Continue through the welcome guide until complete
5. Reload the page
6. Expect to not see the welcome guide

[StevenDufresne]

@shaunandrews Do you think it's realistic we will get a "Learn More" page before launching?... Just considering whether this PR should wait for it or comment out the last view and try to merge in the meantime.

[shaunandrews]

You can comment it out for now if you want.

I think the "Learn more" page could just be a page on the directory, like wordpress.org/patterns/guide and the content will likely be simple to start; A list of do's and don'ts and a few tips. Here's a draft I've worked up:

What is a WordPress pattern?
A WordPress pattern is a collection of blocks arranged together into an thoughtful, intentional, opionated section for a page of post. Once inserted into a page, the author can edit and customize the blocks to their needs.
Patterns make it incredibly simple to add complex layouts and designs to any WordPress site without having to start from scratch everytime. Patterns can also highlight and expose features and combinations of blocks that may not be immediately obvious or intuitive.
Use our Pattern Editor to create and submit your own designs. Every WordPress users benefits when you share your patterns and help democratize design.
Examples of good patterns
Good patterns combine multiple blocks together to create interesting or useful layouts that would normally be complicated to create from scratch.
A good pattern highlights the capabilities of the blocks they contain and provide a perfect starting point for customizing their content.
A good pattern is opinionated and has a well defined purpose.
Things to avoid
Patterns that contain a single block are unlikely to be useful.
Overly simplistic patterns, like a single Paragraph with colors don’t save time or present a compelling purpose.
Patterns shouldn’t be designed for a single theme.
Tips and tricks
Use the Group block to control spacing and color for more than on block at a time. Similary, you can use the Cover block to control your pattern’s height, including min-height and full-viewport designs.

[StevenDufresne]

@shaunandrews Right on. That's looking good but I'll comment it out for now since it could get caught up in a few iterations.

[StevenDufresne]

After commenting it out and using the guide, It feels like it's missing something about the publishing step? Have we considered some content explaining that patterns need publishing to be shared? It's implied in the "find your patterns" panel but maybe we should consider being more explicit?

Currently:

• You can build patterns
• We have assets for you
• Add your pattern to the directory <- Should we add this step? Or maybe combine it with the one below?
• Use them on all your sites -- in the editor!
• Need more help?

Maybe we do, maybe we don't. Thoughts?

[shaunandrews]

An earlier iteration of the welcome design had a slide about submitting patterns:

I removed it because I thought the number of steps was getting too large. But I think we can probably replace the "Find your patterns..." one with the above step. That'd give us a welcome tour with the following steps:

[ryelle]

Is this PR still in progress, depending on #115, or is it ready for review?

[StevenDufresne]

Is this PR still in progress, depending on #115, or is it ready for review?

Yeah, this is ready for review. The welcome guide will need to reintegrated differently with #115.

[ryelle]

The editor crashes when I try to load it, so i think this'll need to be rebased after #115 merges. I gave a quick look through the code though, and it seems fine.

[StevenDufresne]

@ryelle This has been integrated now.

A couple of differences with the designs:

• The last button isn't the darker blue color (it's hard to target it)
• The close "x" is bigger than the designs (it's the Gutenberg default size)

[ryelle]

I'm seeing both welcome guides on the page now, so I think we need a way to disable the core one. Could you toggle it off as soon as the page loads?

We should also look into replacing the Options menu entirely, since about half the menu should not be available to pattern authors.

[StevenDufresne]

I'm seeing both welcome guides on the page now, so I think we need a way to disable the core one. Could you toggle it off as soon as the page loads?

Yes, added.

We should also look into replacing the Options menu entirely, since about half the menu should not be available to pattern authors.

I was able to remove the Tools section but we won't be able to replace the Preferences section.

What features are left that can't be supported? The preferences appear to be pretty timid and still more or less applicable?

[shaunandrews]

The preferences appear to be pretty timid and still more or less applicable?

Some of them are probably fine to keep, but others need to be removed.

The pre-publish checklist is being replaced with our modal, so this option will need to go.

The whole Panels section will probably need to go, too. There's a blank setting, and the Template setting doesn't actually appear. The Custom fields option is broken, but also seems unrelated to the pattern editor.

--

As for the tools section of the menu, I think some of these could be helpful. Keyboard Shortcuts, Copy All Content, and Welcome Guide (our variant in the issue) should probably remain available. I could see Help being updated to point to a relevant support page.

[ryelle]

We'd need to replace the welcome guide to make it work with ours, otherwise it will toggle the core one. Same with Help, we probably can't control that link. We could add a new list with our own menu items though.

[StevenDufresne]

We'd need to replace the welcome guide to make it work with ours, otherwise it will toggle the core one. Same with Help, we probably can't control that link. We could add a new list with our own menu items though.

Correct. All the Tools items get removed at the same time. There aren't any ways to turn them off selectively... at least in a respectable manner.

Additionally, there isn't a way to turn off specific toggles in the Preferences modal... even with CSS. In my opinion, the publish toggle that would skirt our modal confirmation dialog is not a big deal since we force it off on load and that publish panel should still work anyway. If they click that toggle on, a user has specifically requested that flow and we'll need to make sure that flow works or at least runs validation properly because an astute developer could always turn that flow back on programmatically.

Regarding the empty and template panels, those can be removed (the empty one is weird.. hmmm). Custom fields are not a great feature to keep but are non-breaking.

Now I'm obviously taking the position that we can work with it because there isn't a great way to create our own dropdown. The more menu is only hideable via css and we would have to render a new root component in the menu to have a dropdown and that's not an ideal setup.

I'll hold off until we have a consensus.

@ryelle @shaunandrews Thoughts?

[ryelle]

I moved the menu & preference discussion over to #192. @StevenDufresne, if you revert the menu changes here, we can probably merge this PR.

[StevenDufresne]

I moved the menu & preference discussion over to #192. @StevenDufresne, if you revert the menu changes here, we can probably merge this PR.

Yep, I removed the code that turns off the tools.

[StevenDufresne]

@ryelle Can I get some eyes back on this?