Parent Block Replaced by Text Intended for Child Block

[zhyian]

Description

When using the BlockEditorProvider and BlockList components in a custom block, pasting copied text into a specific block within the BlockList unexpectedly replaces the entire parent block instead of inserting the text into the intended block. This disrupts the block hierarchy and content structure.

Using the template lock prevents copy-pasting from working entirely, as it stops the replacement of locked parent blocks.

Notably, this issue only occurs when pasting text from outside the editor, for example from the sidebar. When copying text from within the editor, such as from a paragraph block, the behavior works as expected.

Step-by-step reproduction instructions

Here’s a simple block example to help reproduce the issue:

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';

import { BlockEditorProvider, BlockList, WritingFlow } from '@wordpress/block-editor';
import { parse } from '@wordpress/blocks';
import { useState } from '@wordpress/element';

registerBlockType( metadata.name, {
	edit: () => {
		const content = '<!-- wp:paragraph --><p>Test!</p> <!-- /wp:paragraph -->'
		const [blocks, setBlocks] = useState(parse(content));
		const handleBlocksChange = (newBlocks) => {
			setBlocks(newBlocks);
		};

		return (
			<BlockEditorProvider
				value={blocks}
				onInput={handleBlocksChange}
				onChange={handleBlocksChange}
			>
				<WritingFlow>
					<BlockList />
				</WritingFlow>
			</BlockEditorProvider>
		);
	}
} );

Steps:

1. Download a plugin with provided block: https://github.com/zhyian/todo-list
2. Activate it on clear WordPress installation.
3. Create a new page and insert Todo List block
4. Copy text not from the block editor, for example any text from the sidebar.
5. Select a Todo Block in the Document Overview and set a cursor inside any of inner blocks.
6. Paste the text and you will see that whole Todo Block is replaced by text.

Screenshots, screen recording, code snippet

Environment info

The issue can be reproduced starting from WordPress 6.6. On WordPress 6.5.5, the problem does not occur.
Active theme: Twenty Twenty-Four.
No plugins are active, except for the custom block created for this example.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[ellatrix]

@zhyian I'm not sure BlockEditorProvider is the right approach. Could you try a controlled useInnerBlocksProps hooks with the value and onChange props? This is what the core blocks such as core/block (reusable block) and core/post-content use. You should also remove the WritingFlow wrapper.

[zhyian]

Thanks so much for the suggestion, @ellatrix! In this example, it would definitely work, but this is just a simplified case to reproduce the issue. In our real-world scenario, the block includes multiple fields (essentially small custom editors), so using useInnerBlocksProps doesn’t seem practical since only one component with inner blocks can be used within a block.

[Mamaduka]

Hi, @zhyian

Can you share additional details about what your custom implementation is trying to achieve that's missing from useInnerBlocksProps?

Does removing the WritingFlow wrapper have any effect on the issue?

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[zhyian]

Hi @Mamaduka,

Does removing the WritingFlow wrapper have any effect on the issue?

Unfortunately, no.

Can you share additional details about what your custom implementation is trying to achieve that's missing from useInnerBlocksProps?

Let's assume we have a custom block with multiple fields, where each field acts as a small custom editor with its own set of inner blocks. Each custom editor stores its inner blocks in a specific post meta. As far as I know, there’s no way to store multiple sets of inner blocks directly within our custom block.