Meta Field Block

Description

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, postType context such as Query Block or stand-alone.

How to use the block with ACF Field Types?

  1. All basic field types that return strings or can cast to strings are supported – The output is from the get_field function.
  2. Link type – The output markup is <a href={url} target={target} rel="noreferrer noopener">{title}</a>. There is no rel attribute if the target is not _blank
  3. Image type – The output markup by the wp_get_attachment_image function. The image size is from the Preview Size setting.
  4. Page link type, Post object type – The output markup for a single-value field is <a class="post-link" href={url} rel="bookmark">{title}</a>, and for a multiple-value field is <ul><li><a class="post-link" href={url} rel="bookmark">{title}</a></li></ul>.
  5. Relationship type – The output markup is <ul><li><a class="post-link" href={url} rel="bookmark">{title}</a></li></ul>
  6. Taxonomy type – The output markup is <ul><li><a class="term-link" href={term_url}>{term_name}</a></li></ul>
  7. User type – The output markup for a single-value field is <a class="user-link" href={author_url}>{display_name}</a>, and for a multiple-value field is <ul><li><a class="user-link" href={author_url}>{display_name}</a></li></ul>.
  8. For other complex field types, you can code a custom output markup by the hook apply_filters( 'meta_field_block_get_acf_field', 'field_value', 'post_id', 'field' ) or by the general hook in the advanced use cases.

Advanced use cases

  1. How to change the output of the block?
  2. How to display a complex value like a dynamic field that depends on multiple meta fields?

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.

Screenshots

  • Block's settings

Blocks

This plugin provides 1 block.

  • Meta Field Block Display a meta field as a block on frontend, supporting ACF fields.

Installation

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

FAQ

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 value via REST API.

Reviews

26 de marzo, 2023 1 reply
Used this plugin to enhance the Query Loop block and show some Advanced Custom Fields - it works great!
19 de marzo, 2023 1 reply
Finally I was able to display my ACF values where I needed them in the block theme, including in the Query loop block. Nothing else worked, like shortcodes or other plugins. Should be part of WordPress core. Great work!
5 de marzo, 2023 1 reply
This is excellent plugin! Adding ACF fields has never been this easy using this plugin! great job!
14 de febrero, 2023 1 reply
Incredible that I couldn't do that easily with ACF. Or maybe it's hidden somewhere in their documentation? Anyway, I could do it very easily with your plugin, thanks a lot! 🙂
Read all 20 reviews

Contributors & Developers

“Meta Field Block” is open source software. The following people have contributed to this plugin.

Contributors

“Meta Field Block” has been translated into 1 locale. Thank you to the translators for their contributions.

Translate “Meta Field Block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

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