Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🔍 [Spike] Pattern Assembler: Make a POC for blog patterns (aka query block patterns) #68133

Closed
3 tasks done
autumnfjeld opened this issue Sep 22, 2022 · 2 comments
Closed
3 tasks done
Assignees

Comments

@autumnfjeld
Copy link
Contributor

autumnfjeld commented Sep 22, 2022

Description

An immediate iteration on the PA will be to

  • Allow user to select blog patterns (aka query block patterns)
  • Show the PA in the Write flow
Blog Query
image image
pulled from dotcoompatterns pulled from core

This work can start once Pattern Assembler is feature complete for CfT/MVP or if Ganon has bandwith--which could be now. :) Discuss with team if anyone wants to pick this up before we ship MVP.

This issue is about creating a POC to surface any technical complications with blog patterns in the preview, headstart, or starter site.

Tasks

  • Identify most popular blog patterns inserted in the editor (I think we can simply use patterns from dotcompatterns, rather than core for this POC)
  • Research & P2: While POC does not need to pull patterns from core, as part of this ticket please research the tech implementation needed to source patterns from core and write a P2 on this
  • Share POC with stakeholders & designers

More details to be added

References

  • p1661849184727399/1661827036.318049-slack-CRWCHQGUB
  • Key tracks trends, specifically see pattern wpcom_pattern_inserted for popular patterns

@Automattic/ganon cc: @alaczek @onuro

@miksansegundo
Copy link
Contributor

Patterns from core

Our slow preview API /blocks-preview supports patterns from dotcompatterns or other source sites in wpcom. A simple solution to use core patterns in the onboarding is to copy them into dotcompatterns because the pattern assembler loads patterns from a static file using their ids.

There are currently 6 query patterns listed in the pattern inserter in the editor:

  • query-grid-posts
  • query-large-title-posts
  • query-medium-posts
  • query-offset-posts
  • query-small-posts
  • query-standard-posts

They live in WordPress core, in the folder /block-patterns.

There aren't, at the moment, query patterns in the Pattern Directory. There is no such category. See the patterns created by the user WordPress.org.

There are attempts to add more from Gutenberg:

The query pattern category

The pattern category Query is now called Posts in the pattern inserter.

Image

The Query Loop block

Image

The Query Loop block is similar to Posts List.

Image

They allow users to choose a pattern from the category Post, the editor uses the pattern property blockTypes: core/query to identify them.

Image

@miksansegundo
Copy link
Contributor

Next actions for this POC are:

  1. Research what will happen if we copy the core query patterns from this folder /block-patterns to dotcompatterns and publish them but leave them uncategorized for testing. We should not put them in the category posts or query because they will appear in the editor in production.
    • When posts are added to the category posts in dotcompatterns, they will appear duplicated in the pattern inserter in the editor. We discussed a solution to avoid duplication by checking the pattern slugs in the server API that returns the patterns.
  2. Research how we can support core patterns without copy them in dotcompatterns
    • Option 1: We'll have to render them directly in Calypso using the fast previews that Arthur is working on. There is a way to get patterns from the Pattern registry using their slug. Core patterns are already in the Pattern registry. See the patterns toolkit API.
    • Option 2: We'll have to work on the preview API to use the Patterns registry class and add support for pattern slugs. Currently the preview API /blocks-preview works with the ids of patterns in source sites. This option is not ideal because the performance is not good.
  3. Check if we already have patterns that use core/query blocks in dotcompatterns. We can easily test them in the PA:
    • Add their post ids in the sections list in the static file that loads patterns in the PA.
    • Access the PA and you should see only one post Hello World! in the preview because the site blankcanvas3demo only have that one.
      • We'll have to create more posts in the demo site for the previews. How many? You'll need to add yourself to the site or use the user themedemos.
    • When you land in the editor, the query pattern preview will show the posts in your site or the message No results found.
      • We'll have to create posts in the user's site or the editor preview will be empty.
        • These posts are only required if the user chooses a query pattern.
        • We can create them using Headstart annotations but I think we should not add posts in Blank canvas theme because this theme should be blank.
        • We can use a new server endpoint and call it from the browser before the user is redirected to the editor.

@autumnfjeld autumnfjeld changed the title Pattern Assembler: (Spike) Make a POC for blog patterns (aka query block patterns) ⚒ [Spike] Pattern Assembler: Make a POC for blog patterns (aka query block patterns) Jan 5, 2023
@autumnfjeld autumnfjeld changed the title ⚒ [Spike] Pattern Assembler: Make a POC for blog patterns (aka query block patterns) 🔍 [Spike] Pattern Assembler: Make a POC for blog patterns (aka query block patterns) Jan 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants