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

Design Meeting Notes for 15 January 2020

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

Last week there was a call for both notetakers and triage facilitators. The call is still open, if you are interested, leave a comment after these notes or announce yourself in the #design Slack channel.

Updates

Gutenberg updates

@mapk let us know that the workaround full-site editing is moving forward. Several issues have been identified and Gutenberg designers are reviewing UX flows in relation to these issues. 

Other specific works happening around Gutenberg include usability testing on Columns blocks, more work and design for Navigation block and global styles.

Discussion

@karmatosed open discussion around WP 5.4. And the list created of items the #design team would like to include. The list is very optimistic and needs prioritizing.

We ask people to review the list and let us know in the comments what do you think should be worked out for 5.4.

Open Floor

We reviewed two tickets: #48850: Plugins Screen: introduce “Automatic updates” column/option and #49199: Introduce Automatic update opt-in setting for themes. Both tickets are part of the 9 priorities for 2019-2020.

We talked about options in text and toggles like “on/off”. See examples on the Slack chat. You can leave your thoughts on both tickets. @kjellr is back and retaking the topic of how themes work with Gutenberg. Follow up his experiments on the mentioned repository. In the future, there will be more updates in #themereviews and make/themes if people want to follow this topic.

#meeting-notes

#auto-update, #gutenberg, #volunteers

Design meeting 8 January 2020

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

Being this the first meeting of the year, we are looking for volunteers for 2 specific roles:

  1. Volunteers to be part of the notetaking pool for meetings. We rotate each week to spread the load
  2. We would like to train people to run triage sessions

And we got a volunteer for note-taking: @adampickering

Updates

Gutenberg updates

@mapk announced that Gutenberg 7.2 will come out today. @mapk will be running usability tests for the Columns block.

Also, designers are diving into full site editing!! There is a label in GitHub, so if anyone wants to talk through design ideas, leave your comments there.

Discussion

@karmatosed let us know that there is a repo for wordcamp.org that has a “needs design” label and needs our help. It is a great way to contribute by giving feedback or adding sketches as needed. 

Open Floor

@estelaris presented the first draft for the article page for HelpHub, the prototype shows the use of menus. Feedback was requested on:

  1. Avoid using hamburger menus
  2. The Documentation menu (blue block), is it possible to be expanded? 
  3. The Topics section at the top to help the user find out the information presented without having to scroll down unnecessarily

Feedback given:

  1. Avoiding hamburger menus is a +1!
  2. The menu in the blue block can be expanded, increase the font size and the padding to give eyes space to rest
  3. The topics section is a good solution, try other design treatments for the block
  4. Overall, increase the padding and/or line-height to create white space and do not use many font-sizes
  5. Do not use all-caps for titles

A new draft will be presented to the #design team next week and a P2 is planned after the #docs team provides the final sub-categories to open the design to public feedback.

#meeting-notes

#helphub

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

Design Meeting Notes for 18 December 2019

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

There are two things: @boemedia is stepping down as a team rep. She still be active as WordPress contributor. We want to thank her for being a team rep and her work/support.

Second, today is the last meeting of the year. We will take a holiday break and return on 6 January as our first meeting of 2020.

Updates

Gutenberg updates

@mapkt reported that due to holiday break, there will be no #core-editor meetings or Gutenberg releases until 8 January.

@mapkt together with @aduth reviewed the complexity behind renaming categories for the Block Library. Words are not easy to find, especially when plugins are already using some words. 

Updates

Preparing for 5.4.

@francina asked the #design team if there is anything to be included in 5.4. Ideally within a day or two so a post can go out before the holidays. @karmatosed created a spreadsheet to collect issues/tickets and ideas. @mapk will add any Gutenberg issues and there are already some tickets in trac. If this method of a sheet works, it will be added as a process in the handbook.

The tentative deadline for 5.4. is March, which means we will have about 6 to 8 weeks to work. Not all the items posted on the list will make it, but it will be good to start tracking them. A few suggestions to be considered now are background support to columns, color and typography items.

