Gutenberg Phase 2 Friday Design Update #56

Happy Friday! Gutenberg 8.4 was recently released. Let’s take a look at some features that got into 8.4, and then we’ll dive into some new features currently being worked on.

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.4

  • Inline image editing
  • Multi-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. controls
  • Block Directory
  • Improved drag and drop
  • Visible movers next to block switcher

Work in progress

Some of the latest work being explored includes these below.

Longpress to trigger drag and drop

Creating a template from scratch

Navigation block placeholder

What’s coming

  • The post outlining July’s focuses has gone up.
  • Editor features update post for WP 5.5.
  • This coming Monday we’ll 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. Gutenberg 8.5 in time for inclusion in WP 5.5.

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

Improvements to the Figma Libraries

The Design Team is in the process of updating our WordPress Figma libraries. For those that aren’t aware, these design files provide community designers and developers creative resources to help build their projects using the latest WordPress design patterns and elements.

While there have been past efforts to keep these maintained, we’ve been iterating and adding new features faster than we can update them. Also, these haven’t been given a consistent priority and focus. As a result, these files have lost alignment and in many cases, relevance.

Below is a summary of where we are currently, and where we’re looking to go. I’d like for us to consider what would be most helpful for us in terms of how they’re organized, as well as how we contribute to them. I’ve included some starter discussion with topics from previous discussions (here’s a post from last year).

Keep in mind: the goal for this initial phase of work is to establish direction and make meaningful progress without overthinking the process. We want to be able to start addressing concerns now, but also keep our sights set on the longer-term goal. A

Problems

Lack of Discoverability & Structure

It’s hard to find what you’re looking for and lacks accommodation for varying use cases.

Lack of Consistency & Trust

Due to the velocity of iteration and exploration by both designers and developers, without a workflow in place to regularly fact-check, these files can very quickly grow out of date.

Lack of Standardization

While we want to stay flexible to accommodate the fluid nature of designing and exploring, we’d like to have a standardized structure for our components to assist with intuitive and rapid iteration.

Solution

Create a flexible and well-structured Figma library that fully mirrors our code base components; is consistently, meticulously and collectively maintained; and is scalable with the increasing velocity of iteration and explorations by both designers and developers.

Objectives

  • Establish a mutually shared and understood structure for the Figma library.
  • Establish and maintain appropriate workflows for tagging and managing Figma changes.
    • Determine how proposals are handled in Figma.
    • Determine process and cadence for tagging and tracking changes in GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/, and aligning those changes with Figma.
    • Determine process and cadence for transferring design decisions from other Figma files.

Let’s look quickly at how we’re currently structuring our libraries.

Libraries

The goal of these libraries is to provide contributors an easy and effective way to build prototypes and explore new ideas, using the latest WordPress design patterns and standards. This means making sure things are easy to find (good library structure), understand (proper documentation) and use (building the Figma components that make it easy to explore ideas).

Current Structure

Our libraries are available as 3 separate Figma files:

  • Styles – The coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. qualities of elements (i.e: color palette, typography).
  • Components – The smaller elements/building blocks (i.e: buttons, tabs, the 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. toolbar)
  • Patterns – Groups of components (i.e: block inserter, side panels, navigation)

Each Figma file uses pages to help with organization. In addition to the page(s) containing the main elements of that file, we’ve included other pages that help with more process-related functions:

  1. Getting Started – Documentation around the use of the elements
  2. Proposals – Ideas/changes that can be shared with and considered by the Design Team
  3. Deprecated – Elements that are no longer in use

The current structure seems to work okay for the most part. However, it’s possible that co-locating these elements into a single library; a single source of truth could help improve discoverability (everything is together so you don’t miss anything) and overall usability (having to jump back and forth between files can be tedious and unnecessary).

Move to a Single File?

It’s a good question, and worth the consideration. There are a few benefits to a single file approach:

  • Elements live together in one file. No need to share several links to multiple files, or risk the visibility of those links by stuffing them in the Getting Started documentation.
  • The library can become the one source of truth without the risk of an element in a related library going rouge.
  • Visually, a single file gives a holistic view of the patterns and elements.
  • In terms of the published library, the structure of components are handled similarly, making both approaches equally usable.

