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

Searchbox Inventory for WordPress.org

Here’s the documentation of all the searchboxes I found across 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/. Feel free to doublecheck me. Included screenshots for cases different from the standard headerHeader The 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. searchbox.

Homepage – https://wordpress.org/

  • Standard Searchbox in header (Searches Documentation/Codex)
  • Screenshot: http://cl.ly/2u2M0R0J0H3X2h2B2C2d

Showcase – https://wordpress.org/showcase/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Site Searchbox in Right Column (Searches entire Showcase/Same search parameters regardless of TagTag Tag is one of the pre-defined taxonomies in WordPress. Users can add tags to their WordPress posts along with categories. However, while a category may cover a broad range of topics, tags are smaller in scope and focused to specific topics. Think of them as keywords used for topics discussed in a particular post. or Flavor)
  • Screenshot: http://cl.ly/130G1e0J0y43073a2B0m

Extend – https://wordpress.org/extend/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Extend/Plugins – https://wordpress.org/extend/plugins/
    • Standard Searchbox in the header (Searches Documentation/Codex)
    • 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 search box in main content area (Searches plugin directory)
    • Screenshot: http://cl.ly/0G0o3x1v0d121V2v0Q0Q
    • Extend/Plugins/Search – ex. https://wordpress.org/extend/plugins/search.php?q=jetpack&sort=
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Plugin Searchbox in main body (searches plugin directory)
      • Screenshot: http://cl.ly/441t10200i2z1h0h1501
    • Extend/Plugins/Tags – ex. https://wordpress.org/extend/plugins/tags/widget
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Plugin Searchbox in left column (Searches entire plugin directory)
      • Screenshot: http://cl.ly/0A1P1I0I3G370V1f2g0l
    • Extend/Plugins/Developer Center – ex. https://wordpress.org/extend/plugins/about/
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Plugin Searchbox in left column (Searches entire plugin directory)
      • Screenshot: http://cl.ly/0A1P1I0I3G370V1f2g0l
      • All subpages with the same scheme.
  • Extend/Themes – https://wordpress.org/extend/themes/
    • Standard Searchbox in the header (Searches Documentation/Codex)
    • Theme Directory search box in main content area (Searches theme directory)
    • Screenshot: http://cl.ly/3o1F0v370U0v012m0q3h
    • Subpages only have the standard Searchbox in the header
  • Extend/Ideas – https://wordpress.org/extend/mobile/
    • Standard Searchbox in the header (Searches Documentation/Codex)
    • Idea Searchbox in the main body (Searches Ideas Forum)
    • Screenshot: http://cl.ly/3T1D290G082U0V0p0P2c
    • Extend/Ideas/Search – ex. https://wordpress.org/extend/ideas/search.php?search=database&forum_id=0
      • Standard Searchbox in the header (Searches Documentation/Codex)
      • Not as pretty Idea Search in the main body (Searches Ideas Forum)
      • Screenshot: http://cl.ly/1j1R4046181I1r0x0J0N

About – https://wordpress.org/about/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • All Subpages have the same searchbox scheme

Docs – https://codex.wordpress.org/Main_Page

  • Standard Searchbox in the header (Searches Documentation/Codex, has different placeholder text: Search the Codex vs Search WordPress.org)
  • All Subpages have the same searchbox scheme

Blog – https://wordpress.org/news/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • All Subpages have the same searchbox scheme

Forums – https://wordpress.org/support/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Forum Searchbox in the left column
  • Screenshot: http://cl.ly/423B3N0i280e1N133R2J
  • Subpages and Forum Templates only have the standard Searchbox in the header

Hosting – https://wordpress.org/hosting/

  • Standard Searchbox in the header (Searches Documentation/Codex)

Download – https://wordpress.org/download/

  • Standard Searchbox in the header (Searches Documentation/Codex)
  • Subpages and Forum Templates only have the standard Searchbox in the header

Also, found this to be a little unsightly: when on the Hosting page, the active tab in the main navigation touches up against the Downlaod tab. Could we add some margin here? Screenshot: http://cl.ly/101U161b411q19461x1D

#search, #wordpress-org

Jane was without internet today and John…

Jane was without internet today and John was traveling, so there was no official meeting. Here are some things to think about for next weeks meeting:

  • We should have 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 for the full screen/distraction-free editor to test in the next few days. Will post an update when its available. Test the plugin this week to make sure the 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. is comfortable and we’ll discuss possible improvements at next week’s meeting
  • Looking for a volunteer to inventory the position/location of all the search boxes on WordPress.org so we can start a discussion on standardizing them

PS. There are still open challenges from Trac and some issues logged in previous posts. If anyone wants to revive or take a whack at these, please do.

#summary, #wordpress-org

What's next? 3.Org!

Jane has posted more information about the potential .org projects:
https://wordpress.org/support/topic/415075

The specific projects and scopes are still being tightened up, so there isn’t a list of specific tasks, yet.

If you’re interested in a specific project (or contributing in general), leave a comment on the developers blog (http://wpdevel.wordpress.com/2010/06/24/hiatus/). There will be more on specific tasks soon!

#3-org, #wordpress-org