@shaunandrews mentioned the proposal to simplify the block selected state and @melchoyce would like to add both or at least of @davewhitley’s proposals on a new color palette for WordPress and a consistent spacing system. Another item would be around improving the selected/focus states for blocs

@michaelarestad brought up the site navigation when editing full site. The main goal is to have a one-cohesive, tightly-coupled system rather than multiple disparate interfaces.

The post will come up next week, so we have until Friday 20 December to add items, proposals or ideas to the spreadsheet.

#meeting-notes

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

Design Meeting Notes for 20 November 2019

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

Trello and Handbook Organization

Trello and handbook changes are rolling out. Props to @michaelarestad who dove right in with a new page for full site editing! Because this is a work in progress, he expects comments and issues that can help improve it. 

Design Handbook

Improvements in the design handbook show:

  • Focuses area
  • Topics of Interest, using tags/categories and ways to surface
  • The blue box is a bit leaner

@karmatosed has a question regarding the “Calls for Design” as it exists on the menu bar. Since it hasn’t worked as well as our Trello board for soliciting work, would it be better if we move it to “Topics of Interest”, swap it out of “Focusses” pages or update the “Calls for Design” page? Please add to the comments as we will revisit the item next week.

Call for WordCamps

If you are attending or running a WordCamp, particularly a design contribution day, it would be great to call it out in advance in the make/updates post each week. And feel free to post agenda/notes or requests in the #design Slack channel.

List of Active Contributors

This topic is out of order from Slack chat. @karmatosed asked how others will feel to maintain a spreadsheet of active contributors that help with design to add badges to their profiles. A11y has this and they review it from time to time. The list could be linked in the handbook for easy access and to allow people to add themselves. Add feedback in the comments.

Updates

Gutenberg

Updates were given by @mapk. The focus area for this month is highlighted here:

Great news from today’s chat #core-editor revealed that the Navigation block is super close.

@mapk is pushing to get text color features moving as well. There is already a PR on text color features by @jeffreycarandang. At the moment is blocked by another issue related to RichText, but from a design perspective, it’s on track. The plan is to bring the issue up to the a11y team’s bug scrub to get their feedback.

Another PR that is close is the “Replace Media”. It should resolve some media replacement confusion and be more explicit.

People can leave comments on any of the mentioned PRs or check out the label  Needs Design Feedback in GitHub.

Exploring some of the hover/selection states in Gutenberg blocks

@shaunandrews posted an experimental mockup that could use more eyes. See video

Hold off any feedback or comments as a post in GitHub issues with context and more mockups will come later. If anyone wants to get involved, reach out to @michael-arestad.

Block Style System

@itsjonq resumed a proposal to an issue on WordPress/Gutenberg titled “Block Style System”: There is a gap within the system + ecosystem. It’s quite difficult to get Gutenberg blocks x themes to play nicely with each other. Styling essentially relies on CSS overrides upon overrides when you use Blocks libraries (e.g. CoBlocks), that has its own set of isolated styles so now, you’ll need to write custom CSS to override that, to match your current site’s overrides

This workflow is common in WordPress, the proposed method is a necessary workaround. Gutenberg + block is giving Builders (block makers, themers, etc…) more control over the UI because it standardizes how UI can be constructed

The idea for the proposal is to find a way to help standardize how HTML/CSS can be written, and more importantly, configured. The Github post goes more into detail. Having this system allows users to actually set global configurations from within Gutenberg, in a non-hacky way, e.g. Colors or Typography. 

Here is a demo of an experiment by @itsjonq. The Config system (the various configs/variables that makeup UI elements) can be defined by a theme, and overridden via Gutenberg. UI built or rendered by Gutenberg blocks or otherwise, can tap into this Config system. With this, themes, blocks, plugins actually have a way to work with each other. Because they share a foundation. Rather than fight with each other.

@karmatosed would like to know what those building themes and plugins think of this proposal. One block to test would be the “group block”.

Add any comments to GitHub issue or reach out to @itsjonq and if anyone is interested in his very experimental work in progress, follow the code.  

Follow up on Slack for more examples of how the Block Style System can be applied and some design jokes.

Don’t forget the triage sessions Monday and Tuesday and follow along on make/design for any posts this week.

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