Gutenberg Phase 2 Friday Design Update #39

It’s Friday!! I hope everyone who made the trek to WCUS or WordCamp Tokyo this year made it back home safely and your travels were uneventful. Just a reminder that WordPress 5.3 is due to release on November 12!

If you didn’t catch it, @matveb posted an update to the Full Site Editing experience recently.

Priorities for the coming month include:

  • Block Content Areas,
  • Menu Navigation Block, and 
  • Tightening up existing interactions

For more details, consult this recent post. Now let’s take a look at where we’re at today.

Merged

In Progress

Edit media flow control

Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

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

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

Gutenberg Phase 2 Friday Design Update #38

Happy Friday! Let’s take a look at some of the design updates going on in Gutenberg recently.

Merged

In progress


Get involved

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

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

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

Gutenberg Phase 2 Friday Design Update #37

There’s a lot of talk about Full Site Editing right now with Gutenberg. Let’s take this opportunity to get caught up on the work that is happening. Initially, Phase 2 was about bringing the editor to various sections within the current WordPress interface (ie. Widgets screen, Menu screen, Customizer), and it still is, but Full Site Editing kind of reverses this by bringing the rest of the site into a single unified editing experience. This is a big project that will take some time, thorough design thinking and collaboration.

Full Site Editing

The future of WordPress was explored in a post recently by Matias Ventura. Key concepts to help shift the editor interactions include:

  • Block areas help organize blocks within a full page, but also differentiates global (navigation, site title, etc.) and local elements (the content).
  • Full-page editing will provide a full view of the site, or various editor views of each Block Area.
  • Entities & Sources explain the way in which global content can be edited, saved, and then displayed across all areas on the site.
An exploration into full site editing

The majority of the work can be found on GitHub under the label, [Feature] Full Site Editing.

  • Editing other content in the block editor [13489]
  • Exploring the editor outside post_content [16281]
  • Adding a default template with post title and content blocks [16565]
  • Custom entity sources [17368]
  • Site block [16998]
  • Block Templates [17512]

Modes

Modes are ways in which people can change the context of their editing experience within Gutenberg. For example, if you’re editing content, the tools available to you in that mode may differ than when editing the layout.

With the introduction of a Navigation mode for keyboard users, and the existing Code Editor mode, it’s important to see how these work within a mode system as well.

An exploration into modes
  • Selecting vs. Editing blocks [17088]

Block Patterns

Block Patterns are layout patterns. These can be full-page layouts with blocks preset in desired well-designed layouts, or they can be partial layout patterns that can be added to various pages.

An exploration into block patterns
  • Block patterns [17335]
  • Suite of post blocks [15623]

Get invovled

Now’s a great time to get involved. While the work on this project is intense, it’s always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details and contribute.

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

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

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 w.org’s CDN and link to them from the editor. Trac: https://core.trac.wordpress.org/ticket/48292

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

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.
https://github.com/WordPress/gutenberg/pull/17418

Inserter Help Panel HTML preview of blocks
https://github.com/WordPress/gutenberg/issues/17488


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:
https://github.com/WordPress/gutenberg/issues/17116

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: https://q-wordpress-component-doc-site-test.netlify.com/

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