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 });
}
}}
/>
1 Answer
Reset to default 0In 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?
onSplithas 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__unstableSplitValuein the code for that component. – Tom J Nowell ♦ Commented Apr 29 at 13:35list-itemblock 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__unstableSplitValuecomes from? – Tom J Nowell ♦ Commented Apr 30 at 11:54