Native features without any of the effort.
Compose blocks with all the powerful features WordPress has to offer. Create nestable InnerBlocks sections, remove the outer block wrapper in the editor with blockProps and share context between all blocks using context.
99 € lifetime license for unlimited sites
InnerBlocks
Simarly to the group or columns block in WordPress core, InnerBlocks allows you to insert additional blocks inside your block. This is useful for creating complex layouts, or for creating blocks that can be extended by other blocks.
<?php $allowedBlocks = [ 'core/heading', 'core/paragraph' ]; $template = [ [ 'core/heading', [ 'placeholder' => 'Book Title' ] ], [ 'core/paragraph', [ 'placeholder' => 'Summary' ] ], ]; ?> <div class="my-block"> <InnerBlocks allowedBlocks="<?php echo esc_attr( wp_json_encode( $allowedBlocks ) ); ?>" template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>" /> </div>Copy
RichText
The RichText component allows rendering an editable input inside the editor and a static HTML Element in the frontend. It is based on the RichText component WordPress provides.
<RichText class="my class" tag="h1" attribute="richtext" multiline="false" placeholder="Enter text here" />Copy
Context
Context allows you to pass data from the parent blocks to child blocks when using InnerBlocks. Child blocks will automatically reload in the editor if parent data changes.
<?php $container = $context['blockstudio/container']; ?> <h1> <?php echo $container['full-width'] ? 'is full width' : 'no full width'; ?> </h1>Copy
useBlockProps
By default, Gutenberg renders the content of a block template inside a wrapper element inside the editor. useBlockProps enable you to mark an element as the root element of your block, thus creating the exact same markup in the editor and on the front-end.
<div useBlockProps> <!-- This element will be rendered as the root element of your block in Gutenberg. --> </div>Copy
Environment
All block templates include environment variables that allow for conditional rendering of markup either in the editor, block preview or frontend.
<?php if ( $isEditor ) : ?> This content is only going to be rendered inside the editor. <?php elseif ( $isPreview ) : ?> This content is only going to be rendered inside the block preview. <?php else : ?> This content is only going to be rendered on the frontend. <?php endif; ?>Copy
Render functions
Blockstudio includes a handy render function that allows you to render blocks outside of the editor with custom data. All related block assets like .js and .css files will automatically get enqueued to the page.
bs_render_block( [ 'id' => 'blockstudio/cta', 'data' => [ 'title' => 'My title', 'subtitle' => 'My subtitle', ], ] );Copy
Purchase