WordPress.org

Make WordPress Core

Opened 11 months ago

Last modified 3 months ago

#48758 new enhancement

Repurpose 'Hello World' post to also serve as a Gutenberg tutorial

Reported by: nrqsnchz Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords: needs-design-feedback has-screenshots needs-copy-review
Focuses: ui, ui-copy Cc:

Description

(This ticket has been migrated from GitHub: https://github.com/WordPress/gutenberg/issues/17874)

On new WordPress installs, users get a 'Hello World' post by default. The post's content is minimal and does not do a great job of explaining users what to do next.

https://cldup.com/fI5eLunpwG.png

I'm wondering if we can instead make better use of the 'Hello World' post and maybe have some pre-loaded content that can help new users learn the basics of the Block Editor and maybe serve as a little showcase of the cool things you can do.


The new 'Welcome to WordPress" demo post

https://cldup.com/MtjDPstIuV.png

☝️ The above is a quick example that hopefully can serve as starter to iterate to something better.

Because the guide is in the block editor, the idea is that the guide itself shows what users can do by using different types of blocks and features. For example, the guide can make use of column blocks, video, group, etc. We can use it as a nice showcase of what can be done with Gutenberg.

We can also probably use better images or even fancy illustrations, to make it more interesting and engaging.

In the example above, which again is just a quick attempt, the guide starts by showing users how to add a block using the Block Inserter in the top toolbar. That right there communicates to the new user that the plus sign icon adds blocks and when/if they find it somewhere else in the interface, they will already know what it does. It also discretely shows that there's more options in the toolbar that the user can then explore.

The guide then moves on to explain that there are different types of blocks and that they can be customized by using the options in the Block Toolbar.

And finally, the guide explains that there's a sidebar with additional settings for the document and the blocks.

Again, this could be improved in so many different ways:

  • we can iterate on the contents and topics of the guide,
  • we can use better images or illustrations,
  • we can be more clever and use different blocks and make the guide more interesting

I'd love to hear your thoughts on this.

Change History (13)

#1 @nrqsnchz
11 months ago

from @karmatosed (https://github.com/WordPress/gutenberg/issues/17874#issuecomment-540605774):

"I love the idea of having a better introduction page. There is actually a demo page already in Gutenberg if you have the plugin, that is a great starting place for this. My only ponder with using the hello world is we have to do a check for 'if Gutenberg active' as that page is also used for classic editor.

The problem with the demo page right now is it's not a guide as much as a showcase. What your suggestion fills is a guide. It also takes a somewhat not as useful thing, the hello world post. I know historically there's some passion around it, which is great, but it could be more useful.

One thing I wonder is the amount of text. For example, are you suggesting we translate this? I feel that a lot of text like this will be quite a bit for many to follow. How could we perhaps take this idea and make it more inclusive to everyone?

I think there's a great foundation here, it's how that could grow and avoiding being a manual page."

Last edited 11 months ago by nrqsnchz (previous) (diff)

#2 @nrqsnchz
11 months ago

Thanks for the feedback @karmatosed!

"One thing I wonder is the amount of text. For example, are you suggesting we translate this? I feel that a lot of text like this will be quite a bit for many to follow. How could we perhaps take this idea and make it more inclusive to everyone?"

I totally agree. There should definitively be a balance. A big block (no pun intended) of text would not be inviting. I think we should make use of as many elements and formats as possible to make this more engaging and educational.

I can see us using video, illustrations, guided steps (like "Add your first block") and even linking to external resources and examples.

The guide could also be formatted in a way that can be consumed in parts, so folks can come back to it and continue where they left if they want.

#3 @nrqsnchz
11 months ago

from @karmatosed: (https://github.com/WordPress/gutenberg/issues/17874#issuecomment-541014782)

"What would the most minimal amount of information we could get across for the most impact? I know you are mentioning a few things like video, illustration, guided steps. What do you think the minimum could be? What other examples are there out there to explore too? I know it's a common ask but I do think on things like this we can learn."

#4 @nrqsnchz
11 months ago

Discussed at Oct 16 design meeting on Slack (https://wordpress.slack.com/archives/C02S78ZAL/p1571251034235000).

I'll attempt to add the general feedback from different folks:

  • We need to be cautious and avoid this becoming a manual.
  • Explore merging with demo page
  • How would this complement Tips?
  • Explore renaming from 'Hello World' to something more obvious and engaging, so users don't ignore it. (Introduction, Tips, Guide, etc.)
  • This might be useful to see how well themes supports the Block Editor.

#5 @nrqsnchz
11 months ago

For inspiration, I'm starting to look at how other products/services do welcome guides/tutorials.

Here's Trello's 'Welcome Board' (https://trello.com/b/bKbdmCKB/welcome-board) that every new users gets by default on their account:

https://cldup.com/_Krdy9zzFa.png

I like how the board is divided into 3 lists (Basics, Intermediate and Advanced), which by itself teaches the new user about lists and how to use them.

It's nice that the amount of cards on each list is relatively short, so it should be hard for most folks to feel overwhelmed.

The cards themselves are used both as step by step actions and as examples/demos of the available features (click on a card to see what's behind, drag this card anywhere, etc.).

https://cldup.com/tbOw8XAkyt.png
https://cldup.com/pYx1qnnOpW.png

Instead of getting complicated or long, the 'Advanced' list points the user to external resources such as Help docs, longer online guide, API info, etc. where if interested, the user can then dive deeper and learn more.

#7 @nrqsnchz
11 months ago

Notion (www.notion.so) also has an onboarding guide that is presented to new users as soon as they finish creating their account:

https://cldup.com/EtYpmhkDsL.png

Similar to Trello, the UI elements are used to format the tutorial and guide the users on a step-by-step basis:

https://cldup.com/KNjVo0Mfle.png

The workspace is also preloaded with some sample templates that include some guidance on how to use them:

https://cldup.com/Vh5r9nwxMh.jpg
https://cldup.com/bZuafnBBEp.png

#8 @nrqsnchz
11 months ago

  • Keywords needs-copy-review added

Here's a second pass at the new 'Hello World' post I'm proposing. Before we look at images and media, I think we should focus on the content and make sure we get it right first. I worked on what I think would be a good outline to start with. I tried to keep things to a minimum.

Let me know what you think and if you feel this can be improved. Maybe we can condense things a bit more? Maybe a I missed something or things are out of place?


Welcome to WordPress!

This is a demo post. Think of it as a playground for you to explore and learn the new block editor. You can edit or delete it, it’s up to you!

Blocks and the Block Library

Blocks are the fundamental building piece of the WordPress editor. They are great for building engaging content that you can insert, rearrange and style with little effort. In fact, this welcome post is built with blocks!

Let’s start by adding a new block.

Adding blocks

Adding blocks is easy and there’s a few different ways you can do it. First, try clicking the Add Block button on the top toolbar.

[image/gif]

You can add all types of blocks from the Block Library. These include paragraphs, images, galleries and even blocks that will help you customize the layout of your post.

[images]

You can also add more blocks by clicking the Block Inserter [image] that appears before and after the blocks in your post and by typing / on a new line of text.

Block Toolbar and Settings

Each block comes with its own set of properties and options. When a block is selected, you’ll find these in the Block Toolbar.

[image]

Each block type will come with different settings. Make sure you explore them so you get the most out of your blocks.

You’ll find additional and more advanced settings and options in the Block Settings sidebar.

[images]


Edit and Select tools

The WordPress block editor features two modes that make getting around easier.

[image]

As their name implies, Editing and Selecting allow you to focus on one interaction at a time. Press escape (ESC) to enter selection mode and press Enter to go back to editing mode.

Document Settings

The Document Settings sidebar is where you’ll find your post’s general settings. These include visibility, status, categories, tags, excerpt, discussion options, among many others.

[image]

Publish

Click the Publish button once you are ready to publish your post. This will open the Publish panel where you can review your post’s visibility and date settings before publishing.


[image/gif]

Learn more

You’re now ready to start using the block editor! If you want to dig deeper and learn more about its powerful capabilities, we recommend you take a look at these links:

  • link 01
  • link 02
  • link 03

This ticket was mentioned in Slack in #design by estelaris. View the logs.


5 months ago

#10 in reply to: ↑ description @saiftheboss7
5 months ago

I think the Hello World is pretty great. It has a certain history and heritage of it behind it. But we could always add some new content like images. heading, images, quotes, pull quotes and new features to show off the new features of WordPress. It has been just a few lines awhile

Replying to nrqsnchz:

(This ticket has been migrated from GitHub: https://github.com/WordPress/gutenberg/issues/17874)

On new WordPress installs, users get a 'Hello World' post by default. The post's content is minimal and does not do a great job of explaining users what to do next.

https://cldup.com/fI5eLunpwG.png

I'm wondering if we can instead make better use of the 'Hello World' post and maybe have some pre-loaded content that can help new users learn the basics of the Block Editor and maybe serve as a little showcase of the cool things you can do.


The new 'Welcome to WordPress" demo post

https://cldup.com/MtjDPstIuV.png

☝️ The above is a quick example that hopefully can serve as starter to iterate to something better.

Because the guide is in the block editor, the idea is that the guide itself shows what users can do by using different types of blocks and features. For example, the guide can make use of column blocks, video, group, etc. We can use it as a nice showcase of what can be done with Gutenberg.

We can also probably use better images or even fancy illustrations, to make it more interesting and engaging.

In the example above, which again is just a quick attempt, the guide starts by showing users how to add a block using the Block Inserter in the top toolbar. That right there communicates to the new user that the plus sign icon adds blocks and when/if they find it somewhere else in the interface, they will already know what it does. It also discretely shows that there's more options in the toolbar that the user can then explore.

The guide then moves on to explain that there are different types of blocks and that they can be customized by using the options in the Block Toolbar.

And finally, the guide explains that there's a sidebar with additional settings for the document and the blocks.

Again, this could be improved in so many different ways:

  • we can iterate on the contents and topics of the guide,
  • we can use better images or illustrations,
  • we can be more clever and use different blocks and make the guide more interesting

I'd love to hear your thoughts on this.

#11 @asithc
5 months ago

Hello world is the tradition. We seen it everywhere, or similar greetings while on platforms beginning.The suggestion is while keeping Hello world as it is, if we can do something to give a little push/ guidance using Images or videos to user where to start or look. that would be great.

Last edited 5 months ago by asithc (previous) (diff)

#12 @mapk
3 months ago

It's great to see this happening. I've got some feedback on the design to hopefully help keep this moving.

  1. I agree with @asithc that maybe we should keep the "Hello, World!" title. It's pretty iconic.
  2. Avoid using red arrows in the images. Is there another way to focus an element?
  3. When two very similar images are side-by-side it's difficult to guess the difference between them.
  4. Can we pair back the text a bit? Maybe we just focus on the Block Inserter, the Settings sidebar, and an individual block and its toolbar.

#13 @michaelarestad
3 months ago

I almost think it should be near identical to the original. This post is often seen for the first time on the front end of a site. Even if someone loads it in the editor, I think showing images of the editor within the editor could be confusing. I also suspect most folks are looking for a way to delete this rather than edit it. I don't think it's the best place to teach Gutenberg.

What do you think?

Note: See TracTickets for help on using tickets.