Gutenberg Phase 2 Friday Design Update #58

Hey there! Gutenberg 8.6 released on July 22. Let’s review some of those features and then dive into some design updates.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 8.6

  • All the updated patterns are included.
  • The Cover blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. now supports focal point for video backgrounds.
  • Site icon is displayed in the topbar of the Editor in full-screen mode.
  • For anyone converting Classic editor content to Gutenberg blocks, the button on the Classic block has been surfaced higher for easy access.
  • etc.

Work in progress

Document display & settings

The recent iterations have explored moving the settings out of the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and into another location.

https://github.com/WordPress/gutenberg/issues/20877

Multi-entity saving

While making changes to content, templates, and template parts, WordPress should communicate these changes and what is being saved to the user. Recent iterations explored how a user might save out their changes separately.

https://github.com/WordPress/gutenberg/issues/20474

Icons

The new icons in the Block Editor are wonderful. However, many additions are needed to support the work being done on full-site editing. Some recent explorations are focused on the Post blocks which will be used in creating templates.

https://github.com/WordPress/gutenberg/issues/24175

Browse mode

This particular issue aims to aide in browsing one’s site by clicking links on their page to jump to those pages and posts. Some prototypes have been posted recently and can use some feedback.

https://github.com/WordPress/gutenberg/issues/23328


Get involved

Now is a great time to get involved. While the work on this project is intense, it is 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, contribute, and leave feedback.

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

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

Design Show & Tell notes 29 July 2020

We had a Show & Tell last evening, unfortunately a human vs tech error prevented me from saving the recording. Here is a summary of the call.

Edit Site: Creating a new template from scratch

@michael-arestad has been working on a new flow to create a template from scratch. There are several iterations and steps taken towards this workflow and this evening we focused on resizing template parts, primarily the middle column. You can follow the design iterations in Figma. If you would like to participate, please add your comments/proposals and ideas to the PR.

Shorter triage sessions during summer days

We discussed the fact that some coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ sessions have been lacking participation during summer days due to holidays. The team agreed to shorten them to 30 mins if there were not many people around. We are also going to be reaching out to those involved in tickets to help us with technical questions.

Accordion blocks

@mapk is working on an accordion block to include in core, he showed us a prototype and some styling options. There is a Figma file to review iterations. If you want to contribute, please leave your comments in the PR.

About page for 5.5

@estelaris is working on the design for the About page as part of release 5.5. Being this the first time, it has been a learning experience. Many of the frustrations are due to the limited framework we need to work with, although that shouldn’t prevent a designer to turn in a well-designed page. The team provided some feedback and questioned why the About page is not being built in Gutenberg yet. A thought for a future releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software..

#meeting-notes

X-post: Dev requirements for learn.wordpress.org

X-post from +make.wordpress.org/meta: Dev requirements for learn.wordpress.org

Design meeting agenda 29 July 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. You can join the Slack channel by following the instructions in our handbook.

This week the design team will have a Show & Tell meeting via Zoom in lieu of the weekly meeting. If you have something you would like to share, showcase, or are working on and would like input from the design team, please add a comment below.

The Zoom link will be posted on the #design Slack channel on Wednesday at 18:00 UTC. For those unable to attend a Zoom call, a link to the video and summary will be posted as meeting notes.

#meeting-agenda

Design meeting notes July 22

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. You can join the SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

First up, @noahrshrader updates us on the progress of the Design Library in Figma.

Since last week:

  • Revised current components to get them closer to specification
  • Updated the Getting Started page to reflect current workflows
  • Improved some of general aesthetics
  • Adjusted the main text font to be closer to what’s in the product (now SF Pro Text; was SF Pro Display)
  • Added new components: Card, Color pickers, Blocks (a couple of the common ones)

Coming up:

  • Revise approach to the Proposals page. With the combined library, I’d like for it to be inclusive of all scenarios
  • Add missing components (from the list on the Components page in Figma)
  • Add additional starter blocks
  • Clean up organization of Components (some of this has already been started)

In the queue:

  • Incorporate CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. patterns

Next up, another GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ update from @michael-arestad.

Gutenberg 8.6 RCRelease Candidate A beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. was released two days ago. Expect the releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. today. Highlights: Video position controls for the Cover blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., updated block patterns, and tons of fixesThe WordPress 5.5 deadlines are approaching. We have a potential patch next week to update block patterns before RC1.

In progress work:

Then, the docs team is looking for help making new videos of all the Gutenblocks for the documentation. If you want to help, reach out in the #meta-helphub channel.

Next, discussion centered on the 5.5 About page design @estelaris is working on. Check out those drafts on Figma and leave comments if you have more suggestions!

Next week is another Show and Tell Zoom meeting instead of a regular design meeting, if you have something to show, leave a comment below.

#meeting-notes

Design meeting agenda for July 22

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #57

Happy Friday. Gutenberg 8.5 was released last week on July 8 just in time to get into WordPress 5.5 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process..

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 8.5

No more cloned element while dragging and dropping.

  • Easy upload from external sources.
  • Add an edit button to the gallery images.
  • Move zoom control to toolbar of Image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience..
  • Polish the document sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. controls.
  • Redesign the transform menu.
  • Redesign the canvas inserter. 

Work in progress

New sidebar menu to navigate within FSE. This new menu concept will make FSE navigation much easier. Pulling it into a new sidebar menu makes a lot of sense here.

