Block deprecation - a tutorial

block-deprecation-challenge.js

/**
 *  block.js
 **/
{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "create-block/deprecation-example",
  "version": "0.1.0",
  "title": "Deprecation Example",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "supports": {
    "html": false
  },
  "textdomain": "deprecation-example",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "attributes": {
    "content": {
      "type": "string",
      "source": "html",
      "selector": "div",
      "default": "Deprecation Test"
    }
  }
}

/**
 *  edit.js
 **/
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {

  const onChangeContent = ( val ) => {
    setAttributes( { content: val } )
  }
  
  return (
    <RichText { ...useBlockProps() }
      tagName="div"
      onChange={ onChangeContent }
      value={ attributes.content }
      placeholder="Enter text here..."
    />
  )
}

/**
 *  save.js
 **/
import { useBlockProps, RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
	return (
    <RichText.Content { ...useBlockProps.save() }
 			tagName="div"
     	value={ attributes.content }
   	/>
	);
}

/**
 *  deprecated.js
 **/
import { useBlockProps, RichText } from '@wordpress/block-editor';

const v1 = {
  save() {
    return (
      <p { ...useBlockProps.save() }>
        { 'Deprecation Example – hello from the saved content!' }
      </p>
    );
  }
}

const v2 = {
  save() {
    return (
      <p { ...useBlockProps.save() }>
        { 'Deprecation Example – hi from the saved content!' }
      </p>
    );
  }
}
  
const v3 = {

  attributes: {
    text: {
      type: 'string',
      source: 'html',
      selector: 'p',
    },
  },

  migrate( { text } ) {
    return {
      content: text,
    };
  },
  
  save( { attributes } ) {
    return (
      <RichText.Content { ...useBlockProps.save() }
        tagName="p"
        value={ attributes.text }
      />
    );
  }
}

const v4 = {
 save( { attributes } ) {
   return (
     <RichText.Content { ...useBlockProps.save() }
       tagName="p"
       value={ attributes.content }
     />
   )
 }
}

export default [ v4, v3, v2, v1 ];