Shortcode Preview Block
Description
Normal WordPress blocks do not show how a shortcode will look on the front end. This block renders the shortcode in the editor so you can check the result without opening the front end.
How to use
- Add the Shortcode with Preview block.
- Enter a shortcode, for example
. - The preview below the field shows the rendered output.
Installation
- Upload the plugin files to
/wp-content/plugins/shortcode-with-preview-block, or install it through the Plugins screen. - Activate the plugin through the Plugins screen.
- Edit a post or page and insert the Shortcode with Preview block.
Faq
Does this replace the core Shortcode block?
No. Use this block when you want to see the rendered shortcode while editing.
Which WordPress version does this require?
WordPress 6.3 or newer, and PHP 7.2 or newer. It is tested with WordPress 7.1.
Reviews
Does not work with any shortcode
By 
Martin Sauter (martin.sauter) on March 28, 2025
For example, [ninja_form id=1] is not rendered.
Great plugin
By 
Alexey Tikhonov (altert) on January 14, 2021
It makes creating layout for complex pages and e.g. shortcodes for images referenced from DAM much easier!
Useful but not 100% accurate
By 
PolyWogg on August 12, 2020
Tested with NEXTGEN Gallery shortcodes that insert a pic…if I do “float right”, it doesn’t wrap text around this block nor does it centre if I float center. It shows a good preview that the regular editor doesn’t, but it also means it is embedded within a block with extra controls on it.
P.
Changelog
1.1.0
- Tested with WordPress 7.1.
- Register the block from block.json as apiVersion 3 so it loads in the current block editor.
- Load the editor script with the block editor and server-side render dependencies it uses.
- Keep sidebar shortcode text as plain text so markup is not saved into the shortcode.
1.0.0
- Initial release.