Block API: Pasting content that results in a new block shouldn't be treated as inline content. (WordPress#19084)

* Only treat the paste as inline if it results in a paragraph block.

* Whitelist blocks that can be treated as inline pastes.

* Add a supports.pasteTextInline property to blocks, and some tests.

* Mark pasteTextInline unstable

Co-authored-by: Ella van Durpe <[email protected]>

Author: pento

docs/designers-developers/developers/block-api/block-registration.md

@@ -653,4 +653,3 @@ By default all blocks can be converted to a reusable block. If supports reusable
 // Don't allow the block to be converted into a reusable block.
 reusable: false,
 ```
-

packages/block-library/src/heading/index.js

@@ -24,6 +24,7 @@ export const settings = {
 	supports: {
 		className: false,
 		anchor: true,
+		__unstablePasteTextInline: true,
 	},
 	example: {
 		attributes: {

packages/block-library/src/list/index.js

@@ -23,6 +23,7 @@ export const settings = {
 	keywords: [ __( 'bullet list' ), __( 'ordered list' ), __( 'numbered list' ) ],
 	supports: {
 		className: false,
+		__unstablePasteTextInline: true,
 	},
 	example: {
 		attributes: {

packages/block-library/src/paragraph/index.js

@@ -31,6 +31,7 @@ export const settings = {
 	},
 	supports: {
 		className: false,
+		__unstablePasteTextInline: true,
 	},
 	transforms,
 	deprecated,

packages/blocks/src/api/raw-handling/paste-handler.js

@@ -7,6 +7,7 @@ import { flatMap, filter, compact } from 'lodash';
  * Internal dependencies
  */
 import { createBlock, getBlockTransforms, findTransform } from '../factory';
+import { hasBlockSupport } from '../registration';
 import { getBlockContent } from '../serializer';
 import { getBlockAttributes, parseWithGrammar } from '../parser';
 import normaliseBlocks from './normalise-blocks';
@@ -244,10 +245,14 @@ export function pasteHandler( { HTML = '', plainText = '', mode = 'AUTO', tagNam
 		return htmlToBlocks( { html: piece, rawTransforms } );
 	} ) );
 
-	// If we're allowed to return inline content and there is only one block
+	// If we're allowed to return inline content, and there is only one inlineable block,
 	// and the original plain text content does not have any line breaks, then
 	// treat it as inline paste.
-	if ( mode === 'AUTO' && blocks.length === 1 ) {
+	if (
+		mode === 'AUTO' &&
+		blocks.length === 1 &&
+		hasBlockSupport( blocks[ 0 ].name, '__unstablePasteTextInline', false )
+	) {
 		const trimmedPlainText = plainText.trim();
 
 		if ( trimmedPlainText !== '' && trimmedPlainText.indexOf( '\n' ) === -1 ) {

test/integration/blocks-raw-handling.test.js

@@ -8,6 +8,7 @@ import path from 'path';
  * WordPress dependencies
  */
 import {
+	createBlock,
 	getBlockContent,
 	pasteHandler,
 	rawHandler,
@@ -57,6 +58,30 @@ describe( 'Blocks raw handling', () => {
 			},
 			save: () => null,
 		} );
+
+		registerBlockType( 'test/non-inline-block', {
+			title: 'Test Non Inline Block',
+			category: 'common',
+			supports: {
+				pasteTextInline: false,
+			},
+			transforms: {
+				from: [
+					{
+						type: 'raw',
+						isMatch: ( node ) => {
+							return 'words to live by' === node.textContent.trim();
+						},
+						transform: () => {
+							return createBlock( 'core-embed/youtube', {
+								url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+							} );
+						},
+					},
+				],
+			},
+			save: () => null,
+		} );
 	} );
 
 	it( 'should filter inline content', () => {
@@ -153,6 +178,29 @@ describe( 'Blocks raw handling', () => {
 		expect( console ).toHaveLogged();
 	} );
 
+	it( 'should not treat single non-inlineable block as inline text', () => {
+		const filtered = pasteHandler( {
+			HTML: '<p>words to live by</p>',
+			plainText: 'words to live by\n',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toHaveLength( 1 );
+		expect( filtered[ 0 ].name ).toBe( 'core-embed/youtube' );
+		expect( console ).toHaveLogged();
+	} );
+
+	it( 'should treat single heading as inline text', () => {
+		const filtered = pasteHandler( {
+			HTML: '<h1>FOO</h1>',
+			plainText: 'FOO\n',
+			mode: 'AUTO',
+		} );
+
+		expect( filtered ).toBe( 'FOO' );
+		expect( console ).toHaveLogged();
+	} );
+
 	it( 'should treat single list item as inline text', () => {
 		const filtered = pasteHandler( {
 			HTML: '<ul><li>Some <strong>bold</strong> text.</li></ul>',