1 of 61

Gutenberg : au delà de l’éditeur de texte

Benjamin Grolleau

PLANNING

20 min • Développement - Gutenberg

2 of 61

Qui ?

💻 Développeur web spécialisé �WordPress & WooCommerce

🎓 Designer de formation

🗺 De Toutlemonde (49)

​

3 of 61

Qui ?

💻 Développeur web spécialisé �WordPress & WooCommerce

🎓 Designer de formation

🗺 De Toutlemonde (49)

😰 Première conférence

4 of 61

Les objectifs

☝️ Comprendre que Gutenberg & WordPress ne sont que des outils,�et qu’ils ne sont pas limitants.

✌️ Décomposer vos logiques pour créer des blocs créatifs et/ou réutilisables

5 of 61

Décomposer�pour mieux composer

Les blocs natifs sont souvent très utiles. Il suffit d’observer. 👀

Étape 1

6 of 61

Vidéo

7 of 61

Titre

Paragraphe

Paragraphe

Boutons

8 of 61

Custom !

9 of 61

Titre

Colonnes

Image

Titre

Paragraphe

10 of 61

Paragraphe

Bouton

Titre

Paragraphe

11 of 61

Groupe

Titre

Paragraphe

Titre

Titre

Progress bar

12 of 61

Colonnes

Titre

Bouton

Image

13 of 61

Donc, on aurait besoin de créer…

  • Un bloc “Progress bar”
  • Un bloc carousel
  • Un bloc vraiment créatif avec le MacBook�qui s’ouvre et tourne au scroll

14 of 61

Pensez�réutilisable.

Conjuguez expérience d’édition, de développement et rentabilité.

Étape 2

15 of 61

Donc, on aurait besoin de créer…

  • Un bloc “Progress bar” → Réutilisable
  • Un bloc carousel → Réutilisable
  • Un bloc vraiment créatif avec le MacBook�qui s’ouvre et tourne au scroll

16 of 61

Le constat

  • Les blocs utilisés en agence sont souvent les mêmes.
  • La structure de ces blocs change rarement, seul le style change.

17 of 61

Le constat

Les opportunités

  • Les blocs utilisés en agence sont souvent les mêmes.
  • La structure de ces blocs change rarement, seul le style change.
  • Gain de temps
    • Développeur
    • Personne qui saisit les contenus
  • Maintenance facilitée
  • Meilleure expérience d’édition pour l’utilisateur final

18 of 61

Les classiques…

100% (ou 99.99%)

Je veux { RANDOM_WORD } sur mon site.

Redondance

19 of 61

Les classiques…

100% (ou 99.99%)

Je veux { RANDOM_WORD } sur mon site.

Redondance

  • Accordéon / FAQ
  • Conditionnel (si connecté, si éditeur, etc.)
  • Formulaire
  • Fil d’Ariane
  • Carousel
  • Galeries photos
  • …

20 of 61

Bloc “Leaflet Map”

4 sites sur 5

Je veux que les gens voient où mon magasin se situe.

Redondance

21 of 61

22 of 61

Anatomie du bloc Leaflet

  • Un bloc Parent “Map”
  • Des blocs enfants “Marqueurs”, “Cercles”, etc.

23 of 61

Anatomie du bloc Leaflet

  • Un bloc Parent “Map”
  • Des blocs enfants “Marqueurs”, “Cercles”, etc.

24 of 61

Anatomie du bloc Leaflet

  • Un bloc Parent “Map”
  • Des blocs enfants “Marqueurs”, “Cercles”, etc.

25 of 61

Anatomie du bloc Leaflet

  • Un bloc Parent “Map”
  • Des blocs enfants “Marqueurs”, “Cercles”, etc.

🫶🏻 Fournis ou presque par “react-leaflet”

26 of 61

Pensez�“en dehors la boîte”.

27 of 61

Une animation After Effects avec Gutenberg ?

  • Lottie JS
  • Testé et utilisé en prod 👌🏻

28 of 61

Une animation After Effects avec Gutenberg ?

  • Lottie JS
  • Testé et utilisé en prod 👌🏻

29 of 61

WordPress ne fait “que” gérer du contenu. Amusez-vous avec !

Rappel 1

30 of 61

De la 3D avec Gutenberg ?

  • Une scène → Bloc parent
  • Des objets → InnerBlocks
    • Des lumières
    • Des “mesh”

31 of 61

Le bloc “Scène”

32 of 61

Le bloc “Scène”

  • useRef pour n’avoir qu’un seul et unique canvas qui rend la scène

33 of 61

Le bloc “Scène”

  • useEffect pour éviter les rendus en continu

34 of 61

Un bloc “Cube”

35 of 61

Un bloc “Cube”

36 of 61

Le rendu

37 of 61

Tes cubes, c’est bien sympa, mais quel client veut ça dans son site ?

38 of 61

Un bloc “File from Blender”

39 of 61

Un bloc “File from Blender”

40 of 61

Bloc “File from Blender” : Utilisations possibles

41 of 61

42 of 61

Custom

Titre

Paragraphe

Prix / Paragraphe

Paragraphe

Bouton

Partage

Titre

Paragraphe

Bloc ThreeJS

43 of 61

Gutenberg peut exister en dehors de WordPress !

Rappel 2

44 of 61

Des factures avec Gutenberg ?

Quelles sont les parties variables d’une facture ?

  • Informations client
  • Lignes de facturation
  • Ce qui arrive sur le compte en banque
  • Le numéro de facture
  • La date

45 of 61

Le bloc “Information clients”

  • Relié à un CPT “Client”, qui contient les informations.
  • Dynamique
  • Retourne un ID

46 of 61

Ce qui est déjà géré par WordPress…

  • L’objet de la facture
  • La date de facturation

47 of 61

Ce qui est déjà géré par WordPress…

  • L’objet de la facture → Le titre du CPT
  • La date de facturation → La date du CPT

48 of 61

Le contenu de la facture

Contient uniquement des lignes�de facture.

49 of 61

Et ça se ressent dans la function Edit !

50 of 61

Le contenu du contenu�de la facture

  • Titre
  • Description
  • Prix
  • Réduction ?
  • Quantité

51 of 61

Le titre

52 of 61

Le contenu

53 of 61

Les “chiffres”

54 of 61

Le rendu

55 of 61

Les hooks React

au service de nos blocs

56 of 61

Le résultat

57 of 61

Aller au-delà du résultat

  • Ajout de contrôles
  • Le relier à un CPT “Produit”
  • Générer des PDF à la volée
  • Définir un template au CPT “Facture”
  • Transformer un devis en facture

58 of 61

Vous voulez�créer vos blocs ?

59 of 61

Débuter, et aller plus loin

  • CapitaineWP.io
  • gutenberg.10up.com
  • Zac Gordon (JS for WordPress)
  • La documentation, évidemment
  • Le talk de Vincent 👋🏻

60 of 61

Débuter, et aller plus loin

Prêts à débrider Gut’ ?

  • CapitaineWP.io
  • gutenberg.10up.com
  • Zac Gordon (JS for WordPress)
  • La documentation, évidemment
  • Le talk de Vincent 👋🏻
  • Pensez à décomposer au maximum
  • Pensez évolutif
  • WordPress, Gut’ … et les autres ne sont que des outils.

61 of 61

Merci à toutes et à tous

Des questions ?

PLANNING