How to Add Meta Box for Current Post Format in Gutenberg (Step-by-Step Guide) Updated: September 15, 2025   /   Published: January 17, 2020

How to Add Meta Box for Current Post Format in Gutenberg (Step-by-Step Guide)

Meta boxes have long been a core part of WordPress customization, allowing developers to add custom fields and extra options to the post editing screen. 

But with the arrival of the Gutenberg block editor, many developers wonder: can we still add meta boxes, and how do we make them Gutenberg-compatible?

The answer is yes. You can still use meta boxes in Gutenberg, and with the right approach, you can ensure they only appear for specific post formats (like video, gallery, or audio posts). 

According to W3Techs, WordPress powers over 43% of all websites worldwide in 2024, so knowing how to extend it the right way is crucial for developers and site owners.

In this guide, we’ll walk you through exactly how to add a meta box for the current post format, along with best practices for compatibility and security.

Key Takeaways

• Meta boxes extend WordPress posts and pages with extra custom fields.
  
• Gutenberg supports classic meta boxes, but register_post_meta() is recommended for full REST API and block editor compatibility.
  
• You can conditionally show a meta box only for certain post formats.
  
• Always sanitize and secure your metadata with WordPress best practices.
  
• Branded, user-friendly meta boxes improve usability for clients and editors.

What Are Meta Boxes in WordPress?

A meta box is a UI element in the WordPress admin where you can input or display metadata related to a post. 

Examples include:

• Custom SEO descriptions
  
• Video embed URLs
  
• Author bios
  
• Product information for WooCommerce
  

These boxes make it easier to extend WordPress without modifying the main editor.

Gutenberg vs Classic Editor Meta Boxes

When Gutenberg launched in WordPress 5.0, there was concern that meta boxes would disappear. Instead, WordPress retained backward compatibility with add_meta_box().

• Classic approach: add_meta_box() still works and displays under the block editor.
  
• Modern approach: register_post_meta() with show_in_rest ensures your metadata is available to Gutenberg and the REST API.

Step 1: Register a Meta Box

Here’s the basic way to register a custom meta box in your functions.php:

function skb_add_custom_metabox() {
    add_meta_box(
        'skb_video_url',
        'Video URL',
        'skb_video_url_callback',
        'post',
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'skb_add_custom_metabox');

Step 2: Display It Based on Post Format

To show this meta box only when the post format is “video”:

function skb_video_url_callback($post) {
    if (get_post_format($post->ID) !== 'video') {
        echo '<p>This meta box is only available for video posts.</p>';
        return;
    }

    $value = get_post_meta($post->ID, '_skb_video_url', true);
    echo '<label for="skb_video_url">Video URL: </label>';
    echo '<input type="text" id="skb_video_url" name="skb_video_url" value="' . esc_attr($value) . '" />';
}

Step 3: Save Meta Box Data

function skb_save_video_url($post_id) {
    if (array_key_exists('skb_video_url', $_POST)) {
        update_post_meta(
            $post_id,
            '_skb_video_url',
            sanitize_text_field($_POST['skb_video_url'])
        );
    }
}
add_action('save_post', 'skb_save_video_url');

Step 4: Make It Gutenberg-Compatible

Register your meta field for Gutenberg with REST API support:

function skb_register_meta() {
    register_post_meta('post', '_skb_video_url', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
        'auth_callback' => function() {
            return current_user_can('edit_posts');
        }
    ));
}
add_action('init', 'skb_register_meta');

Best Practices for Meta Boxes in 2024

• Security first: Always use wp_nonce_field() and sanitize user inputs.
  
• Keep it simple: Only show meta boxes when necessary (specific post types or formats).
  
• Use REST: Register fields with show_in_rest for maximum Gutenberg compatibility.
  
• User experience: Clear labels and instructions make meta boxes more editor-friendly.

FAQs

Conclusion

Adding a meta box for the current post format in Gutenberg is straightforward when you combine classic methods with modern best practices.

Using add_meta_box() ensures backward compatibility, while register_post_meta() makes your custom fields future-proof and REST-ready.

Whether you’re adding a video URL field or custom product details, meta boxes remain a powerful way to extend WordPress. 

Start experimenting today and create a smoother editorial experience for your team or clients.