diff --git a/.github/workflows/full-site-editing-plugin.yml b/.github/workflows/full-site-editing-plugin.yml index c49652d16abb4..c794789311bcc 100644 --- a/.github/workflows/full-site-editing-plugin.yml +++ b/.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 diff --git a/apps/full-site-editing/bin/babel-transform.js b/apps/full-site-editing/bin/babel-transform.js new file mode 100644 index 0000000000000..31c89f6cacb0c --- /dev/null +++ b/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' ], +} ); diff --git a/apps/full-site-editing/bin/js-unit-config.js b/apps/full-site-editing/bin/js-unit-config.js index c626c1a97ccf1..d6a8d1edbcbd4 100644 --- a/apps/full-site-editing/bin/js-unit-config.js +++ b/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 '/apps/full-site-editing/bin/js-unit-setup', diff --git a/apps/full-site-editing/full-site-editing-plugin/block-helpers/block-helpers.test.ts b/apps/full-site-editing/full-site-editing-plugin/block-helpers/block-helpers.test.ts new file mode 100644 index 0000000000000..0f5d963985dde --- /dev/null +++ b/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' ); + } ); + } ); +} ); diff --git a/apps/full-site-editing/full-site-editing-plugin/block-helpers/index.ts b/apps/full-site-editing/full-site-editing-plugin/block-helpers/index.ts new file mode 100644 index 0000000000000..a9be4d404fe45 --- /dev/null +++ b/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( ',' ) }` + ); +} diff --git a/apps/full-site-editing/full-site-editing-plugin/donations/index.js b/apps/full-site-editing/full-site-editing-plugin/donations/index.js index bad1600fc0627..dc3c23744d192 100644 --- a/apps/full-site-editing/full-site-editing-plugin/donations/index.js +++ b/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: ( ), - category: 'layout', + category: getCategoryWithFallbacks( 'design', 'layout' ), supports: { align: [ 'wide', 'full' ], html: false, diff --git a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/site-title/index.js b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/site-title/index.js index 21aaec6bd8d45..74b5cb5b0a6c5 100644 --- a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/site-title/index.js +++ b/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, diff --git a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/template/index.js b/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/template/index.js index ee4080b624b7b..f763a4615cc9f 100644 --- a/apps/full-site-editing/full-site-editing-plugin/dotcom-fse/blocks/template/index.js +++ b/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' }, diff --git a/apps/full-site-editing/full-site-editing-plugin/newspack-blocks/blog-posts-block-editor.js b/apps/full-site-editing/full-site-editing-plugin/newspack-blocks/blog-posts-block-editor.js index 6a45c591f9043..2924a26ac2357 100644 --- a/apps/full-site-editing/full-site-editing-plugin/newspack-blocks/blog-posts-block-editor.js +++ b/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 ); diff --git a/apps/full-site-editing/full-site-editing-plugin/newspack-blocks/carousel-block-editor.js b/apps/full-site-editing/full-site-editing-plugin/newspack-blocks/carousel-block-editor.js index fecb99dfedbf7..cf6eeb24b2ace 100644 --- a/apps/full-site-editing/full-site-editing-plugin/newspack-blocks/carousel-block-editor.js +++ b/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', } ); diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/container/index.js b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/container/index.js index 976b06621847e..deccf7648f03a 100644 --- a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/container/index.js +++ b/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 ) { diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/logged-out-view/index.js b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/logged-out-view/index.js index 07148b3b27dee..0b8e6ffd2a1c4 100644 --- a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/logged-out-view/index.js +++ b/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 * diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/subscriber-view/index.js b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/subscriber-view/index.js index f87f9fd1309d3..82ee8cb19b65f 100644 --- a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/subscriber-view/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/subscriber-view/index.js @@ -3,6 +3,7 @@ */ import edit from './edit'; import save from './save'; +import { getCategoryWithFallbacks } from '../../../block-helpers'; /** * WordPress dependencies @@ -10,7 +11,7 @@ import save from './save'; import { __ } from '@wordpress/i18n'; const name = 'premium-content/subscriber-view'; -const category = 'common'; +const category = getCategoryWithFallbacks( 'design', 'common' ); const settings = { name, category, diff --git a/apps/full-site-editing/package.json b/apps/full-site-editing/package.json index bb65add2dd419..f023e15ea8763 100644 --- a/apps/full-site-editing/package.json +++ b/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" } } diff --git a/apps/full-site-editing/tsconfig.json b/apps/full-site-editing/tsconfig.json index 6c65476aa0d5e..ff99cff1b25e2 100644 --- a/apps/full-site-editing/tsconfig.json +++ b/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" },