Skip to content
WPBits WPBits WPBits Documentation

Quick Start Guide

This guide walks you through creating a simple “Feature Card” block from start to finish.

Step 1: Create a New Block

Section titled “Step 1: Create a New Block”

  1. In your WordPress admin, go to WPBits Block Studio

  2. Click Add New Block

  3. Fill in the block details:

    • Namespace: myplugin (your plugin/theme prefix)
    • Block Name: feature-card
    • Block Title: Feature Card
    • Description: A card component for displaying features

  4. Click Create Block

Step 2: Add Attributes

Section titled “Step 2: Add Attributes”

Attributes define the data your block stores. For a feature card:

Title Attribute

Section titled “Title Attribute”
  1. Click + Add Attribute
  2. Set Name: title
  3. Set Control: text

Description Attribute

Section titled “Description Attribute”
  1. Click + Add Attribute
  2. Set Name: description
  3. Set Control: textarea

Icon Attribute

Section titled “Icon Attribute”
  1. Click + Add Attribute
  2. Set Name: icon
  3. Set Control: image

Step 3: Configure Block Settings

Section titled “Step 3: Configure Block Settings”

Block Supports

Section titled “Block Supports”
  1. Click the Block Supports tab
  2. Enable options like:
    • align (wide align)
    • color (text and background)

Location Rules

Section titled “Location Rules”
  1. Click the Location Rules tab
  2. Set where your block should appear

Step 4: Design the Template

Section titled “Step 4: Design the Template”

WPBits Block Studio generates a default template file. You can customize it:

<div class="feature-card">
    {% if attributes.icon %}
        <img src="{{ attributes.icon }}" alt="">
    {% endif %}
    <h3>{{ attributes.title }}</h3>
    <p>{{ attributes.description }}</p>
</div>

Step 5: Use Your Block

Section titled “Step 5: Use Your Block”
  1. Open any page/post in the WordPress editor
  2. Click the + block inserter
  3. Search for “Feature Card”
  4. Click to add the block
  5. Edit the title, description, and icon

Control Types Reference

Section titled “Control Types Reference”

WPBits Block Studio provides 20 control types:

CategoryControls
Texttext, textarea, rich-text
Numbernumber, range
Selectiontoggle, checkbox, select, multi-select, combobox, radio
Mediacolor, image
Date/Timedate, datetime, time
Advancedlink, unit
Prorepeater, post-selector

What’s Next?

Section titled “What’s Next?”