Gutenberg Phase 2 Friday Design Update #10

The appearance of new faces in the Github repo is so encouraging. Conversations are productive, design direction is collaborative, and the excitement is promising. If you’d like to learn more about contributing to Gutenberg, @karmatosed wrote up a great handbook page this week.

Just a reminder, today is the last call for merging PRs that will make it into WP 5.2.

Navigation block

People are being signed up for usability testing. There are already a few interviews scheduled for next week. The testing will be moderated and conducted with a prototype of the Navigation block. If you’re interested in helping, join the #research channel in slack!

Tightening up

A really cool update to the block outlines has been merged. The blue hover state is replaced with a strong grey left border. The focused state retains that strong left border and outlines the entire block.

Research & User Testing

With all the research efforts gaining momentum, a recent call for researchers went out from @tinkerbelly. If you’d like to help out, notify the researchers in the #research slack channel to get involved.

Mark your calendars for the Site-building Research “Ask Me Anything” video Q/A with @tinkerbelly and @jarahsames this coming Monday at 19:00 UTC.

Block Management

The PR is merged!

Block Directory

Wow, the comments in the post are lively! It’s great to see so many perspectives communicating. The feedback is being synthesized and thought through thoroughly. <- Say that three times fast.


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

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

Gutenberg Phase 2 Friday Design Update #9

If you follow these posts, make sure to follow @youknowriad ‘s bi-weekly updates as well. Lot’s of information packed in there!

Navigation block

Recruiting testers for the Navigation block is currently in progress. Interviews are scheduled to begin shortly thereafter, and should help inform the direction of the block.

Widgets to blocks

Foundational work has been done to get the widget-blocks working on the widgets.php screen in /wp-admin. According to Riad’s post, “It introduces a new @wordpress/block-editor module allowing building block editors outside the post editor context and even outside the WordPress Admin context.”

Tightening up

A side note: Some testing will be done soon on the block-specific responsive controls for the columns block. Please review the post and provide some feedback on the script and goals of this endeavor.

Block Management

The Block Management modal has made an adjustment from “Disabling” blocks to “Hiding” blocks. This feels much more clear that the blocks are still usable if you have them in your content, but they just won’t appear in the Inserter or / command.

How to show a “hidden” block is still being discussed. Most likely the decision coming forth will also affect the Inserter when showing deprecated blocks. If you have any thoughts around this, please share in the PR.

Block Directory

One of the 9 projects this year includes a Block Directory. Read more about this in the kickoff post. Thoughts around implementation in Gutenberg and wp.org, and “single block plugins” are being discussed.

Accessibility

The Accessibility Team has a list of issues that are being prioritized and will be shared with the Gutenberg builders soon. One of the more recent improvements has been the Custom Color Picker.


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

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

Gutenberg Phase 2 Friday Design Update #8

March is here! There’s a lot of feedback needed to push things along. Here’s what’s happening in Gutenberg.

Navigation block

@tinkerbelly posted a Navigation block proposal. This direction is both intuitive while using smart defaults, and advanced enough to provide for those that require more control.

The #research slack channel has some discussions going on for testing this prototype to help ensure it’s on the right track.

Tightening up

Block Management

Yep, you read that right! Gutenberg is exploring some block management patterns currently. There’s a need for feedback here before development starts.

Accessibility

Gutenberg has been making lots of progress on accessibility thanks to cross-team collaboration. Not only are Gutenberg contributors learning more about this, but accessibility is being included earlier in the process.

Here’s an example of the progress being made.


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

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

Gutenberg Phase 2 Friday Design Update #7

WordPress 5.1 “Betty” has been released, but don’t confuse that with Gutenberg 5.1, which has also recently been released – they aren’t the same. To clarify, Gutenberg 5.1 is not included in WordPress 5.1. Any mention of “Gutenberg” refers to the plugin specifically. This is particularly confusing because they both have the same version number, but Gutenberg releases tend to happen more often than WordPress itself, so the numbers will diverge again soon.

Widgets to blocks

The Classic Widget Block has an experimental PR. Looks like some framework updates are required before this is completed. These updates will also help move the widgets screen forward as well.

Tightening up

Floating blocks now have block movers. The embed block now requires an extra click before playing video to prevent it from playing immediately when selected. Consistent background colors on hover of UI elements. Added inline image resizing. URL input popover was cleaned up.

Work in Progress

Accessibility

URL label was added to the permalink section in the Inspector. The region navigation styling has been improved as well.

Work in Progress

Lot’s of explorations around the keyboard navigation between the main content area and the Inspector.

New blocks


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

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

Gutenberg Phase 2 Friday Design Update #6

