FSE: Add block pattern infrastructure #40105

obenland · 2020-03-12T22:03:21Z

Changes proposed in this Pull Request

Adds an FSE module to distribute block patterns.
Adds three block patterns as examples.

Testing instructions

Make sure to have the latest version of Gutenberg built.
Apply this PR.
Load the Editor and switch to "Block Patterns" in the toolbar.
Insert a block pattern.

TODO

Decide where to host images used in block patterns. headstartdata? As part of the plugin? Use Core's images?
Decide whether we need to support json files, given that we probably want to always localize pattern titles?
See how to best distribute translations. Not sure of the full-site-editing text domain even works?

matticbot · 2020-03-12T22:03:23Z

Test live: https://calypso.live/?branch=add/fse-block-patterns

obenland · 2020-03-12T22:04:18Z

/cc @mtias @ianstewart @davemart-in

matticbot · 2020-03-12T22:07:14Z

Caution: This PR has changes that must be merged to WordPress.com
Hello obenland! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D40292-code before merging this PR. Thank you!

matticbot · 2020-03-12T22:08:23Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

It already exists as a Core pattern.

davemart-in · 2020-03-13T15:00:59Z

@obenland should https://calypso.live/?branch=add/fse-block-patterns work in testing this? I tried it, but don't see the patterns button in the editor.

obenland · 2020-03-13T15:14:46Z

FSE is using wp-calypso as a development environment only, it's not integrated with it.
With the docs in PCYsg-ly5-p2#wpcom-sandbox you can stream these changes from your local Calypso checkout to your sandbox and can test it that way

mtias · 2020-03-13T17:27:51Z

Core images are super limiting.

lancewillett · 2020-03-14T17:37:08Z

Core images are super limiting.

Just to expand on this for clarity, what do you mean?

Product quality — The image quality in the core image collection is poor. We should find a better source of high-quality images and host them in the plugin.
Technical — The mechanism of hosting images on the w.org CDN is a limiting factor for performance, maintainability, other.
Other?

With clarity on this, contributors like me can take clear next actions to help.

ianstewart · 2020-03-16T19:59:25Z

@obenland do we want tracks events for the todo list?

obenland · 2020-03-16T20:04:12Z

It depends on what we want to track. I assume which pattern was inserted? Anything else?

ianstewart · 2020-03-16T20:11:49Z

Yep. Definitely which pattern was inserted. Can we track any other engagement with the patterns? Deletion and editing?

Can we track if the Pattern sidebar was opened?

mtias · 2020-03-16T21:10:30Z

@lancewillett the first! The ones that can be hosted / bundled there might be a more restrictive set than what could be used here. (I believe Unsplash was being used fine for WP.com.)

mtias · 2020-03-16T21:11:18Z

Can we track any other engagement with the patterns? Deletion and editing?

I don't think you can easily track this since patterns become just regular blocks once inserted. I'd only count insertion.

obenland · 2020-03-16T22:10:04Z

The patterns inserter surfaces the inserted blocks and a success notice, so to track patterns the best we could do would be to track success notices and then filter those? It wouldn't be very high quality data however. It would not account for translations and contain the entire notice text.

amamujee · 2020-03-17T05:17:24Z

Are we thinking of adding more detailed logging to blocks and patterns - e.g. inserted, deleted, modified @obenland @mtias ?

obenland · 2020-03-17T17:22:15Z

Gutenberg is not built with tracking in mind, so we're rather limited in the ways we can track things.

These are the events we're currently tracking:

undo
redo
moveBlocksUp
moveBlocksDown
removeBlocks
removeBlock
moveBlockToPosition
deleteBlock
insertBlock
insertBlocks
replaceBlock
replaceBlocks
replaceInnerBlocks
createErrorNotice

We could track block modifications, I'm just not sure how useful that'll be. From what I was able to find out it looks like it fires for every keystroke when typing text, not just once after a block was updated.

obenland · 2020-03-18T15:05:47Z

@ianstewart @iamtakashi When you get a chance, could you add the gutenberg-edge sticker to one of your test sites, apply D40292-code to your sandboxes, and test this PR on the site with the sticker? (and maybe on one without to verify nothing breaks :))
I'd also be interested in which other patterns you think we should ship with initially

ianstewart · 2020-03-18T15:32:34Z

I'd also be interested in which other patterns you think we should ship with initially

We've started tracking that at …

https://github.com/Automattic/blockpatterns/issues?q=is%3Aissue+is%3Aopen+label%3A%22ready+to+ship%22

… with the Ready to Ship label in that repo.

(And fix the others)

obenland · 2020-03-19T17:59:24Z

@ianstewart @iamtakashi I updated and added all patterns that are ready to ship.

These are the adjustments I made:

Replaced all html entities with their hex code
Removed all image id references to avoid unsuccessful API lookups
Unfolded all HTML for easier debugging later on (except coblocks gallery which breaks doing that)

