0

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.

0

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>
  • Thanks for your help – user3389097 Jun 16 at 13:49
  • upvote and accept correct answers to give some reputation to the authors of ansers. – user9 Jun 16 at 14:20

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.