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 widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-blocks stuff. The CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. side still isn’t at the mobile-web view yet, but it’s working better thanks to this PR.

Navigation blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

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 AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Team communicated the difficulty tabbing through every blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. 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 GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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: https://q-wordpress-component-doc-site-test.netlify.com/

Widgets to blocks

Improvements included in 6.3:

  • Prevent the block toolbar from overlapping the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. area headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes..
  • Add the BlockEditorKeyboardShortcuts component.
  • Fixed block paddings.

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 DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-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 GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issue.


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

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

Gutenberg Phase 2 Friday Design Update #29

Hey all! Now that we’re in the second half of the year, design reviews and feedback are extremely crucial to help keep development moving.

Widgets to blocks

Looking back on the list of issues that stemmed from a design review regarding the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. areas screen and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., it’s great to see these getting attention. If you haven’t had the opportunity to test the new widgets screen in wp-admin, please do! GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 6.2 reveals this screen in the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party’s menu.

Gutenberg 6.2 widgets screen.

In Gutenberg 6.3, a new Experiments setting page is being introduced which will offer the ability to turn on/off the new widgets/block areas screen.

Experiments setting screen in Gutenberg 6.3.

Navigation block

As mentioned last week, the Navigation block is going through a design pivot. This is leading to some really interesting design explorations like this one about including existing block patterns.

Integrating existing block patterns into the Navigation block.

Tightening up

Block Directory

There’s some excellent development on the Block Directory which was posted recently.

New blocks


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

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

Gutenberg Phase 2 Friday Design Update #28

Happy Friday everyone! Gutenberg 6.2 was released this week with loads of improvements. There was another performance boost in loading time from 5.9s to 4.8s. Let’s take a look at the more recent design enhancements.

Widgets to blocks

As mentioned a couple of weeks ago, there are some issues recently created to help move this forward. I’d say we’d all like this to be completed for WordPress 5.3.

Tightening up

Some recent merges happened shortly after the release that will effect the usability of both nested blocks and the keyboard navigation.

Nested blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. borders and padding
https://github.com/WordPress/gutenberg/pull/14961 (merged)

Nested block interactions
https://github.com/WordPress/gutenberg/pull/16820 (merged)
https://github.com/WordPress/gutenberg/pull/16817

Keyboard Navigation/Edit modes
https://github.com/WordPress/gutenberg/pull/16500 (merged)

There’s also discussion around a GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ default grid going on that needs feedback.

Gutenberg grid
https://github.com/WordPress/gutenberg/issues/16271

Navigation block

After some discussion, the Nav block has taken a design pivot. There’s an effort to include existing block patterns and to help improve basic block interactions that can improve other blocks having similar issues.

New stuff


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

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

Gutenberg Phase 2 Friday Design Update #27

Happy Friday, everyone!

Widgets to blocks

@karmatosed and I did a review on the state of the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. screen and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. this week. Plenty of issues were created to help push this along.

Tightening up


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

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

Gutenberg Phase 2 Friday Design Update #26