Remaining blocker:

Decide where to host images used in block patterns.

obenland · 2020-03-19T18:55:34Z

After a discussion with @iamtakashi and @ianstewart in p1584641583330800-dotcom-view-design-slack, we decided to create a dedicated pattern site for patterns and images to live. This will also allow us to switch to using json files easily, if we decide to do so at a later point in time.

iamtakashi · 2020-03-20T16:14:02Z

@obenland Thanks for moving forward with a dedicated site approach. I am glad the process of adding and updating patterns is going to be easy. I appreciate it :bowing:

In the meantime, if I want to update some of the patterns that have already been added, what is the best way to do that? It's not urgent or anything, but I want to fix something in a pattern before the UI becomes available.

marekhrabe · 2020-03-23T11:44:20Z

Following up with some internal conversations, it seems to be decided to use pbNZNv-I-p2 to store both patterns and their assets for hot-linking.

~~What the procedure to sync into here?~~ self-answering: it seems to be very manual right now as I'm exploring the patterns and how certain parts were extracted into sprintf so they can be translated.

@iamtakashi Any updates on your required changes to patterns? Should I look for them somewhere in the dedicated site? I think we might need to act more quickly on this, as the Gutenberg update is coming to dotcom soon.

iamtakashi · 2020-03-23T12:59:18Z

@iamtakashi Any updates on your required changes to patterns?

I was waiting for the instruction to update patterns :) Having them in the dedicated site would be the best now? If so I can move all the patterns to the site that are ready to ship this afternoon.

simison · 2020-03-23T13:04:58Z

Related WordPress/gutenberg#21074

marekhrabe · 2020-03-23T13:06:11Z

Having them in the dedicated site would be the best now? If so I can move all the patterns to the site that are ready to ship this afternoon.

From conversations I've been able to locate, the dedicated site seems like a way to go now. I or @obenland can port those patterns once ready over there. Some manual conversion work seems to be needed there from my understanding of the code

marekhrabe

This is working well. I have tested with the latest Gutenberg from the plugin repo (7.7.1) which shows the pattern UI and as expected, it is filled with patterns as declared here. I have also tested with an older Gutenberg and there are no glitches or errors.

Technically, I think we are good to go on this PR. However, since we might soon get a finalized list of patterns and their assets loaded from our new designated location, I think we should either:

wait with this PR for the final content
remove content here and leave just the "two-columns" pattern and add other patterns separately.

Up to you to choose

Screenshot of the feature as a reference:

iamtakashi · 2020-03-23T18:04:28Z

Ok, I've added all the ready-to-ship patterns (11 patterns) to the master site now.

@iamtakashi

Props @iamtakashi

obenland · 2020-03-23T22:12:08Z

@iamtakashi I added all remaining patterns except "Subscription". The jetpack subscription block kept breaking in preview and on insert, so we'll have to revisit that one.

iamtakashi · 2020-03-24T11:15:53Z

@obenland Weird. Can you open an issue with what you saw? It's probably worth to report here as the block seems to be worked on soon. Automattic/jetpack#15076

ianstewart · 2020-03-24T18:51:44Z

The "Call to Action" pattern looks a bit janky in the sidebar right now.

The preview is janky independent of the theme but I'm not sure at the moment if it needs a fix in Gutenberg or if it's on our end. If it's not a simple fix can we just remove it for now?

Temporarily removing a broken-looking block pattern. Ref: #40105 (comment)

ianstewart · 2020-04-27T14:38:55Z

to track patterns the best we could do would be to track success notices and then filter those? It wouldn't be very high quality data however. It would not account for translations and contain the entire notice text.

Until we have a better version of tracking would it be worthwhile/complicated to track this for EN only?

obenland · 2020-04-28T17:38:59Z

It wouldn't be complicated, I'm just not sure how usable that data will be. It would track the pattern title, so patterns like "Call For Action" would not be distinguishable.

FSE: Add block pattern infrastructure

38e59be

obenland added [Type] Enhancement [Goal] Gutenberg Working towards full integration with Gutenberg labels Mar 12, 2020

obenland requested review from youknowriad, iamtakashi and a team March 12, 2020 22:03

obenland requested a review from a team as a code owner March 12, 2020 22:03

obenland added 2 commits March 12, 2020 15:40

Delete image side-by-side pattern

62f1a1e

It already exists as a Core pattern.

Use Core image and remove IDs

4037f57

obenland mentioned this pull request Mar 13, 2020

Two Images Side by Side Automattic/blockpatterns#16

Closed

obenland added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 16, 2020

Only keep Two columns of text pattern

6586dc6

obenland added 6 commits March 19, 2020 10:19

Bring back "Image side-by-side"

9dac824

Add three images side by side pattern

1e444ca

(And fix the others)

Add collage gallery pattern

07d41bd

Add Call to action pattern

f12a946

Escape title translations

2323622

