Meta Field Block

Description

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, WooCommerce Product Collection, or used as a stand-alone block.

Vous pouvez afficher n’importe quel champ dont la valeur peut être récupérée par l’API du cœur (get_post_meta, get_term_meta, get_user_meta) et qui est une chaine de caractères ou peut être converti en chaine de caractères. Pour afficher la valeur du champ dans l’éditeur de blocs, il doit être accessible via l’API REST ou avoir le type de champ défini sur dynamic.

You can also display custom fields created by the Advanced Custom Fields or Meta Box plugin explicitly. It supports all ACF field types and Meta Box field types whose values are strings or can be converted to strings. Some other ACF complex fields such as Image, Link, Page Link, True False, Checkbox, Select, Radio, Button Group, Taxonomy, User, Post Object and Relationship field types as well as Meta Box fields such as Select, Checkbox, Radio, Image, Video, Taxonomy, User, Post field types are also supported in basic formats.

Cette extension fournit également des API de crochet conviviales pour les développeurs/développeuses qui vous permettent de personnaliser facilement la sortie du bloc, d’afficher des champs de type données complexes ou d’utiliser le bloc comme un texte indicatif pour afficher n’importe quel type de contenu avec object_id et object_type en tant que paramètres de contexte.

Un cas particulier où ce bloc est vraiment utile est lorsque vous avez besoin d’obtenir le post_id correct dans votre code court lorsque vous l’utilisez dans une boucle de requête. Dans ce cas, vous pouvez définir le type de champ comme dynamic et entrer votre code court dans le nom du champ. Le bloc l’affichera correctement à la fois sur l’interface publique et dans l’éditeur. Alternativement, si vous voulez uniquement voir l’aperçu de votre code court dans l’éditeur, vous pouvez également utiliser ce bloc comme une meilleure version du core/shortcode.

Liens

• Website
• How it works & tutorials
• MFB PRO

Quel est le résultat HTML d’un champ personnalisé ?

La sortie HTML d’un champ personnalisé sur l’interface publique dépend du contexte du champ. Il utilise l’une de ces fonctions de l’API du cœur pour obtenir la valeur du champ : get_post_meta, get_term_meta, get_user_meta.

Quel code HTML est généré pour les champs ACF ?

1. Tous les types de champs basiques qui renvoient des chaînes ou qui peuvent être convertis en chaînes sont pris en charge – La fonction get_field est utilisée pour générer le code HTML.

2. Type Lien – Le code HTML généré est :

   <a href={url} target={target} rel="noreferrer noopener">{title}</a>
   

   Aucun attribut rel n’est ajouté si l’attribut target n’est pas égal à _blank

3. Type Image – Le code HTML généré provient de la fonction wp_get_attachment_image. La taille de l’image est définie par le réglage « Taille de l’aperçu ».

4. True / False type – The HTML 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_true_false_on_text', function ( $on_text, $field_name, $field, $post_id, $value ) {
     return 'Yep';
   }, 10, 5 );
   
   add_filter( 'meta_field_block_true_false_off_text', function ( $off_text, $field_name, $field, $post_id, $value ) {
     return 'Noop';
   }, 10, 5 );
   

5. Type Case à cocher/Liste déroulante – Le code HTML généré est :

   <span class="value-item">{item_value}</span>, <span class="value-item">{item_value}</span>
   

   item_value peut être égal à value ou label en fonction du format de présentation du champ. Plusieurs valeurs sélectionnées sont séparées par le caractère , (virgule) et l’extrait de code ci-dessous permet de modifier ce séparateur :

   add_filter( 'meta_field_block_acf_field_choice_item_separator', function ( $separator, $field_name, $field, $post_id, $value ) {
     return ' | ';
   }, 10, 5 );
   

6. Type bouton radio / Groupe de boutons – Le code HTML généré est value ou label en fonction du format de présentation du champ.

