Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / Dynamic Shortcode Execution
Duplicate Snippet

Embed Snippet on Your Site

Dynamic Shortcode Execution

Dynamic shortcode execution with block editor support.
Allows shortcodes to execute everywhere, even within paragraph blocks.

Sarah Schopick
<10
Code Preview
Comments
php
<?php
/**
 * Extend native WordPress shortcode block with live preview
 */
if ( ! defined( 'ABSPATH' ) ) exit;
class Enhanced_Shortcode_Block {
    
    public function __construct() {
        add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_assets' ) );
        
        // Ensure shortcodes work in other blocks too
        add_filter( 'render_block_core/html', 'do_shortcode' );
        add_filter( 'render_block_core/paragraph', 'do_shortcode' );
    }
    
    public function enqueue_assets() {
        // Enqueue dependencies
        wp_enqueue_script( 'wp-blocks' );
        wp_enqueue_script( 'wp-element' );
        wp_enqueue_script( 'wp-components' );
        wp_enqueue_script( 'wp-block-editor' );
        wp_enqueue_script( 'wp-server-side-render' );
        wp_enqueue_script( 'wp-hooks' );
        
        // Add inline script to enhance shortcode block
        wp_add_inline_script( 'wp-blocks', $this->get_inline_script() );
    }
    
    private function get_inline_script() {
        return "
        (function() {
            // Wait for WordPress to be ready
            wp.domReady(function() {
                const { Fragment } = wp.element;
                const { InspectorControls } = wp.blockEditor;
                const { PanelBody, ToggleControl } = wp.components;
                const ServerSideRender = wp.serverSideRender;
                // Extend the native shortcode block
                wp.hooks.addFilter(
                    'blocks.registerBlockType',
                    'custom/enhance-shortcode-block',
                    function(settings, name) {
                        if (name !== 'core/shortcode') {
                            return settings;
                        }
                        // Add preview attribute
                        settings.attributes = {
                            ...settings.attributes,
                            showPreview: {
                                type: 'boolean',
                                default: true
                            }
                        };
                        // Store original edit function
                        const originalEdit = settings.edit;
                        // Enhanced edit function with preview
                        settings.edit = function(props) {
                            const { attributes, setAttributes } = props;
                            const { text, showPreview } = attributes;
                            return wp.element.createElement(Fragment, null,
                                // Original shortcode input
                                wp.element.createElement(originalEdit, props),
                                
                                // Inspector controls for preview toggle
                                wp.element.createElement(InspectorControls, null,
                                    wp.element.createElement(PanelBody, {
                                        title: 'Preview Settings'
                                    },
                                        wp.element.createElement(ToggleControl, {
                                            label: 'Show Live Preview',
                                            checked: showPreview,
                                            onChange: function(value) {
                                                setAttributes({ showPreview: value });
                                            }
                                        })
                                    )
                                ),
                                
                                // Live preview section
                                showPreview && text && wp.element.createElement('div', {
                                    style: {
                                        marginTop: '15px',
                                        padding: '15px',
                                        backgroundColor: '#f8f9fa',
                                        border: '1px solid #e1e5e9',
                                        borderRadius: '4px'
                                    }
                                },
                                    wp.element.createElement('div', {
                                        style: {
                                            fontSize: '12px',
                                            fontWeight: 'bold',
                                            marginBottom: '10px',
                                            color: '#666',
                                            textTransform: 'uppercase'
                                        }
                                    }, 'Live Preview:'),
                                    
                                    wp.element.createElement(ServerSideRender, {
                                        block: 'core/shortcode',
                                        attributes: { text: text },
                                        EmptyResponsePlaceholder: function() {
                                            return wp.element.createElement('div', {
                                                style: { 
                                                    fontStyle: 'italic', 
                                                    color: '#999' 
                                                }
                                            }, 'No output from shortcode');
                                        },
                                        ErrorResponsePlaceholder: function() {
                                            return wp.element.createElement('div', {
                                                style: { 
                                                    color: '#d63638',
                                                    fontSize: '12px'
                                                }
                                            }, 'Error rendering shortcode');
                                        }
                                    })
                                )
                            );
                        };
                        return settings;
                    }
                );
                // Optional: Also enhance HTML block for shortcode preview
                wp.hooks.addFilter(
                    'blocks.registerBlockType',
                    'custom/enhance-html-block-shortcodes',
                    function(settings, name) {
                        if (name !== 'core/html') {
                            return settings;
                        }
                        const originalEdit = settings.edit;
                        settings.edit = function(props) {
                            const { attributes } = props;
                            const { content } = attributes;
                            const hasShortcode = content && content.includes('[');
                            if (!hasShortcode) {
                                return wp.element.createElement(originalEdit, props);
                            }
                            return wp.element.createElement(Fragment, null,
                                wp.element.createElement(originalEdit, props),
                                
                                wp.element.createElement('div', {
                                    style: {
                                        marginTop: '15px',
                                        padding: '15px',
                                        backgroundColor: '#fff3cd',
                                        border: '1px solid #ffeaa7',
                                        borderRadius: '4px'
                                    }
                                },
                                    wp.element.createElement('div', {
                                        style: {
                                            fontSize: '12px',
                                            fontWeight: 'bold',
                                            marginBottom: '10px',
                                            color: '#856404'
                                        }
                                    }, 'Shortcode Preview:'),
                                    
                                    wp.element.createElement(ServerSideRender, {
                                        block: 'core/html',
                                        attributes: attributes,
                                        EmptyResponsePlaceholder: function() {
                                            return wp.element.createElement('div', {
                                                style: { 
                                                    fontStyle: 'italic', 
                                                    color: '#999' 
                                                }
                                            }, 'No output');
                                        }
                                    })
                                )
                            );
                        };
                        return settings;
                    }
                );
            });
        })();
        ";
    }
}
new Enhanced_Shortcode_Block();
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet