Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
There’s been ongoing work on the WordPress.orgWordPress.org The 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:
viewportWidth property of their pattern.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 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. 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.org The 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 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 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 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. 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 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. 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.
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.
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.
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 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.. 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.
These are the weekly notes for the design meeting that happens on Wednesday’s. 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.
@mapk updates us 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/ developments. Gutenberg 6.3 is out! Including new Navigate/Edit modes, and some major Table 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. updates. Priorities for Gutenberg development will now be discussed every week in the #core-editor channel, great for anyone wanting to stay up-to-date and lend a hand.
@melchoyce did a new iteration in the block directory mockups that she’d like feedback on. User testing will also be done at WordCampWordCamp WordCamps 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. Brighton this weekend.
@davewhitley points us to the Component Review project, to review all the new 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. elements introduced in Gutenberg, and make them generic enough to use in all of WordPress and document them properly.
@hedgefield lets us know that WordPress 5.3 will likely include an update for the Site Health grading, and also wonders whether design could take a look at wordpress.tv, which is becoming a bit dated. Literally, there is no 2019 content on the wordcamp.tv landing page. @karmatosed and @melchoyce ruminate on the pressed-for-time 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. team and their priorities, concluding that adding a few tickets with mockups and asking in #meta would be the best approach.
@blaidalfo expressed interest in helping with the Figma libraries containing the WordPress components. @davewhitley also contributed some documentation which can be found here. An official list of maintainers will be published soon. If you want in, let us know in #design!
These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here.
There is a call for feedback on the Updates to the WordPress User & Developer Survey. @melchoyce asked if we wanted to discuss any questions as the design team.
Two suggestions by @mapk:
There is also a discussion about whether this is focused on developers or end users, as having both as survey targets make it very difficult to narrow questions.
@melchoyce clarifies that the survey is mostly publicized through WordPress.org and provided a link to data from previous years to guide us in our choices.
@karmatosed suggested we read the data and provide our suggestions as comments and insights as feedback on the post mentioned above.
Another call is to add discussion topics for upcoming meetings. @karmatosed suggested that next week we focus on 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 and decide what needs to be done. @youknowriad asked how to access the Trello board.
@PiotrGawinski is a new member and would like to find a small project to get involved with and @boemedia recalled the link for Calls for Design column in Trello.
@mapk let us know that Gutenberg 6.1 was released today! It includes some really cool enhancements with lots of people contributing. @youknowriad gave us some explorations to look through:
@drw158 shared a component audit he’s been working on to clean up the component library as it has grown and exploded to places beyond the editor. The audit is related to naming, structure, and composition, not code audit, so designers at any level can contribute and it is on the ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. component library, not the Figma component library.
The first issue opened is related to the ButtonGroup and Toolbar.
@dingo_d from theme review team is looking for designers to help create a better preview for themes on WordPress.orgWordPress.org The 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/, including better-looking demo data. The demo data should be used internally and perhaps theme developers can use it too. For reference, here is the old meta-ticket. The demo should showcase 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/ blocks, as an example, see Chaplin Theme.
To clarify the problem, look at Theme Twenty Nineteen in WordPress.org, it has a great theme screenshot, but the “preview” doesn’t look like the screenshot. It is missing elements like logo, nav, 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., etc. It doesn’t show off the full potential of the theme. To resolve the issue, there is a separate demo site. The XML demo data should be imported using the default importer. There is an .xml for Twenty Nineteen but it doesn’t contain menus or widgets. #meta must add those manually.
For step 2, we would like to have the option to change the presets of the demos data in the previewer, like chose between business/site vs. blog styles (business, portfolio, blogs, etc.)
So far actions go on tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket:
@williampatton will clarify actions and smaller tasks for design needs on trac ticket and design team has agreed to cross collaborate with themes team.
@melchoyce shared an opportunity to getting involved with usability testing. And for designers looking for small tasks, there is always the Meta trac. Try to stay away from anything titled “Redesign (big section for WordPress.org)”
There were several items this week that were not on the original agenda, so see the below notes and refer back to Slack
Design for page “Create a Website” on WordPress.orgWordPress.org The 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/ on Design team
#43028: Remove numbers before month in dropdown, it makes user confused when drowdown is not opened
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 icons are complete and @cathibosco is doing a review. Last steps:
Create a new 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. card for the headers? Same way of working?
@estelaris wonders where to store the Training Team infographic native .ai file she recently finished
What will be the main focus for the next months for WordPress design?
Improve Trello board organization on Design team
Triage participation
Onboarding for tickets
Find the transcription here on Slack. The links on the main topics will jump straight to where this item was discussed in the meeting.
Design team related
See Inbox column on Trello board. Calls for design made via the Make blog, 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/., etc. should be transferred to Inbox each week, along with any new cards that need to be acknowledged.
See Calls for Design column on Trello board. Anything to be archived? Follow up on in-progress cards, etc.
Filter Trello board for ‘meeting’ label which means that some work has gone into the card, and we have enough detail to make a decision on it.
Typically from Trac or GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/
Filter Trello board for ‘needs discussion’ label. If none, triage any 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. cards that are not yet owned.
Final question by @boemedia about the Invision licenses. What’s the status? @karmatosed says we have it and she will write a post and explain how designers can get a license.
If you’re curious about design for WordPress.orgWordPress.org The 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/, I just posted extensive UX research survey results about WordPress.org network of sites on the meta p2 😉
You must be logged in to post a comment.