7. Type Lien vers la page, type Objet de la publication – Le code HTML généré pour un champ à valeur unique est :

   <a class="post-link" href={url} rel="bookmark">{title}</a>
   

   Pour un champ à valeur multiple :

   <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>
   

8. Type Relation – Le code HTML généré est :

   <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>
   

9. Type Taxonomie – Le code HTML généré est :

   <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>
   

10. Type Compte – Le code HTML généré pour un champ à valeur unique est :

    <a class="user-link" href={author_url}>{display_name}</a>
    

    Pour un champ à valeur multiple :

    <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>
    

11. Pour d’autres types de champ plus complexes, vous pouvez générer un code HTML personnalisé en utilisant le crochet :

    apply_filters( 'meta_field_block_get_acf_field', $field_value, $post_id, $field, $raw_value, $object_type )
    

    Ou en utilisant le crochet général :

    apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $object_id, $object_type )
    

What is the HTML output of Meta Box fields?

1. Similar to ACF fields, all basic fields that return strings or can cast to strings using the function rwmb_get_value are supported.

   The HTML output of cloneable basic fields is:

   <span class="value-repeater-item">{item_1_value}</span>, <span class="value-repeater-item">{item_2_value}</span>
   

   Use the following hooks to change the tag and the separator:

   apply_filters( 'meta_field_block_mb_clone_field_item_separator', ', ', $field, $post_id, $field_value )
   apply_filters( 'meta_field_block_mb_clone_field_item_tag', 'span', $field, $post_id, $field_value )
   

2. Single image types – The HTML output is from the wp_get_attachment_image function. The image size is from the image_size setting.

3. Image list types (Image, Image advanced, Image upload) – The HTML output is:

   <figure class="image-list">
     <figure class="image-item"><img /></figure>
     <figure class="image-item"><img /></figure>
   </figure>
   

4. Checkbox / Switch type – Similar to ACF True / False type.

5. Multi-choice types (Select, Select advanced, Button group, Autocomplete, Image select, Checkbox list) – The HTML output is:

   <span class="value-item">{item_value}</span>, <span class="value-item">{item_value}</span>
   

   To display the label instead of the value, use this hook:

   apply_filters( 'meta_field_block_mb_field_choice_item_display_label', false, $field_name, $field, $post_id, $value )
   

   To change the separator, use this hook:

   apply_filters( 'meta_field_block_mb_field_choice_item_separator', ', ', $file_name, $field, $post_id, $value )
   

6. Radio type – The output is the field value by default. To display label or change the separator, use the same hooks as the multi-choice types.

7. Post type – The HTML output for a single-value field is:

   <a class="post-link" href={url} rel="bookmark">{title}</a>
   

   Pour un champ à valeur multiple :

   <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>
   

8. Taxonomy, Taxonomy advanced type – The HTML output for a single-value field is:

   <a class="term-link" href={term_url}>{term_name}</a>
   

   Pour un champ à valeur multiple :

   <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>
   

9. User type – Similar to ACF User type

10. Video type – The HTML output for a single-value field is:

    <video controls preload="metadata" src={video_src} width={video_width} poster={poster} />
    

    Pour un champ à valeur multiple :

    <figure class="video-list">
      <figure class="video-item"><video /></figure>
      <figure class="video-item"><video /></figure>
    </figure>
    

11. To display complex field types or change the output of a field, use the hook meta_field_block_get_mb_field or the general hook meta_field_block_get_block_content.

Extraits à copier & coller

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. Similarly, Meta Box users should use the meta_field_block_get_mb_field hook to modify the content. ACF snippets can also be used with Meta Box fields, but you must use the correct hook name and replace the get_field function with the rwmb_get_value function.

1. Comment modifier la sortie HTML du bloc ?
   En utilisant le crochet meta_field_block_get_block_content :

   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);
   

   Utilisation du crochet meta_field_block_get_acf_field pour les champs ACF uniquement :

   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);
   

   Cet extrait basique est très puissant. Vous pouvez l’utiliser pour afficher n’importe quel champ provenant de publications, de termes, de comptes ou de réglages. Voir en détail les cas particuliers ci-dessous.

