Gutenberg Phase 2 Friday Design Update #42

Happy Friday everyone! This will be my last update through the end of the year. I’ll reconvene in January again. I wish everyone happy holidays and a wonderful New Year.

It was also decided in the #core-editor meeting that there will be no Gutenberg releases or meetings for the remainder of the year. We’ll pick these back up in January.

Navigation block

While the Nav block has found its way into the plugin, it’s also being iterated upon to improve basic UX interactions.

@karmatosed is exploring the Menu screen in wp-admin which is in the early stages right now. There are mockups ready for design feedback. Please drop in on the ticket and leave your thoughts.

Block Directory

A recent post was written by @melchoyce that really brings together some plans for the next phase of the Block Directory.

Recently merged

Work 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 #41

Happy Friday everyone! The winter holidays are upon us and Core is already planning for WordPress 5.4.

A recent update regarding the 9 Projects for 2019 was posted wherein Gutenberg was a large part, so let’s go over those. The projects listed below are still in progress.

Create a block for Navigation menus

The Navigation block is considered a “stable” feature as of Gutenberg 7.0. There’s a lot of work to still be done, but the majority of the technical aspects are solid. I’m running usability tests on this block this month and will share the results in January.

Navigation block

Themes visually registering content areas

This is an older issue from earlier this year, but includes a lot of what is being explored in full-site editing.

Blocks in widget screen and Customizer

This widgets screen is about ready for testing. It can be turned on in the Experiments in the Gutenberg plugin. While it’s a bit rudimentary, it can be tinkered with.

The Customizer blocks are under development. While we show blocks in the Customizer, we’d like to show them in their mobile responsive view because of the narrow space.

Block Directory

The Block Directory is also a feature listed as an Experiment in Gutenberg. It can be turned on and users would be able to install single-block plugins directly from the Block Editor. When searching for a particular block in the Block Library, if none are found, but exist in the directory, it will be displayed.

A post around the Block Directory guidelines was recently shared. If you’re looking to get your single-block plugin included, find out more by reading that post.

Block Directory

December’s Gutenberg Focus Areas

Riad recently posted the focus areas for Gutenberg in December. These include Block Content Areas, Block Patterns work, and a bit of Tightening Up like gradients, media flows, etc.

Gutenberg 7.0 Released

Yes, it’s been a couple of weeks since I posted this update, so I’m able to include Gutenberg 7.0 which was released in late November. Lots of improvements in there. Make sure to read the notes!

New Color Palette

Dave posted a proposal for a new color palette in WordPress. If you’re fond of colors, check it out and drop some comments.

Easily test Gutenberg PRs 🤩

This is incredible? Have you ever struggled testing Gutenberg PRs before they merge? Was the set up of a local dev environment too much for you? Well look no further! Gutenberg.run is a blessing sent from @aduth.

Just enter the PR number you’d like to test and this will build an installation of WordPress with this PR. No setup necessary. 🥳


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 #40

I missed last Friday’s update, so let’s see if I can catch up on everything related to Gutenberg design today. Happy Friday!

Full-site editing

There’s a new Focus page in the Design Handbook dedicated to full-site editing. This will be updated as progress happens, but the design tasks will happen on GitHub.

A couple of design explorations in the form of prototypes were shared in slack earlier this week by @shaunandrews. These prototypes are to encourage thinking around full-site editing and are not final solutions.


Block Directory

As many of you know, the Block Directory interaction is new to the Gutenberg plugin which allows the installation of single-block plugins directly from within Gutenberg. It’s pretty amazing. There’s a new Focus page for this as well in the Design Handbook.


Recently merged

In Progress


Reading update

There was a recent post by @melchoyce on Blocks, Patterns, and Layouts. This post helps convey some terminology and how the Gutenberg puzzle fits together.


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 #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