It’s the middle of February now and there’s been great discussion around how Gutenberg might impact some of the WordPress major releases. Because Gutenberg updates often affect the user interface, it’s important to consider these as major updates. Anyways, let’s get down to design!

Widgets to blocks

All core widgets are now converted to blocks! Please take a moment to stop and celebrate this achievement. A big round of THANKS goes out to everyone involved. Design Team, Core Team, Accessibility Team, other contributors, everyone! Great work.

The Classic Widget Block is still underway. This block will display widgets that haven’t been converted yet. Any non-core widgets will be accessed in Gutenberg by being contained in this block.

Other widget blocks are being improved upon: Archives [1464], Recent Comments [1792], Recent Posts [1594].

Navigation block

This complex block is HUGE. So many moving parts, interactions, etc. Distilling it down into key issues has been helping on GitHub. Feedback is coming in, providing different perspectives and thinking. This block is still about a month+ out.

Tightening up

The discussion about the Cover block including nested blocks is laying important groundwork for a Section block.

Accessibility

Some a11y discussion around the block specific responsive controls has been happening. It was mentioned in this week’s a11y chat as well.


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

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

Gutenberg Phase 2 Friday Design Update #5

So many good things! One of my favorite pieces shared by @youknowriad is; there were 52 contributors to Gutenberg 5.0 – the latest release!

Widgets to blocks

@melchoyce recently posted an update on these. But there’s even a few updates since that was written! For instance, the Search block is now merged. It’s moving fast. After talking with Riad, it looks like an estimated 4 weeks until they’re all merged in along with the addition of the Classic Widget block.

Tag Cloud – What do you think if the Tag Cloud block got renamed “Word Cloud” so that it’s clear it doesn’t only include tags? The option to switch between tags and categories would still exist, maybe in the block inspector.

The development of the widget screen for the inclusion of blocks is currently on hold until this PR is completed.

Navigation block

The Navigation block has a new issue with the hopes of refocusing and a deeper understanding of the problems people experience when building menus. Because this is such a complex block, there’s going to be really good discussions, so please get involved.

Tightening up

These small incremental changes are adding the polish to Gutenberg making it a real joy to use. One such example is the Focal point picker added to the Cover block. Speaking of the Cover block, there’s conversations about nesting blocks within it for more options to display over the image. Buttons? Did anyone say buttons?

Animations are also getting added bringing an emotional delight to the interface.

The color picker for blocks is getting some much needed clarity.

There’s also been some great headway on notifications in the editor which just need a code review before getting merged.

Research

Make sure to get caught up on the research posts that have been shared on the make/design blog. These reports are informing the design decisions going forward, so it’s important to have a firm understanding of what’s being shared. The latest one from @tinkerbelly concerns the segment of Site-builders.

Accessibility

A new issue has been opened to address the keyboard navigation of Gutenberg. It’s been a long time coming!


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

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

Gutenberg Phase 2 Friday Design Update #4

Are you kidding me? It’s already February! Gutenberg has been rolling out with consistent improvements throughout January and will continue to do so this month too. Let’s look at what was done this last week.

Widgets to blocks

Really good discussion going on especially in regards to a11y. There’ve been some a11y concerns that need to be addressed which were brought up in relation to this screen, but really effect Gutenberg as a whole. The larger a11y issues will be addressed in another issue in Github to help keep the design of the widget screen moving forward.

Navigation block

Work is happening here and getting ready to be shared outward for feedback. So stay tuned to the issue!

Tightening up

  • Microinteractions (little animations) are starting to be incorporated into Gutenberg. Take a look at some work being done by @joen.
  • Added a style preview issue to the tightening up portion of Phase 2.

Block specific responsive controls

This issue is really narrowing down on a solution now.

Research

The first part of the WordPress research has been posted by @tinkerbelly. This research is being used to help further any development in Gutenberg. All contributors should really have a read through.

Project Boards

In Github, the project boards are used to understand the status of issues from a high level view. @karmatosed recently went through and combined the Phase 2 Design project board into the Phase 2 project board. This will help keep us unified. There’s also been an update to how these project boards are used; there are columns based on each of the focus areas for Phase 2.


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

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

Gutenberg Phase 2 Friday Design Update #3

I’ve been informed by some colleagues that this week has been super cold in areas around the globe. I live in Southern California and haven’t experienced it, but I truly hope you all are staying warm. The GitHub repo for Gutenberg, on the other hand, is on fire (in a good way)! 😉

Widgets to blocks

There’s a lot of development movement happening right now.

In addition, the integration of the widget-blocks in the wp-admin are being figured out too. Right now, it looks like staying inline with the mockups provided during the State of the Word might be the path to take (with some minor improvements of course). There’s also a desire to implement better a11y while we’re working on this as well.

Navigation block