Another case for moving to a single file is that two of our three libraries are pretty sparse. For example, the Patterns library only has a single page in the library where the elements live (the Getting Started page can be ignored as it’s a duplicate of what’s in the Components library). Since the elements here are just grouped components, it would make sense for them to live alongside their other parts.

In terms of other aspects of a single file experience:

  • Documentation from the Getting Started pages would be brought together into a single read.
  • All of the Proposals pages would become a single location where contributors can propose changes.
  • The Deprecated pages would be removed entirely, or elements therein relocated to another file. It’s important that we only keep the relevant elements here, as we work towards a source of truth.

Here’s what that would look like:

Here, the Patterns library becomes its own page. The Styles library breaks out into its own pages (or possible into a single page). And with a better build-out of patterns, it’s possible to create an additional page called Views where patterns are put together to form some of the more common views within WordPress (like the editor view, dashboard, etc.).

Altogether, we’d have four types of elements living in a single location:

Circling back to our objectives, achieving good structure get us half the way there. The other part is making sure library elements are updated and managed sufficiently.

Workflows

Maintaining a design library is never a one-and-done effort. It takes consistent effort and prioritization. To avoid repeating past frustrations, we need implement practices that are clear, easy to follow and involve everyone. We all need to champion Regardless of , our focus should be on two things:

  • Keeping these libraries aligned with components in GitHub.
  • Keeping these libraries up-to-date with approved proposals, as well as design decisions made within other Figma files.

All of these processes need to be a part of a collective undertaking. Each designer working on a given project involving visual updates/additions to components should find responsibility for updating these libraries, or at the very least communicating the request. Without a unified effort, much like past attempts, this too will falter.

GitHub Updates

The designer working on a given feature/component should update the Figma library accordingly, or address the commits with the label “Needs Figma Update” added by others on their respective projects.

Adding/changing components:
  1. Contributor makes a visual change to a GitHub component.
  2. Contributor tags the commit with label “Needs Figma Update”
  3. Designer closest to the effort/project updates Figma library.

As a backup initiative, the team could/should tackle this label via a weekly triage.

Explorations & Proposals

Contributors have the ability to propose changes to components and design patterns, or suggest new ones from within the library.

Making a proposal:
  1. Create or revise a component and add it to the Proposals page for discussion (via Figma comments). During this phase, feel free to work on the component until the component is finalized in the GitHub repo.
  2. Iterate on the component until it matches the coded component.
  3. Once the coded component has been finalized, it’s time to review the Figma component and prepare it for publishing. The Design Team will review the component to ensure it meets standards, requesting edits where necessary.
  4. Once approved, and after the code component has been released to wordpress/components, the Design Team will merge the component into the master Components page.

Share Your Thoughts

If you’ve been using the WordPress Figma libraries and would like to contribute to the current direction, please share your thoughts below. Specifically, we’d like feedback on:

  • Do you like the current approach of having separate files for each library, or should we pursue a more unified approach with better workflow and organization?
  • Any other ideas you feel would help improve the way we organize and maintain our design library?

A big thanks to @mapk and @ibdz for their assistance with the content and formatting of this post!

#figma, #wordpress-components

X-post: WCEU 2020 Online Contributor Day: Feedback and achievements

X-post from +make.wordpress.org/updates: WCEU 2020 Online Contributor Day: Feedback and achievements

Design Meeting Agenda 1 July 2020

This is the agenda for the weekly design chat meeting on Wednesday, July 1st, 2020, at 18:00 UTC 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 meeting is held in the #design channel in the Making WordPress Slack.

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

#meeting-agenda

X-post: Exploration of a new classification for user documentation

X-comment from +make.wordpress.org/docs: Comment on Exploration of a new classification for user documentation

Design Team Meeting Notes June 24, 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.

First, Housekeeping. We can still use more volunteers for note-taking and triage leading. Leave a comment below if you’re interested.

Now, @michael-arestad brings 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: The next Gutenberg 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. 8.5 to be released on the 6th of July will be the one included in WordPress 5.5.

  • @itsjusteileen and @annezazu have been working on the #fse-outreach-experiment – It’s a great opportunity to get early regular feedback on our progress in FSE.
  • There is an experiment to improve drag and drop shepherded by @joen that We’re particularly excited about.
  • Reusable blocks are likely to get their own tab in the inserter
  • @nrqsnchz and I are starting work on designs for creating a new template. Stay tuned!

