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

Proposal: Creating new WordPress Style Guide resources

At the moment, the style guides within the Design Guidelines are a little bare. Specifically, there are things we can add to improve the experience in interacting with these docs. A great example would be this online tool Material UI Colors, which copies the colour’s hex code to your clipboard when you click it.

In the latest Design Meeting, I suggested that it might be helpful to improve the WordPress style guide by building resources in a new open documentation site, one with features like instant copy/paste and code snippets where applicable. This site could showcase the content that already exists – specifically colours, typography, and iconography.

It would not necessarily designed to replace the existing make guidelines, but compliment it as an external resource. Similar to how the existing colour page links to an external codepen.

It would be particularly cool to have this available for people before WordCamp US so that everyone participating on Contributor Day could use it and potentially get onboarded faster.

The site would be open source from the beginning, with the code available on a Github repository. It would have automated workflows that’ll make it much easier to contribute to (and play around with). Anyone would be able to add issues and submit pull requests. I’ve built several doc sites and style guides in the past, so it’ll be something I can do relatively quickly.

If so, I can go ahead and create it and ask for some feedback next week. Perhaps around Oct 8th, a little bit before the next Design Meeting. If we like the end result, the site could expand to include content for identity, core, templates, and other content from WP style guide.

Share your thoughts about this idea in a comment on this post!
I can’t wait to know what you think.

Design meeting notes for Oct 2nd 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

Firstly @mapk updates us on Gutenberg developments. Gutenberg 6.6 is live! The Inserter has a really nice help panel to preview blocks now. And lots of bugfixes. Priorities for Gutenberg development are discussed every week in the #core-editor channel, great for anyone wanting to stay up-to-date and lend a hand.

Next, @melchoyce is working on the About page for WordPress 5.3 and beyond. Work is being done to make the page more modern and welcoming, and more dynamic in terms of making it, using variables and consistent patterns to make it possible to change styles without a lot of manual work. The layout will probably be generic across each release, with colors and illustrations adding unique elements each release. Feel free to add feedback to the Figma file.

And finally, @itsjonq pitches a plan to improve the design team handbook pages with an open-source overhaul, offering code snippets and such, to make the experience more user friendly. His plan is to have it ready by WCUS. Feedback and volunteers are welcome, a Make post on the subject will be written soon. Exciting!

#meeting-notes

Design meeting agenda for Wednesday 2nd October

This is the agenda for the weekly design chat meeting on Wednesday, 2nd October 2019, 18:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
    • Gutenberg
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

Design meeting notes for September 25, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

Updates

Gutenberg design updates

The team pulls through some final issues and pull requests for the next big WordPress release 5.3 (due 12 November).

If anyone can help test these and provide any feedback that is needed, that would be awesome!

Twenty Twenty theme update

The sub page view in Twenty Twenty.

This new default theme has been designed by @anlino and a group of dedicated contributors have been working hard on it.

@paaljoachim raised there are some issues that could do with design feedback.

Especially the following tickets could use some design feedback:

Please leave your feedback or additional ideas in the comments below the corresponding ticket and help the design of the new default theme move forward!

Test the new theme!

It would be really helpful if people install the theme and take it for a test drive. You can download the latest version from Github.

HelpHub update

@estelaris is still focussing on the homepage and exploring lists instead of using the grid, which may solve many of the issues that HelpHub has.

View the first iterations in Figma and kindly give your feedback on:

  1. how you feel about the list approach.
  2. whether to use sidebar on homepage or not as it seems repetitive (is it accessible enough to only use link on the homepage).
  3. any other suggestion.

If you don’t have an account, please post a request for access in the design Slack channel.

#meeting-notes

Design meeting agenda for Wednesday 25th September

This is the agenda for the weekly design chat meeting on Wednesday, 25th September 2019, 18:00 UTC.

  • Housekeeping
  • Updates from any specific focuses
    • Gutenberg
    • Twenty Twenty (default theme): focus on issues need feedback as a priority
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda

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

Design meeting notes for September 18th, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can join the Slack channel by following the instructions in our handbook.

Updates

Gutenberg

Gutenberg 6.5 has been released. Look for an update post tomorrow with details. This is the last full version that will be merged into WordPress 5.3, but please keep in mind that we’ll be working on new improvements weekly in the Gutenberg plugin. This update includes a new social block, border radius changes, changes to the block mover icons, and much more.

We’d love if you’re able to test!

Full site editing

Matias wrote a post about possibilities with the future of Gutenberg + WordPress. Well worth the read.

HelpHub

Estela Rueda shared a Figma design with updates to the Table of Contents page. Feedback is welcome! If you need access to Figma please let us know.

Discussion

  • Andrea Fercia shared a Trac issue related to tab structures not using tab semantics. Discussion is welcome in the ticket 🙂
  • JB Audras brought up a discussion related to extending the timeline for higher contrast form fields and buttons. The discussion related to finding a balance where we can push some changes sooner for Accessibility purposes. The team will followup in Slack with any further points as we seek to figure out what we can ship sooner.

#meeting-notes

Discussion: Extending the timeline for higher contrast form fields and buttons

Hi everyone! We recently discussed switching to new, higher contrast form fields and buttons throughout WP-Admin. That thread provided some great feedback, and resulted in an updated direction

This direction is available in the Design Experiments Plugin. It includes: 

  • Higher contrast form fields that mirror Gutenberg styles. (#47153, #47150)
  • Updated select fields to match. 
  • Updated primary buttons that use #007cba. This passes WCAG 2.0 contrast guidelines without the use of an additional dropshadow. 
  • Updated secondary buttons that use a light gray background and a dark gray border to match the updated form fields. 
  • All button variations include new focus styles. (#34904)
  • Updated table & card borders to carry that higher contrast aesthetic out to more of the UI and create balance.  

This seems like a relatively solid direction, but I’m not convinced it’s the optimal one yet. There are many moving parts happening in the lead up to 5.3 — focus states, button styles, form borders, etc. — and I think we could benefit from taking more time to explore all of our options before we leap on this solution. 

For instance, while this work was happening, @drw158 concurrently explored a new WordPress color palette. This new palette takes a slightly different approach to solving some of the button contrast issues, and also deserves feedback and iteration. Similarly, we should consider directions that involve reducing or removing WP-Admin’s light gray backgrounds to achieve higher contrast and greater consistency with Gutenberg. 

I’d rather we take a fully confident, well-considered step forward than rush into a solution that’s truly only a couple weeks old. For that reason, I think it would be beneficial to hold off on deploying #47153, #47150, and #34904 until after 5.3. This would allow us all to spend a little more time considering the full range of options for the colors, focus states, button styles, and form borders. Once we solidify around a direction, pushing the changes to a feature plugin (either in the Design Experiments plugin or elsewhere), to fully test before moving to a core patch seems like a solid approach. 

This is obviously not solely a design team decision, so I’d like to also ensure the accessibility folks are on board with this delay as well. Ideally, given a bit more time, we’ll end up with a higher-contrast, more accessible solution for this UI that’s even stronger than the explorations so far. 

Design meeting agenda for Wednesday 18th September

This is the agenda for the weekly design chat meeting on Wednesday, 18th September 2019, 18:00 UTC.

  • Housekeeping
  • Updates from any specific focuses (if any)
  • Discussion
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, design help or something added to the agenda.

#meeting-agenda