[Embed block] Include Jetpack embed variants

src/index.js

@@ -11,20 +11,31 @@ import {
  * Internal dependencies
  */
 import correctTextFontWeight from './text-font-weight-correct';
-import setupJetpackEditor from './jetpack-editor-setup';
+import {
+	registerJetpackBlocks,
+	registerJetpackEmbedVariations,
+	setupJetpackEditor,
+} from './jetpack-editor-setup';
 import setupBlockExperiments from './block-experiments-setup';
 import initialHtml from './initial-html';
 
-addAction( 'native.pre-render', 'gutenberg-mobile', () => {
+addAction( 'native.pre-render', 'gutenberg-mobile', ( props ) => {
 	require( './strings-overrides' );
 	correctTextFontWeight();
-} );
 
-addAction( 'native.render', 'gutenberg-mobile', ( props ) => {
 	setupJetpackEditor(
 		props.jetpackState || { blogId: 1, isJetpackActive: true }
 	);
+
+	// Jetpack Embed variations use WP hooks that are attached to
+	// block type registration, so it’s required to add them before
+	// the core blocks are registered.
+	registerJetpackEmbedVariations( props );
+} );
+
+addAction( 'native.render', 'gutenberg-mobile', ( props ) => {
 	const capabilities = props.capabilities ?? {};
+	registerJetpackBlocks( props );
 	setupBlockExperiments( capabilities );
 } );
 

src/jetpack-editor-setup.js

@@ -2,10 +2,19 @@
  * Internal dependencies
  */
 import { JETPACK_DATA_PATH } from '../jetpack/projects/plugins/jetpack/extensions/shared/get-jetpack-data';
+import isActive from '../jetpack/projects/plugins/jetpack/extensions/shared/is-active';
+import {
+	reactivateFacebookEmbedBlockVariation,
+	reactivateInstagramEmbedBlockVariation,
+	registerLoomVariation,
+	registerSmartframeVariation,
+} from '../jetpack/projects/plugins/jetpack/extensions/extended-blocks/core-embed';
+
 /**
  * WordPress dependencies
  */
-import { dispatch, select } from '@wordpress/data';
+import { dispatch } from '@wordpress/data';
+import { store as editPostStore } from '@wordpress/edit-post';
 
 // When adding new blocks to this list please also consider updating ./block-support/supported-blocks.json
 const supportedJetpackBlocks = {
@@ -37,39 +46,70 @@ const setJetpackData = ( {
 	return jetpackEditorInitialState;
 };
 
-export default ( jetpackState ) => {
+const hideBlockByCapability = ( capability, blockName ) => {
+	if ( capability !== true ) {
+		dispatch( editPostStore ).hideBlockTypes( [ blockName ] );
+	} else {
+		dispatch( editPostStore ).showBlockTypes( [ blockName ] );
+	}
+};
+
+export function setupJetpackEditor( jetpackState ) {
 	if ( ! jetpackState.isJetpackActive ) {
 		return;
 	}
 
-	const jetpackData = setJetpackData( jetpackState );
+	return setJetpackData( jetpackState );
+}
 
-	const toggleBlock = ( capability, blockName ) => {
-		if ( capability !== true ) {
-			dispatch( 'core/edit-post' ).hideBlockTypes( [ blockName ] );
-		} else {
-			dispatch( 'core/edit-post' ).showBlockTypes( [ blockName ] );
-		}
-	};
-
-	// Note on the use of setTimeout() here:
-	// We observed the settings may not be ready exactly when the native.render hooks get run but rather
-	// right after that execution cycle (because state hasn't changed yet). Hence, we're only checking for
-	// the actual settings to be loaded by using setTimeout without a delay parameter. This ensures the
-	// settings are loaded onto the store and we can use the core/block-editor selector by the time we do
-	// the actual check.
-
-	// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
-	setTimeout( () => {
-		const capabilities = select( 'core/block-editor' ).getSettings(
-			'capabilities'
-		);
+export function registerJetpackBlocks( { capabilities } ) {
+	if ( ! isActive() ) {
+		return;
+	}
 
-		toggleBlock( capabilities.mediaFilesCollectionBlock, 'jetpack/story' );
-		toggleBlock( capabilities.contactInfoBlock, 'jetpack/contact-info' );
-	} );
+	hideBlockByCapability(
+		capabilities.mediaFilesCollectionBlock,
+		'jetpack/story'
+	);
+	hideBlockByCapability(
+		capabilities.contactInfoBlock,
+		'jetpack/contact-info'
+	);
 
+	// Register Jetpack blocks
 	require( '../jetpack/projects/plugins/jetpack/extensions/editor' );
+}
 
-	return jetpackData;
-};
+export function registerJetpackEmbedVariations( { capabilities } ) {
+	if ( ! isActive() ) {
+		return;
+	}
+
+	// Register Jetpack Embed variations
+	[
+		{
+			// Facebook embed
+			capability: capabilities.facebookEmbed,
+			registerFunc: reactivateFacebookEmbedBlockVariation,
+		},
+		{
+			// Instagram embed
+			capability: capabilities.instagramEmbed,
+			registerFunc: reactivateInstagramEmbedBlockVariation,
+		},
+		{
+			// Loom embed
+			capability: capabilities.loomEmbed,
+			registerFunc: registerLoomVariation,
+		},
+		{
+			// Smartframe embed
+			capability: capabilities.smartframeEmbed,
+			registerFunc: registerSmartframeVariation,
+		},
+	].forEach( ( { capability, registerFunc } ) => {
+		if ( capability === true ) {
+			registerFunc();
+		}
+	} );
+}

src/test/index.js

@@ -1,28 +1,191 @@
-describe( 'Test Jetpack blocks', () => {
-	it( 'should setup the editor for jetpack without failing', () => {
-		const mockRegisterBlockCollection = jest.fn();
-		jest.mock( '@wordpress/blocks', () => {
-			return {
-				getCategories: () => [ { slug: 'media' } ],
-				setCategories: jest.fn(),
-				registerBlockCollection: mockRegisterBlockCollection,
-				withBlockContentContext: jest.fn(),
-			};
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockTypes,
+	getBlockVariations,
+	unregisterBlockType,
+	unregisterBlockVariation,
+} from '@wordpress/blocks';
+import { select } from '@wordpress/data';
+import { store as editPostStore } from '@wordpress/edit-post';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { removeAllFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import getJetpackData, {
+	JETPACK_DATA_PATH,
+} from '../../jetpack/projects/plugins/jetpack/extensions/shared/get-jetpack-data';
+import {
+	registerJetpackBlocks,
+	registerJetpackEmbedVariations,
+	setupJetpackEditor,
+} from '../jetpack-editor-setup';
+
+const defaultJetpackData = { blogId: 1, isJetpackActive: true };
+const defaultProps = {
+	capabilities: {
+		mediaFilesCollectionBlock: true,
+		contactInfoBlock: true,
+		facebookEmbed: true,
+		instagramEmbed: true,
+		loomEmbed: true,
+		smartframeEmbed: true,
+	},
+};
+const jetpackBlocks = [ 'jetpack/contact-info', 'jetpack/story' ];
+const jetpackEmbedVariations = [
+	'facebook',
+	'instagram',
+	'loom',
+	'smartframe',
+];
+
+// Jetpack blocks are registered when importing the editor extension module.
+// Since we need to register the blocks multiple times for testing,
+// it's required to isolate modules for re-importing the editor extension multiple times.
+const registerJetpackBlocksIsolated = ( props ) => {
+	jest.isolateModules( () => {
+		registerJetpackBlocks( props );
+	} );
+};
+// Similarly to Jetpack blocks, Jetpack embed variations also require to isolate modules.
+const registerJetpackEmbedVariationsIsolated = ( props ) => {
+	jest.isolateModules( () => {
+		registerJetpackEmbedVariations( props );
+	} );
+};
+
+describe( 'Jetpack blocks', () => {
+	afterEach( () => {
+		// Reset Jetpack data
+		delete global.window[ JETPACK_DATA_PATH ];
+
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
 		} );
-		jest.mock(
-			'../../jetpack/projects/plugins/jetpack/extensions/blocks/contact-info/editor.js',
-			() => jest.fn()
-		);
-		jest.mock(
-			'../../jetpack/projects/plugins/jetpack/extensions/blocks/story/editor.js',
-			() => jest.fn()
-		);
+	} );
+
+	it( 'should set up Jetpack data', () => {
+		const expectedJetpackData = {
+			available_blocks: {
+				'contact-info': { available: true },
+				story: { available: true },
+			},
+			jetpack: { is_active: true },
+			siteFragment: null,
+			tracksUserData: null,
+			wpcomBlogId: 1,
+		};
+		setupJetpackEditor( defaultJetpackData );
 
-		const setupJetpackEditor = require( '../jetpack-editor-setup' ).default;
-		setupJetpackEditor( { blogId: 1, isJetpackActive: true } );
+		expect( getJetpackData() ).toEqual( expectedJetpackData );
+	} );
 
-		expect( mockRegisterBlockCollection.mock.calls[ 0 ][ 0 ] ).toBe(
-			'jetpack'
+	it( 'should register Jetpack blocks if Jetpack is active', () => {
+		setupJetpackEditor( defaultJetpackData );
+		registerJetpackBlocksIsolated( defaultProps );
+
+		const registeredBlocks = getBlockTypes().map( ( block ) => block.name );
+		expect( registeredBlocks ).toEqual(
+			expect.arrayContaining( jetpackBlocks )
 		);
 	} );
+
+	it( 'should not register Jetpack blocks if Jetpack is not active', () => {
+		setupJetpackEditor( { ...defaultJetpackData, isJetpackActive: false } );
+		registerJetpackBlocksIsolated( defaultProps );
+
+		const registeredBlocks = getBlockTypes().map( ( block ) => block.name );
+		expect( registeredBlocks ).toEqual( [] );
+	} );
+
+	it( 'should hide Jetpack blocks by capabilities', () => {
+		setupJetpackEditor( defaultJetpackData );
+		registerJetpackBlocksIsolated( {
+			capabilities: {
+				mediaFilesCollectionBlock: true,
+				contactInfoBlock: false,
+			},
+		} );
+
+		const { hiddenBlockTypes } = select( editPostStore ).getPreferences();
+		expect( hiddenBlockTypes ).toEqual( [ 'jetpack/contact-info' ] );
+	} );
+
+	describe( 'Jetpack embed variations', () => {
+		afterEach( () => {
+			// Clean up embed variations
+			getBlockVariations( 'core/embed' ).forEach( ( variation ) => {
+				unregisterBlockVariation( 'core/embed', variation.name );
+			} );
+
+			// Embed variations can use the register block type WP hook to reactivate
+			// already registered variations, so we need to remove all hooks after the tests.
+			removeAllFilters( 'blocks.registerBlockType' );
+		} );
+
+		it( 'should not register Jetpack embed variations if Jetpack is not active', () => {
+			setupJetpackEditor( {
+				...defaultJetpackData,
+				isJetpackActive: false,
+			} );
+			registerJetpackEmbedVariationsIsolated( defaultProps );
+			// Embed variations require the Embed block to be registered,
+			// so we need to register the core blocks to include it.
+			registerCoreBlocks();
+
+			const embedVariations = getBlockVariations(
+				'core/embed',
+				'inserter'
+			).map( ( block ) => block.name );
+
+			jetpackEmbedVariations.forEach( ( variation ) =>
+				expect( embedVariations ).not.toContain( variation )
+			);
+		} );
+
+		it( 'should not register Jetpack embed variations if capabilities are falsey', () => {
+			setupJetpackEditor( defaultJetpackData );
+			registerJetpackEmbedVariationsIsolated( {
+				capabilities: {
+					facebookEmbed: false,
+					instagramEmbed: null,
+					loomEmbed: undefined,
+				},
+			} );
+			// Embed variations require the Embed block to be registered,
+			// so we need to register the core blocks to include it.
+			registerCoreBlocks();
+
+			const embedVariations = getBlockVariations(
+				'core/embed',
+				'inserter'
+			).map( ( block ) => block.name );
+
+			jetpackEmbedVariations.forEach( ( variation ) =>
+				expect( embedVariations ).not.toContain( variation )
+			);
+		} );
+
+		it( 'should register Jetpack embed variations if capabilities are true', () => {
+			setupJetpackEditor( defaultJetpackData );
+			registerJetpackEmbedVariationsIsolated( defaultProps );
+			// Embed variations require the Embed block to be registered,
+			// so we need to register the core blocks to include it.
+			registerCoreBlocks();
+
+			const embedVariations = getBlockVariations(
+				'core/embed',
+				'inserter'
+			).map( ( block ) => block.name );
+
+			expect( embedVariations ).toEqual(
+				expect.arrayContaining( jetpackEmbedVariations )
+			);
+		} );
+	} );
 } );