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