Update blocks categories #16363

fullofcaffeine · 2020-07-01T18:49:11Z

Changes proposed in this Pull Request:

Update the category names for relevant Jetpack blocks. More details here (first task listed in the issue). There's an equivalent PR for wp-calypso.
Adds a helper function that is used to safely update category names while still supporting old environments

Related PRs

FSE blocks (wp-calypso): FSE: Update blocks categories wp-calypso#43670
wpcom-blocks: https://github.com/Automattic/wpcom-blocks/pull/178
block-experiments: Update blocks categories block-experiments#110

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Atomated tests

yarn test-extensions

To manually test the changes

Follow the instructions here to set up your local Jurassic Ninja instance
Activate Jetpack
To test that old category still work in old environments where the new categories are not available, leave the built-in block editor
To test that new categories have been set, install the last version of Gutenberg
Add or edit a post, click the + button on the page to add a new block and bring up the picker
Search for the block you're testing and make sure it's in the right category.

Proposed changelog entry for your changes:

Blocks: Update categories to improve discoverability

~~Note: If this PR gets approved and merged, then I'll remove the helper function and tests from here (including the installation/configuration of jest).~~

matticbot · 2020-07-01T18:49:17Z

Caution: This PR has changes that must be merged to WordPress.com
Hello fullofcaffeine! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D45795-code before merging this PR. Thank you!
This revision will be updated with each commit to this PR

jetpackbot · 2020-07-01T19:01:17Z

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.

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-16363

Scheduled Jetpack release: August 4, 2020.
Scheduled code freeze: July 28, 2020

Generated by 🚫 dangerJS against 30e4d67

jeherve · 2020-07-02T10:39:35Z

Since we aren't using TypeScript in this repo yet, and consequently have no linting configuration set up for it, I wonder if it wouldn't be best to stick to JavaScript for now?

I suppose this could be the opportunity to introduce TypeScript to Jetpack, but if we do so I'd rather we do in a separate PR, by starting with introducing the necessary linting plugins and updating our tools to take into account the new file type.

extensions/blocks/block-helpers/block-helpers.ts

extensions/blocks/rating-star/index.js

fullofcaffeine · 2020-07-02T16:09:01Z

Since we aren't using TypeScript in this repo yet, and consequently have no linting configuration set up for it, I wonder if it wouldn't be best to stick to JavaScript for now?

I suppose this could be the opportunity to introduce TypeScript to Jetpack, but if we do so I'd rather we do in a separate PR, by starting with introducing the necessary linting plugins and updating our tools to take into account the new file type.

Thank you for sharing your thoughts about this.

I was on the fence about this one as the actual benefits of using TS for this function are few, if any. As you said, it's more of an attempt to introduce/encourage the use of TypeScript.

have no linting configuration set up for it,

Regarding the linting rules, I'm using the ones that ship with Jetpack (there's one for extensions too). This + the native TS support by vscode seems enough for me, or do you have anything else in mind?

If the Jetpack crew is not yet comfortable with that change, I can change it to plain JS and gather feedback on introducing TypeScript to Jetpack at a later time, to make sure everyone is on the same page :)

jeherve · 2020-07-02T17:05:03Z

I can change it to plain JS and gather feedback on introducing TypeScript to Jetpack at a later time, to make sure everyone is on the same page :)

I'd rather we do this for now. I created #16375 to keep track of the things we'd need to do to introduce TypeScript here. I think we can work on that later; I also don't think it's a high priority change right now.

This + the native TS support by vscode seems enough for me, or do you have anything else in mind?

Since not everyone uses VS Code and / or a TS extension in their editor, I don't think we can rely on just that for now.

fullofcaffeine · 2020-07-02T17:36:07Z

Since not everyone uses VS Code and / or a TS extension in their editor, I don't think we can rely on just that for now.

I see, so you meant to integrate the lint tooling in the dev build process.

I'd rather we do this for now. I created #16375 to keep track of the things we'd need to do to introduce TypeScript here. I think we can work on that later; I also don't think it's a high priority change right now.

Cool, I'll change it to plain JS then 👍

WunderBart

Thanks for working on this, @fullofcaffeine!

One more code comment here, cause I couldn't leave it on an empty file - Looks like the docker/wordpress/.gitkeep file got here by an accident.