Block patterns went through a few revisions in time for WP 5.5. These revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. help tighten up the overall design aesthetic. The Quote pattern below is a great example.

An Accordion block is being discussed. There’s been several requests to get a native form of this block into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Here’s how that might look.

List view design updates. The List View is another term for the Block Navigator. With all the upcoming features, a redesign is underway.


Get involved

Now is a great time to get involved. While the work on this project is intense, it is 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, contribute, and leave feedback.

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

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

Design Team Meeting Notes July 15, 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 agenda here. You can join the SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

Housekeeping

We can still use more volunteers for note-taking and triage leading. Please leave a comment below if you’re interested.

Monthly ‘Show and Tell

Monthly ‘Show and Tell’ will take place on the 29th. Even though everyone has been busy with the releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. of 5.5 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2, we will still have the session.

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/

@michael-arestad brings Gutenberg updates: Here are the plans for Gutenberg in July. Getting everything ready for 5.5 is a major focus this month.

  • BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. patterns are just about ready to go. The initial patterns have been selected and all that’s left are a few tweakshttps://github.com/WordPress/gutenberg/projects/41. Props to @nrqsnchz.
  • A new sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. paradigm is in the works. Definitely take a look and let us know what you think.

WordPress Figma Libraries

@noah reports on the update for WordPress Figma Libraries:

Colors

  • There are two palettes: Primary, which is what we’ve been migrating towards and Classic which comprise many of the colors that are still used in both the editor and WP admin.

Remaining:

  • Improve naming conventions
  • Validate palettes
  • Include documentation around use

Typography

  • The main text styles have been identified, along with their accompanying values, such as size, weight, line height, etc.

Remaining:

  • Final review values for each text style
  • Include documentation around use

Icons

  • Currently, we’re supporting three icon libraries: Primary (G2), Material and Dashicons. Only the Primary and Material icons are available in this library, with Primary having precedence. Dashicons are intentionally downplayed with an explanation and link to the standalone library.

Remaining:

  • Finalize componentization of Material icons

Components

  • Many of the common components have been built and reviewed against what’s currently in the WordPress components package. I have also been going back through and fact-checking against what’s in the latest build of the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party.
  • As you peruse the Components page, you’ll notice a dot to the left of the component name that’s either outlined or green. If green, those components are good to test, and I would encourage everyone to do so. Does the construction make sense? How does it hold up as you use it? Is it accurate?

Remaining:

  • Include remaining components from the Components list (this list is in Figma)
  • Include documentation around use
  • Promote testing and use of these components

Views

  • Completed components will eventually be grouped in clusters (atomic organisms) and added into templates/views. You can already see this with the block inserter and editor headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. clusters.

General

The following is a list of items outside of what was mentioned above.

  • Add Getting Started documentation (next week)
  • Add Proposals documentation (next week)
  • Clean up component frames (improve consistency, balance and organization)
  • Migrate utilities outside of library

Discussion

  • Project related documentation – On TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. board, we have the Figma reorganization and updates to the handbook.
  • For the Handbook- Currently there are no updates as most of us have been focusing on 5.5.

Open Floor 

  • @folletto pointed out that in Gutenberg 8.5.1 the new inserter panel when opening it closes the settings panel, and then it doesn’t reopen. Was this already discussed? @youknowriad & @nrqsnchz shared the link to PR 20951 with something similar. @folletto opened a PR to discuss the behavior of the issue.
  • The ‘About Page for 5.5’ in the form of the ticket was discussed in detail.

#meeting-notes

Design Meeting Agenda 15 July 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

Meeting Agenda

  1. Housekeeping
    • End of the month Show and Tell
  2. Updates
    • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/
  3. Open floor


If there is anything you would like to see added to the agenda, please leave a comment.


#meeting-agenda

Design meeting notes July 8

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. You can join the SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel by following the instructions in our handbook.

First up, housekeeping. We are always inviting members to be part of our note taking and triage team, if you are interested, leave a comment!

Next, @michael-arestad brings us GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ updates. Version 8.5.0 has been released today! It is the last releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. going into WordPress 5.5. It’s packed with features including:

  • New blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor design
  • Block Patterns – nice work @nrqsnchz
  • Expanded Design tools
  • Better Drag and Drop
  • Possibility to upload external images on image blocks
  • A11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility): Allow disabling arrow navigation across blocks
  • Anchor support added into most static blocks
  • Over 1500 “editor experience” improvements.

What’s next in Gutenberg? Here’s a post from @annezazu that’s worth some of your time. In progress work:

This is just a handful the items representing the work being done. If you’re interested, check out the Task Coordination messages in today’s #core-editor meeting. Look into the work in progress to see where you can give some feedback or ask questions if something is not clear, it will help designers to develop better components and blocks for us to have more fun with Gutenberg.

@noahrshrader is working on our Figma libraries. A post about this effort went up a few days ago, and a new Figma library file is being set up here. As you browse the library, you’ll notice green dots next to component names. Green indicates that it’s ready for use. Everyone is encouraged to hop into the file and take a look around. Feel free to leave comments in Figma and we’ll be happy to address/resolve.

The docs team would like feedback on the new external linking policy draft for commercial blogs.

@sageshilling is working on a Media Library image tray for this ticket that she would like feedback on. A lot of good points were discussed during the meeting already, but if you have more you can leave your comments in this doc.

That’s all for this week, quite an update! Remember we have CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. triage on Mondays and Gutenberg triage on Tuesdays in the same Slack channel.