title: How to fix 'Error loading block: Invalid parameter(s): attributes' error in WordPress
body: <p>I am attempting to extend an existing block which is registered in the Tasty Recipes plugin. I've added a control to the sidebar to handle selection of a given diet type, however when an option is selected, the following error is displayed: </p>
  
  <blockquote>
    <p>Error loading block: Invalid parameter(s): attributes</p>
  </blockquote>
  
  <p>Currently running on WordPress 5.2.1 and I am attempting to extend the <a href="https://www.wptasty.com/tasty-recipes" rel="nofollow noreferrer">Tasty Recipes Plugin</a></p>
  
  <h1>extendTastyRecipes.js</h1>
  
  <pre><code>/**
   * Add custom attribute to store diet type
   */
  
  var addCustomAttributes = function( settings, name ) {
  
      if ( name !== 'wp-tasty/tasty-recipe' ) {
          return settings;
      }
  
      settings.attributes = Object.assign( settings.attributes, {
          dietType: {
              type: 'string',
              // ? Setting default here causes break
          },
      } );
  
      return settings;
  }
  
  wp.hooks.addFilter( 'blocks.registerBlockType', 'wp-tasty/tasty-recipe', addCustomAttributes );
  
  
  /**
   * Create HOC to add diet type control to inspector controls of block.
   */
  var el = wp.element.createElement;
  var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
      return function ( props ) {
  
          function onChangeDietType (newDietType) {
              props.setAttributes( { dietType: newDietType } );
          }
  
          return el(
              wp.element.Fragment,
              {},
              el(
                  BlockEdit,
                  props
              ),
              el(
                  wp.editor.InspectorControls,
                  {},
                  el(
                      wp.components.PanelBody,
                      {},
                      el (
                          wp.components.SelectControl,
                          {
                              label: 'Diet Type',
                              onChange: onChangeDietType,
                              options: [
                                  { label: 'Paleo', value: 'paleo' },
                                  { label: 'Vegan', value: 'vegan' },
                                  { label: 'Vegetarian', value: 'vegetarian' },
                              ],
                          },
                      )
                  )
              )
          );
      };
      }, 'withInspectorControls' );
      wp.hooks.addFilter( 'editor.BlockEdit', 'wp-tasty/tasty-recipe', withInspectorControls );
  
  
      /**
       * Not sure this is even necessary as the plugin I'm extending handles rendering on server
       *  -- extra --
       * @param {Object} extraProps 
       * @param {Object} blockType 
       * @param {Object} attributes 
       */
      function addSaveProps( element ) {
          return element; // This returns null
      }
      wp.hooks.addFilter( 'blocks.getSaveElement', 'wp-tasty/tasty-recipe', addSaveProps );
  </code></pre>
  
  <h1>functions.php</h1>
  
  <pre class="lang-php prettyprint-override"><code>function extendTastyRecipes() {
  
      $blockPath = get_stylesheet_directory_uri() . '/assets/scripts/modules/extendTasyRecipes.js';
  
      wp_enqueue_script(
          'extend-tasty-recipes-js',
          $blockPath,
          [ 'wp-i18n', 'wp-edit-post', 'wp-element', 'wp-editor', 'wp-components', 'wp-data', 'wp-plugins', 'wp-edit-post', 'wp-api' ]
      );
  }
  add_action('init', 'extendTastyRecipes');
  </code></pre>
  
  <p>Hoping I'm missing something simple... Not entirely familiar with Gutenberg so I could definitely just be misunderstanding the docs.</p>