Gutenberg Phase 2 Friday Design Update #47

Howdy and happy Friday, everyone! How is Gutenberg coming along you ask? Version 7.8 was just released on Wednesday and focused mostly on the new UI refinements. This release included:

  • Adds a current menu class to the Navigation block.
  • Adds a block outline when interacting with the block toolbar.
  • Polish around some icons.
  • Polish around the Date Picker.
  • and more…

Full site editing

Full site editing has seen some more design work recently. The extra effort reexamining the UX and having multiple people review design work is paying off! I’m super impressed with the recent work being done in light of other site building software I’ve been testing.

Placeholder blocks
Currently, templates need some way to show where certain blocks would exist, without necessarily showing actual content in them. Thus, we’ve been exploring placeholder blocks for many of the Post blocks like: Post Title, Post Author, Post Date, Post Comments, etc. These are being refined in this PR. https://github.com/WordPress/gutenberg/issues/19256#issuecomment-604765696

A few UX flows are ready for development. How exciting!

Block Patterns

Patterns took a bit of a pivot recently. Figuring out imagery to include in the software is difficult. Do we want pictures of mountains? Or maybe natural patterns? Cars? We’re not settled on this. So rather than holding up our patterns, we’re working to build a few really nicely designed text-based patterns for now. These patterns should be customizable by themes, and not include custom CSS that makes for a difficult integration into websites.

New icons

There was a recent PR submitted that include several new icons that conform to the new G2 UI and the new icons being implemented throughout the interface. https://github.com/WordPress/gutenberg/pull/21209


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

I hope you all are staying safe out there in the world today! This week in Gutenberg Design has several things going on. Let’s address them below.

Full site editing

Overview link: https://github.com/WordPress/gutenberg/issues/20791

Multi-entity saving has an interesting prototype uploaded just yesterday.

Multi-entity saving in sidebar

Or another take on it in a dialog modal.

Multi-entity saving in modal

I ran a short Twitter poll that asked how people would like to be informed about saving certain parts of their site. Based on those that answered the poll, the preference for a multi-editing save at the end of all their edits. We don’t use Twitter polls to direct our design decisions, but they can help inform them.

Lots of discussion and explorations are continuing to go into the Toolbar in the Editor. This particular mockup helps convey where the designs are leading currently.

Global styles

Overview link: https://github.com/WordPress/gutenberg/issues/20331

The global styles minimum viable product (MVP) includes some basic elements that will help anyone edit their styles across all pages/posts. These elements include: font-family, font-scale, line-height, and link colors. This issue defines how this may look: https://github.com/WordPress/gutenberg/issues/20367

Global styles in sidebar

Block patterns

The block pattern work is already included in the current plugin right now as an MVP. We’re working to add more patterns that are great for common layouts that many can take advantage of. Once more patterns are added, work will continue on the Block Library to include them there as well.

Testimonials pattern

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

It’s Friday again! If you’re following along with the Gutenberg releases, you’ll notice that Gutenberg 7.7 was released this week and with it came a newly designed interface creatively named “G2.” 😉 This redesign provides higher contrast, less UI visuals, and new icons including a streamlined and pleasant experience.

I recently shared this interface in a diagram layout identifying the various parts. This file can also be found in Figma.

Figma file: https://www.figma.com/file/WbvD9Z04UZYKwEDlzJtJPg/Gutenberg-Interface?node-id=0%3A1

Figma

Speaking about Figma, let’s dive into this a bit.

If you’re not familiar with Figma, it’s a design tool that allows real-time collaboration. There’s no need to download anything because it lives in the cloud. WordPress.org has an account where the Design Team keeps all our libraries, and where the designers do most, if not all, of their work. It’s open for anyone to join and use.

Figma

In fact, if you’re looking to help contribute to Gutenberg design work, especially in light of the new G2 UI updates, here’s how you might go about finding things.

If you’ve haven’t been added to the Figma account, you can ask for access in the Making WordPress #design Slack channel. Once you’re set up, you can browse the various files for each of the projects in the WordPress.org account. Notice there’s one specifically for Gutenberg.

Inside the Gutenberg Project is a file for G2. This file contains a number of the G2 components used in the new redesign of Gutenberg. It’s still very much a work in progress, but can help get you started quickly. Just copy and paste the parts you need into your own file.

G2 Figma file

Full Site Editing

Most, if not all, issues regarding full site editing have design work posted to them. This is great news! It provides everyone some visuals to talk through. If there are iterations needed, they remain in GitHub with the label “Needs Design.”

