New Design for HelpHub: Home and Category pages

Since WordCamp Europe 2019, the #docs team is leading the update of the Codex now known as HelpHub. As part of the update, a new design was requested.

This is the first post on HelpHub and will cover the HelpHub Home and the Category pages for desktop. In the coming weeks, WordCamp Valencia will work on the mobile versions of the same pages during Contributor Day. Other posts will be added for Article and WP-Version pages, both mobile and desktop versions.

HelpHub Homepage

The old version is set on a grid that presents several design issues like not being able to list all the topics in each category due to space, created strange white blocks due to the fact that not all categories had the same number of topics, and most importantly, the category icon/title was not underlined for accessibility purposes.

  1. The homepage list allows listing all the topics in each category
  2. There is no blank space in between categories due to the number of articles listed

HelpHub Category Pages

  1. The list will allow topics to show on one page (max two pages, if needed) making it easier to find the article needed by the user
  2. The short/long excerpts will not affect the alignment of as seen on the “before” image 
  3. The links are underlined in the title only, instead of having to highlight the entire paragraph, as seen in the “before” image
  4. There will be no weird grid when the number of topics is not a multiple of three

Before we implement the design, we would like to hear your feedback, please leave it in the comments.

If you want to get involved in the design of HelpHub, reach out in the #docs or #design teams Slack channels.


Gutenberg Phase 2 Friday Design Update #36

Happy Friday everyone! Most of the Gutenberg work for WordPress 5.3 is completed. Next date to keep an eye on is:

October 15 – Release Candidate 1 (RC1)
This is a new version of WordPress ready for release, but still undergoing heavy testing.

Block previews needed another path. The Gutenberg Team tried base64 encoding for images in the preview code, but it caused the file to be too large. Next we tried pulling images straight from wikipedia, but didn’t feel comfortable relying on a site that wasn’t in WordPress’ control. Ultimately, we’re going to host the images on’s CDN and link to them from the editor. Trac:

A picture of the Block Library with block previews.

Current work

Gutenberg usability testing

September’s round of testing is now posted. It included a new testing script that explored the Table block, and block moving functionality. Check out some of the videos and leave some feedback!

Design related work

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

New handbook page on WordPress components

There is now a page in the handbook that explains both what WordPress components are and also how to add and edit them.

WordPress Components are the set of interface elements that make up the Block Editor and other projects. This includes several user interface (UI) components like buttons, menus, and text fields. 

As a team, using these components is going to become essential to our work. Having a clear handbook page should help everyone.

A bonus extra workflow on how to get Figma access also now exists to go with this page.

Just like any handbook page, this should be a living document, so if you feel something needs adjusting please comment or start a discussion in #design on Slack.

#wordpress-components #handbook-update

Gutenberg Phase 2 Friday Design Update #35

Happy Friday! Gutenberg 6.6 was released on Wednesday. Let’s take a look at some of the changes.

Gutenberg + WordPress 5.3

As you may know, WordPress 5.3 is on it’s way. This Monday will be the release of Beta 3. While the Gutenberg Team is working to get a few more updates in, it’s a large concerted effort now to sync up with Core and bring all these new Gutenberg updates to Core.

  • October 7 – Beta 3
  • October 15 – Release Candidate 1

Current work

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #34

Gutenberg 6.5 was released this last Wednesday. It included some great features and enhancements.

One of the highlights of this last release is found within the plugin’s experiment settings: the Block Directory!

Other outstanding additions included:

Gutenberg + WordPress 5.3

The Gutenberg code is currently frozen in preparation for merging into Core. Well, except for the code that continually being improved for the plugin itself. Here’s a reminder of the upcoming WordPress 5.3 dates.

  • September 16 – Gutenberg code freeze
  • September 23 – WP 5.3 Beta 1
  • October 7 – Soft string freeze for WP 5.3

A few remaining items that we’re hoping to finalize before 5.3 are these two pressing PRs.

Font-size select box
Needs accessibility testing.

Inserter Help Panel HTML preview of blocks

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #33

Happy Friday, Gutenbergers! (Nope, don’t say that again) WordPress 5.3 is coming fast and I’m feeling the pressure. Let’s keep an eye on these dates together to help keep each other focused.

  • September 16 – Gutenberg code freeze
  • September 23 – WP 5.3 Beta 1
  • October 7 – Soft string freeze for WP 5.3

Block areas

Let’s start with something completely exciting! Block areas in Gutenberg. @matveb walks us through what the future of Gutenberg might possibly look like. This demo is breaking into the full-site editing experience we’ve been dreaming about with Gutenberg.

Widgets to blocks

  • The Legacy Widget block still needs to actually load the widget.
  • The sidebar settings need to reflect the Block Settings.

Navigation block

Looks like we have some direction on the design front. Most of the work here is being moved into PRs so that we can iterate in collaboration with development. Keep an eye on the label, [Block] Navigation Menu in GitHub.