This is a big one. While exploring the block itself, there’s been conversations in GitHub about how navigation is built. Is the block a simple one that just allows the user to select which menu they want to use? Or is the block where the whole menu is built? This decision effects the implementation of navigation building in Gutenberg going forward. One thing we know for sure is that everything is becoming a block in Phase 2, so these decisions are crucial right now. If you have some thoughts, please share them on GitHub.

Tightening up

It’s amazing to see all the areas in Gutenberg that are getting tightened up! Gutenberg 4.9 just released with a couple of beautiful design improvements: table striping and color swatch indicator. More design improvements are happening daily. Take a look at all the things.

Documentation

Some might say that Documentation isn’t really design, so why’s it here? But really, documentation should be a community wide endeavor. There are weekly edits being completed to make sure the future of Gutenberg has a solid foundation. Here’s what’s been done… and what’s being worked on. These are fairly simple textual explanations of Gutenberg. If anyone is looking to contribute with something non-code related, this is a great way to begin.

Communication consistency is key to this project. That’s why these weekly design updates are going out every Friday. Thanks for reading, staying informed, and contributing anywhere you can!

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

Gutenberg Phase 2 Friday Design Update #2

January is halfway done and Gutenberg issues are gaining traction and feedback from a variety of people. Thanks to everyone for sharing your thoughts, and opinions!

Widgets to blocks

There’s been several concerns about widgets from people in the slack feeds, so thought to address it here briefly. While Gutenberg is converting all core widgets to blocks, they won’t be going away completely quite yet. 😉 There is a “Classic Widget” block being built to support the widgets that haven’t yet converted to blocks. If you’re looking to get involved, please check out the GitHub project board.

In relation to this, the widgets screen in wp-admin will be changing over to blocks. There’s concern around this for good reason. But ultimately as everything becomes a block, this paradigm shift needs to be communicated in smaller steps to help all users make the transition.

Navigation block

The navigation block and the interface for creating navigation menus is being discussed with some innovative concepts. What if the “Pages” screen was where you built your nav keeping the nav block simple? Or should the nav block be where you create the entire menu? Share ideas in the ticket!

Tightening up

If neither the widgets blocks, nor nav blocks are your thing, there’s a whole list of Gutenberg related issues that need tightening up. As mentioned in the State of the Word, “tightening up” is a focus for Phase 2. There’s a lot that needs work! Come help.

Research work

Yep, research is still ongoing. Some themes are beginning to emerge as they work through the data. Help out in the #research channel in slack.

There’s also conversation around how to present the data, and where to store it; a site, a PDF, Google Slides?

Share your work

Many like to post their thoughts and explorations on their own blogs. Unfortunately this isn’t always highly visible. Well there’s a whole project board dedicated to research with a column specific to “explorations.” Give a shout out in either the #design or #research channels in slack to get your work added there. Every little bit helps inform decisions going forward.

#gutenberg-weekly, #phase-2

Gutenberg Phase 2 Friday Design Update

Happy New Year everyone! As mentioned in the Gutenberg Design Flow post earlier, this is Friday’s summary of the week’s work regarding Phase 2 design.

If this was a short distance race, everyone would bust out of the gate at full speed, but it’s a marathon here, so out of the gate, setting a comfortable pace is necessary.

Widgets to blocks

There’s a better understanding of how to move forward with widgets thanks to @melchoyce. Most are ready, but there are a few PRs that need some help to completion.

Progress Post
https://make.wordpress.org/core/2018/12/17/status-update-porting-widgets-to-blocks/

Github Widget Project Board
https://github.com/WordPress/gutenberg/projects/20

Navigation block

This is in early exploration mode right now, so if you’ve got some thoughts around this, please share! Please drop your ideas and designs in the relating issues themselves.

Explorations from WCUS
https://make.wordpress.org/design/2018/12/18/exploring-a-nav-block-at-wordcamp-us/

Github issue – block
https://github.com/WordPress/gutenberg/issues/1466

Github issue – wp-admin interface
https://github.com/WordPress/gutenberg/issues/13206

Research work

@tinkerbelly and @jarahsames have been leading the efforts here. More can be read in Sarah’s latest post, Sitebuilding research. The synthesis of this research will help influence future Gutenberg decisions. If you can lend a hand, the research synthesis needs some people power, so please volunteer in the #research channel on slack.

Get involved

This Friday’s post is meant to help surface the information. If you see any questions from people, or have any yourself, please share in the comments below. If you’ve got some ideas, or have been designing some thoughts around the Gutenberg projects listed in Matt’s 9 Projects for 2019 post, don’t hesitate to provide some links, or jump into the Github issues and PRs. Looking forward to everyone’s contributions!

#gutenberg-weekly, #phase-2