Blocks outside Gutenberg

With Gutenberg becoming the prominent instrument in creating easily editable websites for clients, it makes sense to create all necessary website areas as blocks. While this approach will cater to most, advanced users and specific use cases might need to use those existing blocks outside the editor.

This is now possible with Blockstudio 2.2.0 and the blockstudio_render_block function. All Blockstudio specific features like inline styles and scripts are supported.

Please note that this function is currently only working for ACF blocks.

Without data

In its simplest form, the function accepts a single value which is the ID of the block to be rendered.

blockstudio_render_block( 'acf/cta' );

With data

Blocks can also be rendered with custom data based on the existing field mappings. Let's imagine the following block:

<?php // cta.php /* Title: Call to Action Description: Call to action element. Category: design Icon: lightbulb Mode: preview SupportsAlign: false SupportsMode: false */ $fields = [ [ 'key' => 'title_key', 'label' => 'Title', 'name' => 'title', 'type' => 'text', ], [ 'key' => 'subtitle_key', 'label' => 'Subtitle', 'name' => 'subtitle', 'type' => 'text', ], ); ?> <h1><?php echo get_field( 'title' ) ?: 'Title'; ?></h1> <p><?php echo get_field( 'subtitle' ) ?: 'Subtitle'; ?></p>

To render the block with custom data, an array needs to be used in place of a single value for the first parameter:

blockstudio_render_block( [ 'id' => 'acf/cta', 'data' => [ 'title' => 'My title', 'subtitle' => 'My subtitle', ], ] );