Because the getCategoryWithFallbacks helper will be needed in a couple of other repositories, what do you think about turning it into an npm module (placed inside Calypso packages)?

package.json

extensions/blocks/rating-star/index.js

WunderBart

Tested with both pre- & post-category-update Gutenberg versions and it looks good! Thanks!

There still is one comment that should be addressed but it's not a blocker https://github.com/Automattic/jetpack/pull/16363/files#r452120934

extensions/blocks/rating-star/index.js

sirreal

This is looking great. I tested it and it's working well. I left a few suggestions on code organization and the new categories that I think better follow the categories Core is using.

sirreal · 2020-07-13T14:52:05Z

extensions/blocks/image-compare/index.js

@@ -22,8 +23,7 @@ export const settings = {
 	),

 	icon,
-
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),


Image block is in media, that seems like a better fit for this.

Suggested change

category: getCategoryWithFallbacks( 'design', 'layout' ),

category: getCategoryWithFallbacks( 'media', 'layout' ),

sirreal · 2020-07-13T14:55:08Z

extensions/blocks/slideshow/index.js

@@ -111,7 +112,7 @@ export const name = 'slideshow';

 export const settings = {
 	title: __( 'Slideshow', 'jetpack' ),
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),


Also seems like a media block:

Suggested change

category: getCategoryWithFallbacks( 'design', 'layout' ),

category: getCategoryWithFallbacks( 'media', 'layout' ),

sirreal · 2020-07-13T14:55:52Z

extensions/blocks/tiled-gallery/index.js

