Meta Field Block

Description

L’extension permet d’afficher un champ méta sous forme de bloc sur l’interface publique et prend en charge les champs ACF. Il peut être imbriqué dans un bloc parent qui a un contexte « postId », « postType » tel que le bloc « Boucle de requête » ou utilisé de manière autonome.

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 = 'Yes', $field, $post_id, $value ) {
      return 'Yep';
    }, 10, 4 );
    
    add_filter( 'meta_field_block_acf_field_true_false_off_text', function ( $off_text = 'No', $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>
    

    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 );
    
  6. Radio button / Button group type – The HTML output is value or label dependent on the return format of the field.

  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 )
    

    Ou en utilisant le crochet général :

    apply_filters( 'meta_field_block_get_block_content', $content, $attributes, $block, $post_id )
    

    Pour plus d’informations sur ces crochets, voir la section « Copier & coller » ci-dessous.

Extraits à copier & coller

La plupart des extraits utilisant le crochet meta_field_block_get_block_content n’affectent que la valeur sur l’interface publique, pas dans l’éditeur.

  1. Comment modifier le code HTML généré par le bloc ?

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

    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 encadrer le bloc avec un lien vers la publication dans la boucle de requête ?

    add_filter( 'meta_field_block_get_block_content', function ( $block_content, $attributes, $block, $post_id ) {
      $field_name = $attributes['fieldName'] ?? '';
    
      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);
    

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

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

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

    Mettez l’extrait ci-dessus dans votre thème ou extension, puis choisissez le type de champ champ personnalisé REST et remplacez full_name par le nom du champ. Veuillez vous assurer que le nom du champ REST est unique.

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

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

    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.

  6. How to display custom fields for users on the author template or display custom fields for the logged-in user or any users?
    Similar to displaying custom fields for terms.

Si cette extension vous est utile, veuillez s’il vous plait laisser un avis 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 – Un outil pour créer facilement des blocs, des compositions ou des variations pour votre site directement sur l’éditeur de blocs.
  • Block Enhancements – Une extension pour ajouter aux blocs des fonctionnalités pratiques telles que : icône, ombre portée, transformation…
  • Icon separator – Un tout petit bloc comme le bloc « Séparateur » mais avec la possibilité d’y ajouter une icône.
  • SVG Block – Un bloc pour insérer des images SVG en ligne facilement et en toute sécurité. Il contient également plus de 3000 icônes et certains séparateurs non rectangulaires courants.
  • Counting Number Block – Un bloc pour afficher un compteur animé.
  • Breadcrumb Block – Un simple bloc Fil d’Ariane qui prend en charge les données structurées JSON-LD.
  • Better Youtube Embed Block – Intégrez des vidéos Youtube sans ralentir votre site.

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

Captures d’écran

  • Réglages du bloc

Blocs

Cette extension fournit 1 bloc.

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

Installation

  1. Téléverser les fichiers de l’extension dans le répertoire /wp-content/plugins/meta-field-block ou installez directement l’extension via l’écran des extensions WordPress.
  2. Activez l’extension depuis la page « Extensions » de WordPress

FAQ

Qui a besoin de cette extension ?

Cette extension a été conçue pour les développeurs et développeuses, mais tout le monde peut l’utiliser.

Prend-il en charge la saisie et l’enregistrement de la valeur méta ?

Non. Il affiche uniquement les champs méta sous forme de blocs.

Prend-il en charge tous les types de champs méta ?

Seuls les types simples tels que chaîne, entier ou nombre peuvent être utilisés directement. Les autres types complexes tels qu’objet ou tableau doivent être convertis en chaînes de balisage HTML.

Prend-il en charge tous les types de champs ACF ?

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.

À quoi servent le préfixe et le suffixe ?

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.

Inclut-il un style pour le champ méta ?

Le bloc ne fournit aucun style CSS pour la valeur du champ méta. Mais il fournit dans les réglages un style basique pour le positionnement du champ.

Prend-il en charge d’autres frameworks de champs méta ?

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.

Avis

5 juin 2023 1 réponse
I spent several hours trying various ways to get a custom field to show up inside a query loop. The FSE query loop block does not expose the post ID - a serious oversight, in my humble opinion. Therefore, I could not get either my custom shortcode or custom block to work on my custom post archive page. This plugin solved the problem in less than 5 minutes, including installation time. Brilliant!
16 avril 2023 1 réponse
Excellent plugin!Simply add ACF fieldsThank you for this great work
12 avril 2023 2 réponses
I wonder, why ACF does not have such a block out-of-the-box. Thank you Phi Phan! PS: I would like this block to also give option to use an ACF field label, instead of manual prefix, so that I would not need to create two template parts in two different languages, for multilingual fields. Also, updating field label inside ACF, would require to find all the places in templates, where their labels are added, and change them to new ones.
26 mars 2023 1 réponse
Used this plugin to enhance the Query Loop block and show some Advanced Custom Fields - it works great!
Lire les 25 avis

Contributeurs/contributrices & développeurs/développeuses

« Meta Field Block » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

“Meta Field Block” a été traduit dans 1 locale. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Meta Field Block » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.

Journal

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