title: WordPress Gutenberg Register Multiple Custom Blocks
body: <p>I am trying to create several custom blocks within Gutenberg. It is only allowing me to register one at a time.</p>
  
  <p>I have tried combining <code>recipe_card_block()</code> and <code>first_block()</code> but that doesn't help. </p>
  
  <p>Both blocks work correctly individually. If I remove <code>recipe_card_block()</code>, <code>first_block()</code> will appear in the inserter (and vice versa). However, when both are present only the first one will show up. Changing the order in which they are registered affects which one appears. </p>
  
  <p>It seems to me they are somehow overwriting each other, but I don't see how that's happening.</p>
  
  <p>Here is the code in <code>functions.php</code>.</p>
  
  <pre><code>function recipe_card_block(){
      wp_register_script(
          'recipe-card-script', // name of script
          get_template_directory_uri() . '/js/recipe-card.js', // path to script
          array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ) // dependencies
      );
  
      wp_register_style(
          'recipe-card-style',
          get_template_directory_uri() . '/css/recipe-card-style.css',
          array( 'wp-edit-blocks' )
      );
  
      register_block_type('gadam/recipe-card', array(
          'editor_script' =&gt; 'recipe-card-script', // default script / script to define behavior within the editor
          'style'         =&gt; 'recipe-card-style' // default styles
      ) );
  }
  add_action( 'init', 'recipe_card_block' );
  
  function first_block(){
      wp_register_script(
          'first-block-script', // name of script
          get_template_directory_uri() . '/js/first-block.js', // path to script
          array( 'wp-blocks', 'wp-element', 'wp-editor' ) // dependencies
      );
      // styles for editor view
      wp_register_style(
          'first-block-editor-style',
          get_template_directory_uri() . '/css/first-block-editor-style.css',
          array( 'wp-edit-blocks' )
      );
      // default styles
      wp_register_style(
          'first-block-style',
          get_template_directory_uri() . '/css/first-block-style.css',
          array( 'wp-edit-blocks' )
      );
  
      register_block_type('gadam/first-block', array(
          'editor_script' =&gt; 'first-block-script', // default script / script to define behavior within the editor
          'editor_style'  =&gt; 'first-block-editor-style', // styles for editor view
          'style'         =&gt; 'first-block-style' // default styles
      ) );
  }
  add_action( 'init', 'first_block' );
  </code></pre>
  
  <p>This is the code in <code>first-block.js</code></p>
  
  <pre><code>const { registerBlockType } = wp.blocks;
  const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
  const { Fragment } = wp.element;
  
  registerBlockType( 'gadam/first-block', {
      title: 'First Block',
      icon: 'welcome-learn-more',
      category: 'custom-blocks',
  
      attributes: {
          content: {
              type: 'string',
              source: 'html',
              selector: 'p'
          },
          alignment: {
              type: 'string'
          },
          fontSize: {
              type: 'number',
              default: 18
          }
      },
  
      edit( { attributes, className, setAttributes } ) {
          const { content, alignment, fontSize } = attributes;
          const fontSizes = [
              {
                  name: 'Small',
                  slug: 'small',
                  size: 14
              },
              {
                  name: 'Normal',
                  slug: 'normal',
                  size: 18
              },
              {
                  name: 'Large',
                  slug: 'large',
                  size: 24
              }
          ];
  
          function onChangeContent( newContent ) {
              setAttributes( { content: newContent } );
          }
  
          function onChangeAlignment( newAlignment ) {
              setAttributes( { alignment: newAlignment } );
          }
  
          function onChangeFontSize( newFontSize ) {
              setAttributes( { fontSize: newFontSize } );
          }
  
          return (
              &lt;Fragment&gt;
                  &lt;BlockControls&gt;
                      &lt;AlignmentToolbar
                          value={ alignment }
                          onChange={ onChangeAlignment }
                      /&gt;
                  &lt;/BlockControls&gt;
                  &lt;InspectorControls&gt;
                      &lt;AlignmentToolbar
                          value={ alignment }
                          onChange={ onChangeAlignment }
                      /&gt;
                      &lt;FontSizePicker
                          fontSizes={ fontSizes }
                          value={ fontSize }
                          onChange={ onChangeFontSize }
                      /&gt;
                  &lt;/InspectorControls&gt;
                  &lt;RichText
                      key="editable"
                      tagName="p"
                      className={ className }
                      style={ { textAlign: alignment, fontSize: fontSize } }
                      onChange={ onChangeContent }
                      value={ content }
                  /&gt;
              &lt;/Fragment&gt;
          );
      },
  
      save( { attributes } ) {
          const { content, alignment, fontSize } = attributes;
          const baseClass = 'wp-block-gadam-first-block';
  
          return (
              &lt;div class="container"&gt;
                  &lt;div class={ baseClass }&gt;
                      &lt;RichText.Content
                          style={ { textAlign: alignment, fontSize: fontSize } }
                          value={ content }
                          tagName="p"
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      },
  } );
  </code></pre>
  
  <p>And finally, this is <code>recipe-card.js</code></p>
  
  <pre><code>const { registerBlockType } = wp.blocks;
  const { RichText, BlockControls, InspectorControls, AlignmentToolbar, FontSizePicker } = wp.editor;
  const { Fragment } = wp.element;
  
  registerBlockType( 'gadam/recipe-card', {
      title: 'Recipe Card',
      icon: 'index-card',
      category: 'custom-blocks',
  
      attributes: {
          content: {
              type: 'string',
              source: 'html',
              selector: 'p'
          },
          alignment: {
              type: 'string'
          },
          fontSize: {
              type: 'number',
              default: 18
          }
      },
  
      edit( { attributes, className, setAttributes } ) {
          const { content, alignment, fontSize } = attributes;
          const fontSizes = [
              {
                  name: 'Small',
                  slug: 'small',
                  size: 14
              },
              {
                  name: 'Normal',
                  slug: 'normal',
                  size: 18
              },
              {
                  name: 'Large',
                  slug: 'large',
                  size: 24
              }
          ];
  
          function onChangeContent( newContent ) {
              setAttributes( { content: newContent } );
          }
  
          function onChangeAlignment( newAlignment ) {
              setAttributes( { alignment: newAlignment } );
          }
  
          function onChangeFontSize( newFontSize ) {
              setAttributes( { fontSize: newFontSize } );
          }
  
          return (
              &lt;Fragment&gt;
                  &lt;BlockControls&gt;
                      &lt;AlignmentToolbar
                          value={ alignment }
                          onChange={ onChangeAlignment }
                      /&gt;
                  &lt;/BlockControls&gt;
                  &lt;InspectorControls&gt;
                      &lt;AlignmentToolbar
                          value={ alignment }
                          onChange={ onChangeAlignment }
                      /&gt;
                      &lt;FontSizePicker
                          fontSizes={ fontSizes }
                          value={ fontSize }
                          onChange={ onChangeFontSize }
                      /&gt;
                  &lt;/InspectorControls&gt;
                  &lt;RichText
                      key="editable"
                      tagName="p"
                      className={ className }
                      style={ { textAlign: alignment, fontSize: fontSize } }
                      onChange={ onChangeContent }
                      value={ content }
                  /&gt;
              &lt;/Fragment&gt;
          );
      },
  
      save( { attributes } ) {
          const { content, alignment, fontSize } = attributes;
          const baseClass = 'wp-block-gadam-recipe-card';
  
          return (
              &lt;div class="container"&gt;
                  &lt;div class={ baseClass }&gt;
                      &lt;RichText.Content
                          style={ { textAlign: alignment, fontSize: fontSize } }
                          value={ content }
                          tagName="p"
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      },
  } );
  </code></pre>