Skip to content
WPBits WPBits WPBits Documentation

Create Blocks

Creating custom Gutenberg blocks with WPBits Block Studio is straightforward. This guide walks you through the process.

Getting Started

Section titled “Getting Started”
  1. Navigate to WPBits Block Studio in your WordPress admin menu
  2. Click Create New Block
  3. Fill in the basic block information

Block Settings

Section titled “Block Settings”

WPBits Block Studio Create Block Interface

When creating a block, you’ll configure:

  • Block Title - The display name of your block
  • Namespace - Unique identifier for your block (e.g., custom)
  • Slug - Auto-generated from the title
  • Description - What your block does
  • Category - Where your block appears in the block inserter
  • Icon - Choose from Dashicons

Block Modes

Section titled “Block Modes”

WPBits Block Studio supports three rendering modes:

ModeDescription
Static BlockUses Twig template only (template.twig)
Dynamic BlockUses PHP callback with optional Twig template
Custom RenderUses custom render.php when Custom Render Mode is enabled

Attributes

Section titled “Attributes”

Block Attributes

Attributes define the data your block stores. Each attribute has:

  • Name - Unique identifier for the attribute
  • Label - Display label in the editor
  • Group - Organize attributes into groups
  • Control Type - Choose from 20 control types
  • Default Value - Initial value
  • Help Text - Instructions for users
  • Required - Make the field mandatory

Add Attribute

Section titled “Add Attribute”
  1. Go to the Attributes tab
  2. Click + Add Attribute
  3. Fill in the attribute details
  4. Click Add Attribute

Block Supports

Section titled “Block Supports”

Block Supports enable Gutenberg features for your block:

  • align - Wide align and full align
  • color - Text and background colors
  • spacing - Padding and margin
  • typography - Font size and family
  • border - Border controls
  • shadow - Box shadow controls

To enable:

  1. Click the Block Supports tab
  2. Check the features you want to enable
  3. Configure any additional options

Location Rules

Section titled “Location Rules”

Control where your block can be used:

  • Post Types - Choose which post types can use this block
  • Post Status - Filter by publish status
  • User Roles - Restrict by user capability

Attribute Groups

Section titled “Attribute Groups”

Organize your attributes into logical groups:

  1. Go to the Groups tab
  2. Click + Add Group
  3. Enter a Group Key (e.g., testGroup)
  4. Enter a Group Title (e.g., Test Group)
  5. Toggle Initially Open if desired
  6. Add a description
  7. Click Add Group

InnerBlocks

Section titled “InnerBlocks”

InnerBlocks allow your block to contain other blocks:

  • Enable InnerBlocks - Toggle to allow nested blocks
  • Allowed Blocks - Choose which blocks can be inserted
  • Template Lock - Control whether users can modify the template
  • Orientation - Vertical or horizontal layout

Using Your Block

Section titled “Using Your Block”

Block in Gutenberg Editor

Once created, your block appears in the Gutenberg editor:

  • Add it like any other block
  • Configure attributes in the right sidebar
  • Nested blocks render in the editor canvas

Next Steps

Section titled “Next Steps”