Site Assembler - All Dotcom patterns and categories

[miksansegundo]

Related to WP Patterns 101 pekYwv-51-p2 FG PTK API PCYsg-uUe-p2

What

Part 1

• Show all Dotcom patterns in the assembler
• Make sure the patterns are shown in the right categories
  • Use this chance to simplify the categories ordering logic. See block-patterns-tab.js

Part 2

• Flag patterns via a pattern_meta tag, say show-in-assembler to fetch only desired patterns.
  • Or the contrary, flag the patterns that we want to exclude from the list
  • Decide with Ola

Why

To have more patterns in the assembler.

How

Fetch all patterns from dotcompatternsusing the PTK API endpoint the endpoint: https://public-api.wordpress.com/rest/v1.1/ptk/patterns/en?per_page=200&tags=pattern&pattern_meta=is_web

Required query string:

• pattern_meta=is_web gets the patterns for desktop, not mobile or premium
• tags=pattern gets only pattens, no layouts (page templates)
• per_page=200 is not limited to 100. By default returns all the patterns

Notes:

• This endpoint is cached. It's the same used in the ETK plugin. See PCYsg-uUe-p2
• Pattern are translated. the lang code is in the route /en

References for categories

Core

{ name: "banner", label: "Banners" }
{ name: "buttons", label: "Buttons", description: "Patterns that contain buttons and call to actions." }
{ name: "columns", label: "Columns", description: "Multi-column patterns with more complex layouts." }
{ name: "text", label: "Text", description: "Patterns containing mostly text." }
{ name: "query", label: "Posts", description: "Display your latest posts in lists, grids or other layouts." }
{ name: "featured", label: "Featured", description: "A set of high quality curated patterns." }
{ name: "call-to-action", label: "Call to Action", description: "Sections whose purpose is to trigger a specific action." }
{ name: "team", label: "Team", description: "A variety of designs to display your team members." }
{ name: "testimonials", label: "Testimonials", description: "Share reviews and feedback about your brand/business." }
{ name: "services", label: "Services", description: "Briefly describe what your business does and how you can help." }
{ name: "contact", label: "Contact", description: "Display your contact information." }
{ name: "about", label: "About", description: "Introduce yourself." }
{ name: "portfolio", label: "Portfolio", description: "Showcase your latest work." }
{ name: "gallery", label: "Gallery", description: "Different layouts for displaying images." }
{ name: "media", label: "Media", description: "Different layouts containing video or audio." }
{ name: "posts", label: "Posts", description: "Display your latest posts in lists, grids or other layouts." }
{ name: "footer", label: "Footers", description: "A variety of footer designs displaying information and site navigation." }
{ name: "header", label: "Headers", description: "A variety of header designs displaying your site title and navigation." }
{ name: "forms", label: "Forms" }

Dotcom

{ name: "About", slug: "about" }
{ name: "Blog", slug: "blog" }
{ name: "Call to Action", slug: "call-to-action" }
{ name: "Coming Soon", slug: "coming-soon" }
{ name: "Contact", slug: "contact" }
{ name: "CV/Portfolio", slug: "cv-portfolio" }
{ name: "Editorial", slug: "editorial" }
{ name: "Featured", slug: "featured" }
{ name: "Footer", slug: "footer" }
{ name: "Gallery", slug: "gallery" }
{ name: "Header", slug: "header" }
{ name: "Highlights", slug: "highlights" }
{ name: "Home", slug: "home" }
{ name: "Images", slug: "images" }
{ name: "Link in Bio", slug: "link-in-bio" }
{ name: "Links", slug: "links" }
{ name: "Newsletter", slug: "newsletter" }
{ name: "Photography", slug: "photography" }
{ name: "Podcast", slug: "podcast" }
{ name: "Portfolio", slug: "portfolio" }
{ name: "Posts", slug: "posts" }
{ name: "Quotes", slug: "quotes" }
{ name: "Services", slug: "services" }
{ name: "Shop", slug: "shop" }
{ name: "Sidebar", slug: "sidebar" }
{ name: "Splash", slug: "splash" }
{ name: "Team", slug: "team" }
{ name: "Testimonials", slug: "testimonials" }
{ name: "Wireframe", slug: "wireframe" }

[miksansegundo]

cc: @Automattic/lego @alaczek