內容簡介
WPBits Block Studio 是一款以開發者為主的 Gutenberg 區塊建構器，旨在透過視覺化屬性編輯、Twig 模板、檔案同步及可匯出區塊程式碼，快速創建靜態與動態自訂區塊，提升開發效率。
【主要功能】
• 視覺化區塊建構器
• 支援靜態與動態區塊
• 使用 Twig 模板引擎
• 可編輯的區塊檔案
• 條件可見性設定
• 自動同步功能
外掛標籤
開發者團隊
原文外掛簡介
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
