Creating Your First Block

In this tutorial you'll build a fully editable Testimonial block with three fields — a quote, an author name, and an author photo. It will be live in Gutenberg by the end.

Step 1 — Open the Block Builder

In your WordPress admin, navigate to BF Blocks → Add New Block. You'll see the block builder canvas.

Step 2 — Name Your Block

In the Block Settings panel on the right:

1. Set Block Name to Testimonial. The slug (bf-blocks/testimonial) is generated automatically.
2. Choose an icon — search for format-quote in the Dashicon picker.
3. Set the Category to BF Blocks (or any existing category).
4. Add keyword: quote.

Step 3 — Add Fields

Click + Add Field three times to add these fields:

Step 4 — Save the Block

Click Save Block. BF Blocks registers the block with WordPress and generates the block.json file automatically.

Step 5 — Use It in Gutenberg

Open any post or page in the Gutenberg editor. Click the + button to open the block inserter and search for Testimonial. Insert the block and fill in the fields in the right-hand inspector panel.

The PHP Template

BF Blocks generates a default front-end template. You can override it in your theme at themes/your-theme/bf-blocks/testimonial.php. Here's an example:

<figure class="testimonial">
  <blockquote>
    <?php echo wp_kses_post( $fields['quote_text'] ); ?>
  </blockquote>
  <figcaption>
    <?php if ( ! empty( $fields['author_photo']['url'] ) ) : ?>
      <img src="<?php echo esc_url( $fields['author_photo']['url'] ); ?>"
           alt="<?php echo esc_attr( $fields['author_name'] ); ?>">
    <?php endif; ?>
    <strong><?php echo esc_html( $fields['author_name'] ); ?></strong>
  </figcaption>
</figure>