@@ -201,7 +202,7 @@ export const icon = (

 export const settings = {
 	attributes: blockAttributes,
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),


The core gallery is in media, let's follow:

Suggested change

category: getCategoryWithFallbacks( 'design', 'layout' ),

category: getCategoryWithFallbacks( 'media', 'layout' ),

sirreal · 2020-07-13T15:01:13Z

extensions/shared/blocks/helpers/helpers.js

@@ -0,0 +1,35 @@
+/**


Let's put this right into the extensions/shared directory: extensions/shared/get-category-with-fallbacks.js (or add something block-specific in the name if you like).

Sounds good 👍

Actually, why not add this file to extensions/shared/blocks?

I don't know why the blocks subdirectory was added or whether it serves much organizational purpose. There seems to be block-specific functionality in extensions/shared.

If you have reason to believe it's justified and preferable to put it under blocks, I won't object.

As in extensions/shared/blocks/get-category-with-fallbacks.js.

You're right, the extensions folder already seems to be mainly about the blocks. I'll just add there as you suggested. Thanks!

I don't know why the blocks subdirectory was added or whether it serves much organizational purpose.

That directory is used for modifications of single, non-Jetpack, blocks today, such as the Cover block on WordPress.com.

Since your changes will impact multiple blocks, I would recommend having your changes in extensions/shared.

sirreal · 2020-07-13T15:08:31Z

A brief summary of changes. 6 update blocks, one doesn't appear in the inserter.

Block	Previous	New	Observations
`jetpack/button`	`layout`	`design`	Not available in inserter. Category likely irrelevant. Used in Jetpack contact form block.
`jetpack/image-compare`	`layout`	~~`design`~~ `media`	I suggested `media` category.
`jetpack/markdown`	`formatting`	`text`
`jetpack/rating-star`	~~`formatting`~~	`widgets`	Replace legacy category as well (widgets already existed.
`jetpack/slideshow`	`layout`	~~`design`~~ `media`	I suggested `media` category.
`jetpack/tiled-gallery`	`layout`	~~`design`~~ `media`	I suggested `media` category.

…ated ones - Also add a helper function that can bE used to check if old category names are still being used, and fallback to the old name if so. This should ideally be used in a ternary expression while setting the category name for blocks to provide the fallback old category name in order to support WP environments with older versions of Gutenberg. - Legacy categories were explicitly set to the new updated ones, following this example: https://github.com/WordPress/gutenberg/blob/84df4bd6082e7793a2befddb2a652cb42f445d21/packages/blocks/src/api/registration.js#L131-L135 - Some blocks might not have followed the example above and might have been moved to a category that made more sense for them

fullofcaffeine · 2020-07-14T17:25:29Z

It looks like jetpack/tiled-gallery is deprecated: https://github.com/Automattic/jetpack/blob/master/extensions/blocks/tiled-gallery/index.js#L288. That's probably why I can't find it in the inserter.

jeherve · 2020-07-14T17:34:03Z

It looks like jetpack/tiled-gallery is deprecated: master/extensions/blocks/tiled-gallery/index.js#L288. That's probably why I can't find it in the inserter.

Only a previous version of the block is deprecated. The block is still available, but requires your Jetpack site to be connected with WordPress.com.

fullofcaffeine · 2020-07-14T22:19:22Z

It looks like jetpack/tiled-gallery is deprecated: master/extensions/blocks/tiled-gallery/index.js#L288. That's probably why I can't find it in the inserter.

Only a previous version of the block is deprecated. The block is still available, but requires your Jetpack site to be connected with WordPress.com.

Thanks for explaining, Jeremy. I could see in the right category when testing the diff in my simple sandboxed site.

fullofcaffeine · 2020-07-14T22:29:47Z

I updated and tested the in my sandboxed simple site and can confirm it's working as expected there, too. D45795-code

jeherve

This tests well for me. 👍

sirreal

Testing well, thanks!

jeherve · 2020-07-20T11:04:48Z

Merging this for you now, before we start running into rebase issues. Let's wait until release day for the matching WordPress.com changes.

jeherve · 2020-08-04T09:46:03Z

r211580-wpcom

matticbot added the Touches WP.com Files label Jul 1, 2020

fullofcaffeine force-pushed the update/blocks-categories branch from 1f0f910 to 3c98401 Compare July 1, 2020 21:56

simison mentioned this pull request Jul 1, 2020

Updated default block categories for Automattic blocks Automattic/wp-calypso#43198

Closed

6 tasks

fullofcaffeine added the [Status] In Progress label Jul 1, 2020

fullofcaffeine force-pushed the update/blocks-categories branch from 3c98401 to c168da6 Compare July 1, 2020 23:56

fullofcaffeine mentioned this pull request Jul 2, 2020

FSE: Update blocks categories Automattic/wp-calypso#43670

Merged

25 tasks

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

jeherve reviewed Jul 2, 2020

View reviewed changes

extensions/blocks/block-helpers/block-helpers.ts Outdated Show resolved Hide resolved

sirreal reviewed Jul 2, 2020

View reviewed changes

extensions/blocks/rating-star/index.js Outdated Show resolved Hide resolved

jeherve mentioned this pull request Jul 2, 2020

General: Introduce TypeScript to the monorepo #16375

Open

5 tasks

fullofcaffeine force-pushed the update/blocks-categories branch 3 times, most recently from c7135bb to 00490ef Compare July 3, 2020 02:04

fullofcaffeine marked this pull request as ready for review July 3, 2020 02:05

fullofcaffeine mentioned this pull request Jul 4, 2020

Update blocks categories Automattic/block-experiments#110

Closed

7 tasks

WunderBart requested changes Jul 6, 2020

View reviewed changes

package.json Outdated Show resolved Hide resolved

fullofcaffeine force-pushed the update/blocks-categories branch 4 times, most recently from fba7b25 to 27fa907 Compare July 7, 2020 01:40

sirreal linked an issue Jul 7, 2020 that may be closed by this pull request

Block Categories Updates #15708

Closed

sirreal reviewed Jul 9, 2020

View reviewed changes

extensions/blocks/rating-star/index.js Outdated Show resolved Hide resolved

WunderBart previously approved these changes Jul 9, 2020

View reviewed changes

extensions/blocks/rating-star/index.js Outdated Show resolved Hide resolved

WunderBart added the [Status] Needs Review This PR is ready for review. label Jul 9, 2020

fullofcaffeine dismissed WunderBart’s stale review via 60f254c July 9, 2020 21:40

fullofcaffeine force-pushed the update/blocks-categories branch 2 times, most recently from 9f5648f to 6700cc4 Compare July 11, 2020 03:17

sirreal reviewed Jul 13, 2020

View reviewed changes

fullofcaffeine force-pushed the update/blocks-categories branch from 6700cc4 to 30e4d67 Compare July 14, 2020 17:22

fullofcaffeine added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Jul 14, 2020

jeherve approved these changes Jul 15, 2020

View reviewed changes

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it and removed [Status] Needs Review This PR is ready for review. labels Jul 15, 2020

jeherve added this to the 8.8 milestone Jul 15, 2020

sirreal approved these changes Jul 15, 2020

View reviewed changes

sirreal assigned fullofcaffeine Jul 15, 2020

jeherve merged commit 6d10021 into master Jul 20, 2020

jeherve deleted the update/blocks-categories branch July 20, 2020 11:05

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

jeherve added [Status] Has Changelog and removed [Status] Needs Changelog labels Jul 28, 2020

jeherve added a commit that referenced this pull request Jul 28, 2020

Changelog: add #16363

66e4b97

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update blocks categories #16363

Update blocks categories #16363

fullofcaffeine commented Jul 1, 2020 •

edited

Loading

matticbot commented Jul 1, 2020

jetpackbot commented Jul 1, 2020 •

edited

Loading

jeherve commented Jul 2, 2020

fullofcaffeine commented Jul 2, 2020 •

edited

Loading

jeherve commented Jul 2, 2020

fullofcaffeine commented Jul 2, 2020 •

edited

Loading

WunderBart left a comment •

edited

Loading

WunderBart left a comment

sirreal left a comment

sirreal Jul 13, 2020

fullofcaffeine Jul 14, 2020

sirreal Jul 13, 2020

fullofcaffeine Jul 14, 2020

sirreal Jul 13, 2020

fullofcaffeine Jul 14, 2020

sirreal Jul 13, 2020

fullofcaffeine Jul 14, 2020

fullofcaffeine Jul 14, 2020 •

edited

Loading

sirreal Jul 14, 2020

fullofcaffeine Jul 14, 2020

fullofcaffeine Jul 14, 2020 •

edited

Loading

jeherve Jul 14, 2020

sirreal commented Jul 13, 2020 •

edited

Loading

fullofcaffeine commented Jul 14, 2020 •

edited

Loading

jeherve commented Jul 14, 2020

fullofcaffeine commented Jul 14, 2020 •

edited

Loading

fullofcaffeine commented Jul 14, 2020 •

edited by kraftbj

Loading

jeherve left a comment

sirreal left a comment

jeherve commented Jul 20, 2020

jeherve commented Aug 4, 2020

	category: getCategoryWithFallbacks( 'design', 'layout' ),
	category: getCategoryWithFallbacks( 'media', 'layout' ),

Update blocks categories #16363

Update blocks categories #16363

Conversation

fullofcaffeine commented Jul 1, 2020 • edited Loading

Changes proposed in this Pull Request:

Related PRs

Does this pull request change what data or activity we track or use?

Testing instructions:

Atomated tests

To manually test the changes

Categories

Proposed changelog entry for your changes:

matticbot commented Jul 1, 2020

jetpackbot commented Jul 1, 2020 • edited Loading

jeherve commented Jul 2, 2020

fullofcaffeine commented Jul 2, 2020 • edited Loading

jeherve commented Jul 2, 2020

fullofcaffeine commented Jul 2, 2020 • edited Loading

WunderBart left a comment • edited Loading

Choose a reason for hiding this comment

WunderBart left a comment

Choose a reason for hiding this comment

sirreal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fullofcaffeine Jul 14, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fullofcaffeine Jul 14, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sirreal commented Jul 13, 2020 • edited Loading

fullofcaffeine commented Jul 14, 2020 • edited Loading

jeherve commented Jul 14, 2020

fullofcaffeine commented Jul 14, 2020 • edited Loading

fullofcaffeine commented Jul 14, 2020 • edited by kraftbj Loading

jeherve left a comment

Choose a reason for hiding this comment

sirreal left a comment

Choose a reason for hiding this comment

jeherve commented Jul 20, 2020

jeherve commented Aug 4, 2020

fullofcaffeine commented Jul 1, 2020 •

edited

Loading

jetpackbot commented Jul 1, 2020 •

edited

Loading

fullofcaffeine commented Jul 2, 2020 •

edited

Loading

fullofcaffeine commented Jul 2, 2020 •

edited

Loading

WunderBart left a comment •

edited

Loading

fullofcaffeine Jul 14, 2020 •

edited

Loading

fullofcaffeine Jul 14, 2020 •

edited

Loading

sirreal commented Jul 13, 2020 •

edited

Loading

fullofcaffeine commented Jul 14, 2020 •

edited

Loading

fullofcaffeine commented Jul 14, 2020 •

edited

Loading

fullofcaffeine commented Jul 14, 2020 •

edited by kraftbj

Loading