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.
There’s been ongoing work on 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 since I last posted. I’ve continued to iterate on the design for the site and editor and wanted to share some updates. You can find the latest designs in Figma, along with all the past iterations and explorations.
Some notable changes since the last post:
The search has been made more prominent.
The chaotic masonry-style layout has been replaced with a more rigid grid.
Pattern titles are always visible.
Author avatars along with view and favorite counts are displayed below the pattern title.
The “Load more” button has been replaced with a 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. for navigating between pages.
The pattern preview gains a menu to adjust the width of the viewport to see how a pattern reacts at various sizes.
The pattern editor gets it’s own welcome tour.
Media uploads will be restricted, meaning patterns can only use media provided to them in the library.
The background color of the pattern editor now matches that of the 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. editors “template editing” mode.
The pattern editor replaces the “Preview” menu with a “Width” menu, which allows designers to set the viewportWidth property of their pattern.
Clicking the “Publish” button in the editor uses a multi-step modal that walks through collecting and confirming the required details (title, description, category) of a pattern.
My Patterns has been split into two screens; The first is for patterns you own, and the second is for patterns that you’ve favorited.
Work continues on both Github and in Figma; Please do join in the fun and help us out. If you have any thoughts or feedback feel free to drop a comment below. Thanks!
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.