Convert Shortcode to Dynamic Block

This tutorial will look at converting our scbdemo shortcode to a dynamic block.

Watch: Convert Shortcode to Dynamic Block

Convert shortcode to a block – The Process.

To convert our shortcode to a block, we will do the following.

First, we will remove the block’s register method from the plugin’s main file (scbdemo.php). We will handle the block registration from elsewhere.

Create a block folder within the src.

Within the src folder, create a new folder and call it scbdemo.

Move all the block-related files initially in the src folder to the new scbdemo sub-folder. That is the block.json., edit.js, editor.scss, index.js and style.scss all move to the new scbdemo sub-folder.

We create a folder for each block inside the src. We do this so that when we decide to have more blocks within the plugin, we create a folder for each.

If we decide to create another block called newblock, the src folder will have two folders that are;

• scbdemo – for the current block
• newblock – for the new block.

We will see how this works in another chapter of this course.

Run a new build with the command npm run build to recompile the code and generate new build files for the block.

You will observe that the new build folder also has its scbdemo sub-folder. This sub-folder contains all the build files from the scbdemo block inside the src folder.

Scbdemo Block Class – Scbdemo.php

To convert the shortcode to a block, we will create Scbdemo class inside the Blocks folder. This class will handle all this block’s PHP code. To execute this;

• Go to the core/Blocks directory.
• Create a file called Scbdemo.php. This is the class our block.
• Paste the code below into the Scbdemo.php file.

Code explanation.

Line 8

Define the namespace for this class. Since we are in .core/Blocks, our namespace will be MRK_Scbdemo\Blocks.

Line 10: We import the BaseController class. We may use it to access plugin paths in future.

Line 15-51

On line 15: Defines the Scbdemo class, which extends the BaseController class.

Line 22-24: This is the block class’ register method. It registers the add_action hook, which calls the create_scbdemo_init function.

Let’s first jump to lines 42 – 50, where we define the create_scbdemo_init callback method. This method registers our block from the metadata inside the build/scbdemo/ directory.

When rendering the block, it calls the get_scbdemo_shortcode method.

Line 33 – 35

The get_scbdemo_shortcode method returns the shortcode [mrk_scbdemo]. We have seen what this shortcode does in the previous guide.

In summary, the Scbdemo class block does three things;

• Register the add_action hook that calls the create_scbdemo_init function.
• Register the block using the create_scbdemo_init function.
• Render the shortcode output inside the block using the get_scbdemo_shortcode function.

Register the Block Class in Init.php

Go to the Init.php file and add the Scbdemo block class in the get_services array.

Our scbdemo block is now ready it class will be registered as a service when the Init Class runs.

Converting a static block to a dynamic block.

We have a static block, which we need to convert to a dynamic block.

By default, static blocks return React output, but in this tutorial, we need our block to render PHP output. Follow the steps below to convert the static block to a dynamic block.

Remove the save.js

• Go to index.js and remove the save component.
• Change the save value to props that return a null value.

• Delete the save.js file in the src/scbdemo folder since we no longer need it.

ServerSide Rendering – edit.js

We will use the Serverside Render React component to render our shortcode output. To use this;

• Go to the edit.js
• Import the ServerSiderRender component. This component within React works with the block builder to return a function.

Edit function changes

We need to make some changes to the Edit Function.

• Add attributes as parameters of the Edit function. These attributes are similar to shortcode attributes. For now, we are not using any attributes for our block.
• Change the block props to a constant.
• Set the response to return the ServerSideRender component, which will return the scbdemo block.
• If we have any attributes, we pass them into the block via line 41.

Run a build.

After making these changes to our src files, run a build to recompile the code.