title: Gutenberg Block RichText elements are double shown in the editor
body: <p>Currently I'm building my first gutenberg block. Everything seems fine, except the editor field shows the h2 and the p element double. Is there something I am missing?</p>
  
  <p>I've searched the entire internet for the issue, but I was not able to find a solution to this problem.</p>
  
  <p><a href="https://i.stack.imgur.com/Gibyu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gibyu.png" alt="enter image description here"></a></p>
  
  <p>Below you will see my Gutenberg code i've wrote. Maybe I am missing something? Or there is a typo? </p>
  
  <pre><code>/**
   * Block dependencies
   */
  import icons from './icons';
  import './editor.scss';
  
  /**
   * Internal block libraries
   */
  const { __ } = wp.i18n;
  const {
      registerBlockType,
  } = wp.blocks;
  
  const {
    InspectorControls,
    RichText,
    MediaUpload,
  } = wp.editor;
  
  const {
      Tooltip,
      PanelBody,
      PanelRow,
      FormToggle,
      Button,
  } = wp.components;
  
  /**
   * Register example block
   */
  export default registerBlockType('mfgb/banner', {
          title: __( 'Banner Block', 'mfgb' ),
          description: __( 'Voeg een banner toe aan de website (met of zonder tekst)', 'mfgb'),
          category: 'common',
          icon: {
              background: 'rgba(254, 243, 224, 0.52)',
              src: icons.upload,
          },
          keywords: [
              __( 'Image', 'mfgb' ),
              __( 'MediaUpload', 'mfgb' ),
              __( 'Message', 'mfgb' ),
          ],
          attributes: {
              title: {
                  type: 'array',
                  source: 'children',
                  selector: 'h2',
              },
              content: {
                  type: 'array',
                  source: 'children',
                  selector: 'p',
              },
              backgroundImage: {
                  type: 'string',
                  default: '', // no image by default!
              },
              contentControl: {
                  type: 'boolean',
                  default: false,
              },
          },
  
          edit: props =&gt; {
  
            const { attributes: { title, content, backgroundImage, contentControl, Component },
                className, setAttributes } = props;
  
            const toggleContentControl = () =&gt; setAttributes( { contentControl: ! contentControl } );
  
            function onTitleChange(changes) {
              setAttributes({
                  title: changes
              });
            }
  
            function onContentChange(changes) {
              setAttributes({
                  content: changes
              });
            }
  
            function onImageSelect(imageObject) {
              setAttributes({
                  backgroundImage: imageObject.sizes.full.url
              })
            }
  
            return ([
              &lt;InspectorControls&gt;
  
                &lt;PanelBody
                    title={ __( 'Tekst opties', 'mfgb' ) }
                &gt;
                    &lt;PanelRow&gt;
                        &lt;label
                            htmlFor="has-text-form-toggle"
                        &gt;
                            { __( 'Bevat deze banner tekst?', 'mfgb' ) }
                        &lt;/label&gt;
                        &lt;FormToggle
                            id="has-text-form-toggle"
                            label={ __( 'Bevat tekst...', 'mfgb' ) }
                            checked={ contentControl }
                            onChange={ toggleContentControl }
                        /&gt;
                    &lt;/PanelRow&gt;
                &lt;/PanelBody&gt;
  
                &lt;PanelBody
                    title={ __( 'Selecteer een achtergrond afbeelding', 'mfgb' ) }
                &gt;
                  &lt;PanelRow&gt;
                      &lt;MediaUpload
                          onSelect={onImageSelect}
                          type="image"
                          value={backgroundImage} // make sure you destructured backgroundImage from props.attributes!
                          render={ ( { open } ) =&gt; (
                              &lt;Button
                                  className={ "button button-large" }
                                  onClick={ open }
                              &gt;
                                  { icons.upload }
                                  { __( ' Upload Image', 'mfgb' ) }
                              &lt;/Button&gt;
                          ) }
                      /&gt;
                      &lt;img src={backgroundImage} /&gt;
                  &lt;/PanelRow&gt;
              &lt;/PanelBody&gt;
  
              &lt;/InspectorControls&gt;,
              &lt;div
                  className={className}
                  style={{
                      backgroundImage: `url(${backgroundImage})`,
                      backgroundSize: 'cover',
                      backgroundPosition: 'center'
                  }}&gt;
                  &lt;div className="overlay"&gt;&lt;/div&gt; {/* Adding an overlay element */}
  
                  { contentControl == true &amp;&amp;
                    &lt;div&gt;
                      &lt;RichText
                          tagName="h2"
                          className="title" // adding a class we can target
                          value={title}
                          onChange={onTitleChange}
                          placeholder="Voer de titel in"
                      /&gt;
                      &lt;RichText
                          tagName="p"
                          className="content" // adding a class we can target
                          value={content}
                          onChange={onContentChange}
                          placeholder="Voer de text in..."
                      /&gt;
                  &lt;/div&gt;
                  }
  
              &lt;/div&gt;
            ]);
          },
          save: props =&gt; {
            const { attributes, className } = props;
            const { title, content, contentControl, backgroundImage } = props.attributes;
  
            return (
                &lt;div
                className={className}
                style={{
                      backgroundImage: `url(${backgroundImage})`,
                      backgroundSize: 'cover',
                      backgroundPosition: 'center'
                  }}&gt;
                    &lt;div className="overlay"&gt;&lt;/div&gt;
                    {/* the class also needs to be added to the h2 for RichText */}
                    { contentControl == true &amp;&amp; (
                    &lt;h2 class="title"&gt;{title}&lt;/h2&gt;
                    )}
                    { contentControl == true &amp;&amp; (
                    &lt;p class="content"&gt;{content}&lt;/p&gt;
                    )}
                &lt;/div&gt;
            );
          },
      },
  );
  </code></pre>