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