Blocks: Add support for Collections #14454

kraftbj · 2020-01-24T03:19:43Z

Supports #14598
Replaces and closes #14721

In Gutenberg 7.3, the block editor now supports "Collections". In the block picker, a Collection looks like a category, except blocks can also have a category.

The use case here is when do people think "I need a business hours block. I bet that's in the Jetpack category!"... probably not. They probably think of the function -- an embed, a widget, etc.

The problem is a block can only be in one category so devs have generally grouped them by the block provider.

Collections allow the block provider (Jetpack in our case) present all of our blocks together—like we have done with a custom category—while also listing it in a context-appropriate category.

For those running Gutenberg 7.3 or WordPress 5.4:

For those not running Gutenberg 7.3 or on WordPress 5.3, it retains the original behavior:

Changes proposed in this Pull Request:

Adds a 'Jetpack' block collection.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

n/a

Testing instructions:

On a connected Jetpack site WITHOUT Gutenberg, add a new post. Verify all the blocks are in a Jetpack category when viewing the block inserter.
On a connected Jetpack site WITH Gutenberg, add a new post. With this patch, the Business Hours block will be in a Jetpack collection (looks just like a category) AND the widgets category.

AS OF NOW, when running G 7.3, the rest of Jetpack's blocks will fail since we're not adding them to a Jetpack category. We'll need to update the other blocks before landing it, but opening the PR now to get opinions on the implementation.

I opted to need to update blocks since if we allow those blocks with other categories to be added to a collection and those with the 'legacy' Jetpack category, the inserter will have two "Jetpack" entries -- the category and the collection -- so that's not really an option.

Proposed changelog entry for your changes:

Block Editor: Blocks are now listed both as part of a Jetpack Collection and in their proper category. (Requires Gutenberg 7.3)

jetpackbot · 2020-01-24T03:21:26Z

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: April 7, 2020.
Scheduled code freeze: March 31, 2020

Generated by 🚫 dangerJS against 3cdc453

scruffian · 2020-01-24T09:25:42Z

This might make sense to be done in tandem with this PR: WordPress/gutenberg#19279

Since the categories are set to change

simison · 2020-02-25T06:56:18Z

When merged, we should confirm that re-organizing categories on wpcom is still functional: Automattic/wp-calypso#37057

simison · 2020-02-25T06:58:49Z

extensions/blocks/business-hours/index.js

