Blocks That You Don’t Need to Resave When You Edit Them

Standard WordPress blocks have a problem. If you edit the “save” parameter at all, you have to go to each post and resave it for the changes to be brought to the front end of that post.

This is a deal breaker, so let’s see how to make PHP handle this for us.

In our block plugin, in the index.js, instead of returning the content for our plugin in the save attribute, we return null and delete any deprecated content.

Remove the save

p.blocks.registerBlockType("ourplugin/are-you-paying-attention", {
    title: "Are You Paying Attention?",
    icon: "smiley",
    category: "common",
    attributes: {
      skyColor: { type: "string" },
      grassColor: { type: "string" }
    },
    // The admin edit screen.
    edit: function (props) {
        function updateSkyColor(event) {
            props.setAttributes({skyColor: event.target.value})
        }
        function updateGrassColor(event) {
           props.setAttributes({grassColor: event.target.value})
        }

        return (
            <div>
                <p>Are You Paying Attention?</p>
                <input type="text" placeholder="Sky Color" value={props.attributes.skyColor} onChange={updateSkyColor} />
                <input type="text" placeholder="Grass Color" value={props.attributes.grassColor} onChange={updateGrassColor} />
            </div>
        )
    },
    save: function (props) {
        return null
    }
})

/*
 * This is the standard way. However, if you change any of the HTML and 
 * add the deprecated version, you'd have to go and re-save every post 
 * where this block was used.

    save: function (props) {
        return (
            <>
                <h1>This is the front end, and it's hard coded.</h1>
                <h2>Today the sky is completely and totally {props.attributes.skyColor} and the grass is {props.attributes.grassColor}.</h2>
            </>
        )
    },
    
    deprecated: [{
        attributes: {
            skyColor: { type: "string" },
            grassColor: { type: "string" }
        },
        save: function (props) {
            return (
                <>
                    <h1>This is the front end and it's hard coded.</h1>
                    <h3>Today the sky is completely {props.attributes.skyColor} and the grass is {props.attributes.grassColor}.</h3>
                </>
            )
        },
    },
        {
        attributes: {
            skyColor: { type: "string" },
            grassColor: { type: "string" }
        },
        save: function (props) {
            return (
                <>
                    <h1>This is the front end and it's hard coded.</h1>
                    <p>Today the sky is {props.attributes.skyColor} and the grass is {props.attributes.grassColor}.</p>
                </>
            )
        }
    }]
})*/

Update the PHP

In your main index.php, we will reference the index.js and then let the PHP output the static portions of the plugin.

class AreYouPayingAttention {
	function __construct() {
		// We no longer load the Javascript file with the 'enqueue_block_editor_assets' hook so we use 'init' instead.
		add_action('init', array($this, 'adminAssets'));
	}

	function adminAssets() {
		wp_register_script('ourNewBlockType', plugin_dir_url(__FILE__) . 'build/index.js', array('wp-blocks'), 'wp-element');
		// We need to register the new block type now, use the name from wp.blocks.registerBlockType in the index.js file. 
		register_block_type('ourplugin/are-you-paying-attention', array(
		        // Pass register block type the editor script from what we registared above.
			'editor_script' => 'ourNewBlockType',
			// Pass the registar block type the HTML from a method in this class.
			'render_callback' => array($this, 'theHTML')
		));
	}

	function theHTML($attributes) {
	        // The attributes get passed via the "render_callback" so we have access to them. 
	        // You don't have to call this var "$attributes".
		return '<h1>The sky is ' . $attributes['skyColor'] . ' and the grass is ' .  $attributes['grassColor'] . '.</h1>';
	}
}

See the Udemy video where I learned about this. It’s the “Let’s discuss the output of our block Part 1 and 2” lectures.