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. and 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
There is an easier way to try out a 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/ PR that does not require one to setup a local Development Environment. One can download a special version of a 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 that includes the PR one wants to test.
Here is a video I made showing how it is done. This is a great way to be able to give feedback to features as they are being worked on.
An alternative is to visit gutenberg.run and insert the PR number and sit and wait until the site has loaded up the Pull Request.
Quick start instructions.
Find a PR you want to try out. Along the tabs just below the PR title. To the right of the active Conversation tab is the Checks tab. Click the Checks tab. Along the left side is a 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. containing various links. Scroll until you find Build Gutenberg Plugin Zip. Click the Build Gutenberg Plugin Zip. Scroll to the bottom and click the gutenberg-plugin link. The Gutenberg plugin is then downloaded. (On a Mac) Double click to unzip. There is one zip within another zip. Both are uncompressed. Right click and choose to compress the uncompressed folder back to a zip. Upload the Gutenberg plugin zip to a test site and test out the PR.
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
A Week in Core
What’s Next in 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/ (April 2021)
Recent Build/Test Tool changes and GitHubGitHubGitHub 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/ Actions update
Announcements
Discussion
APAC friendly working hour
WordCampWordCampWordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe 2021: Contributor DayContributor DayContributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/.
Updates
Proposal: Topic Based MeetupMeetupAll local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. Chapter Program
FSE in WP 5.8
WP Briefing: Who is WordPress
Open Floor
Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.
@hedgefield has been working on the handbook expects to add major changes by this week. Requesting everyne to keep an eye on the handbook by the end of the week.
Contributions to the Design Team is always welcomed. Please pingPingThe act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.”@estelaris or @chaion07 and they will guide you through.
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
There will be a company-wide test of FSE at Yoast. @hedgefield believes that it will bring in some valuable feedback on some designs.
Project Updates
@ibdz has been working on the Figma library, adding the new colors. He has checked with the ‘source of truth’, made changes, and published the Styles.
WP-Admin Colors in WordPress 5.7 : Blue, Gray, Red, Yellow, Green
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/ Colors
Deprecated previous Light and Dark Gray.
Rename to correct the folder ‘Gradients’ to ‘Opacity’.
As for the next step, he will inspect and work on the Components.
@ibdz also agreed to post a monthly post on “changes in Figma library”. The design team believes posts like this is going to be useful to all.
@jameskoster Combined all the separate button states into variants which will make it much easier to consume. This makes swapping the button states easier, For example – instead of having four versions of the Primary button, you can have just one and swap the button states via inline class. More variants can be found here. He also believes some refinement needs to be done.
Open Floor
@joyously reminded that there were requests for feedback for the Reusable Blocks interface and for how the Appearance menu should be with Full Site Editing. Because the recent change n Reusable Blocks generated lots of forum topics, the recent changes were all related to the UIUIUI 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. change. Because of the UI changes, people are inadvertently deleting Reusable Blocks. He requests to put a process to prevent this from happening in the future. He hopes 5.7.1 will fix everything.
@paaljoachim mentioned that one major issue with Reusable Blocks is that one can not discard a save, find the issue here Bottom line was that when the new Reusable 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. concept/feature was released.
@critterverse has been doing some work with Reusable Blocks here and @estelaris said, designers are exploring solutions and enhancements.
We had a bit of a mix up with the time due to timezones and DST but were able to share two designs: @shaunandrews shared Pattern Directory design progress and @critterverse shared reusable blocks. @estelaris shared ways designers can be more involved.
@critterverse shared her ongoing work with Reusable blocks. To continue the discussion, check out the issue on Github: https://github.com/WordPress/gutenberg/issues/30357
Being more active
@estelaris started the discussion on how designers be more active. A few take-aways:
Bring work out in the open so more people are aware of what is going on and we can engage in discussions.
Rely more on async communication in Slack, especially as not everyone can make all the meetings.
Consider posting work to the Make Design blog, as @shaunandrews recently did with Patterns.
As patterns continue to become a primary building 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. of the editor, it’s important that we have a way to collect, organize, and manage them. There’s been some discussion around this from the Meta team and work is underway on Github to create the new directory. The WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ Patterns Directory, similar to the Plugins and Themes directories, will be a publicly viewable site that lists user submitted patterns that anyone can copy and use. WordPress.org members can also sign in and submit patterns to be added to the directory.
The Patterns Directory will also be available from within the WordPress block editor on your site, allowing any one to quickly browse and insert patterns to their posts and pages seamlessly. This is a big opportunity for designers to contribute to the overall WordPress ecosystem without having to know how to code a 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 or a theme.
Along the top of the patterns grid is a “sort by” dropdown, followed by a list of selected categories, and then a search box. Changing the sorting or selecting a category updates the grid and exposes a secondary UIUIUI 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. that indicates the current criteria (category, author, tag, etc) along with space for displaying related information like related categories or an author’s website.
The Patterns site focuses around a masonry-style grid of rendered patterns. My designs have a discrete “Load more” button, but I imagine we could implement an infinite scroll or a pager just as easily. Within the grid, Patterns focus on showing there rendered output, unlike the Plugins/Themes directory where a static image is required.
We could require a static image, or generate one automatically. This could be nice as it would allow more control over the grid (fixed dimensions) but I think could lead to a worse experience browsing, as the images wouldn’t necessarily reflect the reality of the pattern shown.
Within the grid, I’ve omitted the patterns title and other information (like author, date, etc) in hopes of creating a more visually-focused browsing experience. However, it think we could explore incorporating the 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. information and actions when hovering a pattern within the grid. There could be some issues with this when dealing with very short patterns, like an 80px tall banner.
Single Pattern Details
Selecting a pattern from the grid will open the single pattern details page. The pattern detail page displays the title, description, author, categories, and actions (favorite and copy) for the specific pattern.
The large preview of the pattern includes drag handles on both sides, which allows you to adjust the viewport size of the preview and better understand how a pattern responds at various screen sizes. An alternative to this interaction is to include similar pre-defined device widths, but I feel the drag handles offer a more interactive experience.
There was some brief talk about making the preview an actual instance of the block editor, allowing visitors to edit, customize, or otherwise change a pattern directly from the site. This could be interesting, but I think for now we’ll consider it out of scope; Maybe something to reconsider once the directory is up and running and people are using it.
Below the large preview is the patterns categories, a link to report a pattern, and then an “explore” section which displays other patterns by the same author (if available) along with patterns that contain the similar categories.
How to use a pattern
Since patterns are really just text, they can be copied to your device’s clipboard just like any other text. And, then you can paste the pattern into any block editor to use it. My hope (perhaps mistakenly) is that copy/paste is a very familiar thing that people do, but we’ll still need some sort of instructions for when people try to use a pattern for the first time.
In the GIF above I press the “Copy pattern” button and the pattern is copied to my device’s clipboard automatically. A message appears stating that the pattern has been copied a “Learn more” button. Pressing the “Learn more” button displays a modal with more explicit instructions and visuals to help people better understand how to use a pattern.
Besides copy/paste, you’ll be able to “favorite” patterns and find them from within the editor directly. This will be similar to the way plugins and themes works today. I plan to have more on some editor-related changes to browsing and inserter patterns in another post.
Submitting a pattern
Anyone signed in to WordPress.org will be able to create and submit a pattern to be hosted in the directory. To help explain what patterns are any why creating and submitting that could be a great move, I think it could be nice to have a landing page. Here’s a quickly stubbed out design for how such a landing page could look:
When actually creating a pattern, visitors will use a hosted instance of the block editor. This editor will (mostly) work just like the normal block editor, but with a few tweaks. The first change is a custom version of the editor’s welcome modal focused on creating and submitting patterns. I don’t have all of the steps mocked up, but I imagine 2-3 slides explaining how to submit; Something like this:
The next change is related to the document inspector 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.. This normally shows document-level settings for posts and pages. When creating a pattern it will be similar, but the wording will be updated and it will contain fields for setting the patterns title (which also lives in the canvas), description, and categories.
Finally, rather than having a “Publish” button the patterns editor changes the label to “Submit Pattern.” I originally used the existing “pre-publish” flow from the editor to handle submitting a pattern. This existing flow uses a sidebar to present “last minute” information for review before a document is published. This could work for submitting patterns, but I think we’ll likely want to be more emphatic about what is happening (submitting, vs. publishing) and could likely make better use of the space provided by a modal to better display (what could be a growing list of) categories.
Once someone submit their pattern they’ll be taken to the “My Patterns” screen, which lists all the patterns that person has created and favorited.
When signed in to your WordPress.org the Patterns homepage will update to provide information about your submitted patterns, including any pending reviews.
Speaking of reviews, there are currently some very basic checks in place, but its unclear to me if there will be a need for manual reviews before (or after) a pattern is published. I did include a “Report pattern” link on the pattern detail page, which opens a modal with some options to report a pattern:
There’s still some open questions (How do drafts work? What categories should we have? How are “featured” patterns chosen? And more…) but this post hopefully outlines the foundation for this exciting new section of WordPress.org.
Please do leave your thoughts, concerns, and ideas in the comments below. Don’t hold back.
As is the last Wednesday of the month, we will have a Show & Tell. This is a Zoom meeting where contributors have the opportunity to share their work and ask for feedback from the design team or simply show whatever they are working on.
Zoom link will be posted on the SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.#design channel and recorded for those that cannot attend. A summary will also be posted in lieu of meeting notes.
If you would like to share your work, show up to the call and raise your hand or let us know in the comments.
We have an open call for note-takers and triage facilitators. These both are great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments.
Contributions to the Design Team is always welcomed. Please pingPingThe act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.”@estelaris or @chaion07 and they will guide you through.
CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. Blog Highlights
Peter published a p2 on the WordPress 5.7 Maintenance Release Schedule. Congratulations to @peterwilsoncc and @audrasjb for being the Release LeadRelease LeadThe community member ultimately responsible for the Release. and Deputy Lead respectively. The release candidateRelease CandidateA beta version of software with the potential to be a final product, which is ready to release unless significant bugs emerge. is scheduled for April 7, 2021 at 23:00 UTC and the final release is scheduled for April 14, 2021 at 23:00 UTC.
@priethor published the 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 for March 2021. Check this p2 out to get to know not only about not only what’s new on Gutenberg but also 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.-Based WidgetWidgetA WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor, Navigation Screen, Full Site Editing. You can also find information on areas to be aware of and how you can get involved.
There’s a call for Testing. If you are closely following the Gallery Block developments, this p2 is for you. Props to @glendaviesnz for an in depth write up on why the changes are being made and what needs testing.
Show and Tell Meeting: Our monthly ‘Show and Tell’ Meeting for March 2021 is taking place next week. If you are working on something and would like to share with the team then please ping either @estelaris or @chaion07 over Slack.
Updates
Update on Figma: @ibdz wasn’t available to share his update with the team.
There is a proposal for Native Typescript Support in Gutenberg. Props to @sarayourfriend for the in-depth write up on Typescript, the benefits, details of the proposal and the path forward.
Design Handbook Pages 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.: We would like to ask for contributors who would like to review the pages that have already been written and to write any other missing pages. @ibdz, @chaion07, @estelaris & @hedgefield have already volunteered to work on this. If you are interested then please let us know in the #design channel over Slack.
Looking for a Figma maintainer: @ibdz volunteered to maintain the components in Figma and add any changes necessary from now on.
Adding Note-takers to the Team Page: In an effort to recognize the regular contributors better, the team decided to add the note-takers to the list on the Handbook. We have an open call for note-takers and triage facilitators. These are both great ways to get involved for new contributors but everyone is welcome to help out. Let us know if you are interested in the comments.
Contributions to the Design Team is always welcomed. Please pingPingThe act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.”@estelaris or @chaion07 and they will guide you through.
Announcements
The coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. team is looking for contributors to help out in minor releases for 5.7. If you’d like to help then please comment on the p2.