Skip to content

Commit

Permalink
Change the category of FSE blocks from legacy to the updated ones
Browse files Browse the repository at this point in the history
Context: #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.
  • Loading branch information
fullofcaffeine committed Jul 13, 2020
1 parent ac79d2b commit b0742d3
Show file tree
Hide file tree
Showing 20 changed files with 107 additions and 18 deletions.
8 changes: 8 additions & 0 deletions apps/full-site-editing/bin/babel-transform.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* External dependencies
*/
const babelJest = require( 'babel-jest' );

module.exports = babelJest.createTransformer( {
presets: [ '@wordpress/babel-preset-default', '@babel/preset-typescript' ],
} );
1 change: 1 addition & 0 deletions apps/full-site-editing/bin/js-unit-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
@@ -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' );
} );
} );
} );
Original file line number Diff line number Diff line change
@@ -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( ',' ) }`
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import edit from './edit';
import { getCategoryWithFallbacks } from '../../../block-helpers';
import './style.scss';

const icon = (
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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' },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ addFilter(
registerBlockType( blockName, {
...settings,
title: __( 'Blog Posts', 'full-site-editing' ),
category: 'layout',
category: 'widgets',
} );

registerQueryStore( blockName );
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,5 @@ addFilter(

registerBlockType( blockName, {
...settings,
category: 'layout',
category: 'widgets',
} );
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import edit from './edit';
import save from './save';
import deprecated from './deprecated';
import { getCategoryWithFallbacks } from '../../../block-helpers';

/**
* WordPress dependencies
Expand All @@ -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
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion apps/full-site-editing/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,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"
}
}
5 changes: 2 additions & 3 deletions apps/full-site-editing/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down

0 comments on commit b0742d3

Please sign in to comment.