Fonctionnement des blocks Flexipow

Les différents blocks de Flexipow sont tous construits via le plugin essentiel Advanced Custom Fields Pro. La version payante du ce plugin très puissant et essentiel permet de se passer du développement de blocks Gutenberg passant par la technologie assez ardue JSX.  Cette technique offre également une grande souplesse dans l’évolution technique de ces blocks, l’apport de correctif ou d’améliorations.

Le challenge aura été de concilier stabilité du système, facilité de mise en forme pour les non développeurs, et souplesse d’utilisation pour les développeurs. Pour cela, un processus de fonctionnement est défini pour tous les blocks Flexipow, suivant certaines étapes. Elles sont présentées ici, pour une meilleure compréhension de l’ensemble.

1 – Création ou édition du block en vue édition

Cette étape consiste en la création ou l’édition d’un block dans Gutenberg, puis en l’accès à ses contenus et réglages en activant la vue édition du block.

2 – Saisie des contenus et réglages généraux et spécifiques

En plus de la saisie des contenus du block, l’utilisateur est amené à effectuer des réglages :

• généraux, communs à tous les blocks Flexipow : essentiellement des paramètres de mise en forme (marge, couleurs, etc)
• spécifiques à chacun des types de blocks Flexipow : il s’agit aussi de paramètres de mise en forme très spécifiques mais aussi fonctionnel (vitesse de défilement des sliders, types d’affichage des colonnes, etc)

3 – Retour à la vue aperçu du block

Contrairement aux apparences, cette étape est capitale.  Si la structure html et les scripts éventuels liés au block sont crées ou mis à jour en temps réel, le retour à la vue aperçu du block déclenche la génération dynamique des styles qui sont liés au block.  Ces styles sont issus à la fois des réglages généraux et spécifiques évoqués plus haut. Ces données sont enregistrées à ce moment, juste après leur génération, dans la base de données du site (via le système de transient de WordPress).

De plus, à chaque block est associé un identifiant unique permettant d’automatiser et de bien individualiser l’apparence et les fonctionnalités du block. Cet identifiant est crée automatiquement lors de la création du block, et il ne peux être modifié.

4 – Sauvegarde de la page ou du post

Lors de cette sauvegarde, une autre action est déclenchée. Le système va parcourir tous les blocks de la page ou de l’article, récupérer cet identifiant unique, interroger la base de donnée du site sur la base de cet identifiant et générer à la volée un fichier CSS (fichier renfermant tous les styles définissant l’apparence d’une page web) dédié à cette page ou à cet article.

Ainsi, dans Flexipow, chaque page ou article possède sa propre feuille de style CSS, ce qui présente l’avantage d’optimiser grandement le chargement de la page, c’est à dire de ne charger que les styles nécessaires, et donc d’en améliorer notablement ses performances globales.

Flexipow étant construit avec le framework css Bootstrap 4, chaque block occupe toute la largeur de l’écran, son contenu pouvant occuper toute cette largeur (container global) ou au contraire une zone centrale et centrée (container central). Sur mobiles, cette zone centrale occupe cette fois toute la largeur de l’écran.

Le positionnement des container version desktop

Le positionnement des container version mobile