How to add block preview in Gutenberg

How to Add Block Preview

Block Preview Image is an important part of showing a visual look of any Gutenberg block. It gives a clear visualization of the block to the users. As a result, users can easily understand the look and feel of the block and its functionalities.

What is Block Preview in Gutenberg

Block preview is a visual look of a block that users can easily see before inserting the block in the main editor. A user can see the block’s look and its functionalities without inserting the block.

Get Beaf Slider Pro

BEAF - Before After Comparison Slider

For example, if we want to use the Fixed Content slider from the GutSlider Gutenberg Block from the blocks insert library, we have to hover over the block, when we hover we can see the Fixed Content Slider block preview image like this:-

GutSlider’s Fixed Content Slider Block Preview

Add Block Preview Image to Custom Block

Basically, there are two ways to add a block preview image in your custom block. You can either generate the preview automatically passing your block’s attribute values or use a custom image as a block preview just like as GutSlider block.

I will explain both ways so that you can understand both of them and apply any one as per your needs. Let’s try the first one where we will generate the block preview automatically by passing the block attributes’ values.

I hope you are using the block.json file to register your custom block. If you explore all of the properties of the block.json file, you will find a property called the example. It is an object type and you can see this object has an “attributes” property which is also an object of your custom block’s all attributes. So, simply add some default values for the block’s attributes. For example, I have a custom block called “GutSlider Block” that has a number of attributes. Now, I want to pass the default value for only one attribute called “title”. So, my codes are in the block.json file for the example property is like the below screenshot:-

"example": {
 "attributes": {
  "title": "Hello GutSlider Block"
 }
}

Block Preview Generates Automatically from Attributes

How to Add a Custom Image as Block Preview

Since we want to show a custom image, at first we have to pass the custom image to your block’s script so that we can easily use it. For example, we have the custom image inside an assets folder in our plugin. To send the image to our block’s script, you have to use wp_localize_script(). So, connect a PHP file and write the following codes [modify the codes as per your need].

function enqueue_editor_assets(){
    wp_localize_script(
        'gutslider-blocks-modules-script',
        'gutslider_preview',
        [
            'fixed_content'      => trailingslashit( GUTSLIDER_URL ) . 'assets/images/content-slider.svg'
        ]
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_editor_assets' );

In the above codes, I have passed the custom SVG image for the Fixed Content Slider using the gutslider_preview parameter.

Now, declare a new attribute called preview for your block. In my case, I am writing my all attributes in the block.json file. So, my new custom preview attribute looks like this:-

"attributes": {
    "preview": {
        "type": "boolean",
        "default": false
    }
}

We will change the preview attribute’s default value in the example property like this:-

"example": {
    "attributes": {
        "preview": true
    }
},

Simply go to the edit function of the custom block. I hope you already know about the Edit function. In the edit function before rendering the block’s actual content, let’s check the preview attribute’s value and if the preview is true, then return the image inside the img tag, it looks like this:-

function edit({attributes}) {
 const { preview } = attributes;

 // block preview
    if (preview) {
        return (
            <div className="gutslider-preview">
                <img src={gutslider_preview.fixed_content} alt="Preview" />
            </div>
        );
    }

 return (
  ...
 )
}

Great, now the custom image has been added as the block preview for our custom block, it now it looks like this:-

Custom Image Block Preview

Conclusion

At the end of this article, I expect that you have understood each point and found the best way that suits your needs. Now, don’t hesitate, simply follow the best way that you like and implement it in your custom block. So that your users can get an awesome visual look for your block.