From 344fae1165a06f6daa2fbf60a24156ade7d6aff5 Mon Sep 17 00:00:00 2001 From: Marcelo de Moraes Serpa Date: Wed, 24 Jun 2020 20:08:09 -0500 Subject: [PATCH 1/3] Change the category of FSE blocks from legacy to the updated ones Context: https://github.com/Automattic/wp-calypso/issues/43198. - Also add a helper function for FSE blocks that can be used to check if old category names exist in the store and fall-backs to an older version(s) otherwise. This function should be used when the updated category is a completely new category being introduced by a new version of Gutenberg. You then pass this new category + the older categorie(s) that will be tried in sequence if the previous one was not found. - Tweaked the FSE Jest configuration to support TypeScript. --- apps/full-site-editing/bin/babel-transform.js | 8 +++++ apps/full-site-editing/bin/js-unit-config.js | 1 + .../block-helpers/block-helpers.test.ts | 33 +++++++++++++++++ .../block-helpers/index.ts | 35 +++++++++++++++++++ .../donations/index.js | 2 +- .../blocks/navigation-menu/index.js | 3 +- .../dotcom-fse/blocks/post-content/index.js | 3 +- .../dotcom-fse/blocks/site-credit/index.js | 3 +- .../blocks/site-description/index.js | 3 +- .../dotcom-fse/blocks/site-title/index.js | 3 +- .../dotcom-fse/blocks/template/index.js | 3 +- .../blog-posts-block-editor.js | 2 +- .../newspack-blocks/carousel-block-editor.js | 2 +- .../premium-content/blocks/buttons/index.js | 3 +- .../premium-content/blocks/container/index.js | 3 +- .../blocks/logged-out-view/index.js | 3 +- .../blocks/login-button/index.js | 3 +- .../blocks/subscriber-view/index.js | 3 +- apps/full-site-editing/package.json | 4 ++- apps/full-site-editing/tsconfig.json | 5 ++- 20 files changed, 107 insertions(+), 18 deletions(-) create mode 100644 apps/full-site-editing/bin/babel-transform.js create mode 100644 apps/full-site-editing/full-site-editing-plugin/block-helpers/block-helpers.test.ts create mode 100644 apps/full-site-editing/full-site-editing-plugin/block-helpers/index.ts 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 00000000000000..31c89f6cacb0cb --- /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 c626c1a97ccf13..d6a8d1edbcbd42 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 00000000000000..0f5d963985dde1 --- /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 00000000000000..a9be4d404fe453 --- /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 bad1600fc0627c..dc3c23744d1922 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 21aaec6bd8d455..74b5cb5b0a6c5f 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 ee4080b624b7b9..f763a4615cc9f8 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 6a45c591f90432..2924a26ac23576 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 fecb99dfedbf76..cf6eeb24b2ace2 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/buttons/index.js b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js index bcb378c768b3ff..51704e853bd20f 100644 --- a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js @@ -9,9 +9,10 @@ import { button as icon } from '@wordpress/icons'; */ import edit from './edit'; import save from './save'; +import { getCategoryWithFallbacks } from '../../../block-helpers'; const name = 'premium-content/buttons'; -const category = 'design'; +const category = getCategoryWithFallbacks( 'design', 'layout' ); const settings = { name, 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 976b06621847e4..deccf7648f03ab 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 07148b3b27dee2..0b8e6ffd2a1c48 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/login-button/index.js b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/login-button/index.js index e5caca81e1520f..7149f19b04f7b1 100644 --- a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/login-button/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/login-button/index.js @@ -9,9 +9,10 @@ import { __ } from '@wordpress/i18n'; */ import edit from './edit'; import save from './save'; +import { getCategoryWithFallbacks } from '../../../block-helpers'; const name = 'premium-content/login-button'; -const category = 'design'; +const category = getCategoryWithFallbacks( 'design', 'layout' ); /** * @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 f87f9fd1309d37..82ee8cb19b65fc 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 bb65add2dd4198..f023e15ea87631 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 6c65476aa0d5e7..ff99cff1b25e23 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" }, From fed1eeb44e5f7c41c6c62dc8dd418aeea17236e1 Mon Sep 17 00:00:00 2001 From: Marcelo de Moraes Serpa Date: Mon, 13 Jul 2020 16:08:28 -0500 Subject: [PATCH 2/3] Fix workflow logic to not run phpcs for deleted files --- .github/workflows/full-site-editing-plugin.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/full-site-editing-plugin.yml b/.github/workflows/full-site-editing-plugin.yml index c49652d16abb4c..c794789311bcca 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 From 4e0ec42df9ee68d2f3a24981a5ab75d6f71176db Mon Sep 17 00:00:00 2001 From: Marcelo de Moraes Serpa Date: Tue, 14 Jul 2020 19:01:29 -0500 Subject: [PATCH 3/3] Remove fallback to layout from button and login-button from premium-content The fallback was causing these blocks to appear in older versions of Gutenberg where the `design` category was not available. Until here, all good. However, they were all er'ing upon insertion. We thought it would be better to rollback this change for now. --- .../premium-content/blocks/buttons/index.js | 3 +-- .../premium-content/blocks/login-button/index.js | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js index 51704e853bd20f..bcb378c768b3ff 100644 --- a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js @@ -9,10 +9,9 @@ import { button as icon } from '@wordpress/icons'; */ import edit from './edit'; import save from './save'; -import { getCategoryWithFallbacks } from '../../../block-helpers'; const name = 'premium-content/buttons'; -const category = getCategoryWithFallbacks( 'design', 'layout' ); +const category = 'design'; const settings = { name, diff --git a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/login-button/index.js b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/login-button/index.js index 7149f19b04f7b1..e5caca81e1520f 100644 --- a/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/login-button/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/login-button/index.js @@ -9,10 +9,9 @@ import { __ } from '@wordpress/i18n'; */ import edit from './edit'; import save from './save'; -import { getCategoryWithFallbacks } from '../../../block-helpers'; const name = 'premium-content/login-button'; -const category = getCategoryWithFallbacks( 'design', 'layout' ); +const category = 'design'; /** * @typedef {object} Attributes