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.