Refactor embed block to single block with block variations (#24090)

* add embed variations + blocks.json

* remove core-embeds

* minor refactorings

* add block attributes

* add deprecated + save files

* remove settings file and change utils

* index + edit draft

* add responsive false to unknown embeds

* add save function

* get className from attributes

* use `useSelect` and `useDispatch` hooks

* remove common prop from attributes

* minor changes

* convert supports to scope in variations

* Inline the handleIncomingPreview effect

* add getEmbedInfoByProvider unit tests

* add getEmbedInfoByProvider jsdoc

* fix variable typo

Co-authored-by: Miguel Fonseca <[email protected]>

* small util refactorings

* change utils

* change findMoreSuitableBlock tests

* use state variable for mergedAttributes

* small changes

* change responsive default attribute

* change default value of responsive

Co-authored-by: Miguel Fonseca <[email protected]>

* change getEmbedInfoByProvider to just search variations

* fix block test

* add check for registered default embed block + tests

* add support for old embed blocks

* support deprecated transforms in parser

* support deprecated transforms in parser

* fix full-content tests

* revert previewAttributes handling

react lifecycle doesn't play well with the previous change - using megedAttributes as a local state var

* fix e2e tests

* fix unit tests

* change all references to old core-embed block

* add snapshots to e2e tests

* enhance WP embed block matching with WP_EMBED_TYPE

* remove snapshot with publish post

* add responsive attribute to demo vimeo block

* fix typo

* add responsive attribute in old embed blocks in parser

* try to limit BlockTypesList with prop

* review feedback + tests

* review feedback

* indentation change to tabs

* fix e2e snapshots after adding the `wp-block-embed-{provider}` class

* minor refactor

Co-authored-by: Miguel Fonseca <[email protected]>

packages/block-editor/src/components/block-types-list/index.js

@@ -21,9 +21,10 @@ function BlockTypesList( {
 	onHover = () => {},
 	children,
 	label,
+	limit,
 } ) {
 	const composite = useCompositeState();
-	const normalizedItems = includeVariationsInInserterItems( items );
+	const normalizedItems = includeVariationsInInserterItems( items, limit );
 	const orderId = normalizedItems.reduce(
 		( acc, item ) => acc + '--' + item.id,
 		''

packages/block-editor/src/components/inserter/block-types-tab.js

@@ -147,6 +147,7 @@ export function BlockTypesTab( {
 							onSelect={ onSelectItem }
 							onHover={ onHover }
 							label={ _x( 'Most used', 'blocks' ) }
+							limit={ MAX_SUGGESTED_ITEMS }
 						/>
 					</InserterPanel>
 				) }

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -80,6 +80,7 @@ function QuickInserterList( {
 						onSelect={ onSelectBlockType }
 						onHover={ onHover }
 						label={ __( 'Blocks' ) }
+						limit={ SHOWN_BLOCK_TYPES }
 					/>
 				</InserterPanel>
 			) }

packages/block-editor/src/components/inserter/test/fixtures/index.js

@@ -25,6 +25,21 @@ export const paragraphItem = {
 	keywords: [ 'random' ],
 };
 
+export const withSingleVariationItem = {
+	id: 'core/embed',
+	name: 'core/embed',
+	description: 'core description',
+	initialAttributes: {},
+	category: 'embed',
+	variations: [
+		{
+			name: 'youtube',
+			title: 'YouTube',
+			description: 'youtube description',
+		},
+	],
+};
+
 export const withVariationsItem = {
 	id: 'core/block-with-variations',
 	name: 'core/block-with-variations',
@@ -81,8 +96,8 @@ export const moreItem = {
 };
 
 export const youtubeItem = {
-	id: 'core-embed/youtube',
-	name: 'core-embed/youtube',
+	id: 'core/embed',
+	name: 'core/embed',
 	initialAttributes: {},
 	title: 'YouTube',
 	category: 'embed',

packages/block-editor/src/components/inserter/test/utils.js

@@ -0,0 +1,55 @@
+/**
+ * Internal dependencies
+ */
+import {
+	moreItem,
+	paragraphItem,
+	someOtherItem,
+	withVariationsItem,
+	withSingleVariationItem,
+} from './fixtures';
+import { includeVariationsInInserterItems } from '../utils';
+
+describe( 'inserter utils', () => {
+	describe( 'includeVariationsInInserterItems', () => {
+		it( 'should return items if limit is equal to items length', () => {
+			const items = [ moreItem, paragraphItem, someOtherItem ];
+			const res = includeVariationsInInserterItems( items, 3 );
+			expect( res ).toEqual( items );
+		} );
+		it( 'should slice items if items are more than provided limit', () => {
+			const items = [
+				moreItem,
+				paragraphItem,
+				someOtherItem,
+				withVariationsItem,
+			];
+			const res = includeVariationsInInserterItems( items, 2 );
+			expect( res ).toEqual( [ moreItem, paragraphItem ] );
+		} );
+		it( 'should return proper result if no limit provided and block variations do NOT exist', () => {
+			const items = [ moreItem, paragraphItem, someOtherItem ];
+			const res = includeVariationsInInserterItems( items );
+			expect( res ).toEqual( items );
+		} );
+		it( 'should return proper result if no limit provided and block variations exist', () => {
+			const items = [
+				moreItem,
+				paragraphItem,
+				someOtherItem,
+				withSingleVariationItem,
+			];
+			const expected = [
+				...items,
+				{
+					...withSingleVariationItem,
+					id: 'core/embed-youtube',
+					title: 'YouTube',
+					description: 'youtube description',
+				},
+			];
+			const res = includeVariationsInInserterItems( items );
+			expect( res ).toEqual( expected );
+		} );
+	} );
+} );

packages/block-editor/src/components/inserter/utils.js

@@ -1,10 +1,39 @@
+/**
+ * Return a function to be used to tranform a block variation to an inserter item
+ *
+ * @param {Object} item Denormalized inserter item
+ * @return {Function} Function to transform a block variation to inserter item
+ */
+const getItemFromVariation = ( item ) => ( variation ) => ( {
+	...item,
+	id: `${ item.id }-${ variation.name }`,
+	icon: variation.icon || item.icon,
+	title: variation.title || item.title,
+	description: variation.description || item.description,
+	// If `example` is explicitly undefined for the variation, the preview will not be shown.
+	example: variation.hasOwnProperty( 'example' )
+		? variation.example
+		: item.example,
+	initialAttributes: {
+		...item.initialAttributes,
+		...variation.attributes,
+	},
+	innerBlocks: variation.innerBlocks,
+} );
+
 /**
  * Normalizes an inserter block types list and includes variations as separate items.
  *
  * @param {Array} items Denormalized inserter items
+ * @param {number} [limit=Infinity] Limit returned results by a given threshold.
  * @return {Array} Normalized inserter items.
  */
-export function includeVariationsInInserterItems( items ) {
+export function includeVariationsInInserterItems( items, limit = Infinity ) {
+	if ( items.length >= limit ) {
+		// No need to iterate for variations
+		return items.slice( 0, limit );
+	}
+	// Show all available blocks with variations
 	return items.reduce( ( result, item ) => {
 		const { variations = [] } = item;
 		const hasDefaultVariation = variations.some(
@@ -18,26 +47,8 @@ export function includeVariationsInInserterItems( items ) {
 		}
 
 		if ( variations.length ) {
-			result = result.concat(
-				variations.map( ( variation ) => {
-					return {
-						...item,
-						id: `${ item.id }-${ variation.name }`,
-						icon: variation.icon || item.icon,
-						title: variation.title || item.title,
-						description: variation.description || item.description,
-						// If `example` is explicitly undefined for the variation, the preview will not be shown.
-						example: variation.hasOwnProperty( 'example' )
-							? variation.example
-							: item.example,
-						initialAttributes: {
-							...item.initialAttributes,
-							...variation.attributes,
-						},
-						innerBlocks: variation.innerBlocks,
-					};
-				} )
-			);
+			const variationMapper = getItemFromVariation( item );
+			result.push( ...variations.map( variationMapper ) );
 		}
 
 		return result;

packages/block-editor/src/store/test/reducer.js

@@ -2404,29 +2404,29 @@ describe( 'state', () => {
 				blocks: [
 					{
 						clientId: 'bacon',
-						name: 'core-embed/twitter',
+						name: 'core/embed',
 					},
 				],
 				time: 123456,
 			} );
 
 			expect( state ).toEqual( {
 				insertUsage: {
-					'core-embed/twitter': {
+					'core/embed': {
 						time: 123456,
 						count: 1,
-						insert: { name: 'core-embed/twitter' },
+						insert: { name: 'core/embed' },
 					},
 				},
 			} );
 
 			const twoRecentBlocks = preferences(
 				deepFreeze( {
 					insertUsage: {
-						'core-embed/twitter': {
+						'core/embed': {
 							time: 123456,
 							count: 1,
-							insert: { name: 'core-embed/twitter' },
+							insert: { name: 'core/embed' },
 						},
 					},
 				} ),
@@ -2435,7 +2435,7 @@ describe( 'state', () => {
 					blocks: [
 						{
 							clientId: 'eggs',
-							name: 'core-embed/twitter',
+							name: 'core/embed',
 						},
 						{
 							clientId: 'bacon',
@@ -2449,10 +2449,10 @@ describe( 'state', () => {
 
 			expect( twoRecentBlocks ).toEqual( {
 				insertUsage: {
-					'core-embed/twitter': {
+					'core/embed': {
 						time: 123457,
 						count: 2,
-						insert: { name: 'core-embed/twitter' },
+						insert: { name: 'core/embed' },
 					},
 					'core/block/123': {
 						time: 123457,

packages/block-library/src/embed/block.json

@@ -0,0 +1,37 @@
+{
+	"name": "core/embed",
+	"category": "embed",
+	"attributes": {
+		"url": {
+			"type": "string"
+		},
+		"caption": {
+			"type": "string",
+			"source": "html",
+			"selector": "figcaption"
+		},
+		"type": {
+			"type": "string"
+		},
+		"providerNameSlug": {
+			"type": "string"
+		},
+		"allowResponsive": {
+			"type": "boolean",
+			"default": true
+		},
+		"responsive": {
+			"type": "boolean",
+			"default": false
+		},
+		"previewable": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"html": false
+	}
+}

packages/block-library/src/embed/constants.js

@@ -10,5 +10,4 @@ export const ASPECT_RATIOS = [
 	{ ratio: '0.50', className: 'wp-embed-aspect-1-2' },
 ];
 
-export const DEFAULT_EMBED_BLOCK = 'core/embed';
-export const WORDPRESS_EMBED_BLOCK = 'core-embed/wordpress';
+export const WP_EMBED_TYPE = 'wp-embed';