Περιγραφή

The plugin allows developers/users to display a meta field as a block on the front end, supporting ACF fields. 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.

What is the HTML output of ACF fields?

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 value or label dependent 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 is value or label dependent 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 )
```
Or by using the general hook:
```
apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $post_id )
```
The benefit of the hook meta_field_block_get_acf_field is you can see the changes for both the front end and in the editor.

Learn more about these hooks in the below Copy & paste section.

Copy & paste snippets

Most of the snippets using the hook meta_field_block_get_block_content only affect the value on the front end, not in the editor.
If your fields are ACF Fields, we recommend using the hook meta_field_block_get_acf_field to change the field content, because with that hook you can change the block content for both the front end and the editor. However, some snippets may not work on the editor because we cannot get the context in the REST API request.

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 ) {
  $field_name = $attributes['fieldName'] ?? '';

  // Replace `your_field_name` with your unique name.
  if ( 'your_field_name' === $field_name ) {
    $block_content = 'new 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'] ?? '';

  // Replace `your_field_name` with your unique name.
  if ( 'your_field_name' === $field_name ) {
    $block_content = 'new content';
  }

  return $block_content;
}, 10, 4);

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'] ?? '';

  // Replace `your_field_name` with your unique name.
  if ( 'your_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'] ?? '';

  // Replace `your_field_name` with your unique name.
  if ( 'your_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'] ?? '';

  // Replace `your_image_url_field_name` with your unique 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);

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'] ?? '';

  // Replace `your_image_url_field_name` with your unique 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 an embedded URL (YouTube …) field as an embedded iframe?
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'] ?? '';

  // Replace `your_embedded_url_field_name` with your unique name.
  if ( 'your_embedded_url_field_name' === $field_name && wp_http_validate_url($block_content) ) {
    $block_content = wp_oembed_get( $block_content, array( 'width' => 1024 ) );
  }

  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'] ?? '';

  // Replace `your_embedded_url_field_name` with your unique name.
  if ( 'your_embedded_url_field_name' === $field_name && wp_http_validate_url($block_content) ) {
    $block_content = wp_oembed_get( $block_content, array( 'width' => 1024 ) );
  }

  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.

// Create a function to build the full name from two meta fields.
function yourprefix_get_full_name( $post_id ) {
  $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 );

  return trim("$first_name $last_name");
}

// Register a custom rest field for the full name.
add_action(
  'rest_api_init',
  function () {
      register_rest_field(
        'post', // Can be an array of post types or a singular value like 'post', 'page', 'product' etc.
        'full_name',
        array(
          'get_callback' => function ( $post_array ) {
            return yourprefix_get_full_name( $post_array['id'] );
          },
          'schema'       => array(
            'type' => 'string',
          ),
        )
      );
  }
);

// Render the block on the front end.
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
  $field_name = $attributes['fieldName'] ?? '';

  if ( 'full_name' === $field_name ) {
    $block_content = yourprefix_get_full_name( $post_id );
  }

  return $block_content;
}, 10, 4);

Put the above snippet in your theme or plugin, then choose the field type as custom rest field and input the field name as full_name. Please make sure the rest field name is unique.

How to display a term meta field?
For example, we need to display the value of a custom field named cat_attr for the product_cat taxonomy.

// Create a function to build the value for the field.
function yourprefix_get_attr_value( $term_id ) {
  $cat_attr_value = get_term_meta( $term_id, 'cat_attr', true );

  // If the meta field is an ACF Field. The code will be:
  // $cat_attr_value = get_field( 'cat_attr', 'term_' . $term_id );

  return $cat_attr_value;
}

// Render the block on the front end.
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
  $field_name = $attributes['fieldName'] ?? '';

  // Replace `unique_name_for_cat_attr` with your unique name.
  if ( 'unique_name_for_cat_attr' === $field_name && is_tax( 'product_cat' ) ) {
    $term_id = get_queried_object_id();
    $block_content = yourprefix_get_attr_value( $term_id );
  }

  return $block_content;
}, 10, 4);

Put the above snippet in your theme or plugin, drag the block into the product_cat taxonomy template, then choose the field type as custom rest field or meta and input the field name as unique_name_for_cat_attr. You can customize this snippet to display custom fields for a specific term on any page, or template.

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.

// Create a function to build the value for the field.
function yourprefix_get_footer_credit_text() {
  $footer_credit_text = get_option( 'footer_credit', '' );

  // If the field is an ACF Field. The code will be:
  // $footer_credit_text = get_field( 'footer_credit', 'option' );

  return $footer_credit_text;
}

// Render the block on the front end.
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
  $field_name = $attributes['fieldName'] ?? '';

  // Replace `unique_name_for_footer_credit` with your unique name.
  if ( 'unique_name_for_footer_credit' === $field_name ) {
    $block_content = yourprefix_get_footer_credit_text();
  }

  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'] ?? '';

  // Replace `unique_name_for_footer_credit` with your unique name.
  if ( 'unique_name_for_footer_credit' === $field_name ) {
    $block_content = yourprefix_get_footer_credit_text();
  }

  return $block_content;
}, 10, 4);

Put the above snippet in your theme or plugin, drag the block into the template, then choose the field type as custom rest field or meta and input the field name as unique_name_for_footer_credit.

How to display custom fields for users on the author template or display custom fields for the logged-in user or any users?

// Create a function to build the value for the field.
function yourprefix_get_user_field( $user_id ) {
  $user_field_value = get_user_meta( $user_id, 'your_field_name', true );

  // If the meta field is an ACF Field. The code will be:
  // $user_field_value = get_field( 'your_field_name', 'user_' . $user_id );

  return $user_field_value;
}

// Render the block on the front end.
add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
  $field_name = $attributes['fieldName'] ?? '';

  // Replace your_field_name with your unique name.
  if ( 'your_field_name' === $field_name && is_author() ) {
    $user_id = get_queried_object_id();
    $block_content = yourprefix_get_user_field( $user_id );
  }

  // If you want to display meta fields for logged-in users, then the code would be:
  // if ( 'your_field_name' === $field_name && is_user_logged_in() ) {
  //   $user_id = get_current_user_id();
  //   $block_content = yourprefix_get_user_field( $user_id );
  // }

  return $block_content;
}, 10, 4);

Put the above snippet in your theme or plugin, drag the block into the template, then choose the field type as custom rest field or meta and input the field name as your_field_name.

How to use MFB as a placeholder to display any kind of content?

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:

Content Blocks Builder – A tool to create blocks, patterns or variations easily for your site directly on the Block Editor.
Block Enhancements – A plugin to add more useful features to blocks likes: icons, box-shadow, transform…
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon to it.
SVG Block – A block to insert inline SVG images easily and safely. It also bundles with more than 3000 icons and some common non-rectangular dividers.
Counting Number Block – A block to display a number that has the number-counting effect.
Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data.
Better Youtube Embed Block – Embed Youtube videos without slowing down your site.

The plugin is developed using @wordpress/create-block.

Στιγμιότυπα

Block's settings

Μπλοκς

Αυτό το πρόσθετο παρέχει 1 μπλοκ.

Meta Field Block Display a meta field or a custom field as a block on the front end, supporting ACF fields.

Εγκατάσταση

Upload the plugin files to the /wp-content/plugins/meta-field-block directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the ‘Plugins’ screen in WordPress

Συχνές Ερωτήσεις

Who needs this plugin?: This plugin is created for developers, but end users can also use it.
Does it support inputting and saving meta value?: No, It does not. It only displays meta fields as blocks.
Does it support all types of meta fields?: 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.
Does it support all types of ACF fields?: 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.
What are the prefix and suffix for?: 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.
Does it include some style for the meta field?: 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.
Does it support other meta-field frameworks?: Yes, it does, as long as those meta fields can be accessed via the get_post_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.
What if the displayed markup is blank or is different from the meta value?: There is a chance that your meta value contains some HTML tags or HTML attributes that are not allowed to display. 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.

Κριτικές

pathetic 13 Νοεμβρίου 2023 1 απάντηση

The repeater does not understand, writes Array

johhom 5 Νοεμβρίου 2023 1 απάντηση

Thanks Phi!

marieservais 12 Οκτωβρίου 2023 1 απάντηση

Wow, this is a great plugin ! Simple and efficient. It solved seamlessly, in an instant, the problem I had been working around for days without muchsuccess. So thank you !

chyvak1831 12 Οκτωβρίου 2023 1 απάντηση

Most wanted plugin for block themes!Allow you easy and fast output mete fields and ACF.php filters allow you modify output, which make possible do very complex things!

Tibor Paulsch 6 Σεπτεμβρίου 2023 1 απάντηση

This makes live so much easier! Even more since we can use it in block templates too.

Squidy McSquid 22 Αυγούστου 2023 2 απαντήσεις

This plugin has helped me so much. Wordpress blocks don't seem to support getting the POST ID inside of a query block. This plugin solves that for me and allows me to use php to modify the output to my liking.

Ανάγνωση όλων των 36 κριτικών

Συνεισφέροντες & Προγραμματιστές

“Meta Field Block” είναι λογισμικό ανοιχτού κώδικα. Οι παρακάτω έχουν συνεισφέρει στη δημιουργία του.

Phi Phan

Το “Meta Field Block” έχει μεταφραστεί σε 3 γλώσσες. Ευχαριστούμε τους μεταφραστές για τις συνεισφορές τους.

Μεταφράστε το “Meta Field Block” στην γλώσσα σας.

Ενδιαφέρεστε για την ανάπτυξη;

Περιηγηθείτε στον κώδικα, ανατρέξτε στο αποθετήριο SVN ή εγγραφείτε στο αρχείο καταγραφής αλλαγών ανάπτυξης μέσω RSS .

Σύνοψη αλλαγών

1.1.7

Release Date – 09 September 2023

FIX – The block does not show the number 0 if using it as the empty message

1.1.6

Release Date – 13 August 2023

DEV – Refactor block.json, update to block API version 3 for better WP 6.3 compatibility
FIX – Rename allowed HTML attributes for SVG

1.1.5

Release Date – 15 July 2023

DEV – Add a custom hook apply_filters( 'meta_field_block_kses_allowed_html', $allowed_html_tags ) for filtering allowed HTML tags in the value.
DEV – Allow displaying iframe, and SVG tag by default.
DEV – Force displaying color (text, background, link) attributes for unsupported themes.
DEV – Refactor code for React best practice.
DOC – Update readme for the hook meta_field_block_get_acf_field

1.1.4

Release Date – 20 May 2023

DEV – Change the placeholder text for the block in the site editor.
DEV – Add a setting to use the ACF field label as the prefix

1.1.3

Release Date – 31 Mar 2023

DEV – Support choice fields: true/false, select, checkbox, radio, button group
DEV – Add raw value to the meta_field_block_get_acf_field hook

1.1.2

Release Date – 28 Mar 2023

DEV – Refactor both JS and PHP code
DEV – Load ACF field value even if we could not load the field object
DEV – Separate settings group for WP 6.2

1.1.1

Release Date – 14 Mar 2023

DEV – Add a hideEmpty setting to hide the whole block if the value is empty
DEV – Add an emptyMessage setting to show a custom text in case the value is empty
FIX – The meta field did not show on the archive template

1.1.0

Release Date – 06 Mar 2023

DEV – Refactor all the source code for more upcoming features
DEV – Make sure the block works with all return formats for the image field, link field
DEV – Get all custom rest fields to show on the suggested help
DEV – Allow changing the tagName from the block toolbar
DEV – Improve performance
DEV – Add more core support features
DEV – Add more meaningful messages for some use cases
FIX – Allow displaying links without text

1.0.10

Release Date – 02 Feb 2023

DEV – Support multiple values for ACF User type

1.0.9

Release Date – 15 Sep 2022

FIX – Change the textdomain to the plugin slug

1.0.8

Release Date – 10 Sep 2022

FIX – Wrong handle for wp_set_script_translations. Thanks to Loïc Antignac (@webaxones)

1.0.7

Release Date – 07 Sep 2022

FIX – Add a null check for meta fields value before accessing it’s property

1.0.6

Release Date – 25 Jun 2022

DEV – Add an option to show the block’s outline on the Editor

1.0.5

Release Date – 21 Jun 2022

DEV – Display the placeholder text on the template context

1.0.4

Release Date – 02 May 2022

DEV – Support displaying some field types for ACF such as image, link, page_link, post_object, relationship, taxonomy

1.0.3

Release Date – 30 April 2022

DEV – Add supports for borders, and full typography options

1.0.2

Release Date – 28 April 2022

DEV – Add the title to block registration in JS
REFACTOR source code

1.0.1

Release Date – 23 March 2022

FIX – The block does not work in the site editor.

1.0.0

Release Date – 22 February 2022

Περιγραφή

What is the HTML output of ACF fields?

Copy & paste snippets

Στιγμιότυπα

Μπλοκς

Εγκατάσταση

Συχνές Ερωτήσεις

Who needs this plugin?

Does it support inputting and saving meta value?

Does it support all types of meta fields?

Does it support all types of ACF fields?

What are the prefix and suffix for?

Does it include some style for the meta field?

Does it support other meta-field frameworks?

What if the displayed markup is blank or is different from the meta value?

Κριτικές

Συνεισφέροντες & Προγραμματιστές

Ενδιαφέρεστε για την ανάπτυξη;

Σύνοψη αλλαγών

1.1.7

1.1.6

1.1.5

1.1.4

1.1.3

1.1.2

1.1.1

1.1.0

1.0.10

1.0.9

1.0.8

1.0.7

1.0.6

1.0.5

1.0.4

1.0.3

1.0.2

1.0.1

1.0.0

Μεταστοιχεία

Αξιολογήσεις

Συντελεστές

Υποστήριξη