Meeting Between CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. and Design Team

  • The Meeting is on Thursday 17:00 EDT in the #core-css channel; find your local time
  • We will be chatting about Color Name Conventions, in specific colors.
  • Some time is needed to get organized as far as categorizing colors/etc.
  • Color naming convention is a huge item and we will continue discussing with the #core-css until we reach our goal.

Discussion

The 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 is an item brought up in discussion as the team would like to know if the process is still working to track design requests from other teams. For the moment, the team had no suggestions so we decided to keep it as is.

Open Floor 

  • @sageshilling is working on a reusable 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.. She will start a PR and bring it to the team for feedback.
  • @noah is working with @ibdz on organizing the Figma libraries and asked for feedback on the document. If anyone needs access to Figma, send a PM to @estelaris. https://docs.google.com/document/d/1vhj4uxXk6wn6L5i_R1F5GIu3OU3WzeE_0kTx89SWbI0/edit?pli=1#heading=h.d8dn9qwdokto
  • @estelaris brought up the duration of core/metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. triage as an issue. The original meeting lasts only 30 minutes. This week, she ran core triage for a full hour and managed to cover 2 full tickets. She will write a P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. on this to ask the design team members if anyone agrees to increase the time to a full hour.

#meeting-notes

Design Meeting Agenda 24 June 2020

This is the agenda for the weekly design chat meeting on Wednesday, June 24, 2020, 18:00 UTC

  • Housekeeping
  • Updates from any specific focuses
    • 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/ 
    • Collaboration with #core-css team on a color naming convention
  • Discussion
    • 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.: is this process still working out for the design team?
  • Open floor

This meeting is held in the #design channel in the Making 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/..

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

#meeting-agenda

Gutenberg Phase 2 Friday Design Update #55

There have been a lot of efforts to tighten up 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/ in preparation for the WordPress 5.5 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.. This post highlights a few.

Moving blocks

The movers are now more visible and aligned tightly with the 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.’s icon. And there’s a PR that explores hiding the block’s content when being dragged.

Resize component

The resize component is getting a tooltip that communicates the pixel size when being resized.

Parent block selection

Selecting the parent block has been difficult for a long time. The current iteration to improve this experience includes a parent selector that appears in the block’s toolbar.

Superscript and Subscript

A few rich text additions include superscript and subscript to allow more editing capabilities.


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 meeting notes June 17

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 still looking for volunteers to take notes and run triage (either coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. triage or 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/ triage). If you are interested, leave a comment!

Next, @michael-arestad showers us with updates:

Gutenberg design update:

  • There is a new proposal for integrating the media uploader/inserter into Gutenberg. It will be discussed in the #core-media channel June 18th at 4 PM UTC.
  • There have been some minor updates to the “Add template part” flow moving closer toward the proposal here.

Core CSS meeting recap:

  • Discussion was centered around naming conventions and possibilities for complexity of variables
  • All colors in the wp-admin should be controlled by the color schemes
  • There is a plan to come up with color “buckets” to prevent us from having to target every use of a color individually when writing color schemes
  • Here’s a cool experiment from @ryelle that removes all colors
  • We did get a bit into naming and philosophies but not decisions were made
  • Chat will continue June 18th at 9 PM UTC in the #core-css channel.

Two calls for feedback this week, one from the Docs team regarding the External linking policy, and one for the WP notification center proposal. Please leave your comments on those posts.

For the discussion, we dove into how to improve and maintain our Figma library of design components. Main pain points are that it’s hard to navigate, not up-to-date, and nobody who’s responsible for maintaining it. @ibdz spearheaded a document to collaborate on and gather input from the likes of @noah @davewhitley @melchoyce, and YOU! If you work with Figma or another design library, leave your thoughts in that doc so we can figure this out.

Finally, @michael-arestad briefly discussed template parts in Gutenberg, and how to differentiate them from 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 in the UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it.. It’s hard because technically they are the same, but with different use cases. A post will be written soon with details.

#meeting-notes

Design meeting agenda for June 17

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:

  • Housekeeping
  • Updates
  • Calls for help
  • Main topics
    • Reworking/maintaining Figma libraries
  • Open floor

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

#meeting-agenda