Footnote: A simple Gutenberg block using the RichText component

footnote.js

/*  Footnote.js
*
*   <div class="wp-block-myblocks-footnote">
*       <p>Line 1</p>
*       <p>Line 2</p>
*   </div>
*/


( function( i18n, blocks, blockEditor, element, richText ) {
    var el = element.createElement;
    var __ = i18n.__;
    var RichText = blockEditor.RichText;

    blocks.registerBlockType( 'myblocks/footnote', {
      title: __( 'Footnote', 'myblocks'),
      category: 'formatting',

      attributes: {
        content: {
          type: 'string',
          source: 'html',
          selector: 'div',
          multiline: 'p',
        },
      },
      
      edit: function( props ) {
   
        var attributes = props.attributes,
        content = props.attributes.content;

        function onChangeContent( newContent ) {
          props.setAttributes( {
            content: newContent
          });
        }
          
          
        // tagName is the block-level HTML element that wraps the input
        // multiline (optional) specifies whether line breaks will create new paragraphs

        return el( RichText,
          {
            tagName: 'div',
            multiline: true,
            onChange: onChangeContent,
            value: content
          }
        );
      },

      save: function( props ) {
        return el( RichText.Content,
            {
              tagName: 'div',
              multiline: 'p',
              value: props.attributes.content,
            }
          );
        },
    } );
}(
  window.wp.i18n,
  window.wp.blocks,
  window.wp.blockEditor,
  window.wp.element,
  window.wp.richText
) );