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.

Information Circle 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.

index.php

                        <?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

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.

index.php

                        <?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.

index.php

                        <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.

index.php

                        <?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. Data can be added just as if content edited in Gutenberg.

index.php

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

        
        
Copy

Cart Purchase

Buy once, use forever.

Checkmark Unlimited sites Checkmark Lifetime updates Checkmark Product support (via E-Mail) Checkmark Access to private Discord (soon) Checkmark Discounts for future products