Design meeting agenda for 9th September 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:

  • Housekeeping
    • Call for note-takers and triage facilitators
  • 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/
  • Main topics
    • 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 for default themes: call for help and feedback during 5.6
  • Open floor

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

#meeting-agenda

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

#meeting-notes

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 release 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

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

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

Next steps for Dashicons

For many years, the Dashicons project has supplied many of the icons in WordPress and it’s become widely used by plugins. The icon font is currently sitting at an impressive 303 icons!

We’ve recently discussed how to best move forward with icons in WordPress. 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. editor uses SVG icons directly, and the rest of WordPress uses the Dahsicons icon font. One of the challenges with an icon font is that it’s one big compiled “sprite”, and so even though it gets cached well, for every icon you add the sprite grows bigger. With SVG you include just the icons you need. The block editor does this using a new Icon component

In an effort to move things forward, and per discussion in the core design chat (link requires registration), it was suggested that an ultimate release of Dashicons be made, to wrap up existing requests (adding 36 new icons), close down to new requests, and to focus future efforts on the new Icon component.

With that plan, the next steps are:

Future efforts for the new Icon component, including creating new documentation and improving the build process will be discussed in the Gutenberg repository.

Show and tell meeting for Wednesday 27th May

It is time for show and tell! At this time, there is no agenda so is your chance to add a comment and share something. Do you have something you are working on to share, it can be 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/, coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., 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. or even a demo of something cool.

Maybe it’s something you want feedback on that you are contributing, or perhaps it’s something you are working on and would love to bring into the project. Now is your time to share! To share something, just add a comment here and you’re on the agenda!

The video link will be shared in #design on 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/. just before. Make sure you download zoom before. There will also be a recording, posted so you can watch async if unable to make the time.

#agenda#show-and-tell

Design Team Meeting Notes May 20, 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.

Next, @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.

  • Pattern searching
  • UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. parity work between edit-post and edit-site
  • Improvements to 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. are underway including adding padding controls, improving color controls, and improving background controls
  • Work is being done on rich image editing
  • Continuing work on the template part flows, how they could fit with a site-wide column grid, and hopefully flows for setting up a new template
  • The Welcome Guide has been improved
  • A few more block patterns have been added
  • The Widgets screen is coming along nicely.

Features shipping with the Release of 5.5: (planned for sometime in August 2020)

Certain about delivery of the following items

  • Block UI Redesign
  • Block Patterns
  • Hundreds of small improvements and bug fixes

Uncertain about delivery of the following items

  • Navigation screen and block
  • Block based widgets screen
  • Global styles

Announcement

Discussion

  • Adding a Figma access request rule to our handbook
    • Background: Since we want to give access to everyone that needs access but some people only need View permissions while others need Edit. The Editors count towards our limit, while viewers don’t. Suggestion for the default permission should be ‘View’ and permit ‘Edit’ only when requested.
    • View Access will allow copy/paste permission only.
    • This will also be added as a rule in the Design Handbook.

Finally WC EU Contributor Day:

#meeting-notes

Gutenberg Phase 2 Friday Design Update #54

Happy Friday! This post should catch you up with the latest design updates in 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/ right now. Let’s jump in.

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.

Improvements to the Cover block are underway. These include padding controls, color controls, and background controls. If you haven’t noticed, a really cool position control was introduced recently.

Cover block

Rich image editing

The Image block is getting some additional image editing features.

Rich image editing

Site navigation

Navigating through the full-site editing experience is coming along. This can be tested in the 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 right now.

Site navigation

Multi-entity saving

Also recently merged is a first pass at multi-entity saving. It allows the user to see a list of larger changes (especially global changes) that they did to their site before publishing them.


Ways to keep up with FSE

If you didn’t catch it, Anne posted recently about the various ways you can keep up with the work happening on full-site editing.


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

Gutenberg Phase 2 Friday Design Update #52

Happy Friday, everyone! I’ve got some interesting design updates today regarding full-site editing with 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/.

Page & Template Navigation

Initially, I had assumed the two dropdowns in the middle of the top toolbar were primarily for navigating between pages or templates. Turns out we are going to try another direction. Matias expressed an interest to utilize these two dropdowns as a way to modify the page or template – not necessarily for navigation. So something more like this:

So where does navigation live? I hear you asking. This can happen in two different places. First, the new “W” option that slides open the wp-admin which @shaunandrews has been exploring.

The second works similarly to the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. Users would be able to use a modifier key + click on a navigation item in the page to jump to that page. Or there may be a way to click the menu item and click the link appended to it like in Google docs.

The Navigator

The Navigator is getting some revisions lately. We are adding movers to the blocks and will add the ability for dragging and dropping. There’s even some talk about adding an ellipses menu for more options. With these additions, the Navigator is becoming a significant way to work with your content. @michael-arestad explored the Navigator as a persistent slideout panel similarly to the outline panel in Google docs.

Template parts & Patterns

The relationship between template parts and patterns does leave one feeling a bit confused because they are so similar. One defining difference is that template parts are global and patterns are local, but what happens when we start talking about 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. and Footer patterns? Yesterday, @michael-arestad brought up that template parts are really just containers that hold patterns. This means we don’t need another tab in the Inserter for template parts! Basically, when editing a Header template part, the user will see Header patterns appear first in the Inserter.

This means that categories for Patterns will definitely include Headers, and Footers among other things.

Building templates

The last thing today was about building templates. Figuring out this 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. flow is important. Right now we are leaning toward a flow that includes some sort of step process that provides a skeleton for users to click and manipulate. Imagine creating a new template and seeing a screen that already lays out a Header, Content area, and Footer. Clicking on the Content area provides an option of a 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. or not. This is still just being thought through… nothing solid yet.


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