Notes sur les blocs

Comme certains blocs peuvent avoir certaines spécifications, on regroupe ici certaines notes additionnelles pour bien implémenter certains blocs sur un nouveau projet.

Dépendances externes

Liste des packages ajoutés dans les dépendances du répertoire avec les blocs qui l’utilisent.

@fancyapps/ui

  • Carrousel de médias
  • Grille de photos
  • Vidéo en popup

CountUp.js

  • Statistiques 1
  • Statistiques 2

react-string-replace

  • Statistiques 1

@googlemaps/js-api-loader

  • Carte Google Maps

@wordpress/icons

  • Vidéo en popup
  • Texte défilant

AOS

  • Titre animé

Association de blocs

Certains blocs sont faits pour fonctionner ensemble, avec un bloc conteneur (qui supporte innerBlocks) et un bloc enfant :

  • Accordéons : accordions-group et accordion-item
  • Onglets : tabs-group et single-tab
  • Groupe de cartes : cards-group et card-item
  • En-tête pleine largeur : fullwidth-header et fullwidth-header-slide
  • Liens avec icône : links-icon et link-icon-item
  • Statistiques 1 : statistics et statistic-box
  • Tuiles avec icône ou image de fond : symbol-cards-group et symbol-card-item-icon et symbol-card-item-image (2 types de blocs enfants possibles)
  • Grille de boites colorées : color-boxes-grid et color-box-item

Particularités sur des blocs spécifiques

Ce bloc affiche les extraits et les images mises de l’avant des pages pour chaque page enfant. Pour bien fonctionner, les extraits et les thumbnails doivent être activés pour les pages, ce qui n’est pas le cas par défaut. Vous pouvez ajouter cette petite ligne de code dans le setup.php pour ça :

  // Add additional support for pages
  add_post_type_support( 'page', array( 'excerpt', 'thumbnail' ) );

Aussi, les pages sont affichées dans l’ordre du tri manuel fait par le client. Idéalement, on installerait un plugin avec ce bloc pour faciliter le tri des pages, exemple CMS Tree Page View ou encore Simple Page Ordering.

On a besoin de quelques petites affaires pour que le bloc fonctionne correctement :

  • la constante MAPS_API_KEY bien définie dans le wp-config.php
  • une image pin.png dans le dossier assets/images
  • le package @googlemaps/js-api-loader (à installer en lançant la commande npm install @googlemaps/js-api-loader)

Le bloc Careers Listing est fait pour fonctionner avec le CPT Carrières du répertoire et y est donc dépendant.

Un dossier d’images est à récupérer (et à modifier selon les images reçues du designer), c’est le dossier colored-boxes-background dans assets/images.