Update comments

f0c968a

marekhrabe assigned obenland Mar 23, 2020

marekhrabe approved these changes Mar 23, 2020

View reviewed changes

ramonjd mentioned this pull request Mar 23, 2020

Plugin updates: Gutenberg 7.7.1 #40078

Closed

23 tasks

obenland added 2 commits March 23, 2020 14:41

Update patterns

9181d65

Props @iamtakashi

Remove image Id references

40df8b2

obenland merged commit 781ceef into master Mar 23, 2020

obenland deleted the add/fse-block-patterns branch March 23, 2020 22:10

obenland removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Mar 23, 2020

ianstewart added a commit that referenced this pull request Mar 24, 2020

FSE Plugin: Temporarily removing a broken-looking Block Pattern

3252f7e

Temporarily removing a broken-looking block pattern. Ref: #40105 (comment)

ianstewart mentioned this pull request Mar 24, 2020

FSE Plugin: Temporarily removing a broken-looking Block Pattern #40414

Merged

ianstewart added a commit that referenced this pull request Mar 24, 2020

FSE Plugin: Temporarily removing a broken-looking Block Pattern (#40414)

2b89485

Temporarily removing a broken-looking block pattern. Ref: #40105 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FSE: Add block pattern infrastructure #40105

FSE: Add block pattern infrastructure #40105

obenland commented Mar 12, 2020 •

edited

Loading

matticbot commented Mar 12, 2020

obenland commented Mar 12, 2020

matticbot commented Mar 12, 2020

matticbot commented Mar 12, 2020

davemart-in commented Mar 13, 2020

obenland commented Mar 13, 2020

mtias commented Mar 13, 2020

lancewillett commented Mar 14, 2020

ianstewart commented Mar 16, 2020

obenland commented Mar 16, 2020 •

edited

Loading

ianstewart commented Mar 16, 2020 •

edited

Loading

mtias commented Mar 16, 2020

mtias commented Mar 16, 2020

obenland commented Mar 16, 2020

amamujee commented Mar 17, 2020 •

edited

Loading

obenland commented Mar 17, 2020

obenland commented Mar 18, 2020

ianstewart commented Mar 18, 2020

obenland commented Mar 19, 2020

obenland commented Mar 19, 2020

iamtakashi commented Mar 20, 2020

marekhrabe commented Mar 23, 2020 •

edited

Loading

iamtakashi commented Mar 23, 2020

simison commented Mar 23, 2020

marekhrabe commented Mar 23, 2020

marekhrabe left a comment •

edited

Loading

iamtakashi commented Mar 23, 2020

obenland commented Mar 23, 2020

iamtakashi commented Mar 24, 2020

ianstewart commented Mar 24, 2020 •

edited

Loading

ianstewart commented Apr 27, 2020

obenland commented Apr 28, 2020

FSE: Add block pattern infrastructure #40105

FSE: Add block pattern infrastructure #40105

Conversation

obenland commented Mar 12, 2020 • edited Loading

Changes proposed in this Pull Request

Testing instructions

TODO

matticbot commented Mar 12, 2020

obenland commented Mar 12, 2020

matticbot commented Mar 12, 2020

matticbot commented Mar 12, 2020

davemart-in commented Mar 13, 2020

obenland commented Mar 13, 2020

mtias commented Mar 13, 2020

lancewillett commented Mar 14, 2020

ianstewart commented Mar 16, 2020

obenland commented Mar 16, 2020 • edited Loading

ianstewart commented Mar 16, 2020 • edited Loading

mtias commented Mar 16, 2020

mtias commented Mar 16, 2020

obenland commented Mar 16, 2020

amamujee commented Mar 17, 2020 • edited Loading

obenland commented Mar 17, 2020

obenland commented Mar 18, 2020

ianstewart commented Mar 18, 2020

obenland commented Mar 19, 2020

obenland commented Mar 19, 2020

iamtakashi commented Mar 20, 2020

marekhrabe commented Mar 23, 2020 • edited Loading

iamtakashi commented Mar 23, 2020

simison commented Mar 23, 2020

marekhrabe commented Mar 23, 2020

marekhrabe left a comment • edited Loading

Choose a reason for hiding this comment

iamtakashi commented Mar 23, 2020

obenland commented Mar 23, 2020

iamtakashi commented Mar 24, 2020

ianstewart commented Mar 24, 2020 • edited Loading

ianstewart commented Apr 27, 2020

obenland commented Apr 28, 2020

obenland commented Mar 12, 2020 •

edited

Loading

obenland commented Mar 16, 2020 •

edited

Loading

ianstewart commented Mar 16, 2020 •

edited

Loading

amamujee commented Mar 17, 2020 •

edited

Loading

marekhrabe commented Mar 23, 2020 •

edited

Loading

marekhrabe left a comment •

edited

Loading

ianstewart commented Mar 24, 2020 •

edited

Loading