Registering Custom Field Types

Create entirely new field types by extending BF_Field_Base and registering the class via the bf_blocks/register_field_type filter.

The BF_Field_Base Contract

Every custom field type class must extend BF_Field_Base and implement three methods:

Example: Star Rating Field

A complete custom field type that lets editors pick a star rating from 1–5.

<?php
/**
 * Custom field type: Star Rating
 * File: my-plugin/field-types/class-star-rating-field.php
 */
class Star_Rating_Field extends BF_Field_Base {

  /**
   * Unique type slug — used in block JSON and the builder UI.
   */
  public static string $type = 'star_rating';

  /**
   * Renders the field settings in the BF Blocks builder sidebar.
   */
  public function render_editor( array $field ): void {
    ?>
    <div class="bf-field-editor">
      <label><?php esc_html_e( 'Default stars (1–5)', 'my-plugin' ); ?></label>
      <input type="number" min="1" max="5"
             name="settings[default_value]"
             value="<?php echo esc_attr( $field['settings']['default_value'] ?? 5 ); ?>" />
    </div>
    <?php
  }

  /**
   * Renders the input in the Gutenberg block inspector.
   * Return value is output as a Gutenberg control via a JS bridge.
   */
  public function render_field( array $field, mixed $value ): void {
    ?>
    <select name="<?php echo esc_attr( $field['key'] ); ?>">
      <?php for ( $i = 1; $i <= 5; $i++ ) : ?>
        <option value="<?php echo $i; ?>" <?php selected( $value, $i ); ?>>
          <?php echo $i; ?> star<?php echo $i > 1 ? 's' : ''; ?>
        </option>
      <?php endfor; ?>
    </select>
    <?php
  }

  /**
   * Sanitise and return the stored value.
   */
  public function get_value( mixed $raw_value, array $field ): int {
    $val = (int) $raw_value;
    return max( 1, min( 5, $val ) );
  }
}

// Register via the bf_blocks/register_field_type filter
add_filter(
  'bf_blocks/register_field_type',
  function( array $types ): array {
    $types[ Star_Rating_Field::$type ] = Star_Rating_Field::class;
    return $types;
  }
);

Using the Custom Field in a Template

<?php
$stars = (int) $fields['rating'];

for ( $i = 1; $i <= 5; $i++ ) {
  $filled = $i <= $stars ? 'text-yellow-400' : 'text-slate-300';
  echo '<span class="' . esc_attr( $filled ) . '">★</span>';
}