Change the category of FSE blocks from legacy to the updated ones

Context: #43198

- 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

apps/full-site-editing/bin/babel-transform.js

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+const babelJest = require( 'babel-jest' );
+
+module.exports = babelJest.createTransformer( {
+	presets: [ '@wordpress/babel-preset-default', '@babel/preset-typescript' ],
+} );

apps/full-site-editing/bin/js-unit-config.js

@@ -26,6 +26,7 @@ const config = {
 	...defaults,
 	rootDir: path.normalize( '../../../' ), // To detect wp-calypso root node_modules
 	testMatch: [ `${ pluginRoot }/**/?(*.)test.[jt]s?(x)` ],
+	transform: { '^.+\\.[jt]sx?$': path.join( __dirname, 'babel-transform' ) },
 	setupFilesAfterEnv: [
 		...( defaults.setupFilesAfterEnv || [] ), // extend if present
 		'<rootDir>/apps/full-site-editing/bin/js-unit-setup',

apps/full-site-editing/full-site-editing-plugin/block-helpers/block-helpers.test.ts

@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import { getCategoryWithFallbacks } from '.';
+
+jest.mock( '@wordpress/blocks', () => ( {
+	getCategories: () => [ { slug: 'foobar' }, { slug: 'barfoo' } ],
+} ) );
+
+describe( 'getCategoryWithFallbacks', () => {
+	describe( 'single category passed', () => {
+		it( 'returns the category if it exists', () => {
+			expect( getCategoryWithFallbacks( 'foobar' ) ).toBe( 'foobar' );
+		} );
+		it( 'throws an error if it does not exist', () => {
+			expect( () => getCategoryWithFallbacks( 'nah' ) ).toThrow( /nah/ );
+		} );
+	} );
+
+	describe( 'multiple categories are passed', () => {
+		it( 'throws an error if none of the categories exist', () => {
+			expect( () => getCategoryWithFallbacks( 'nah', 'meh', 'wut', 'foo' ) ).toThrow(
+				/nah,meh,wut,foo/
+			);
+		} );
+
+		it( 'ignores all unexisting categories until it finds the *first one* that exists, then returns it', () => {
+			expect( getCategoryWithFallbacks( 'foobar', 'meh', 'barfoo' ) ).toBe( 'foobar' );
+			expect( getCategoryWithFallbacks( 'nah', 'foobar', 'barfoo', 'foo' ) ).toBe( 'foobar' );
+			expect( getCategoryWithFallbacks( 'nah', 'meh', 'foobar' ) ).toBe( 'foobar' );
+		} );
+	} );
+} );

apps/full-site-editing/full-site-editing-plugin/block-helpers/block-helpers.ts

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { getCategories } from '@wordpress/blocks';
+
+/**
+ * Accepts an array of category names and returns the first one that
+ * exists in the categories returned by `getCategories`. This allows
+ * for a "graceful degradation" strategy to category names, where
+ * we just add the new category name as the first item in the array
+ * argument, and leave the old ones for environments where they still
+ * exist and are used.
+ *
+ * @example
+ * // Prefer passing the new category first in the array, followed by
+ * // older fallback categories. Considering the 'new' category is
+ * // registered:
+ * getCategoryWithFallbacks( 'new', 'old', 'older' );
+ * // => 'new'
+ *
+ * @param {string[]} requestedCategories - an array of categories.
+ * @returns {string} the first category name found.
+ * @throws {Error} if the no categories could be found.
+ */
+export function getCategoryWithFallbacks( ...requestedCategories: string[] ): string {
+	const knownCategories = getCategories();
+	for ( const requestedCategory of requestedCategories ) {
+		if ( knownCategories.some( ( { slug } ) => slug === requestedCategory ) ) {
+			return requestedCategory;
+		}
+	}
+	throw new Error(
+		`Could not find a category from the provided list: ${ requestedCategories.join( ',' ) }`
+	);
+}

apps/full-site-editing/full-site-editing-plugin/block-helpers/index.ts

@@ -0,0 +1 @@
+export * from './block-helpers';

apps/full-site-editing/full-site-editing-plugin/donations/index.js

@@ -9,6 +9,7 @@ import { __, _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
+import { getCategortyWithFallbacks } from '../block-helpers';
 
 /**
  * Style dependencies
@@ -81,7 +82,7 @@ const settings = {
 			default: __( 'Donate yearly', 'full-site-editing' ),
 		},
 	},
-	category: 'common',
+	category: getCategortyWithFallbacks( 'widgets', 'common' ),
 	icon: (
 		<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/navigation-menu/index.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 import './style.scss';
 
 const icon = (
@@ -22,7 +23,7 @@ registerBlockType( 'a8c/navigation-menu', {
 	title: __( 'Navigation Menu', 'full-site-editing' ),
 	description: __( 'Visual placeholder for site-wide navigation and menus.', 'full-site-editing' ),
 	icon,
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),
 	supports: {
 		align: [ 'wide', 'full', 'right', 'left' ],
 		html: false,

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/post-content/index.js

@@ -12,13 +12,14 @@ import { addFilter } from '@wordpress/hooks';
  */
 import edit from './edit';
 import save from './save';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 import './style.scss';
 
 registerBlockType( 'a8c/post-content', {
 	title: __( 'Content', 'full-site-editing' ),
 	description: __( 'The page content.', 'full-site-editing' ),
 	icon: 'layout',
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),
 	supports: {
 		align: [ 'full' ],
 		anchor: false,

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/site-credit/index.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 import './style.scss';
 
 registerBlockType( 'a8c/site-credit', {
@@ -18,7 +19,7 @@ registerBlockType( 'a8c/site-credit', {
 		'full-site-editing'
 	),
 	icon: 'wordpress-alt',
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/site-description/index.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 import './style.scss';
 
 registerBlockType( 'a8c/site-description', {
@@ -20,7 +21,7 @@ registerBlockType( 'a8c/site-description', {
 			<path d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" />
 		</svg>
 	),
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/site-title/index.js

@@ -9,13 +9,14 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import edit from './edit';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 import './style.scss';
 
 registerBlockType( 'a8c/site-title', {
 	title: __( 'Site Title', 'full-site-editing' ),
 	description: __( 'Your site title.', 'full-site-editing' ),
 	icon: 'layout',
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'design', 'layout' ),
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,

apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/template/index.js

@@ -11,6 +11,7 @@ import { addFilter } from '@wordpress/hooks';
  * Internal dependencies
  */
 import edit from './edit';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 import './style.scss';
 import './site-logo';
 
@@ -20,7 +21,7 @@ if ( 'wp_template_part' !== fullSiteEditing.editorPostType ) {
 		__experimentalDisplayName: 'label',
 		description: __( 'Display a Template Part.', 'full-site-editing' ),
 		icon: 'layout',
-		category: 'layout',
+		category: getCategoryWithFallbacks( 'design', 'layout' ),
 		attributes: {
 			templateId: { type: 'number' },
 			className: { type: 'string' },

apps/full-site-editing/full-site-editing-plugin/newspack-blocks/blog-posts-block-editor.js

@@ -12,6 +12,7 @@ import { addFilter } from '@wordpress/hooks';
  */
 import { settings } from './synced-newspack-blocks/blocks/homepage-articles/index';
 import { registerQueryStore } from './synced-newspack-blocks/blocks/homepage-articles/store';
+import { getCategoryWithFallbacks } from '../block-helpers';
 
 /**
  * Block name in the A8C\FSE context.
@@ -31,7 +32,7 @@ addFilter(
 registerBlockType( blockName, {
 	...settings,
 	title: __( 'Blog Posts', 'full-site-editing' ),
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'widgets', 'layout' ),
 } );
 
 registerQueryStore( blockName );

apps/full-site-editing/full-site-editing-plugin/newspack-blocks/carousel-block-editor.js

@@ -11,6 +11,11 @@ import { addFilter } from '@wordpress/hooks';
  */
 import { settings } from './synced-newspack-blocks/blocks/carousel/index';
 
+/**
+ * Internal dependencies
+ */
+import { getCategoryWithFallbacks } from '../block-helpers';
+
 /**
  * Block name in the A8C\FSE context.
  */
@@ -28,5 +33,5 @@ addFilter(
 
 registerBlockType( blockName, {
 	...settings,
-	category: 'layout',
+	category: getCategoryWithFallbacks( 'widgets', 'layout' ),
 } );

apps/full-site-editing/package.json

@@ -130,6 +130,9 @@
 	},
 	"devDependencies": {
 		"@types/wordpress__plugins": "^2.3.6",
-		"@wordpress/eslint-plugin": "^6.0.0"
+		"@babel/preset-typescript": "^7.10.1",
+		"@types/jest": "^26.0.3",
+		"@wordpress/eslint-plugin": "^6.0.0",
+		"babel-jest": "^26.1.0"
 	}
 }

apps/full-site-editing/tsconfig.json

@@ -27,12 +27,16 @@
 		"esModuleInterop": false,
 
 		// Some type helpers from our webpack/
-		"types": [ "fse" ],
+		"types": [ "fse", "jest" ],
 		"typeRoots": [ "./typings", "./node_modules", "../../node_modules" ],
 
 		// Preserve JSX, allows compatibility with wp-element jsx babel transforms
 		"jsx": "preserve"
 	},
 	"exclude": [ "node_modules" ],
+	// Had to add that in order for vscode to recognize the tests and apply the jest types
+	"include": [
+		"*.test.ts",
+	],
 	"references": [ "../../packages/data-stores" ]
 }