Happy Friday y’all! Gutenberg 6.1 was just released Wednesday.
“ヽ(´▽`)ノ” Included in the release are some great motions for reordering blocks. I’ll add that while GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 6.0 took hit on performance, it been optimized better in 6.1.

Widgets to blocks

There are some really great experiments being added to the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.

  • New Customizer Panel to edit blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-based widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. areas.
  • Add the block inspector to the widgets screen.
  • Add a global inserter to the widgets screen.

Block directory

A recent post went up concerning the wp-admin concepts. Block Directory in WP-Admin Concepts @melchoyce has done some wonderful work here to get the conversation started.

Tightening up

Usability Testing

Several people took the usability test during WCEU. Part 1 and Part 2.

I’ve also recently posted the usability tests from June. Watch the videos and leave some feedback!


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

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

Gutenberg Phase 2 Friday Design Update #24

Happy Friday, everyone! It’s time for a roundup of this week’s GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ links.

Gutenberg 6.0

A new version of Gutenberg was released on Wednesday! Version 6.0 is packed with enhancements, and includes a new set of layout options inside the columns blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. placeholder. This functionality will be expanded and made available to other blocks in the near future.

Here’s a selection of other enhancements in this release:

  • Snackbar notifications are now available on the experimental widgets screen
  • The Group Block now ships with an inner container div to help make theme styling easier.
  • Placeholder text phrasing has been synced up for all the media blocks.
  • Embed block placeholders now come with better descriptive text and a documentation link.
  • Brand icons in the Block Inserter are now grayscale.
  • The modal overlay (or “scrim”) color is now darker, for better accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility), and to sync up with the rest of WP-Admin.

You can read more about these updates in the release post.

Updates from WCEU

This year’s Summer Update at WCEU featured Gutenberg prominently. It included an overview of Phase 2 work to date, along with some inspiring examples of things to come: the block directory, enhanced motion, and experiments like “snap to grid” for blocks.

The usability testing table was a great success! Thanks to everyone who helped make that possible. The videos from those tests will be posted next week.

A number of design contributors worked on Gutenberg tickets during Contribution day as well. A recap of those was posted today.

Editing beyond the post content

@youknowriad has opened some issues that begin laying the groundwork for Gutenberg editing outside of just the post_content. This is an exciting step towards full-site editing, and a great area to keep your eyes on.

Other in-progress issues to watch

Updates to the WordPress Figma component library

Also of use to designers working on Gutenberg: @drw158 has published some excellent new Figma component library updates. These include Figma components that mirror the base UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. components found in the @wordpress/components npm package. 🎉


Thank you for reading and for all your contributions. Have a great weekend!

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

Gutenberg Phase 2 Friday Design Update #23

Me and roughly 3,400 other community members are away at WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe but I still wanted to post another update. Most of the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ team is here as well, and the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. meetings were postponed for the most part, so this week was very light.

June 20, Thursday, was Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. at WCEU and we had a wonderful turnout of designers. At the Gutenberg Design table, several of us gathered around and contributed with comments on issues and/or mockups. Let’s take a look at what we worked on.

We also talked about the future of Gutenberg, caught up on the phases and checked out the recent features. We shared stories, and everyone was genuinely excited to see how Gutenberg is improving.

Thank you everyone for contributing this day and I look forward to chatting with you all in slack.

Usability testing

In addition to Contributor Day, several of us were running usability tests during the WordCamp. Once we’re back, these videos will get posted for everyone to review and share their thoughts. Stay tuned.


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

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

Gutenberg Phase 2 Friday Design Update #22

Hey everyone, happy Friday! ヽ(•‿•)ノ I want to thank @kjellr for handling the update last week while I was away.

Gutenberg 5.9 was released Wednesday! As @youknowriad pointed out, there were over 40 contributors, and 6 of them submitted their first PR.

A few noteworthy features and enhancements included:

Widgets to blocks

Included in 5.9 were a couple improvements for the widgets screen.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Directory

@melchoyce posted an update to the Block Directory. There’s a prototype and some mockups for review. If you haven’t offered up some feedback, please do! Mel is looking to have a usability test written for Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. at WCEU.

Tightening up

This week several designers spent time cleaning up loose ends and making small improvements throughout GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.

Usability testing

Last month’s usability testing videos are up on make/test. Please review them and leave some feedback about your observations.


Another reminder that there’s a plan to run a usability testing table for Gutenberg at WCEU. Read about the plans and sign up to get involved.


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

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

Gutenberg Phase 2 Friday Design Update #21

Widgets to blocks

The experimental widgets screen introduced in Gutenberg 5.8 is still being iterated on. Feedback is being collected in the GitHub issue, and there’s a short-term project board to track tasks.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Directory

Work on the block directory is continuing, with lots of great discussion happening in the GitHub issues and in the Figma file. Expect a summary post with updated designs soon.

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

  • Support for the reduce-motion media query has been added to all animations and transitions throughout GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.
  • PRs have been opened to begin working through some text zoom issues identified in the Tenon report:
  • Contributors are considering an update to improve contrast for modal overlays.
  • During last Friday’s Accessibility chat, there was some cross-team discussion around accessibility issues with the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. paradigm used in Gutenberg. A small team has been discussing and sketching up issues, and hopes to share some thoughts soon.

Tightening up

There’s also been a lot of great work regarding nested blocks this week:


Finally, a reminder that there’s a plan to run a usability testing table for Gutenberg at WCEU. Read about the plans and sign up to get involved.

Thank you for reading and for all your contributions. I hope everyone has a great weekend!

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