Make WordPress Core

Opened 4 months ago

Last modified 4 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:


(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.


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


☝️ 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 (8)

#1 @nrqsnchz
4 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 4 months ago by nrqsnchz (previous) (diff)

#2 @nrqsnchz
4 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
4 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
4 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
4 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:


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.).


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
4 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:


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


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


#8 @nrqsnchz
4 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.


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.


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.


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.


Edit and Select tools

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


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.



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.


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
Note: See TracTickets for help on using tickets.