WPBits Block Studio

WPBits Block Studio is a powerful developer tool that helps you create custom Gutenberg blocks without writing code from scratch. Perfect for WordPress developers, agencies, and power users who want to speed up their block development workflow.

Key Features

Free Features

• Visual Block Builder – Configure block metadata and attributes in WordPress
• Schema-Based Generation – JSON schema defines block structure
• Static & Dynamic Blocks – Build both static and dynamic Gutenberg blocks
• Twig Template Engine – Familiar templating syntax with powerful features
• Attribute Editor – Visual editing for block attributes
• Conditional Visibility – Show/hide blocks based on conditions
• Template System – Reusable block templates
• Block Supports Editor – Configure block support options
• Location Rules – Control where blocks appear
• Auto-Sync – Synchronize externally edited generated block files
• Import/Export – Import and export block configurations
• Role-Based Access – Control access by user role
• Internationalization – Full i18n support for translations

Pro Features

• Custom Render PHP – Use your own PHP render logic in the separate Pro version
• Advanced content controls – Available in the separate Pro version
• InnerBlocks Support – Configure nested block areas
• Groups Tab – Organize attributes into collapsible sections
• Custom Categories – Organize blocks in the inserter
• Custom Output Directory – Set where block files are saved
• Custom Icon Upload – Upload SVG, PNG, JPG, GIF icons
• Export as Plugin – Package blocks as standalone WordPress plugins

Available Control Types

Free Controls:

• Text – Single-line text input
• Textarea – Multi-line text input with optional TinyMCE rich editor
• Rich Text – WordPress rich text editor
• Number – Numeric input with min/max/step
• Range – Slider control with min/max/step
• Checkbox – Boolean checkbox
• Toggle – On/off toggle switch
• Select – Dropdown select
• Multi-Select – Multiple selection dropdown
• Combobox – Searchable dropdown with free-text entry
• Radio – Radio button group
• Color – Color picker with palette support
• Image – Media library image picker
• Date – Popover-based date picker with format options
• DateTime – Combined date and time picker
• Time – Time-only picker
• Link – URL picker with search and open-in-new-tab option
• Unit – Numeric input with unit suffix (px, em, rem, %, etc.)

Pro Controls:

• Advanced content controls for complex content models (PRO)

Perfect For

• WordPress developers building custom blocks
• Agencies creating blocks for multiple clients
• Theme developers needing block patterns
• Plugin developers requiring custom blocks
• Anyone wanting to learn block development

Generated Block Structure

Each generated block includes:

• block.json – Block metadata and configuration
• index.js – Block registration and editor/save components
• template.twig – Generated Twig template used by the block runtime
• style.css – Frontend styles
• editor.css – Editor-only styles
• README.md – Block documentation

Developer Notes

REST API Endpoints

The plugin provides REST API endpoints for programmatic access:

• GET /wp-json/wpbs/v1/blocks – List all blocks
• POST /wp-json/wpbs/v1/blocks – Create a new block
• GET /wp-json/wpbs/v1/blocks/{id} – Get a single block
• PUT /wp-json/wpbs/v1/blocks/{id} – Update a block
• DELETE /wp-json/wpbs/v1/blocks/{id} – Delete a block
• POST /wp-json/wpbs/v1/blocks/{id}/generate – Generate block files
• POST /wp-json/wpbs/v1/blocks/{id}/export – Export block to ZIP
• GET /wp-json/wpbs/v1/settings – Get plugin settings
• POST /wp-json/wpbs/v1/settings – Update plugin settings

Filters & Actions

Developers can extend the plugin using WordPress hooks:

• wpbs_block_generation_path – Filter the output path for generated blocks
• wpbs_template_replacements – Filter template placeholder replacements
• wpbs_after_block_generation – Action fired after block generation

Source Code & Build Tools

The human-readable JavaScript source files for the React admin interface are included in this plugin package under the admin/ directory.

Privacy Policy

This plugin does not collect, store, or transmit any user data. All block schemas are stored locally in your WordPress database.

Support

For support, feature requests, or bug reports, please visit the plugin support forum or GitHub repository.

1. Upload the plugin files to the /wp-content/plugins/wpbits-block-studio directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the ‘Plugins’ screen in WordPress.
3. Navigate to WPBits Block Studio in your WordPress admin menu.
4. Start creating blocks!

Manual Installation

1. Download the plugin ZIP file.
2. Go to WordPress admin → Plugins → Add New.
3. Click “Upload Plugin” and select the ZIP file.
4. Click “Install Now” and then “Activate Plugin”.

Requirements

• WordPress 6.5 or higher
• PHP 8.0 or higher (PHP 8.3 recommended)
• Node.js 20.x for development builds

1. 

   Dashboard – Overview of all created blocks with DataViews

2. 

   Block Form – Create and edit blocks with tabbed interface and validation

3. 

   Attribute Editor – Visual editor with drag-and-drop reordering and conditional visibility

4. 

   Settings Page – Configure defaults, role management, and sync options

5. 

   Icon Picker – Choose block icons from supported WordPress icon options

6. 

   Export Options – Export block configurations

7. 

   Sync Status – Track externally edited generated files and sync state across all blocks

8. 

1.0.0

Initial release of WPBits Block Studio.