How to Create a Production Ready Plugin From Your Block Build

You’ve finished developing your block locally using command line with node.js modules but you don’t understand which files to use in your production copy for your users.

There’s 2 ways to create a zipped plugin ready for activation in a WordPress installation :

1. You can follow the instructions below and get this done manually or
2. You can run command line as follows :

npm run plugin-zip

The following instructions enable you to manually create a production ready plugin folder from the files inside your build directory and also show you how to modify the code in your main plugin.php file to make sure the path is correct.

There’s 4 steps :

1. Create a Production Folder

Simply create a new folder named anything you like to store your production ready files. In this example, we name it production.

2. Copy Required Files FRom Build Folder

• block.json
• index.asset.php
• index.js
• render.php
• style-index.css

An explanation of what these files do is provided at the end of this tutorial.

Note : You may have more files that need adding so add all required files your plugin will be using from your build folder.

3. Copy Main Plugin File

Copy over your main plugin.php file regardless of what it’s named.

4. Edit Path In Main Plugin File

Your main plugin file will include a function named register_block_type. Edit the path from this :

add_action( 'init', 'your_block_init' );
function your_block_init() {
register_block_type( __DIR__ . '/build/sample' );
}

To this :

add_action( 'init', 'production_block_init' );
function production_block_init() {
	register_block_type( __DIR__ );
}

You can also modify any of the details in your main plugin.php file header.

Note: The production folder should be much smaller than your development directory since it excludes all development-related files including source ( src ) files and node modules.

You can structure your files so you only have around 6 ( yours maybe more or less ) in your plugins root directory like this :

Required Files and Their Functions :

• your-plugin.php
  Main plugin file that registers the block and handles plugin initialization.
  Contains the plugin header information and core functionality.
• block.json
  Block configuration file that defines the block’s attributes, supports, and settings. WordPress uses this to register the block and its properties.
• index.js
  Compiled JavaScript file containing the block’s editor functionality.
  Handles how the block behaves in the WordPress editor.
• index.asset.php
  Contains the list of dependencies required by the block’s JavaScript.
  WordPress uses this to properly load scripts and styles.
• render.php
  Template file that defines how the block is rendered on the frontend.
  Contains the HTML structure and PHP logic for displaying the block.
• style-index.css
  Compiled CSS file containing all the block’s styles.
  Applied to both the editor and frontend display.

Related Tutorials

• How To Create a Gutenberg Block for WordPress