Aller directement à la vidéo

Dans cet article, nous allons voir comment modifier la query du block « Query Loop » (Boucle de requête).
Évidemment, comme d’habitude dans WordPress, ils ont prévu des filtres pour pouvoir modifier le résultat de la Query Loop (ou bloc de requête). Nous allons voir ensemble comment faire.

Tout commence par la création d’une variation de bloc. Pourquoi me direz-vous ?
Tout simplement pour pouvoir identifier le bon bloc dans le filtre.

Nous allons donc commencer par créer une variation du bloc « Query Loop ».

Ajouter du JS dans l’éditeur.

Tout ce passe dans les fichiers javascript.
Donc, la première chose à faire, est d’inclure le fichier qui va contenir la variation au niveau de l’éditeur et non dans l’admin.

Voici le code pour insérer le script dans l’éditeur. Évidemment, vous êtes libre de placer le fichier où vous voulez.

/**
* Enqueue Editor assets.
*/
function example_enqueue_editor_assets()
{
  wp_enqueue_script('example-editor-scripts',
   get_template_directory_uri() . '/editor-scripts.js',
   ['wp-blocks', 'wp-dom-ready']
  );
}

add_action('enqueue_block_editor_assets', 'example_enqueue_editor_assets');

Vous avez maintenant un fichier javascript uniquement chargé dans l’éditeur Gutenberg.

Créer la variation du bloc

Maintenant, il faut créer la variation du bloc « core/query » dans le fichier « editor-scripts.js »

const VARIATION_NAME = 'wp-perf/featured-post';

wp.blocks.registerBlockVariation('core/query', {
  name: VARIATION_NAME, 
  title: 'Featured Post',
  description: 'Display a featured post',
  icon: 'admin-post',
  category: 'widgets',
  isActive: ({ namespace, query }) => { 
    return namespace === VARIATION_NAME && query.postType === 'post'
  },
  attributes: {
    namespace: VARIATION_NAME
  }
})

Dans cet exemple, j’insère le minimum de valeurs dans l’objet de paramètres mais vous pouvez aussi ajouter :

  • Plus d’attributes : pour pré-configurer des réglages du bloc (notamment le className)
  • scope : pour définir où doit s’afficher le bloc
  • Et la partie innerBlocks pour pré-configurer les blocs affichés dans les items.

Exemple de code innerBlock :

innerBlocks: [
[
  "core/post-template",
  {},
  [
    ["core/post-featured-image", {}],
    ["core/post-title", {}], 
    ["core/post-excerpt", {}],
    ["core/post-date", {}],
  ],
]
]

A noter, que le « isActive » est optionnel mais vous pouvez ajouter de la granularité avec cet valeur.

À partir de là, vous devriez avoir un nouveau bloc dans l’inserter de Gutenberg.

Lien vers la doc WordPress :
https://developer.wordpress.org/news/2023/08/29/an-introduction-to-block-variations/

isActive permet d’activer ou de désactiver (repasser sur le bloc d’origine « core/query ») votre variation.
Dans le code du dessus, si le post type dans la colonne de droite passe à « page », le bloc repasse sur un bloc query classique. On peut donc afficher le bloc avec les réglages définis dans la configuration de la variation si on est sur un post type « post ».

Cela peut être assez pratique pour changer complètement le style via une classe CSS.

Version PHP de la variation

Depuis la version 6.5 de WordPress, il est possible d’ajouter des variations via PHP.
Voici un code équivalent en PHP pour ajouter la variation. Ce qui évite toute la partie JS.
Voici un article sur les variations en version PHP

function my_block_type_variations($variations, $block_type)
{
  if ($block_type->name === 'core/query') {
    $variations[] = [
      'name' => 'wp-perf/featured-post',
      'title' => __('Featured Post', 'theme-slug'),
      'description' => __('Display a featured post', 'theme-slug'),
      'category' => 'theme',
      'icon' => 'admin-post',
      'attributes' => [
         'namespace' => 'wp-perf/featured-post',
      ],
    ];
  }

  return $variations;
}

add_filter('get_block_type_variations', 'my_block_type_variations', 10, 2);

Filtrer la query

Dans un premier temps, on va utiliser le filtre « pre_render_block » pour attraper le bloc qui comporte notre namespace.

add_filter('pre_render_block',
function ($prerender, $block) {
  // filter block
  if ($block['attrs'] && array_key_exists('namespace', $block['attrs']) && 
      $block['attrs']['namespace'] === 'wp-perf/featured-post') {
      .....
  }
},1,2);

Si un bloc répond à notre condition, nous allons ajouter un filtre « query_loop_block_query_var » pour filtrer la requête correspondante.

add_filter('pre_render_block',
function ($prerender, $block) {
  // filter block with namespace wp-perf/featured-post
  if ($block['attrs'] && array_key_exists('namespace', $block['attrs']) && 
      $block['attrs']['namespace'] === 'wp-perf/featured-post') {
      
      add_filter('query_loop_block_query_vars', 
        'my_filter_page_query', 
      ); 

  }
},1,2);

Le callback de ce dernier filtre, reçoit un tableau query que l’on peut modifier à sa convenance.

function my_filter_page_query($query)
{
  $query['post_type'] = 'my_cpt';
  $query['posts_per_page'] = -1;

  // order by meta menu_order
  $query['orderby'] = [
    'meta_value_num' => 'ASC',
    'meta_value' => 'DESC',
  ];

  remove_filter('query_loop_block_query_vars',
   'my_filter_page_query', 10, 1);

  return $query;
}

En fin de fonction, surtout ne pas oublier de supprimer le filtre sinon le filtre s’appliquera aux autres bloc « query loops » présents dans la page.

Vous êtes libre désormais de modifier la query comme vous voulez. Personnellement, je l’utilise pour :

  • Définir l’ordre de la query
  • Ajouter un système de filtre dans la page
  • Faire des queries sur des CPT non publiques.
  • Faire des queries pour afficher des éléments en relation avec l’élément courant (related post).

Merci d’avoir pris le temps de lire et à bientôt ! ✌️

Vidéo « Modifier la requête d’un bloc query loop »