@@ -82,7 +83,7 @@ export const settings = {
 	title: __( 'Business Hours', 'jetpack' ),
 	description: __( 'Display opening hours for your business.', 'jetpack' ),
 	icon,
-	category: 'jetpack',
+	category: typeof registerBlockCollection === 'function' ? 'widgets' : 'jetpack',


I would centralize @wordpress/blocks import and typeof check into a helper function at extensions/shared/block-category.js and do supportsCollections() or similar. Not a biggie, just seems neater.

See example in coblocks: https://github.com/godaddy-wordpress/coblocks/pull/1367/files#diff-9996de4f1fe7baae35dfc23d3e0e3f3fR33

simison · 2020-03-28T06:08:30Z

Would be nice to get this in before code freeze on Monday evening in time for WP 5.4 release which supports this feature. @lessbloat

mtias · 2020-03-28T11:32:24Z

Perhaps:

Calendly → Widgets
Contact Info → Formatting
Eventbrite Checkout → Widgets
Form → Widgets
GIF → Formatting
Google Calendar → Embeds
Map → Common
Markdown → Formatting
Open Table → Widgets
Pinterest → Embeds
Repeat Visitor → Widget
Revue → Widget
Slideshow → Common
Star Rating → Formatting
Tiled Gallery → Common

Register new category: Earn or Premium.

Ads
Simple Payments
Recurring Payments

kraftbj · 2020-03-30T22:17:11Z

Rebased and not finished yet, but need to log off.

What categories for these blocks:

Amazon
Business Hours (Widgets in this PR right now)
Instagram
Mailchimp
Podcast Player
Related Posts
Subscriptions

Still need to add the new category for Ads, Simple, Recurring Payments.

apeatling · 2020-04-02T20:02:10Z

@kraftbj Let me know if you need any help getting this one finished off.

obenland · 2020-04-02T20:42:37Z

#14598 has a spreadsheet with suggested categories based on the discussion in p58i-8yl-p2. #14721 is the corresponding PR. It does away with the 'jetpack' category regardless of whether collections are available or not, as suggested in that post. Should we do the same here?

kraftbj · 2020-04-03T14:37:11Z

It does away with the 'jetpack' category regardless of whether collections are available or not, as suggested in that post. Should we do the same here?

I'm hesitant to do that since documentation notes you can find the JP blocks under "Jetpack" and existing users who aren't updated would lose that flow. When 5.4 is Jetpack's minimum, we can remove the fallback.

Thanks for the link to the spreadsheet.

kraftbj · 2020-04-03T15:32:29Z

Updated the PR with the two new categories and updating all blocks with the spreadsheet.

OpenTable struck me as odd being "Earn" instead of "Marketing" or "Embed", but included it as is.

Pinterest also was the only "social" one and there isn't that category yet. I made it "embed" instead for now.

Podcast Player wasn't in the spreadsheet. Marked it as an embed.

Rating Star wasn't in the spreadsheet. Deferred to the suggestion in the comment above.

Related Posts is listed as the only one in a non-existent "blog" category. Marked it as Embed.

matticbot · 2020-04-03T15:43:40Z

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

kraftbj · 2020-04-03T15:44:59Z

Noting that the wp.com patch needs a little massaging for the maps block. Nothing major, but I'll wait until this has landed to work on it so it isn't overridden with future work in this PR.

matticbot · 2020-04-03T18:55:35Z

kraftbj, Your synced wpcom patch D41358-code has been updated.

simison · 2020-04-03T19:00:11Z

@jeherve there is separate script on wpcom that reorganizes categories in case we want to do that only there.

jeherve

Let's add the textdomains here.

extensions/shared/block-category.js

matticbot · 2020-04-06T07:32:22Z

kraftbj, Your synced wpcom patch D41358-code has been updated.

jeherve

This looks good to me now. I'd suggest merging this as is for the 8.4 release, and work on improving these collections in a future PR:

Handle wpcom differently
Have Jetpack blocks come after core blocks in core categories.

jeherve · 2020-04-06T13:54:57Z

Handle wpcom differently

To close the loop on this: #15310

Have Jetpack blocks come after core blocks in core categories.

I have been thinking about this some more, and I'm honestly not quite sure what we should aim for. Should Jetpack blocks be available before Core blocks in categories like Embeds?

My first instinct was to say no, our blocks should come after Core's. Core's blocks would most likely be used more often; they were added to Core more often. On the other hand I can see why having our own blocks first should give us some extra visibility.

Furthermore, Core currently adds custom blocks before core blocks in core categories, which seems to indicate that they're okay wit this?

davemart-in · 2020-04-06T14:16:32Z

My first instinct was to say no, our blocks should come after Core's. Core's blocks would most likely be used more often; they were added to Core more often. On the other hand I can see why having our own blocks first should give us some extra visibility.

Could they just be listed alphabetically?

jeherve · 2020-04-06T14:34:41Z

Could they just be listed alphabetically?

I suppose it could be another option. Would we then change all block ordering to alphabetical as soon as Jetpack is active, or only in categories that include Jetpack blocks?

* Add Jetpack blocks collection * Add Earn and Grow categories Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>

kraftbj · 2020-04-06T14:48:22Z

Cherry-picked to branch-8.4 via 9c91c10 .

See #14454 (comment)

…15310) See #14454 (comment)

kraftbj · 2020-04-06T16:09:35Z

r205423-wpcom

kraftbj added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it General [Status] In Progress labels Jan 24, 2020

kraftbj requested a review from a team as a code owner January 24, 2020 03:19

kraftbj self-assigned this Jan 24, 2020

matticbot added the Touches WP.com Files label Jan 24, 2020

jeherve added the [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack label Jan 24, 2020

simison mentioned this pull request Feb 19, 2020

Support new block collection functionality in WordPress 5.4 godaddy-wordpress/coblocks#1367

Merged

3 tasks

simison requested a review from a team February 19, 2020 11:27

simison mentioned this pull request Feb 19, 2020

(wip) Extensions: organize blocks adding new categories #14721

Closed

simison reviewed Feb 25, 2020

View reviewed changes

jeherve added this to the 8.4 milestone Mar 30, 2020

jeherve mentioned this pull request Mar 30, 2020

WordPress 5.4 Compatibility #14653

Closed

14 tasks

kraftbj force-pushed the add/jetpack-collection branch from 1f84644 to 08ba2be Compare March 30, 2020 22:17

kraftbj force-pushed the add/jetpack-collection branch from 08ba2be to 182e7e8 Compare April 3, 2020 15:32

kraftbj added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] In Progress labels Apr 3, 2020

Automattic deleted a comment from obenland Apr 3, 2020

kraftbj added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Apr 3, 2020

jeherve requested changes Apr 6, 2020

View reviewed changes

extensions/shared/block-category.js Outdated Show resolved Hide resolved

