WPBits Block Studio

WPBits Block Studio is a developer-first Gutenberg block builder for creating static and dynamic custom blocks with visual attribute editing, Twig templates, file synchronization, and exportable block code.

Block Studio accelerates custom Gutenberg block development through a visual workflow. Define attributes, configure controls, set up templates, and generate standard WordPress block files — all from within the WordPress admin. The generated code is yours to inspect, modify, and integrate into themes, plugins, or any WordPress project.

Why Block Studio?

• Visual Development Workflow — Build custom Gutenberg blocks through a visual development interface.
• Real, Editable Block Files — Generate standard WordPress block files that developers can inspect, modify, and integrate into their own projects.
• Static & Dynamic Rendering — Create both static blocks and server-rendered dynamic blocks.
• Twig Templates — Use clean, maintainable Twig templates for block markup.
• Developer Freedom — Export and integrate generated blocks into themes, plugins, and other WordPress development workflows.

Perfect For

• WordPress developers building custom blocks
• Agencies creating blocks for multiple clients
• Theme developers needing block patterns
• Plugin developers requiring custom blocks
• Advanced users who want to accelerate block development

Free Features

• Visual Block Builder – Accelerate block development through a visual workflow
• 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

Need more control? Block Studio Pro adds InnerBlocks, repeaters, custom PHP rendering, advanced organization tools, custom output paths, and standalone plugin export.

• Custom Render PHP – Use your own PHP render logic
• Repeater Control Type – Nested repeatable attribute groups
• Post Selector – Select posts/pages with thumbnail preview
• 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 (18):

• 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 (2):

• Repeater – Nested repeatable field groups with sub-fields (PRO)
• Post Selector – Select posts/pages with thumbnail support (PRO)

Generated Block Structure

Block Studio generates standard WordPress block files that work independently of the plugin. Each generated block includes:

• block.json – Block metadata and configuration
• index.js – Block registration
• edit.js – Editor component
• save.js – Save function (static blocks)
• render.php – Server-side rendering (dynamic blocks)
• template.twig – Twig template (when Twig mode is enabled)
• style.css – Frontend styles
• editor.css – Editor-only styles
• README.md – Block documentation

Static blocks include save.js with the client-side save function. Dynamic blocks include render.php for server-side rendering. All generated files follow WordPress block development conventions and can be used with or without Block Studio installed.

Developer Notes

REST API Endpoints

The plugin provides REST API endpoints for programmatic block management:

• 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:

• Visit wpbits.net/contact
• Use the in-plugin contact form
• Manage your account at account.wpbits.net
• Upgrade to Pro: wpbits.net/blockstudio-pricing