Le succès de WordPress est en grande partie liée à sa flexibilité grâce notamment à ses nombreuses extensions. Gutenberg, le nouvel éditeur de contenu de WordPress ne déroge pas à la règle, venez découvrir les différentes API permettant de modifier Gutenberg de long, en large et en travers. - Créer des blocks, - Supprimer des blocks, - Modifier des blocks, - Créer des gabarits (templates) - Adapter votre thème - Modifier les styles de l’éditeur et des blocks - Ajouter des boutons, des panels à l’interface - Manipuler les contenus de l’éditeur Les possibilités de modification sont infinies, laissez libre cours à votre imagination !

1. Mille et une manières d’étendre Gutenberg

2. Hi I’m Riad
@riadbenguella
wp.org @youknowriad
https://riad.blog

3. INTRO

4. Blocs

5. Post Content
Block Object
DOM
Parse
Render
Save
Update
name
attributes
isValid
UID

6. CRÉER UN BLOC STATIQUE
➤ Quel est le markup (HTML) de mon bloc?
➤ Quelles parties sont modifiables?
➤ Attributes
➤ Save function
➤ Comment representer le bloc dans l’éditeur
➤ Edit function

7. Étape 1: DIY
https://github.com/youknowriad/gutenberg-extensibility-workshop

8. Étape 2: Patterns
https://github.com/youknowriad/gutenberg-extensibility-workshop

9. CRÉER DES BLOCS
➤ Bloc “Hello World”
➤ Bloc statique
➤ Bloc statique avancé (multi-editables & inspector controls)
➤ Bloc dynamique
➤ Bloc méta
➤ Supprimer un bloc (white-list)
➤ Supprimer un bloc (black-list)
➤ Modifier un bloc existant

10. Themes

11. THÈMES
➤ Styler les blocs
➤ Support de themes
➤ Wide alignments
➤ Palette de couleurs
➤ Frontend editing

12. UI

13. SIDEBAR PLUGIN

14. Avancé

15. USE-CASES ADVANCES
➤ Data Module
➤ Templates
➤ Figés ou non

16. Hack it

17. Avril/Mai 2018