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';