I have been trying to make a custom block that will behave like the default paragraph and headings blocks, so that when Enter is pressed a new paragraph block is started.

Whatever I try, a
tag always seems to be added when Enter is pressed (with, or without the Shit key).

I thought setting the multiline property of RichText to false might do it, but it does not seem to work.

The JS code I have is:

/** IMPORTANT VARS!!! **/
var el = element.createElement;
var RichText = editor.RichText;

blocks.registerBlockType( 'snt/my-heading-border', {
    title: 'My Test Heading',
    icon: 'smiley',
    category: 'common',

    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'h3'
        }
    },

    edit: function( props ) {
        function onChangeContent( newContent ) {
            console.log(newContent);
            props.setAttributes( { content: newContent } );
        }

        return el(
            RichText,
            {
                tagName: 'h3',
                className: props.className,
                onChange: onChangeContent,
                value: props.attributes.content,
                placeholder: 'Enter a heading'
            }
        );
    },

    save: function( props ) {
        return el( RichText.Content, {
            tagName: 'h3', 
            value: props.attributes.content
        } );
    },
} );

I can't help think I have missed something obvious. Any help much appreciated.

I have been trying to make a custom block that will behave like the default paragraph and headings blocks, so that when Enter is pressed a new paragraph block is started.

Whatever I try, a
tag always seems to be added when Enter is pressed (with, or without the Shit key).

I thought setting the multiline property of RichText to false might do it, but it does not seem to work.

The JS code I have is:

/** IMPORTANT VARS!!! **/
var el = element.createElement;
var RichText = editor.RichText;

blocks.registerBlockType( 'snt/my-heading-border', {
    title: 'My Test Heading',
    icon: 'smiley',
    category: 'common',

    attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'h3'
        }
    },

    edit: function( props ) {
        function onChangeContent( newContent ) {
            console.log(newContent);
            props.setAttributes( { content: newContent } );
        }

        return el(
            RichText,
            {
                tagName: 'h3',
                className: props.className,
                onChange: onChangeContent,
                value: props.attributes.content,
                placeholder: 'Enter a heading'
            }
        );
    },

    save: function( props ) {
        return el( RichText.Content, {
            tagName: 'h3', 
            value: props.attributes.content
        } );
    },
} );

I can't help think I have missed something obvious. Any help much appreciated.

• block-editor

Share Improve this question asked Jun 10, 2019 at 20:39 user3389097user3389097 3122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can check out the code of the paragraph (and heading) block. It's open source code !yay! Let it inspire you.

<RichText 
  ...
  onSplit={ ( value ) => {
    if ( ! value ) {
      return createBlock( name );
    }
    return createBlock( name, {
     ...attributes,
     content: value,
    } );
  } }
  onMerge={ mergeBlocks }
  ...
</RichText>