Meta Field Block

Description

Cette extension de bloc unique vous permet d’afficher un champ méta ou un champ personnalisé en tant que bloc sur l’interface publique. Il prend en charge les champs personnalisés pour les publications, les termes et les utilisateurs/utilisatrices. Il peut être imbriqué dans un bloc parent qui a un contexte postId et postType, tel que bloc de requête, ou utilisé comme un bloc autonome.

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.

Vous pouvez également afficher explicitement les champs personnalisés créés par l’extension Advanced Custom Fields. Il prend en charge tous les types de champs ACF dont les valeurs sont des chaines ou peuvent être converties en chaines. D’autres champs complexes tels que les champs image, lien, lien de page, vrai faux, case à cocher, liste déroulante, radio, groupe de boutons, taxonomie, utilisateur/utilisatrice, objet de publication et relation sont également pris en charge dans les formats de base.

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
• Comment cela fonctionne
• 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. Type Vrai/Faux – Le code HTML généré est Oui si la valeur est true, et Non si la valeur est false. Voir l’extrait de code ci-dessous pour modifier ces textes :

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

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, $value, $field, $post_id ) {
     return ' | ';
   }, 10, 4 );
   

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 )
    

Extraits à copier & coller

Lorsque vous utilisez le crochet meta_field_block_get_block_content pour personnaliser le contenu du bloc, nous vous recommandons de sélectionner dynamic comme type de champ. De cette manière, les modifications seront affichées à la fois dans l’interface publique et dans l’éditeur. Si vous travaillez avec des champs ACF, nous vous conseillons d’utiliser le crochet meta_field_block_get_acf_field pour modifier le contenu du champ.

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

Pour afficher des champs de type de données simples pour les publications, les termes et les utilisateurs/utilisatrices, vous n’avez besoin que de la version gratuite de MFB. MFB Pro peut vous faire économiser 90% du temps de développement lorsque vous travaillez avec des champs complexes ACF. Il y parvient en transformant vos types de champs complexes ACF en blocs de conteneurs, qui fonctionnent de manière similaire aux blocs de conteneurs natifs. Cela élimine le besoin de créer des blocs personnalisés ACF ou d’écrire du code personnalisé pour afficher des champs complexes ACF. Vous trouverez ci-dessous un tutoriel vidéo sur la façon d’utiliser MFB Pro pour créer un modèle de publication sans coder

The main features of MFB PRO are:

• Display settings fields
• Display ACF advanced layout fields: Group, Repeater, and Flexible content.
• Affichez les champs ACF Relationnel et Objet publication comme une boucle de requête.
• Display the ACF Image field as a core image block
• Affichez le champ galerie ACF
• Affichez le champ Fichier ACF en tant que bloc vidéo principal
• Affiche le champ Lien d’ACF comme un bloc natif de bouton
• Affiche le champ URL d’ACF comme un bloc natif Image, un bloc natif Bouton ou un lien.
• Display the ACF Email, and ACF File fields as a core button block or a link
• 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.

Cette extension est développée en utilisant @wordpress/create-block.