Twenty Twenty default theme

Yep, you heard right! We now have a Twenty Twenty default theme in the works and a wonderful team of people behind it. It’s built with flexibility in mind and full support with the Block Editor.

Related 5.3 Trac tickets

A recent post went up from @kjellr: Discussion: Higher contrast form fields and buttons. It includes some Trac tickets that, if decided upon, will affect Gutenberg as well. These changes include:

  • Darker field borders: porting Gutenberg design pattern to the rest of wp-admin.
  • New button styles: This would need to carry over to Gutenberg as well in a PR once the patch in Trac is approved.

Usability testing

Last month’s usability testing videos are posted! There were 5 videos this last month. While the script was a bit intensive, the users worked their way through allowing us to discover various difficulties with the existing software.

Make sure to take a look at the videos and leave any comments around what you noticed.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #32

Happy Friday, everyone! 🙂 Gutenberg 6.4 was just released this week! I’ll highlight a few additions.

User-selected default styles & Circle cropping option for images:

Navigation block

@tinkerbelly wrangled a great Navigation block discussion earlier this week in the #design slack channel. The Nav block has a bit more direction but is still in need of some feedback on this particular issue.

Adding new menu items:

Tightening up

As mentioned before, the Gutenberg team is working to make sure there are a clear set of weekly priorities. These priorities are brought up during each #core-editor slack meeting. This week’s set include:

Thanks for reading, staying informed, and contributing anywhere you can!

#gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #31

I think Fridays are speeding up. It’s hard to believe another one is already here.

Widgets to blocks

Discussion around “element queries” is happening. The reason is because we’d like to show the mobile-web view of Gutenberg in the Customizer for the widget-blocks stuff. The Customizer side still isn’t at the mobile-web view yet, but it’s working better thanks to this PR.

Navigation block

Tightening up

Usability tests

The usability tests are being conducted weekly. One thing I’ve noticed frequently is the lack of ease when placing images along side other images or text. Sure we’ve got blocks that make this possible (which is awesome!) but it’s not quite as discoverable yet.

I submitted an issue a while back regarding how we might make this better. We’d allow users to drag a simple block (Image block) onto another simple block (Image block) which would then automatically create a complex block (Gallery block).

Here’s a couple older gifs courtesy of @kjellr.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #30

Happy Friday, everyone! Gutenberg 6.3 was released! Among the many enhancements was the new Navigation Mode that loads by default when opening the Editor. The Accessibility Team communicated the difficulty tabbing through every block control before getting to the next block, so this nifty mode should help alleviate this. It feels natural, but we need more feedback, so a call for testing was recently posted.

Additional improvements with Gutenberg 6.3 include:

WordPress Components

A call for feedback and contributors
Lot’s of work happening as shared in a recent post by @drw158. Dave outlines a great opportunity to unify design patterns across WordPress and outlines the process.

WordPress Component Doc Site
As mentioned in the GitHub PR#16953, This unofficial site is @itsjonq‘s effort to gather the component documentation into one place that shows live examples of each design pattern. It simply imports the component documentation and spits out a beautiful site with visual examples of what each component looks like. I believe Q (itsjonq) is also looking to include live code editing in a sandbox as well on the site. It’s currently a work-in-progress that can be found here:

Widgets to blocks

Improvements included in 6.3:

Block Directory

@melchoyce has been iterating on the Block Directory mockups in Figma. The development is moving smoothly with the block installation process just about completed. @karmatosed will be testing this with contributors during Contributor Day at WC Brighton.

Navigation block

As you all may remember the Navigation block went through a design pivot a few weeks ago. It’s received a focus issue created by @tinkerbelly to get the toolbar controls figured out. Contributors have been dropping in with feedback and opinions, so please join them in the GitHub issue.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Design meeting notes august 14th 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.


@mapk updates us on Gutenberg developments. Gutenberg 6.3 is out! Including new Navigate/Edit modes, and some major Table block updates. Priorities for Gutenberg development will now be discussed every week in the #core-editor channel, great for anyone wanting to stay up-to-date and lend a hand.

@melchoyce did a new iteration in the block directory mockups that she’d like feedback on. User testing will also be done at WordCamp Brighton this weekend.

@davewhitley points us to the Component Review project, to review all the new UI elements introduced in Gutenberg, and make them generic enough to use in all of WordPress and document them properly.

@hedgefield lets us know that WordPress 5.3 will likely include an update for the Site Health grading, and also wonders whether design could take a look at, which is becoming a bit dated. Literally, there is no 2019 content on the landing page. @karmatosed and @melchoyce ruminate on the pressed-for-time meta team and their priorities, concluding that adding a few tickets with mockups and asking in #meta would be the best approach.

Open floor

@blaidalfo expressed interest in helping with the Figma libraries containing the WordPress components. @davewhitley also contributed some documentation which can be found here. An official list of maintainers will be published soon. If you want in, let us know in #design!