The Design Team provides user experience, user interface, and visual design expertise for the WordPress project.
Want to get involved?
Welcome! This all-volunteer team needs designers of various kinds. See our handbook and drop into #design once signed up for volunteer opportunities.
Our vision is to be the go-to resource for design for other teams across the WordPress open sourceOpen SourceOpen Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project.
We meet and have ongoing discussions in Slack#design
Team: Wednesday 18:00 UTC
Triage: CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./metaMetaMeta 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.: Monday 16:30 UTC GutenbergGutenbergThe 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/: Tuesday 16:00 UTC
GutenbergGutenbergThe 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 blockBlockBlock 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.
The recent iterations have explored moving the settings out of the sidebarSidebarA 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.
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.
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.
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.
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!
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 coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress./GutenbergGutenbergThe 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.
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.
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 CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. patterns
Next up, another GutenbergGutenbergThe 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 CandidateA 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 release today. Highlights: Video position controls for the Cover blockBlockBlock 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.
Michael proposed an iteration on the new template flow. he’s already lining up some iterations to a few aspects of it to align to other design proposals
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.
GutenbergGutenbergThe 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/ development
Happy Friday. Gutenberg 8.5 was released last week on July 8 just in time to get into WordPress 5.5 BetaBetaA 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..
GutenbergGutenbergThe 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 blockBlockBlock 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 sidebarSidebarA 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 revisionsRevisionsThe 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 CoreCoreCore 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!
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 betaBetaA 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.
GutenbergGutenbergThe 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/
BlockBlockBlock 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 sidebarSidebarA 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.
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 pluginPluginA 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 headerHeaderThe 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 TrelloTrelloProject 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.
GutenbergGutenbergThe 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/
Open floor
If there is anything you would like to see added to the agenda, please leave a comment.
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 GutenbergGutenbergThe 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 release going into WordPress 5.5. It’s packed with features including:
New blockBlockBlock 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
Possibility to upload external images on image blocks
A11yAccessibilityAccessibility (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:
@noahrshrader continues to charge on fixing up the Figma library.
The navigation block interface is continuing to evolve.
Michael is working on the “Add new template” flow and would greatly appreciate your design feedback.
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.
That’s all for this week, quite an update! Remember we have CoreCoreCore 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.
