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.

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

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.

index.php

                    <RichText
    class="my class"
    tag="h1"
    attribute="richtext"
    placeholder="Enter text here"
  />
Copy

MediaPlaceholder

The MediaPlaceholder component provides a placeholder to add media items to a block. The same component is being used in the core/image block.

index.php

                    <MediaPlaceholder
    attribute="files"
  />
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 with custom data. All related block assets like .js and .css files will automatically get enqueued to the page.

index.php

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

        
      
Copy

Pricing

Starter

49 €

3 websites 1 year of updates 1 year of support
Get started
Pro

99 €

Unlimited websites 1 year of updates 1 year of support
Get started
Lifetime

199 €

Unlimited websites Lifetime updates Lifetime support
Get started

Frequently asked questions

Yes, blocks will continue to work after the license expires. However, you will no longer receive updates or support. We recommend renewing your license or buy a lifetime license to keep your blocks up to date and to receive support.

 

Yes, you can upgrade your license at any time. You will only need to pay the difference between the two licenses.

 

We offer a 14-day money-back guarantee. If you are not satisfied with the plugin, we will refund your purchase, no questions asked.