Blockstudio 5.5 Tailwind suport

The block framework for WordPress.

Create custom blocks using PHP only Over 20 different available field types Use features like InnerBlocks and RichText without JavaScript Automatically enqueue styles and scripts Edit blocks inside the admin with a full blown code editor Extend core or third-party blocks with custom fields
Custom blocks in 3 steps
1 Register the block and custom fields Define the template that should be rendered Add some styles and make it look nice!
1 block.json
2 index.php
3 style.css

                          {
                    "name": "blockstudio/cta",
                    "title": "CTA",
                    "icon": "star-filled",
                    "blockstudio": {
                      "attributes": [
                        {
                          "id": "title",
                          "type": "text",
                          "label": "Title"
                        },
                        {
                          "id": "buttonText",
                          "type": "text",
                          "label": "Button Text"
                        }
                      ]
                    }
                  }
                
      
Copy

                          <div class="block-cta">
                    <h2 class="block-cta__title">
                      <?php echo $a['title']; ?>
                    </h2>
                    <a class="block-cta__button">
                      <?php echo $a['buttonText']; ?>
                    </a>
                    <InnerBlocks class="block-cta__inner" />
                  </div>
Copy

                          .block-cta {
                    padding: 2rem;
                    border-radius: 0.125rem;
                    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
                  }

                  .block-cta__title {
                    font-size: 2rem;
                  }

                  .block-cta__button {
                    padding: 0.5rem 1.25rem;
                    font-size: 1rem;
                    background: black;
                    border-radius: 0.25rem;
                  }
                
      
Copy
+
Update
Save
My new page
Create blocks like a pro
Buy now
Post
Block
CTA
Title
Create blocks like a pro
Button Text
Buy now

Block registration

Create native blocks
with ease.

Blockstudio extends the block.json to allow you to define fields for your block. They are automatically added to the editor and saved to the block as attributes. Gutenberg components are used to display the controls for those fields, assuring a coherent editing experience.

block.json

                          {
      "name": "marketing/cta",
      "title": "CTA",
      "description": "Custom Call to Action block.",
      "blockstudio": {
        "attributes": [
          {
            "id": "wysiwyg",
            "type": "wysiwyg",
            "label": "WYSIWYG",
            "toolbar": {
              "formats": {
                "bold": true,
                "italic": true,
                "underline": true,
                "strikethrough": true
              }
            }
          }
        ]
      }
    }
  
  
      
      
Copy

Available field types:

Checkbox

Renders a set of checkbox inputs.

Code

Renders a code editor.

Color

Renders a color palette and color picker.

Date

Renders a date picker.

Datetime

Renders a date and time picker.

Files

Renders a button to the media library. Picked items can be reordered inline.

Gradient

Renders a gradient palette and gradient picker

Group

Renders multiple fields in an (optionally) collapsible container.

Icon

Renders an SVG icon from an icon set.

Link

Renders a link control to choose internal or external links.

Message

Renders a message with custom content.

Number

Renders a number input.

Radio

Renders a set of radio inputs.

Range

Renders a range input to set a numerical value between two points.

Repeater

Renders a set of fields that can be repeated.

Richtext

Attribute field for RichText fields.

Select

Renders a select input with support for single or multiple selections.

Tabs

Renders a tabbed interface for grouping fields.

Text

Renders a single line text input.

Textarea

Renders a textarea input.

Toggle

Renders a true/false toggle.

Unit

Renders a number input with a unit dropdown.

WYSIWYG

Renders a WYSIWYG editor.

Composition

Blockstudio brings together the best of both worlds to create native WordPress blocks. React features inside the editor and plain server side rendered PHP for the frontend.

All inside the same file, without a build step.


                  <div useBlockProps class="container">
            <RichText
              class="text-xl font-bold"
              tag="h1"
              attribute="richtext"
              placeholder="Enter headline"
            />
            <InnerBlocks class="mt-4 p-4 border" />
          </div>
Copy

File system based

Use a system that you already know: files.

All block.json files within the blockstudio directory are parsed and registered as custom blocks. Other assets like styles and scripts will automatically enqueued when the block is being used.

cta

block.json
index.php
script-view.js
style.css
style-scoped.css

Metadata

Metadata for the block. The Blockstudio schema extends the WordPress block.json schema with additional properties.

Template

The template (PHP or Twig) which will be rendered on the frontend and inside the editor. Field and block data can be accessed using the $a and $b variables respectively.

