FSE: Update blocks categories

.github/workflows/full-site-editing-plugin.yml

@@ -133,11 +133,8 @@ jobs:
       with:
         token: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Displaying changed files
-      run: echo ${{ join( fromJson( steps.changes.outputs.all ) ) }}
-
     - name: Execute phpcs on changed files
-      run: ./vendor/bin/phpcs --standard=apps/phpcs.xml ${{ join( fromJson( steps.changes.outputs.all ), ' ' ) }}
+      run: ./vendor/bin/phpcs --standard=apps/phpcs.xml ${{ join( fromJson( steps.changes.outputs.modified ), ' ' ) }} ${{ join( fromJson( steps.changes.outputs.added ), ' ' ) }}
       if: ${{ steps.changes.outputs.all != '' }}
 
     - name: No changes found

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/index.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/donations/index.js

@@ -81,7 +81,7 @@ const settings = {
 			default: __( 'Donate yearly', 'full-site-editing' ),
 		},
 	},
-	category: 'common',
+	category: 'widgets',
 	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

@@ -31,7 +31,7 @@ addFilter(
 registerBlockType( blockName, {
 	...settings,
 	title: __( 'Blog Posts', 'full-site-editing' ),
-	category: 'layout',
+	category: 'widgets',
 } );
 
 registerQueryStore( blockName );

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

@@ -28,5 +28,5 @@ addFilter(
 
 registerBlockType( blockName, {
 	...settings,
-	category: 'layout',
+	category: 'widgets',
 } );

apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/container/index.js

@@ -12,9 +12,10 @@ import { select } from '@wordpress/data';
  */
 import edit from './edit';
 import save from './save';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 
 const name = 'premium-content/container';
-const category = 'common';
+const category = getCategoryWithFallbacks( 'design', 'common' );
 
 const blockContainsPremiumBlock = ( block ) => {
 	if ( block.name.indexOf( 'premium-content/' ) === 0 ) {

apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/logged-out-view/index.js

@@ -4,6 +4,7 @@
 import edit from './edit';
 import save from './save';
 import deprecated from './deprecated';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 
 /**
  * WordPress dependencies
@@ -14,7 +15,7 @@ import { __ } from '@wordpress/i18n';
 import { registerFormatType, unregisterFormatType } from '@wordpress/rich-text';
 
 const name = 'premium-content/logged-out-view';
-const category = 'common';
+const category = getCategoryWithFallbacks( 'design', 'common' );
 /**
  * @typedef {object} Attributes
  *

apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/subscriber-view/index.js

@@ -3,14 +3,15 @@
  */
 import edit from './edit';
 import save from './save';
+import { getCategoryWithFallbacks } from '../../../block-helpers';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 
 const name = 'premium-content/subscriber-view';
-const category = 'common';
+const category = getCategoryWithFallbacks( 'design', 'common' );
 const settings = {
 	name,
 	category,

apps/full-site-editing/package.json

@@ -134,6 +134,8 @@
 	},
 	"devDependencies": {
 		"@types/wordpress__plugins": "^2.3.6",
-		"@wordpress/eslint-plugin": "^6.0.0"
+		"@babel/preset-typescript": "^7.8.3",
+		"@wordpress/eslint-plugin": "^6.0.0",
+		"babel-jest": "^26.0.1"
 	}
 }

apps/full-site-editing/tsconfig.json

@@ -27,9 +27,8 @@
 		"esModuleInterop": false,
 
 		// Some type helpers from our webpack/
-		"types": [ "fse" ],
-		"typeRoots": [ "./typings", "./node_modules", "../../node_modules" ],
-
+		"types": [ "fse", "jest" ],
+		"typeRoots": [ "./typings", "./node_modules/@types", "../../node_modules/@types" ],
 		// Preserve JSX, allows compatibility with wp-element jsx babel transforms
 		"jsx": "preserve"
 	},