plugins - onSplit not create my custom block

Today I mentioned that my onSplit function doesn't work. I found out that I need to add splitting: true to my block setup and update my content attributes. Now the splitting works again — but it creates the wrong block. When I hit Enter in my block, it should create a new block of the same type.

What could be wrong with my code?

I type something in my studio-wai/paragraph component and press Enter – but a block of type core/paragraph is created.

However, I want a new block of type studio-wai/paragraph to be inserted when pressing Enter.

<RichText
    {...blockProps}
    tagName={attributes?.wai?.lg?.font?.style || 'p'}
    value={content}
    onChange={(newValue) => setAttributes({ content: newValue })}
    placeholder="Type / to choose a block"
    onSplit={(before, after) => {
        const newBlock = createBlock('studio-wai/paragraph', {
            content: after,
        });
        setAttributes({ content: before });
        return [newBlock];
    }}
    onReplace={(blocks) => {
        if (typeof blocks === 'string') {
            setAttributes({ content: blocks });
        }
    }}
/>

Today I mentioned that my onSplit function doesn't work. I found out that I need to add splitting: true to my block setup and update my content attributes. Now the splitting works again — but it creates the wrong block. When I hit Enter in my block, it should create a new block of the same type.

What could be wrong with my code?

I type something in my studio-wai/paragraph component and press Enter – but a block of type core/paragraph is created.

However, I want a new block of type studio-wai/paragraph to be inserted when pressing Enter.

<RichText
    {...blockProps}
    tagName={attributes?.wai?.lg?.font?.style || 'p'}
    value={content}
    onChange={(newValue) => setAttributes({ content: newValue })}
    placeholder="Type / to choose a block"
    onSplit={(before, after) => {
        const newBlock = createBlock('studio-wai/paragraph', {
            content: after,
        });
        setAttributes({ content: before });
        return [newBlock];
    }}
    onReplace={(blocks) => {
        if (typeof blocks === 'string') {
            setAttributes({ content: blocks });
        }
    }}
/>

• plugins
• split

Share Improve this question edited May 1 at 14:31 Studio Wai asked Apr 29 at 13:07 Studio WaiStudio Wai 7866 bronze badges 6

• 1 the code int he gutenberg repo for that component says that onSplit has been deprecated since 6.4 ( github/WordPress/gutenberg/blob/… ), though it's very strange that you've created a brand new paragraph block instead of a custom block variant or custom block style. Likewise there is no __unstableSplitValue in the code for that component. – Tom J Nowell ♦ Commented Apr 29 at 13:35
• Also if we look at how the core blocks do it, the list-item block handles pressing enter in a completely different way github/WordPress/gutenberg/blob/… and github/WordPress/gutenberg/blob/…. I noticed you did not go back and answer your previous questions but instead opened new ones, can you go post the solutions you found to previous questions? – Tom J Nowell ♦ Commented Apr 29 at 13:37
• Thanks for the hint! But could you tell me exactly which question you're referring to that I created as a new one? I tried to find it, but I'm drawing a blank. – Studio Wai Commented Apr 30 at 7:04
• Only one of the questions you've asked has an answer. Can you share wehre __unstableSplitValue comes from? – Tom J Nowell ♦ Commented Apr 30 at 11:54
• Yes, that's correct — unfortunately, I haven't received a response yet that fully solves the issue. As soon as I find something helpful or a working solution, I'll be happy to share it here. I asked ChatGPT about it, and it replied with "__unstableSplitValue". – Studio Wai Commented Apr 30 at 13:45

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

In my case, the block split now but it will create a new "core/paragraph" instead of my "studio-wai/paragraph"

<RichText
                identifier="content"
                tagName={BlockTag}
                {...blockProps}
                value={content}
                onChange={(newContent) => setAttributes({ content: newContent })}
                onMerge={mergeBlocks}
                onReplace={onReplace}
                onRemove={onRemove}
                placeholder={placeholder || __('Type / to choose a block')}
                data-custom-placeholder={placeholder ? true : undefined}
            />

I created some console.log in the use-enter.js

/**
 * WordPress dependencies
 */
import { useRef } from '@wordpress/element';
import { useRefEffect } from '@wordpress/compose';
import { ENTER } from '@wordpress/keycodes';
import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import {
    hasBlockSupport,
    createBlock,
    getDefaultBlockName,
} from '@wordpress/blocks';

export function useOnEnter(props) {
    const { batch } = useRegistry();
    const {
        moveBlocksToPosition,
        replaceInnerBlocks,
        duplicateBlocks,
        insertBlock,
    } = useDispatch(blockEditorStore);
    const {
        getBlockRootClientId,
        getBlockIndex,
        getBlockOrder,
        getBlockName,
        getBlock,
        getNextBlockClientId,
        canInsertBlockType,
    } = useSelect(blockEditorStore);
    const propsRef = useRef(props);
    propsRef.current = props;
    return useRefEffect((element) => {
        function onKeyDown(event) {
            if (event.defaultPrevented) {
                console.log('on keydown');
                return;
            }

            if (event.keyCode !== ENTER) {
                console.log('on enter');
                return;
            }

            if (event.keyCode === ENTER) {
                console.log('hit enter');
                return;
            }
        }

        element.addEventListener('keydown', onKeyDown);
        return () => {
            element.removeEventListener('keydown', onKeyDown);
        };
    }, []);
}

I copied the use-enter.js from core/paragraph but as i can mentioned, the useRefEffect only handle the old version of the block. How i can modify the second (copied or entered one)?

Do I need to consider anything else when using splitting: true?