Update /gutenberg page with more relevant info and design

[kellychoffman]

The demo page to test out Gutenberg could use a refresh in terms of design but most importantly, so that the content is more relevant and up to date. ​https://wordpress.org/gutenberg/

Some initial thoughts:

• Editor is 2 years old as is much of this copy (not so "new" anymore)
• Include some nice patterns
• Include mentions of block directory, global styles, widgets, navigation, newer blocks
• Reference ways to add blocks
• & more

To kick this off, I started a Google doc, where I've copied over the current text to begin collaborating on the update. If you'd like to contribute, leave a comment or add a suggestion. A comment on this ticket works too.

I think it makes sense to agree and update the copy first before working on a design.

Google doc link: ​https://docs.google.com/document/d/1zR5vb0l4VWt1jhY15x6dQjYuvsnTEF6UxIlWkdGPsRs/edit#heading=h.luag0tcf33ow

[annezazu]

Thanks for kicking this off! I added in some comments/suggestions directly in the Google Doc around the copy and plan to continue to do so this week as I have time. Exciting to see this be revamped.

[beafialho]

I've started to work on a refresh of this page using the Twenty Twenty One theme. With this theme it is possible to alternate between Dark/Light Mode, so I worked on the two options: ​https://cloudup.com/cIYOCYUBLOx

I focused on displaying the information a new user would find helpful to see if they knew nothing about the WordPress editor while also keeping existing users up to date regarding its latest improvements. What seemed reasonable and expected, to me was:

1. To explain what Gutenberg is/the improvements made
2. What you can do with it
3. What are blocks and patterns
4. How you can learn/find more info

Important things to contextualise some design choices:

• I tried to emphasise that the page can be edited, even though it looks so visually solid. Part of the selling point is that you can create and edit beautiful pages in the editor.
• I mentioned the block directory
• Added a section for Learn WordPress with a few key courses (feedback on whether these are the most appropriate is welcome)
• I tried to use a variety of the latest blocks
• Highlighted accessibility focus and relevant improvements

You can find a live demo here: ​https://blockpatterndesigns.mystagingwebsite.com/gutenberg-page-refresh/
(a few details may look different than the mockups as I keep trying it out).

[juanmaguitar]

Hello! 👋 Just want to share here that I'd like to help with this task
What is the current status of this?

[juanmaguitar]

Regarding the new design of this page I think this page should also improve the visibility of links to the main documentation entry points for Gutenberg (for both users and developers)
I also think that the paths (links) we’re leading the users that reach to this page should be reviewed.

In this way, besides being a page for Gutenberg discovery and introduction it can also be used as a bridge to reach specific content about Gutenberg following a specific learning path.

Right now the documentation about Gutenberg is spread among different sites (depending on the target) and I think having this page connecting these dots would be very helpful for the final users.

[beafialho]

Thank you for volunteering to help and for the feedback @juanmaguitar! Given that it's been about 8 months since I've worked on this page, I agree it might be reasonable to reconsider some info.

Are you referring to links such as: ​https://wordpress.org/support/article/wordpress-editor/? Do you have any other particular links in mind that we can include in the page?

[juanmaguitar]

@beafialho I have feedback for the links and for some content from a "Developer Learning Experience" point of view

I'm working on a report with my suggestions. I'll add my detailed suggestions early next week.

[beafialho]

Replying to juanmaguitar:

@beafialho I have feedback for the links and for some content from a "Developer Learning Experience" point of view

I'm working on a report with my suggestions. I'll add my detailed suggestions early next week.

Awesome, thank you so much!

[juanmaguitar]

@beafialho @kellychoffman I've shared my feedback in the Google Doc → ​https://docs.google.com/document/d/1zR5vb0l4VWt1jhY15x6dQjYuvsnTEF6UxIlWkdGPsRs/edit#heading=h.luag0tcf33ow

I've used this mindmap to organize my thoughts about it ​https://excalidraw.com/#json=6682920160854016,RT3lbV-c_6b3qTJ6uH217A

@annezazu I would love to know your opinion about my feedback regarding this page

[beafialho]

Hello! Following up on the last iterations of the Gutenberg page, posted here: ​https://make.wordpress.org/design/2021/10/29/redesign-of-the-gutenberg-page/ I wanted to give you an update on the latest adjustments done after the feedback from the comments in the post.

Here are a few of them:

• Explored showing a simple explanation of “blocks” and “patterns” on hover under those terms. Here's a video of that: ​https://cloudup.com/cZSwvHe8SzJ. However I'm not sure how that could coexist with the interactiveness of the page, which makes me think it's not the best solution.
• Explored a subtle animation for the patterns screenshots (still in progress). Quick example here: ​https://cloudup.com/cUxDiHZifk9
• Added better explanations for terms that newcomers may not be familiar with. Some examples: ​https://cloudup.com/cKWc5RQK9VA
• Replaced “Try it Today in WordPress” with “Try Gutenberg today in WordPress” to increase recall/association
• Switched “Gutenberg ❤️ everyone” to sentence case
• Rephrased the patterns section

I tried to take most suggested edits in consideration, but overall attempted to keep the page's focus on what can be done with the editor and keep it simple.

If it's possible to launch both light and dark modes, and have them changing according to the user's system preferences, it would be wonderful. If not, I suggest we focus on launching one first (light mode) because this page's refresh is long overdue.

Here's a rough demo page I built using the Blockbase theme: ​https://blockpatterndesigns.mystagingwebsite.com
And here's the updated Figma prototype: ​https://www.figma.com/proto/pjmwGVhLO2uovaW3AkCteB/Gutenberg-Page?page-id=23%3A6953&node-id=24%3A6958&viewport=241%2C48%2C0.11&scaling=min-zoom&starting-point-node-id=24%3A6958&show-proto-sidebar=1

Looking forward to any other relevant feedback you may have!

cc: @jpantani @callye @pablohoneyhoney