Blockstudio's price is set to rise to 199€ on November 1st. Purchase now to secure the current rate.

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.

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

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

Purchase

Buy once, use forever.

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

🍪 This website uses cookies to ensure you get the best experience on our website.

Accept Decline