The Top Toolbar for full site editing is closing in on a solution. This is going to be the way by which users will navigate through the experience and select individual pages, templates, template parts, etc. for editing.

FSE Top Toolbar

Block Patterns

Block Patterns are also implemented in Gutenberg 7.7. Their current UI is only an MVP, but should help everyone realize the benefit of patterns in the layout of pages and posts. Lots of work is going into providing common patterns and getting this in as early as possible for testing and feedback.

Block patterns

Global Styles

Global Styles are in an MVP stage as well. While not quite yet integrated into the plugin, there is a PR that can be tested.

https://github.com/WordPress/gutenberg/pull/20530

Project Boards

Full site editing: https://github.com/WordPress/gutenberg/projects/35
Block patterns: https://github.com/WordPress/gutenberg/projects/41
Global styles: https://github.com/WordPress/gutenberg/projects/40


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!

#gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update #45

Happy Friday! The Gutenberg plugin has gone through 2 weeks in a row of releases earlier (7.4 and 7.5) due to the beta release of WordPress 5.4. However, we did not have a release this week. Our next RC for Gutenberg will be on this coming Monday with an expected release for Wednesday. We’ll then continue with our bi-weekly release schedule.

In those two releases, we saw a myriad of features:

  • Added text color options to the Group block.
  • New link UI for adding links to text.
  • Background and text color support for the Columns block.
  • New Social Links block.
  • Added inline color to specific words within text.
  • Added featured images to the Latest Posts block.
  • And everyone’s kid’s favorite; TikTok embed support.

Full site editing

Full site editing is experiencing TONS of mockups and UX flow explorations right now. Check out the Figma files to see the work happening there.

Template-part selected state as seen in the GitHub issue: https://github.com/WordPress/gutenberg/pull/19929

Global styles

The Global styles team has narrowed down the Minimum Viable Product (MVP) to just get some basic global styles into a “sidebar” interface for now. Mockups and prototypes are still being built around improvements.

It’s been recently broken down into more detail here: https://github.com/WordPress/gutenberg/issues/20331

Block patterns

We’ve also decided to trim down block patterns UX to an MVP as well. This will most likely begin as a sidebar that allows the selection of block patterns to be inserted into the content. Turns out attempting to redesign the Block Library will take more development effort. We want to get patterns in sooner, so an MVP feels the better way to go.

Block Patterns future UI

Lions, Tigers, and Sidebars! Oh my!

If this sounds like a lot of sidebars to you, we hear ya! It’s a quick way to test interactions out, get some feedback and forward direction. We understand that some of this work isn’t the ideal scenario, and everyone is working to improve it. Thank you so much to everyone contributing!


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

Full site editing is underway! Mockups are being explored and Information Architecture (IA) flows are being examined. Let’s take a look at the work.

Full site navigation

Navigating through various pages, posts, templates, and template-parts can get overwhelming quickly. It’s tricky. Figuring out how to navigate through these flows and simplify it for the users is incredibly important.

Template and template-part navigation
https://github.com/WordPress/gutenberg/issues/19252

Site navigation
https://github.com/WordPress/gutenberg/issues/19204

Templates and template-parts

While navigating through all the stuff, a user should be able to edit templates and template-parts intuitively.

Editing template-parts
https://github.com/WordPress/gutenberg/issues/19253

Global styles

Roadmap overview
https://github.com/WordPress/gutenberg/issues/19611#issuecomment-579936240

Project Boards

Full site editing: https://github.com/WordPress/gutenberg/projects/35
Global styles: https://github.com/WordPress/gutenberg/projects/40


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

Howdy, and happy Friday! Gutenberg 7.3 just released this week! It included a several fantastic improvements.

Gutenberg 7.3

Navigation block text/background colors

Navigation block text and background color

Better block labels in the Navigation block’s Navigator

Navigation block navigator

Replace media flow has been added to the Cover 19583, Media+Text 19198, File 19174, Audio 19158 and Video 19162 blocks.

Replace media flow component for an Image block

This release also includes lots of “lighter DOM” PRs which improve performance and make the DOM easier to style for both plugin and theme authors. Many, many, many bug fixes as well.

WordPress 5.4 Preparation

In preparation for WordPress 5.4, a list of particular PRs has been gathered that I’m hoping we can get in. The list includes:

Theme experiments

Over at Themeshaper.com, @jffng began experimenting around a block-based theme for WordPress and posted about his experience.

Configure or restrict interactions in Gutenberg

One use-case is for admins to configure or restrict the interactions within Gutenberg. @youknowriad goes into detail around how the improvements to the API allow for some of this recently.


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