Block Builder
Build Custom Gutenberg Blocks Visually — No PHP Required
Design your block structure, add fields, set icons, and publish — all from a clean visual interface inside your WordPress admin.
Try It FreeYour Block Design Studio Inside WordPress
The BF Blocks visual builder turns block creation into a drag-and-drop experience. Define your fields, arrange them visually, set a custom icon and category, then save — your block is immediately available in the Gutenberg inserter.
No writing JavaScript. No editing block.json. No touching register_block_type(). BF Blocks generates all of that for you.
Screenshot: Block Builder UI
How the Builder Works
From blank canvas to live block in five steps.
Open the Builder
Navigate to BF Blocks in your WordPress admin and click 'Add New Block'. You're greeted with a clean canvas — no code in sight.
Screenshot: Open the Builder
Name Your Block & Set an Icon
Give your block a name (spaces allowed), choose a Dashicon or upload a custom SVG, and assign it to a block category. The slug is generated automatically.
Screenshot: Name Your Block & Set an Icon
Add Fields
Click 'Add Field' and choose from 30+ field types. Drag to reorder. Group related fields with collapsible sections. Each field gets a label, key, and optional help text.
Screenshot: Add Fields
Use Groups & Repeaters
Organise complex blocks with field groups and repeater fields. Repeaters let editors add unlimited rows of structured content — great for team lists, FAQs, and galleries.
Screenshot: Use Groups & Repeaters
Save & Preview
Click Save. Your block instantly appears in the Gutenberg block inserter. Preview it live in the editor before using it on a live page.
Screenshot: Save & Preview
Key Capabilities
Everything you need to build professional-grade Gutenberg blocks.
Drag-and-drop field arrangement
Reorder fields by dragging them — the Gutenberg inspector panel reflects your order exactly.
Real-time block preview
See a live preview of your block as you configure it in the builder.
Custom icon & category
Pick from Dashicons or upload your own SVG. Assign blocks to default or custom categories.
Keyword search support
Add keywords so editors can find your block by searching in the Gutenberg inserter.
Block descriptions
Add a description that appears in the block inserter to guide editors.
Works with any theme
BF Blocks-created blocks are theme-agnostic and work with any WordPress theme.
What BF Blocks Generates For You
When you save a block, BF Blocks automatically produces a block.json definition. Here's an example for a Testimonial block:
{
"name": "bf-blocks/testimonial",
"title": "Testimonial",
"category": "bf-blocks",
"icon": "format-quote",
"keywords": ["testimonial", "quote", "review"],
"attributes": {
"quote_text": { "type": "string", "default": "" },
"author_name": { "type": "string", "default": "" },
"author_role": { "type": "string", "default": "" },
"author_image": { "type": "object", "default": {} }
},
"supports": {
"anchor": true,
"className": true,
"align": ["wide", "full"]
}
}This file is generated and maintained by BF Blocks — you never need to edit it manually.
Ready to Build Your First Block?
Get started free — no credit card required.