Creating & Managing Blocks

This guide covers both approaches to creating and managing blocks — using the Visual Block Builder UI and editing block files directly.

Creating a Block via the UI

1. Go to WPBits Block Studio in your WordPress admin
2. Click Add New Block
3. Fill in the block details:
   • Namespace — Your plugin/theme prefix (e.g., myplugin)
   • Block Name — Unique slug (e.g., feature-card)
   • Block Title — Display name in the block inserter
   • Description — What your block does
   • Category — Where it appears in the block inserter
   • Icon — Choose from Dashicons
4. Click Create Block

For a detailed walkthrough, see the Quick Start Guide.

Adding and Removing Attributes via the UI

1. Open your block in WPBits Block Studio
2. Go to the Attributes tab
3. To add: Click + Add Attribute, configure name, label, control type, default value
4. To remove: Click the delete icon next to the attribute
5. To reorder: Drag and drop attributes into position

Each attribute supports:

• Control Type — Choose from available types (text, number, image, etc.)
• Default Value — Initial value when the block is added
• Help Text — Instructions shown to editors
• Required — Make the field mandatory

Manually Editing block.json

Block files are stored on the filesystem. Their location depends on your setup:

• Default location: wp-content/uploads/wpbits-block-studio/<block-name>/
• Pro with custom output: Your configured output directory

block.json Structure

{
  "name": "myplugin/feature-card",
  "title": "Feature Card",
  "description": "A card component for displaying features",
  "category": "widgets",
  "icon": "admin-page",
  "attributes": {
    "title": {
      "type": "string",
      "default": ""
    },
    "description": {
      "type": "string",
      "default": ""
    }
  },
  "supports": {
    "align": true,
    "color": true
  }
}

Adding an Attribute Manually

1. Locate your block’s block.json file
2. Add a new entry under the attributes object:

{
  "attributes": {
    "title": {
      "type": "string",
      "default": ""
    },
    "myNewField": {
      "type": "string",
      "default": ""
    }
  }
}

3. Update your template file to use the new attribute: {{ attributes.myNewField }}
4. If auto-sync is enabled, the file will be overwritten on the next save in the editor (free version has auto-sync always-on)

Removing an Attribute Manually

1. Delete the attribute’s entry from block.json
2. Remove any references to it from your template files
3. Regenerate or re-save if auto-sync is active

Attribute Types Reference

Type	JSON Type	Example
Text	string	"hello"
Number	number	42
Boolean	boolean	true
Image	object	{ "url": "...", "id": 1 }
Select	string	"option-value"

Using Export/Import for Multi-Environment Workflow

This is the recommended workflow for free users who need to move blocks between local development and production:

1. Install WPBits Block Studio on your local development environment
2. Create and configure your block (attributes, supports, location rules)
3. Manually edit template.twig, style.css, editor.css files on the filesystem
4. Go to WPBits Block Studio and click Export on your block
5. On the production site, go to WPBits Block Studio → Settings → Import / Export
6. Upload the ZIP file
7. The block with all its files is now on production

Important Notes

• Free version: Auto-sync is always-on. If you re-save a block through the UI after manual edits, the database overwrites your file changes. Re-import the block to restore.
• Pro version: You can disable auto-sync per-block, giving you full control over when the database overwrites files.
• Always keep a backup of your manual edits when working with auto-sync enabled.

Next Steps

• Working with Block Assets — Add CSS, JS, and templates to your blocks
• Control Types Overview — All available attribute controls
• Sync Status — Monitor block synchronization