title: How do I properly deprecate Gutenberg block
body: <p>I have a custom Gutenberg block (<a href="https://pastebin.com/bV2k5Ekc" rel="nofollow noreferrer">https://pastebin.com/bV2k5Ekc</a>) in which I display text, link and an image. I want to change it so so instead of saving the image URL as a background image of the container, to use an img tag. Unfortunately - I can't manage to create the deprecation correctly - I fail at assigning the attributes parameters in the deprecation:</p>
  <p>From this:</p>
  <pre><code>    const {
        attributes: {
          mediaURL,
          boxTitle,
          boxDescription,
          linkText,
          linkHref,
          linkTitle
        },
        className,
      } = props;
  
      let boxClass = 'cta-box';
      let contentDescription = '';
  
      if (boxDescription.length) {
        boxClass += ' cta-box-description';
        contentDescription = (
          &lt;p&gt;
            {boxDescription}
          &lt;/p&gt;
        )
      }
  
      return (
        &lt;div className={`cta-block-box ${className}`}&gt;
          &lt;a
            className=&quot;cta-box-link&quot;
            href={linkHref}
            style={{ backgroundImage: &quot;url(&quot; + mediaURL + &quot;)&quot; }}
            rel=&quot;noopener noreferrer&quot;
          &gt;
            &lt;div className={boxClass}&gt;
              &lt;h3&gt;
                {boxTitle}
              &lt;/h3&gt;
              {contentDescription}
              &lt;span className=&quot;arrow&quot;&gt;{linkText ? linkText : linkTitle}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      );
    },
  </code></pre>
  <p>To this (I only change what's in the return statement):</p>
  <pre><code>return (
        &lt;div className={`cta-block-box ${className}`}&gt;
          &lt;a
            className=&quot;cta-box-link&quot;
            rel=&quot;noopener noreferrer&quot;
          &gt;
            &lt;img className=&quot;cta-box-image&quot; src={linkHref} alt=&quot;&quot;/&gt;
            &lt;div className={boxClass}&gt;
              &lt;h3&gt;
                {boxTitle}
              &lt;/h3&gt;
              {contentDescription}
              &lt;span className=&quot;arrow&quot;&gt;{linkText ? linkText : linkTitle}&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      );
  </code></pre>
  <p>Which of course broke the Gutenberg element. So I added a deprecate to the blog, as much as I could following the official Wordpress documentation:</p>
  <pre><code>deprecated: [
      {
        attributes: {...this.attributes},
        save: (props) =&gt; {
          const {
            attributes: {
              mediaURL,
              boxTitle,
              boxDescription,
              linkText,
              linkHref,
              linkTitle
            },
            className,
          } = props;
          console.log('dep');
          console.log(props);
  
          let boxClass = 'cta-box';
          let contentDescription = '';
  
          if (boxDescription.length) {
            boxClass += ' cta-box-description';
            contentDescription = (
              &lt;p&gt;
                {boxDescription}
              &lt;/p&gt;
            )
          }
  
          return (
            &lt;div className={`cta-block-box ${className}`}&gt;
              &lt;a
                className=&quot;cta-box-link&quot;
                style={{ backgroundImage: &quot;url(&quot; + mediaURL + &quot;)&quot; }}
                rel=&quot;noopener noreferrer&quot;
              &gt;
                &lt;div className={boxClass}&gt;
                  &lt;h3&gt;
                    {boxTitle}
                  &lt;/h3&gt;
                  {contentDescription}
                  &lt;span className=&quot;arrow&quot;&gt;{linkText ? linkText : linkTitle}&lt;/span&gt;
                &lt;/div&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          );
        },
      }
    ],
  </code></pre>
  <p>After this the editor page crashes, and I get error message in console, that attributes is not defined (displaying incorrect row in the script file). This is the &quot;after&quot; script contents (<a href="https://pastebin.com/dVdLMx7N" rel="nofollow noreferrer">https://pastebin.com/dVdLMx7N</a>).</p>
  <pre><code>react-dom.min.js?ver=16.13.1:125 ReferenceError: attributes is not defined
      at save (cta-box2.js?f66a:242)
      at Wt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
      at Qt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
      at block-editor.min.js?ver=4378547cec8f5157a02ead3dfc5c65b2:12
      at hooks.min.js?ver=50e23bed88bcb9e6e14023e9961698c1:2
      at $r (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
      at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3
      at Ur (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
      at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3
      at Array.reduce (&lt;anonymous&gt;)
  </code></pre>
  <p>Any help would be greatly appreciated! I suspect I'm missing some small detail, but so far I've failed to locate it. And was not able to find relevant enough information on the web.</p>
  <p>Thanks in advance!</p>