Display a custom field as a block on the front end. It supports custom fields for posts, terms, and users. It supports ACF fields explicitly.
This single-block plugin allows you to display a meta field or a custom field as a block on the front end. It supports custom fields for posts, terms, and users. It can be nested inside a parent block that has postId
and postType
context, such as Query Block
, or used as a stand-alone block.
You can display any field whose value can be retrieved by the core API (get_post_meta, get_term_meta, get_user_meta) and is a string or can be converted to a string. To display the field value in the Block Editor, it has to be accessible via the REST API or have the field type set to dynamic
.
You can also display custom fields created by the Advanced Custom Fields plugin explicitly. It supports all ACF field types whose values are strings or can be converted to strings. Some other complex fields such as Image, Link, Page Link, True False, Checkbox, Select, Radio, Button Group, Taxonomy, User, Post Object and Relationship field types are also supported in basic formats.
This plugin also provides developer-friendly hook APIs that allow you to easily customize the output of the block, display complex data type fields, or use the block as a placeholder to display any kind of content with object_id
and object_type
as context parameters.
An edge case where this block is really helpful is when you need to get the correct post_id
in your shortcode when you use it in a Query Loop. In that case, you can set the field type as dynamic
and input your shortcode in the field name. The block will display it correctly on both the front end and the editor. Alternatively, if you only want to see the preview of your shortcode in the editor, you can also use this block as a better version of the core/shortcode
.
The HTML output of a custom field on the front end depends on the context of the field. It uses one of these core API functions to get the field value: get_post_meta, get_term_meta, get_user_meta.
All basic field types that return strings or can cast to strings are supported – The HTML output is from the get_field
function.
Link type – The HTML output is:
<a href={url} target={target} rel="noreferrer noopener">{title}</a>
There is no rel
attribute if the target
is not _blank
Image type – The HTML output is from the wp_get_attachment_image function. The image size is from the Preview Size setting.
True / False type – The HML output is Yes
if the value is true
, and No
if the value is false
. Below is the code snippet to change these text values:
add_filter( 'meta_field_block_acf_field_true_false_on_text', function ( $on_text, $field, $post_id, $value ) { return 'Yep'; }, 10, 4 ); add_filter( 'meta_field_block_acf_field_true_false_off_text', function ( $off_text, $field, $post_id, $value ) { return 'Noop'; }, 10, 4 );
Checkbox / Select type – The HTML output is:
<span class="value-item">{item_value}</span>, <span class="value-item">{item_value}</span>
The item_value
can be either value
or label
, depending on the return format of the field. Multiple selected values are separated by ,
. Below is the code snippet to change the separator:
add_filter( 'meta_field_block_acf_field_choice_item_separator', function ( $separator, $value, $field, $post_id ) { return ' | '; }, 10, 4 );
Radio button / Button group type – The HTML output can be either value
or label
, depending on the return format of the field.
Page link type, Post object type – The HTML output for a single-value field is:
<a class="post-link" href={url} rel="bookmark">{title}</a>
For a multiple-value field is:
<ul> <li><a class="post-link" href={url} rel="bookmark">{title}</a></li> <li><a class="post-link" href={url} rel="bookmark">{title}</a></li> </ul>
Relationship type – The HTML output is:
<ul> <li><a class="post-link" href={url} rel="bookmark">{title}</a></li> <li><a class="post-link" href={url} rel="bookmark">{title}</a></li> </ul>
Taxonomy type – The HTML output is:
<ul> <li><a class="term-link" href={term_url}>{term_name}</a></li> <li><a class="term-link" href={term_url}>{term_name}</a></li> </ul>
User type – The HTML output for a single-value field is:
<a class="user-link" href={author_url}>{display_name}</a>
For a multiple-value field is:
<ul> <li><a class="user-link" href={author_url}>{display_name}</a></li> <li><a class="user-link" href={author_url}>{display_name}</a></li> </ul>
For other complex field types, you can generate a custom HTML output by using the hook:
apply_filters( 'meta_field_block_get_acf_field', $field_value, $post_id, $field, $raw_value, $object_type )
Or by using the general hook:
apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $object_id, $object_type )
When using the meta_field_block_get_block_content
hook to customize block content, we recommend selecting dynamic
as the field type. This way, both the front end and the editor will show the changes. If you are working with ACF Fields, we suggest using the meta_field_block_get_acf_field
hook to modify the field content.
How to change the HTML output of the block?
Using the meta_field_block_get_block_content
hook:
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id, $object_type ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'your_unique_field_name' === $field_name ) { $block_content = 'new content'; } return $block_content; }, 10, 5);
Using the meta_field_block_get_acf_field
hook for ACF Fields only:
add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value, $object_type ) { $field_name = $field['name'] ?? ''; if ( 'your_unique_field_name' === $field_name ) { $block_content = 'new content'; } return $block_content; }, 10, 5);
This basic snippet is very powerful. You can use it to display any fields from any posts, terms, users or setting fields. Please see the details in the below use cases.
How to wrap the block with a link to the post within the Query Loop?
Using the meta_field_block_get_block_content
hook:
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) { $block_content = sprintf('<a href="%1$s">%2$s</a>', get_permalink($post_id), $block_content); } return $block_content; }, 10, 4);
Using the meta_field_block_get_acf_field
hook for ACF Fields only:
add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) { $field_name = $field['name'] ?? ''; if ( 'your_unique_field_name' === $field_name && $block_content !== '' ) { $block_content = sprintf('<a href="%1$s">%2$s</a>', get_permalink($post_id), $block_content); } return $block_content; }, 10, 4);
This snippet only works with the block that has only HTML inline tags or an image.
How to display an image URL field as an image tag?
Using the meta_field_block_get_block_content
hook:
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) { $block_content = sprintf('<img src="%1$s" alt="your_image_url_field_name" />', esc_attr($block_content)); } return $block_content; }, 10, 4);
Using the meta_field_block_get_acf_field
hook for ACF Fields only:
add_filter( 'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) { $field_name = $field['name'] ?? ''; if ( 'your_image_url_field_name' === $field_name && wp_http_validate_url($block_content) ) { $block_content = sprintf('<img src="%1$s" alt="your_image_url_field_name" />', esc_attr($block_content)); } return $block_content; }, 10, 4);
How to display multiple meta fields in a block?
For example, we need to display the full name of a user from two meta fields first_name
and last_name
.
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; if ( 'full_name' === $field_name ) { $first_name = get_post_meta( $post_id, 'first_name', true ); $last_name = get_post_meta( $post_id, 'last_name', true ); // If the meta fields are ACF Fields. The code will be: // $first_name = get_field( 'first_name', $post_id ); // $last_name = get_field( 'last_name', $post_id ); $block_content = trim("$first_name $last_name"); } return $block_content; }, 10, 4);
Choose the field type as dynamic
and input the field name as full_name
.
How to display a setting field?
For example, we need to display a setting field named footer_credit
on the footer template part of the site.
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) { $field_name = $attributes['fieldName'] ?? ''; // Replace `footer_credit` with your unique name. if ( 'footer_credit' === $field_name ) { $block_content = get_option( 'footer_credit', '' ); // If the field is an ACF Field. The code will be: // $block_content = get_field( 'footer_credit', 'option' ); } return $block_content; }, 10, 4);
How to use MFB as a placeholder to display any kind of content?
To display simple data type fields for posts, terms, and users, you only need the free version of MFB. MFB Pro can save you 90% of development time when working with ACF complex fields. It achieves this by transforming your ACF complex field types into container blocks, which work similarly to core container blocks. This eliminates the need for creating ACF custom blocks or writing custom code for displaying ACF complex fields.
Below is a video tutorial on how to use MFB Pro to build a post template without coding
The main features of MFB PRO are:
If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it.
Please check out my other plugins if you’re interested:
The plugin is developed using @wordpress/create-block.
/wp-content/plugins/meta-field-block
directory, or install the plugin through the WordPress plugins screen directly.This plugin is created for developers, but end users can also use it.
No, It does not. It only displays meta fields as blocks.
Only simple types such as string, integer, or number can be used directly. Other complex types such as object, array need to be converted to HTML markup strings.
It supports all basic field types that return strings or cast to strings. Some complex field types like image, link, page_link, post_object, relationship, taxonomy, and user are also supported in a basic format. To display complex ACF field types such as Group, Repeater, Flexible Content, Gallery, File, etc., you will need to either purchase MFB PRO or write your own custom code using the hook API.
The value for those settings should be plain text or some allowed HTML elements. Their values will be formatted with wp_kses( $prefix, wp_kses_allowed_html( "post" ) )
. They’re helpful for some use cases like displaying the name of the meta field or a value with a prefix or suffix, e.g. $100, 100px, etc.
The block does not provide any CSS style for the meta field value. But it does provide a basic display inline style from the settings.
Yes, it does, as long as those meta fields can be accessed via the get_post_meta
, or get_term_meta
, or get_user_meta
function and the return value is a string or can be cast to a string. To display the value in the block editor, the meta field has to be accessed via the REST API.
There is a chance that your meta value contains some HTML tags or HTML attributes that are not allowed to be displayed. To fix this, you should use the hook apply_filters( 'meta_field_block_kses_allowed_html', $allowed_html_tags )
to add your tags and attributes to the array of allowed tags. By default, the block allows all tags from the $allowedposttags
value and basic attributes for iframe
and SVG
elements.
Release Date – 17 July 2024
Release Date – 06 June 2024
meta_field_block_get_object_type
Release Date – 07 May 2024
Release Date – 01 May 2024
Release Date – 22 April 2024
Release Date – 16 April 2024
Release Date – 22 March 2024
Release Date – 11 March 2024
Release Date – 22 February 2024
_acf_changed
from the list of suggested nameshideEmpty
setting for static blocksperPage
value for ACF query fields from 100 to 12linkToPost
setting to the ACF image field and ACF URL-as-image fieldRelease Date – 24 January 2024
dynamic
field type to display private fields, support running shortcodes, and see the changes made by the hook meta_field_block_get_block_content
both on the front end and the editor.publish_posts
to edit_posts
Release Date – 08 January 2024
Release Date – 03 January 2024
section
tag to the list of HTML tagfootnotes
from the suggested values for the meta field nameRequires at least
to 6.3Release Date – 11 December 2023
$object_type
parameter to two main hooks meta_field_block_get_acf_field
and meta_field_block_get_block_content
Release Date – 09 September 2023
Release Date – 13 August 2023
Release Date – 15 July 2023
apply_filters( 'meta_field_block_kses_allowed_html', $allowed_html_tags )
for filtering allowed HTML tags in the value.meta_field_block_get_acf_field
Release Date – 20 May 2023
Release Date – 31 Mar 2023
meta_field_block_get_acf_field
hookRelease Date – 28 Mar 2023
Release Date – 14 Mar 2023
Release Date – 06 Mar 2023
Release Date – 02 Feb 2023
Release Date – 15 Sep 2022
Release Date – 10 Sep 2022
Release Date – 07 Sep 2022
Release Date – 25 Jun 2022
Release Date – 21 Jun 2022
Release Date – 02 May 2022
Release Date – 30 April 2022
Release Date – 28 April 2022
Release Date – 23 March 2022
Release Date – 22 February 2022