javascriptwordpressimagepluginsgutenberg-blocks

How can be written wp.element.createElement('img' into a registerBlockType?


I am looking for a solution to this question about WordPress Blocks. I have a plugin that create a brand new block of an img tag. I would know how to display it in the wp.blocks.registerBlockType function. Thanks in advice!

In the code of the js file I have put this for the result part:

save: function(props) {
return wp.element.createElement(
'img', {src: "https://api.nasa.gov/assets/img/general/apod.jpg"}
);
}

It's not correct. WordPress display the Attempt Recovery message. What is wrong with it?


Solution

  • I found the problem with it!

    The wp.blocks.registerBlockType needs title, icon, category, attributes and an edit function before the save function.

    The correct code is here:

    wp.blocks.registerBlockType('brad/border-box', {
        title: 'Test Image Block',
        icon: 'marker',
        category: 'common',
        attributes: {
            content: {type: 'string'},
            color: {type: 'string'}
        },
     
        edit: function(props) {
            return React.createElement(
                "div",
                null,
                React.createElement("h3",null,"Test Image Block")
            );
        },
    
        save: function(props) {
          return wp.element.createElement(
            'img', 
            {src: "https://api.nasa.gov/assets/img/general/apod.jpg"}
          );
        }
    });