Make Your WordPress Shortcode Available in the Block Inserter

If you’ve created a custom shortcode in WordPress and want to make it easier to insert with the Gutenberg block editor, adding it to the block inserter as a custom block is an excellent solution.
This article will explain you complete road map about how to use the WordPress block inserter to register a custom shortcode block and make it accessible.

Fast And Secure Hosting For WordPress

Experience lightning-fast speed, rock-solid security, and world-class support tailored for WordPress. Simply better hosting.

Grab Deal Upto 50% OFF

Why Add Shortcodes via the Block Inserter?

While shortcodes can still be added using the classic shortcode block, creating a custom block improves usability for editors and clients. It allows your shortcode to:

• Be easily accessible from the block inserter
• Provide a visual name and icon
• Optionally accept user input via block attributes

Also Read: Extra Fees or Additional Charges in WooCommerce

How to Add a Custom Shortcode Block to the WordPress Block Inserter

1. Register Your Shortcode in functions.php

Create your shortcode in wordpress to display anything as usual:

function hire_woobooster_expert_function($atts = [], $content = null) {
    $atts = shortcode_atts([
        'title' => 'Want Personalized Help for your Business?',
    ], $atts, 'hire_woobooster_expert');

    // Output HTML content
    return '<div class="hire-woobooster-box">' . esc_html($atts['title']) . '</div>';
}
add_shortcode('hire_woobooster_expert', 'hire_woobooster_expert_function');

Create a folder in your child theme: wbcsb-shortcode-block

Suggested Read: Partial COD (Cash on Delivery) in WooCommerce

2. Add the Block JavaScript (index.js)

create an index.js file inside the folder “wbcsb-shortcode-block” and copy-paste the following code.

(function () {
	const { registerBlockType } = wp.blocks;
	const { RichText } = wp.blockEditor;
	const { createElement } = wp.element;

	registerBlockType('wbcsb/shortcode-block', {
		title: 'Hire WooBooster Expert',
		icon: 'shortcode',
		category: 'widgets',
		description: 'Insert any shortcode and edit it directly',

		attributes: {
			content: {
				type: 'string',
				default: '[hire_woobooster_expert title="Hire WooBooster Expert"]',
			},
		},

		edit: function (props) {
			const { attributes, setAttributes } = props;

			return createElement(
				'div',
				{},
				createElement(RichText, {
					tagName: 'p',
					value: attributes.content,
					onChange: (newContent) => setAttributes({ content: newContent }),
					placeholder: 'Type or edit your shortcode here...',
				})
			);
		},

		save: function (props) {
			return createElement('div', {}, props.attributes.content);
		},
	});
})();

3. Enqueue the Block Script

Now, Again open your theme functions.php file, add the following:

function wbcsb_enqueue_block_assets() {
    wp_enqueue_script(
        'wbcsb-shortcode-block',
        get_stylesheet_directory_uri() . '/wbcsb-shortcode-block/index.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        filemtime( get_stylesheet_directory()  . '/wbcsb-shortcode-block/index.js' ),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'wbcsb_enqueue_block_assets' );

4. Test It in the Block Editor

• Go to any post or page in the block editor
• Search for “Hire WooBooster Expert”
• Click to insert — the shortcode will render on the frontend

Conclusion

By registering a custom block and using a render callback, you’ve successfully made your shortcode available in the WordPress block inserter. This improves content editing and ensures consistency when using the shortcode.

Let me know if you want to add custom controls or dynamic attributes!

Also Read: How to Add a Buy 2 Get 1 Free (BOGO) Offer in WooCommerce

Thanks for reading 🙏, I hope you will get this code snippet helpful for your project.

Would you like help customizing it further? Contact Us

FAQs