Advanced Custom Fields (ACF) is one of the most popular WordPress plugins for managing custom meta fields. In this tutorial, we will learn how to display ACF fields dynamically in a table on a single post page. We’ll use a custom Gutenberg block and PHP to fetch and render these fields elegantly.

Why Display ACF Fields in a Table?

• Clarity: Displaying ACF fields in a table ensures data is organized.
• Flexibility: Easily customize the table structure.
• Extensibility: Use WordPress hooks to control visibility and formatting.

Let’s build our block!

---

Step 1: Create a Custom Gutenberg Block Plugin

First, set up your plugin directory.

Folder Structure:

custom-acf-table-block/
├── src/
│   ├── index.js
│   ├── block.js
│   ├── editor.scss
│   ├── style.scss
├── custom-acf-table-block.php
├── package.json
├── webpack.config.js

1.1. Plugin File (custom-acf-table-block.php)

<?php
/**
 * Plugin Name: Custom ACF Table Block
 * Description: Display ACF fields in a table on single post pages.
 * Version: 1.0
 * Author: Your Name
 */

function custom_acf_table_block_register() {
    register_block_type(__DIR__, array(
        'render_callback' => 'custom_acf_table_block_render'
    ));
}
add_action('init', 'custom_acf_table_block_register');

function custom_acf_table_block_render($attributes) {
    global $post;
    if (!$post) return '<p>No post found.</p>';

    $meta_fields = get_post_meta($post->ID);
    $excluded_keys = apply_filters('custom_acf_table_exclude_keys', ['_']);

    $output = '<table class="custom-acf-table">';
    $output .= '<thead><tr><th>Field</th><th>Value</th></tr></thead><tbody>';
    $has_visible_fields = false;

    foreach ($meta_fields as $key => $value) {
        if (strpos($key, '_') === 0 || empty($value)) continue;
        $key = apply_filters('custom_acf_table_display_meta_key', $key, $post->ID);
        $value = apply_filters('custom_acf_table_display_meta_value', implode(', ', $value), $key, $post->ID);

        $output .= '<tr><td>' . esc_html($key) . '</td><td>' . esc_html($value) . '</td></tr>';
        $has_visible_fields = true;
    }

    if (!$has_visible_fields) {
        $output .= '<tr><td colspan="2">No visible fields found.</td></tr>';
    }
    $output .= '</tbody></table>';
    return $output;
}

---

Step 2: Create Block JavaScript

2.1. index.js

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
import './style.scss';

registerBlockType('custom-acf-table-block/table', {
    title: 'ACF Table Block',
    icon: 'table-col-after',
    category: 'widgets',
    edit: () => {
        return (
            <div {...useBlockProps()}>
                <h4>ACF Table Block</h4>
                <p>This block displays ACF fields in a table.</p>
            </div>
        );
    },
    save: () => null, // Dynamic rendering
});

2.2. editor.scss & style.scss

.custom-acf-table {
    width: 100%;
    border-collapse: collapse;
}
.custom-acf-table th, .custom-acf-table td {
    padding: 8px;
    border: 1px solid #ddd;
}
.custom-acf-table th {
    background-color: #f4f4f4;
}

---

Step 3: Add Filters for Customization

3.1. Exclude Specific Fields

add_filter('custom_acf_table_exclude_keys', function($keys) {
    $keys[] = 'secret_field';
    return $keys;
});

3.2. Format Specific Field Value

add_filter('custom_acf_table_display_meta_value', function($value, $key) {
    if ($key === 'price') {
        return '$' . number_format($value, 2);
    }
    return $value;
}, 10, 2);

---

Step 4: Build the Block

Run the following commands in your terminal:

npm install
npm run build

Activate your plugin in the WordPress admin dashboard.

---

Step 5: Add the Block in a Post

1. Go to a post in the WordPress editor.
2. Add the ACF Table Block.
3. Publish or Update the post.
4. View the post on the front-end.

🎯 Expected Output:

A neatly styled table displaying only user-defined ACF fields, excluding system fields and empty fields.

---

Conclusion

You’ve successfully built a custom Gutenberg block that dynamically displays ACF fields in a table. With hooks and filters, the block is highly customizable and developer-friendly.

Feel free to tweak the styles, add more filters, and adapt this block to your project’s needs!

Happy coding! 🚀