I need an unordered list, but with options selected for each list item. To achieve this I've created a custom block called icon-list which is a ul element with InnerBlocks, which allows only my custom icon-list-item block as a child. My icon-list-item block is just a RichText element with tagName: li and some controls. This all works fine, but currently pressing the enter key adds a line break to the current icon-list-item block - what I'd really like is for the enter key to insert a new icon-list-item block. Similarly pressing the backspace key when at the start of a icon-list-item block should remove that block - the exact same functionality of the core/list block.

I've had a dig through the Gutenberg docs and source and found that I need to implement the onSplit and onReplace properties for my RichText element, but it's not clear to me how I actually do this. So far I have:

el(RichText, {
    tagName     : 'li',
    className   : 'icon--' + props.attributes.icon,
    value       : props.attributes.content,
    placeholder : props.attributes.placeholder,
    onChange    : function(value) {
        props.setAttributes({ content: value })
    onSplit     : function(value) {
        if (!value) {
            return createBlock('tutti/icon-list-item');

        return createBlock('tutti/icon-list-item', {
            content: value,
    onReplace   : function() {
        // something

... obviously I'm completely lost when it comes to the onReplace function. Any pointers would be very much appreciated!


Not tested. I just was browsing looking for something else. But I would try something like this:

onReplace: function() {
   var myID    = props.clientId;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.