2. Comment envelopper le bloc avec un lien vers la publication dans la boucle de requête ?
   En utilisant le crochet meta_field_block_get_block_content :

   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);
   

   Utilisation du crochet meta_field_block_get_acf_field pour les champs ACF uniquement :

   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);
   

   Cet extrait fonctionne uniquement avec un bloc ayant des balises HTML « inline » ou une image.

3. Comment afficher un champ d’URL d’image comme une balise d’image ?
   En utilisant le crochet meta_field_block_get_block_content :

   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);
   

   Utilisation du crochet meta_field_block_get_acf_field pour les champs ACF uniquement :

   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);
   

4. Comment afficher plusieurs champs méta dans un même bloc ?
   Par exemple, si nous avons besoin d’afficher le nom d’un utilisateur ou d’une utilisatrice à partir de deux champs méta prénom et nom.

   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);
   

   Choisissez le type de champ dynamique et saisissez le nom du champ full_name.

5. Comment afficher un champ de réglage ?
   Par exemple, nous devons afficher un champ de réglage nommé footer_credit dans l’élément de modèle de pied de page du 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);
   

6. Comment utiliser MFB comme texte indicatif pour afficher n’importe quel type de contenu ?

SAVE YOUR TIME WITH MFB PRO

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, or Meta Box 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 custom blocks or writing custom code for displaying complex fields.

Below are some video tutorials that demonstrate how MFB Pro can help you display complex fields:

How to build a post template without coding

How to display ACF Repeater fields as a list, grid, or carousel

How to display ACF Gallery fields as a grid, masonry, or carousel

The main features of MFB PRO are:

• Display settings fields.
• Display ACF advanced layout fields: Group, Repeater, and Flexible content.
• Display ACF Repeater fields in a carousel layout, which is useful for displaying banner sliders.
• Affichez les champs ACF Relationnel et Objet publication comme une boucle de requête.
• Display the ACF Image field as a core image block.
• Display the ACF Gallery field as a gallery using grid or masonry layouts or as a carousel of images.
• Display the ACF File field as a video block, an image block, a button block, or a link.
• Display the ACF Link field as a button block.
• Display the ACF URL field as an image block, a button block, or a link.
• Display the ACF Email, and ACF File fields as a button block or a link.
• Display the Meta Box Group field, similar to the ACF Group field.
• Display the Meta Box Cloneable Group field as a repeater block, similar to the ACF Repeater field. Supports row, stack, grid or carousel layouts.
• Display the Meta Box Post field as a Query Loop.
• Display the Meta Box single image fields as an image block.
• Display the Meta Box image list fields as a gallery using grid or masonry layouts or as a carousel of images, similar to the ACF Gallery field.
• Display the Meta Box File single input field as a video block, an image block, or a button.
• Display a group field as a details block, and display a repeater or cloned group as an accordion.
• Set a single image sub-field (ACF Image or Meta Box Image) as the background image of a group field.
• Display custom fields from a specific post, term or user

Si cette extension vous est utile, veuillez s’il vous plait laisser une évaluation rapide et une note sur WordPress.org pour la faire connaître au plus grand nombre. Ce serait très apprécié.

Vous pouvez consulter mes autres extensions si cela vous intéresse :

• Content Blocks Builder – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.
• SVG Block – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.
• Icon separator – A tiny block just like the core/separator block but with the ability to add an icon.
• Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.
• Block Enhancements – Adds practical features to blocks like icons, box shadows, transforms, etc.
• Counting Number Block – A block to display numbers with a counting effect
• Better YouTube Embed Block – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.

The plugin is built using @wordpress/create-block.
MFB is developed using only native Gutenberg features to keep it fast and lightweight.
MFB Pro uses SwiperJS for the carousel layout. However, if you don’t use the carousel layout, the script and styles won’t be loaded on your page.