Bonnes pratiques et outils pour démarrer la création de blocs pour le nouvel éditeur de WordPress (Gutenberg).

1. LA CRÉATION DE BLOCS
DÉMARRER

2. QU'EST-CE
QU'UN BLOC ?
DÉMARRER LA CRÉATION DE BLOCS

3. DÉMARRER LA CRÉATION DE BLOCS
ANATOMIE D’UN BLOC STATIQUE
‣ Le contenu est enregistré avec la publication
‣ Les attributs permettent d’actualiser le rendu
lors de changements

4. DÉMARRER LA CRÉATION DE BLOCS
ANATOMIE D’UN BLOC DYNAMIQUE
‣ Le contenu n’est pas enregistré avec la publication
‣ Le rendu est effectué côté serveur lors l’affichage

5. DÉMARRER LA CRÉATION DE BLOCS
LES INTERFACES : LE CONTENU DU BLOC
Interaction directe et intuitive

6. DÉMARRER LA CRÉATION DE BLOCS
LES INTERFACES : LA BARRE D’OUTILS
Options et contrôles

7. DÉMARRER LA CRÉATION DE BLOCS
LES INTERFACES : LA BARRE LATÉRALE
Réglages avancés

8. DÉMARRER LA CRÉATION DE BLOCS
CRÉER DES BLOCS EN PHP
▸ Advanced Custom Fields Pro
▸ Block Lab
▸ Carbon Fields

9. DÉMARRER LA CRÉATION DE BLOCS
ADVANCED CUSTOM FIELDS PRO
Etapes pour créer un bloc
‣ Enregistrer le bloc en PHP
‣ Définir les champs dans l’interface
‣ Assigner le groupe champs au bloc dans l’interface
‣ Ecrire une fonction de rendu en PHP

10. DÉMARRER LA CRÉATION DE BLOCS
ADVANCED CUSTOM FIELDS PRO
Remarques
‣ Encore en bêta
‣ Pas de gestion des contrôles
‣ Fonctionnement assez éloigné d’un bloc JS

11. DÉMARRER LA CRÉATION DE BLOCS
BLOCK LAB

12. DÉMARRER LA CRÉATION DE BLOCS
BLOCK LAB
Etapes pour créer un bloc
‣ Définir les champs dans l’interface
‣ Ecrire une fonction de rendu en PHP
Remarques
‣ Pas gestion des contrôles pour l’instant

13. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
CRÉER DES BLOCS EN JAVASCRIPT
Documentation
▸ Gutenberg Handbook
▸ GitHub

14. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
CRÉER DES BLOCS EN JAVASCRIPT
Cours
▸ WordPress Block Development (Zac Gordon)
▸ Créer des blocs avec Gutenberg (Maxim BJ)
▸ ES6 for everyone! (Wes Bos)
▸ React for beginners (Wes Bos)

15. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
CRÉER DES BLOCS EN JAVASCRIPT
Outils
▸ WP-CLI
▸ Create Guten Block, par Amad Awais

16. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
WP-CLI
Etapes pour créer un bloc
‣ Exécuter une commande dans le terminal
pour créer une extension basée sur un modèle
‣ Ecrire le bloc en Javascript (ES5)

17. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
CREATE GUTEN BLOCK
Etapes pour créer un bloc
‣ Exécuter une commande dans le terminal
pour créer une extension basée sur un modèle
‣ Exécuter une commande pour lancer
le processus de build
‣ Ecrire le bloc en Javascript (ESNext)

18. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
ENREGISTRER UN BLOC
registerBlockType()
‣ Title
‣ Category
‣ Icon
‣ Keywords
‣ Supports
‣ Attribute
‣ Edit
‣ Save

19. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
ENREGISTRER UN BLOC
registerBlockType()
‣ Title
‣ Category
‣ Icon
‣ Keywords
‣ Styles
‣ Supports
‣ Attribute
‣ Transforms
‣ Parent

20. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
ENREGISTRER UN BLOC
registerBlockType()
‣ Edit
‣ Save

21. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
MODÈLES ET BLOCS IMBRIQUÉS
‣ Créer un nouveau bloc à partir de blocs existants
‣ Structure définie par un modèle

22. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
EXEMPLE : CALL TO ACTION
‣ Paragraphe + bouton dans une <div>

23. DÉMARRER LA CRÉATION DE BLOCS / OUTILS
EXEMPLE : CALL TO ACTION
‣ Ajout de contrôles pour l’alignement du bloc

24. MERCI@Benoit_Chantre