View script

Script file that will be enqueued on the frontend only. Useful for sending information to Google Tag Manager.

Style

Style file which will be enqueued in the editor and on your frontend if the block is used.

Scoped style

Scoped inline styles which will be rendered inside a style tag in the editor and on your frontend if the block is used.

block.json

                                                                    
            {
              "$schema": "https://app.blockstudio.dev/schema",
              "apiVersion": 2,
              "name": "blockstudio/cta",
              "title": "Call to Action",
              "category": "text",
              "icon": "star-filled",
              "description": "Call to action block.",
              "keywords": [
                "cta",
                "call to action"
              ],
              "version": "1.0.0",
              "textdomain": "blockstudio",
              "supports": {
                "align": true
              },
              "blockstudio": {
                "attributes": [
                  { "id": "link", "type": "text", "label": "Link" },
                  { "id": "title", "type": "text", "label": "Title" },
                  { "id": "text", "type": "text", "label": "Text" }
                ]
              }
            }

                                
                                
      
Copy
index.php

                                                                    
            <a href="<?php $a["link"] ?>"
               class="block-cta <?= bs_get_scoped_class( $b["name"] ) ?>">
                <!-- Styles inside style-scoped.css will
                     only apply to elements in this block. -->
                <h1><?= echo $a["title"] ?></h2>
                <?php if ($a['text']) : ?>
                    <h2><?= echo $a["text"] ?></h2>
                <?php endif; ?>
            </a>
Copy
script.js

                                                                    
            document.querySelectorAll('.block-cta').forEach(item => {
                item.addEventListener('click', () => {
                    // Send Google event on click.
                    window?.dataLayer?.push({
                        event: "cta_click",
                        from: window.location.href
                    });
                }
            });

                                
                                
      
Copy
style.css

                                                                    
            .block-cta {
                background: red;
                padding: 1rem 2rem;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                border-radius: 0.5rem;
            }

                                
                                
      
Copy
style-scoped.css

                                                                    
            h1 {
                font-size: 2rem;
                color: #fff;
                font-weight: 600;
            }

            h2 {
                color: rgba(255,255,255,0.5);
            }

                                
                                
      
Copy

Available asset types:

Style

Editor + Frontend

Editor Style

Editor only

Inline Style

Editor + Frontend (in a style tag)

Scoped Style

Editor + Frontend (read more)

Script

Editor + Frontend

Editor Script

Editor only

Inline Script

Editor + Frontend (in a script tag)

View Script

Frontend only

Scoped styles

Style encapsulation made easy.

Never worry about overlapping styles or class names ever again. With scoped styles you can keep your CSS structure simple, move quicker and iterate faster.

index.php

                            
        <div class="<?php echo bs_get_scoped_class( $b["name"] ) ?>">
            <h1>Scope me!</h1>
        </div>
Copy
style-scoped.css

                            
        h1 {
            color: red;
        }

          
          
      
Copy

Result:


                                              <style>
                .bs-62df71e6cc9a h1 {
                    color: red;
                }
              </style>

              <div class="bs-62df71e6cc9a">
                <h1>Scope me!</h1>
              </div>
Copy

Editor

The world of blocks at your fingertips.

The Blockstudio editor is the next evolution in WordPress block development. It further reduces the barrier of editing blocks and brings a loved and well known code interface (Visual Code Studio via Monaco) to the WordPress admin area.

editor

Testimonials

What others are saying:

Finding the balance between using native Gutenberg blocks and still achieving high level, advanced and complex layouts which clients can edit can be a challenge. Blockstudio lowers the barrier to entry for creating Gutenberg blocks by making use of ACF and Metabox functions in an easy to use system. It's as simple as creating a folder, adding a PHP file and defining your block. The possibilities are limitless.

Taylor Drayson

Taylor Drayson

I've been using Blockstudio to build custom Gutenberg blocks for a few months, on both my personal site alongside several client projects. It makes creating blocks incredibly easy and really cuts out on dev time. I love that it works alongside ACF and Metabox as we use both, depending on project requirements. As Gutenberg grows, we're pivoting more towards blocks and away from custom themes and builders - Blockstudio is the enabler for that transition.

James LePage

James LePage

Releases

Continous innovation.

Our ethos at Blockstudio is rooted in swift, yet careful progression. We consistently enhance the plugin and expand features without compromising on stability. Stay updated with the most recent advancements and upgrades below.

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.