WordPress.org Patterns Directory, i2

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.

The homepage of WordPress.org/Patterns
Examples of how individual patterns appear within the list.
Navigating multiple pages of patterns.
The pattern detail screen displays a large, interactive preview with a dropdown for adjusting the width.
When visiting the pattern editor for the first time a welcome tour walks you through the various aspects of creating patterns.
In order to avoid licensing issues or obscene/unwanted content, we’ll be restricting uploads and providing media for pattern authors to use.
The pattern editor is reminiscent of the template editor and includes a viewport width menu.
The 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. includes all the various 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 for patterns including title, description, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., and keywords.

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

#meta, #patterns, #patterns-directory, #wordpress-org

WordPress.org Patterns Directory

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.

The WordPress.org/patterns homepage, which allows anyone to browse all available patterns by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., search, and sort by featured, newest, and most popular.

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.

Here’s how a masonry-style grid of patterns could look as you scroll.

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.

Hovering a pattern within the grid could show the patterns title and actions to favorite and copy the pattern directly from the grid view.

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

#block-patterns, #meta, #patterns-directory, #wordpress-org

Design meeting notes august 14th 2019

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.

Updates

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

Open floor

@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!

#meeting-notes

Design Meeting Notes for 10 July 2019

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.

Housekeeping

WordPress User & Developer Survey

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:

  • What is the one thing that you struggle with most in WordPress?
  • What is something you know now about using WordPress that you wish you knew earlier?

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.

Topics for next meetings

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.

Updates

@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:

  • Live Drag and Drop 
  • Edit/Navigation Mode (mostly for a11yAccessibility Accessibility (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) but touches on design) 

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

Discussion

@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:

  • 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. ticket needs updating to have everything linked (there seems to be a lot of unlinked things).
  • Volunteers to take existing data (hopefully linked) and start working?

@williampatton will clarify actions and smaller tasks for design needs on trac ticket and design team has agreed to cross collaborate with themes team.

Open Floor

@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)”

#meeting-notes

Design meeting notes for July 4, 2018

There were several items this week that were not on the original agenda, so see the below notes and refer back to Slack

Triage Inbox

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

  • there will be 2 versions of create a website — one longer and more involved and the other with a lot less copy
  • cathibosco will be looking into this and how to reuse some of the ideas from her work for “Create a Blog

#43028: Remove numbers before month in dropdown, it makes user confused when drowdown is not opened

  • comment added: I can see how this could help for scanning and also accessibilityAccessibility Accessibility (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). Are there any examples of how other sites do this we can lean on?

Calls for Design: follow-ups

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:

    • gather everything up and thank the contributors.
    • Also where to send the final package? Ask in #meta Slack and update issue https://meta.trac.wordpress.org/ticket/596

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

  • Should be stored in their 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/ repo. That makes the most sense in this context.

Items labeled ready to review in the meeting

  • Nothing this week

Housekeeping

What will be the main focus for the next months for WordPress design?

  • @karmatosed: I wanted to suggest we start each month/ few months focusing on an aspect that needs work. My suggestion is we start with on-boarding. Suggested homework
    • give your feedback at in the shared doc
    • Think of an idea for an onboarding project and bring it to next week’s meeting.

Improve Trello board organization on Design team

  • Do we need this or can we close now? We can iterate later.
  • Some agree, but as part of our onboarding/documentation, the info on the Trello board it shouldn’t be confusing for new people
  • @boemedia: columns onboarding, handbook and outreach refer to the overview in the roadmap card in the team structure column

Triage participation

  • For those of you that haven’t been we do triage at 16:30 UTC in this very channel. We focus through issues for just 1/2hr but it’s a great toe dip into contributing.
  • @karmatosed is happy to train people up who feel ‘hmm leading triage is something I’d like to learn’.

Onboarding for tickets

  • Many people are confused or intimidated by tickets in TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. or GitHub, especially those who are not developers.
  • @karmatosed will be running a ‘non dev’ ticket onboarding session for trac and GitHub – covering 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/ also.
  • It will happen in the usual triage slot on Mon Aug 6, but note that it will be an hour long that day. Blog post announcement with details coming soon.

#meeting-notes

Design meeting summary March 22, 2018

Find the transcription here on Slack.  The links on the main topics will jump straight to where this item was discussed in the meeting.

Housekeeping

Design team related

  • Lack of feedback from Calls for design
    A few designers had a negative experience when callers for design never properly got back after designs were delivered. As a team, we feel the need to inform people who call for design how we’d like to proceed.
    We’re opting on setting up a guide on how the design process takes place and what can be expected from the designers, but also what we expect from the one who calls for the design. @boemedia will start a draft in Google docs, and after iteration it will move over to the handbook so we can point to this document when someone calls for design.

Triage Inbox

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.

Calls for design

See Calls for Design column on Trello board. Anything to be archived? Follow up on in-progress cards, etc.

  • Help with growth council pages: can someone advise 2 new people about getting involved with this?
    Still unclear what’s needed here, @karmatosed will follow up and clarify.
  • other cards that need discussion?
    WordCamp design templates on Design team
    @Khleomix asks for a repo where she can download theme files to test locally. Since the 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. themes are built on Twentyseventeen, those files can be downloaded from the theme directory, but unfortunately without the WordCamp tools. @melchoyce suggests @iandunn or @coreymckrill may know.

Items labeled ready to be a meeting topic

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.

Requests to review existing tickets

Typically from Trac or 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/

  • no requests this week

If time allows, follow-up on older cards

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.

#meeting-notes

 

#meeting-notes

If you’re curious about design for WordPress org…

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 😉

#cross-posting, #meta, #research