Creating a server side rendered Gutenberg block
Creating your first server side rendered WordPress Gutenberg block can seem like a daunting task, but with a little bit of guidance, it can be a straightforward process.
Setting up the plugin
Once you have the WordPress environment set up, the next step is to create a new plugin. This can be done by creating a new directory in the “wp-content/plugins” directory and giving it a unique name. In this directory, create a new file named “index.php” and add the plugin header information at the top of the file:
<?php
/*
Plugin Name: My First Server Side Rendered Block
Plugin URI: https://example.com/my-first-block
Description: This is my first server side rendered block for WordPress.
Version: 1.0
Author: Your Name
Author URI: https://example.com
License: GPL2
*/
Define your block with a block.json file
Next, create a new file named “block.json” in the same directory and define the metadata for the block:
{
"name": "my-plugin/my-first-block",
"title": "My First Block",
"description": "This is my first server side rendered block for WordPress.",
"category": "widgets",
"icon": "admin-site",
"keywords": [
"hello",
"world"
],
"example": {
"attributes": {},
"innerBlocks": [],
"innerHTML": ""
},
"supports": {
"html": false
},
"scripts": [
"my-first-block.js"
],
"styles": []
}
Creating the block
With the block.json file in place, you can now create the actual block using the WordPress block API. To do this, add the following code to your plugin file:
function my_first_block() {
wp_register_script(
'my-first-block-script',
plugins_url( 'my-first-block.js', __FILE__ ),
array( 'wp-blocks', 'wp-element' )
);
register_block_type( 'my-plugin/my-first-block', array(
'editor_script' => 'my-first-block-script',
'render_callback' => 'my_first_block_render',
'block_json' => 'block.json'
) );
}
add_action( 'init', 'my_first_block' );
function my_first_block_render( $attributes ) {
return 'Hello World';
}
You may leave my-first-block.js empty, or not include it at all. If you use the script above, make sure you create at least create an empty file called my-first-block.js!
The heart of the server side rendering lies in the my_first_block_render
function. This function is responsible for rendering the block’s content on the front end of the website. In this example, it simply returns the string “Hello World”. However, in a real-world scenario, you would typically use this function to retrieve data from the database, manipulate the data, and return the result to be displayed on the front end.
The my_first_block_render
function takes in an $attributes
parameter, which is an array that contains any attributes that have been set for the block in the editor. You can use this information to retrieve and manipulate the data that is specific to this particular instance of the block.
The my_first_block_render
function is passed to the register_block_type
function as the render_callback
parameter, so that it is called every time the block is rendered on the front end.
In conclusion, server side rendering is a crucial part of creating blocks in WordPress, and the my_first_block_render
function is at the center of this process. Whether you’re simply returning a string or retrieving and manipulating data from the database, this function is the key to creating dynamic, data-driven blocks that can enhance the user experience on your WordPress site.
More tutorials
Learn Gutenberg block building – Create a block that renders an ACF field
With this tutorial, you’ll learn how to create a custom Gutenberg block that displays an ACF field on the front-end of your…
Read more Learn Gutenberg block building – Create a block that renders an ACF field
What is the theme.json in WordPress Full Site Editing?
Short introduction to the theme.json file that defines a WordPress full site editing theme. Includes useful resources to learn more!
Read more What is the theme.json in WordPress Full Site Editing?
Admin styles and scripts
Adding custom styles to WordPress Gutenberg blocks is easy and at the same time extremely useful when developing your website.