extensions/shared/block-category.js Outdated Show resolved Hide resolved

Add missing textdomains

3cdc453

jeherve approved these changes Apr 6, 2020

View reviewed changes

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Apr 6, 2020

jeherve mentioned this pull request Apr 6, 2020

Blocks: do not Jetpack collection on WordPress.com. #15310

Merged

kraftbj merged commit bc29cd5 into master Apr 6, 2020

matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Apr 6, 2020

kraftbj added a commit that referenced this pull request Apr 6, 2020

Blocks: Add support for Collections (#14454)

9c91c10

* Add Jetpack blocks collection * Add Earn and Grow categories Co-authored-by: Jeremy Herve <jeremy@jeremy.hu>

kraftbj removed the [Status] Needs Cherry-Pick label Apr 6, 2020

kraftbj added a commit that referenced this pull request Apr 6, 2020

Update readme based on #14454

5106527

jeherve added a commit that referenced this pull request Apr 6, 2020

Blocks: do not Jetpack collection on WordPress.com.

7bf5c95

See #14454 (comment)

jeherve deleted the add/jetpack-collection branch April 6, 2020 14:58

kraftbj added [Status] Has Changelog and removed [Status] Needs Changelog labels Apr 6, 2020

jeherve added a commit that referenced this pull request Apr 6, 2020

Blocks: do not Jetpack collection on WordPress.com. (#15310)

226e888

See #14454 (comment)

jeherve added a commit that referenced this pull request Apr 6, 2020

[not verified] Blocks: do not Jetpack collection on WordPress.com. (#…

a11aa9d

…15310) See #14454 (comment)

jeherve mentioned this pull request May 11, 2020

Add Premium Content block to "Earn" collection in inserter Automattic/wp-calypso#41579

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blocks: Add support for Collections #14454

Blocks: Add support for Collections #14454

kraftbj commented Jan 24, 2020 •

edited

jetpackbot commented Jan 24, 2020 •

edited

scruffian commented Jan 24, 2020 •

edited

simison commented Feb 25, 2020

simison Feb 25, 2020 •

edited

simison commented Mar 28, 2020 •

edited

mtias commented Mar 28, 2020

kraftbj commented Mar 30, 2020

apeatling commented Apr 2, 2020

obenland commented Apr 2, 2020

kraftbj commented Apr 3, 2020 •

edited

kraftbj commented Apr 3, 2020 •

edited

matticbot commented Apr 3, 2020

kraftbj commented Apr 3, 2020

matticbot commented Apr 3, 2020

simison commented Apr 3, 2020 •

edited

jeherve left a comment

matticbot commented Apr 6, 2020

jeherve left a comment

jeherve commented Apr 6, 2020

davemart-in commented Apr 6, 2020

jeherve commented Apr 6, 2020

kraftbj commented Apr 6, 2020

kraftbj commented Apr 6, 2020

Blocks: Add support for Collections #14454

Blocks: Add support for Collections #14454

Conversation

kraftbj commented Jan 24, 2020 • edited

Changes proposed in this Pull Request:

Is this a new feature or does it add/remove features to an existing part of Jetpack?

Testing instructions:

Proposed changelog entry for your changes:

jetpackbot commented Jan 24, 2020 • edited

scruffian commented Jan 24, 2020 • edited

simison commented Feb 25, 2020

simison Feb 25, 2020 • edited

Choose a reason for hiding this comment

simison commented Mar 28, 2020 • edited

mtias commented Mar 28, 2020

kraftbj commented Mar 30, 2020

apeatling commented Apr 2, 2020

obenland commented Apr 2, 2020

kraftbj commented Apr 3, 2020 • edited

kraftbj commented Apr 3, 2020 • edited

matticbot commented Apr 3, 2020

kraftbj commented Apr 3, 2020

matticbot commented Apr 3, 2020

simison commented Apr 3, 2020 • edited

jeherve left a comment

Choose a reason for hiding this comment

matticbot commented Apr 6, 2020

jeherve left a comment

Choose a reason for hiding this comment

jeherve commented Apr 6, 2020

davemart-in commented Apr 6, 2020

jeherve commented Apr 6, 2020

kraftbj commented Apr 6, 2020

kraftbj commented Apr 6, 2020

kraftbj commented Jan 24, 2020 •

edited

jetpackbot commented Jan 24, 2020 •

edited

scruffian commented Jan 24, 2020 •

edited

simison Feb 25, 2020 •

edited

simison commented Mar 28, 2020 •

edited

kraftbj commented Apr 3, 2020 •

edited

kraftbj commented Apr 3, 2020 •

edited

simison commented Apr 3, 2020 •

edited