Gutenberg: Categorizing Patterns

Created on 6 May 2020  路  7Comments  路  Source: WordPress/gutenberg

At the moment all patterns are loaded and visible in a single view. This naturally doesn't scale. Before we add a pattern category API it's worth thinking through a bit how these are expected to be used and whether they might be mirrored in an eventual pattern directory in .org.

My impression is that patterns should have more flexible categories (possibly even placing them in more than one if needed). I can see categories at this level of abstraction, for example:

  • Text
  • Titles
  • Galleries
  • Call to action
  • Hero
  • Landing page

Also a theme might use categories to organize content management differently in different buckets. This leads me to perhaps consider implicit registration of categories in the pattern registration:

$pattern = array(
    'title'      => __( 'My Pattern' ),
    'category'   => array( 'category', __( 'Category Name' ) ),
    'content'    => "",
);

If the category slug is not registered yet we would register it for you. Some complexities to handle are the need for a display name and what happens if a category is already registered (discard the new category name?).

This quickly can turn confusing and unhelpful, so maybe we just have a separate 'register_block_pattern_category()` and just use an array of slugs (for multiple categories) in the pattern declaration. What I do think is that we should probably start with no core categories for patterns outside of maybe some very basic ones like "text, titles, columns, media" and let pattern authors register and organize them first.

There will be multiple ways in which a site owner might want to expose (or not expose) patterns for their users, so flexibility in taxonomization is important.

Needs Design Feedback Needs Technical Feedback [Feature] Patterns [Status] In Progress

Most helpful comment

I've been looking at what categories other CMSs and site builders use. I looked at Squarespace, Wix, Semplice, Webflow, and also templates.gutenberghub.com for reference.

Here's a spreadsheet with the results.

You can look at the other sheets at the bottom of the spreadsheet for a more detailed view, but in summary, these are the categories that these services have in common, by number of times they repeat:

Category | #
-- | --
Forms | 6
Gallery | 6
Contact | 5
Services, features or products | 4
Images | 4
Hero | 4
Quotes or testimonials | 4
Lists | 3
Menus | 3
Team | 3
CTA | 2
Cards | 2
Layout | 2
Content | 2
Editorial | 2
FAQ | 2
Grids | 2
Footer | 2
Logos | 2
Pricing table | 2
Text | 2
Video | 2

Other categories that are unique to one of these services are:

  • About
  • Appointments
  • Blog
  • Bookings
  • Calendar
  • Chart
  • Classic
  • Contests
  • Donation
  • Feedback
  • Headlines
  • Job Application
  • Location
  • Music
  • Overlap
  • Payment
  • Profile
  • Reservations
  • Social
  • Stats
  • Tour Dates
  • Under construction
  • Welcome

All 7 comments

I've been looking at what categories other CMSs and site builders use. I looked at Squarespace, Wix, Semplice, Webflow, and also templates.gutenberghub.com for reference.

Here's a spreadsheet with the results.

You can look at the other sheets at the bottom of the spreadsheet for a more detailed view, but in summary, these are the categories that these services have in common, by number of times they repeat:

Category | #
-- | --
Forms | 6
Gallery | 6
Contact | 5
Services, features or products | 4
Images | 4
Hero | 4
Quotes or testimonials | 4
Lists | 3
Menus | 3
Team | 3
CTA | 2
Cards | 2
Layout | 2
Content | 2
Editorial | 2
FAQ | 2
Grids | 2
Footer | 2
Logos | 2
Pricing table | 2
Text | 2
Video | 2

Other categories that are unique to one of these services are:

  • About
  • Appointments
  • Blog
  • Bookings
  • Calendar
  • Chart
  • Classic
  • Contests
  • Donation
  • Feedback
  • Headlines
  • Job Application
  • Location
  • Music
  • Overlap
  • Payment
  • Profile
  • Reservations
  • Social
  • Stats
  • Tour Dates
  • Under construction
  • Welcome

Some observations:

  • Some categories focus on page-types (ie. About, Contact, Services).
  • Some focus on patterns (ie. Features, Hero, FAQ, Grids)
  • Some focus on things I believe we're categorizing as template parts (ie. Header, Footer)

Looking through that list, @enriquesanchez, these are the ones that stood out to me as good to use for Core. @mtias, do you have any additions or edits?

  • Forms (having this category for 3rd parties is a good idea, even if Core doesn't get too much use from it)
  • Galleries or Media
  • Contact (i can see this as location information with maps, or just contact numbers)
  • Hero
  • Testimonials
  • Lists
  • Menus
  • Editorial
  • FAQ
  • Grids

@mapk All of those sound like good options.

The only one I think is missing is Features/Services/Products, or are you thinking that Lists and/or Grids would include patterns for those?

Oh, yeah! Include "Features" with those! Good eye, @enriquesanchez.

There's been some recent discussion that template parts would be just containers of a sort. A Header template part would still require a Header pattern for the inner design. This means we'll need to include "Header" and "Footer" as part of the block pattern categories.

This means we'll need to include "Header" and "Footer" as part of the block pattern categories.

How do you know if you include a "pattern" or a "template" part when you click these patterns from the inserter?

How do you know if you include a "pattern" or a "template" part when you click these patterns from the inserter?

It's being explored still, but quite possibly, template parts are only available in the template creation/editing mode. In Content mode, you wouldn't be able to add a template part, just patterns or blocks.

Now how it's separated during the template creation mode needs some work. @MichaelArestad, do you have any further feedback here?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

moorscode picture moorscode  路  3Comments

wpalchemist picture wpalchemist  路  3Comments

jasmussen picture jasmussen  路  3Comments

aduth picture aduth  路  3Comments

ellatrix picture ellatrix  路  3Comments