diff --git a/packages/block-library/src/embed/index.js b/packages/block-library/src/embed/index.js index 05facf83fd1b9c..76cb6e86e8828d 100644 --- a/packages/block-library/src/embed/index.js +++ b/packages/block-library/src/embed/index.js @@ -4,12 +4,12 @@ import { common as commonEmbeds, others as otherEmbeds } from './core-embeds'; import { embedContentIcon } from './icons'; import { getEmbedBlockSettings } from './settings'; +import transforms from './transforms'; /** * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { createBlock } from '@wordpress/blocks'; export const name = 'core/embed'; @@ -21,33 +21,27 @@ export const settings = getEmbedBlockSettings( { icon: embedContentIcon, // Unknown embeds should not be responsive by default. responsive: false, - transforms: { - from: [ - { - type: 'raw', - isMatch: ( node ) => - node.nodeName === 'P' && - /^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ), - transform: ( node ) => { - return createBlock( 'core/embed', { - url: node.textContent.trim(), - } ); - }, - }, - ], - }, + transforms, } ); export const common = commonEmbeds.map( ( embedDefinition ) => { + const embedSettings = getEmbedBlockSettings( embedDefinition.settings ); return { ...embedDefinition, - settings: getEmbedBlockSettings( embedDefinition.settings ), + settings: { + ...embedSettings, + transforms, + }, }; } ); export const others = otherEmbeds.map( ( embedDefinition ) => { + const embedSettings = getEmbedBlockSettings( embedDefinition.settings ); return { ...embedDefinition, - settings: getEmbedBlockSettings( embedDefinition.settings ), + settings: { + ...embedSettings, + transforms, + }, }; } ); diff --git a/packages/block-library/src/embed/transforms.js b/packages/block-library/src/embed/transforms.js new file mode 100644 index 00000000000000..42a73167ad47b8 --- /dev/null +++ b/packages/block-library/src/embed/transforms.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { renderToString } from '@wordpress/element'; +import { createBlock } from '@wordpress/blocks'; + +/** + * Default transforms for generic embeds. + */ +const transforms = { + from: [ + { + type: 'raw', + isMatch: ( node ) => + node.nodeName === 'P' && + /^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ), + transform: ( node ) => { + return createBlock( 'core/embed', { + url: node.textContent.trim(), + } ); + }, + }, + ], + to: [ + { + type: 'block', + blocks: [ 'core/paragraph' ], + transform: ( { url, caption } ) => { + const link = { caption || url }; + return createBlock( 'core/paragraph', { + content: renderToString( link ), + } ); + }, + }, + ], +}; + +export default transforms; diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js index 524e6e094f674c..3574162eb7a35b 100644 --- a/packages/e2e-tests/fixtures/block-transforms.js +++ b/packages/e2e-tests/fixtures/block-transforms.js @@ -97,7 +97,7 @@ export const EXPECTED_TRANSFORMS = { }, core__embed: { originalBlock: 'Embed', - availableTransforms: [ 'Group' ], + availableTransforms: [ 'Group', 'Paragraph' ], }, 'core__file__new-window': { originalBlock: 'File',