Présentation Meetup WordPress Rennes (WP Rennes) du 29 mars 2018

1. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
WordPress+
Gutenberg
L’outil qui va révolutionner la
contribution WordPress
MeetupWordPress–Rennes–29/03/2018

2. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018 Brice Capobianco
Site // b-website.com
Twitter // @BriceCapobianco
Plugins //
• Simple Revisions Delete
• Re-add text underline and justify
• WP Plugin Info Card
• WP Envato Affiliate Card (add-on)
2
Resp. commercial en agence & freelance WordPress

3. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Introduction
Histoire et crédits
3

4. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018 On parle de quoi ?
Petit teasing pour ceux qui ne savent pas du tout ce qu’est Gutenberg
4
Source image : codeinwp.com

5. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
• Nom de code Gutenberg
• Lancement du projet au WordCamp US 2016
• Début des développements en Janvier 2017
• Première présentation officielle au WordCamp Europe 2017 (release V1)
Histoire du projet
Naissance de l’outil
5
State of the Word, WordCamp Europe 2017 | Matt Mullenweg
Idée d’un mode de contribution par blocs
initiée en 2014 et premiers écrans créés à
cette époque

6. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018 Histoire du projet
La priorité n°1 depuis 2017
6
Développement très actif et ouvert

7. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018 Crédits
J’ai un peu copié, mais j’ai demandé avant !
7
Ça montre qu’il n’a pas été contraint
“Gutenberg, Le futur de la création de
contenus dans WordPress”
Conférence WordCamp Paris 2018 | Riad Benguella

8. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Contribuer aujourd’hui
État actuel de la contribution
avec WordPress
8

9. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
• Menus
• WYSIWYG
• Metabox
• Shortcodes
• Widgets
• Customizer
• Magie
Les outils de contribution
Aujourd’hui, la contribution WordPress est possible grâce à plusieurs outils
9
[wp-pic slug="wp-plugin-info-card" layout="wordpress"
align="center" margin="0 0 20px 0" ajax="yes"]

10. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
• Beaucoup d’interfaces (surtout quand beaucoup de plugins)
• Souvent compliqué de faire une interface simple et compréhensible par des
débutants
• Tout semble « éclaté »
• Accessibilité douteuse
• Un fonctionnement un peu daté, et plus très adapté aux modes de contributions
actuels (page builders)
Faisons le constat
Quand on y pense, ça n’est pas si simple !
10
C’est autant de problèmes que va tenter de
résoudre Gutenberg.

11. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Guntenberg
Découverte du futur du web de
WordPress
11

12. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Un contenu = un bloc
Une page est donc composée de plusieurs blocs.
Une nouvelle notion : les blocs
Gutenberg n’est pas qu’un nouvel éditeur WYSIWYG amélioré
12
“At the core of Gutenberg lies the concept of
the block”
Gutenberg’s Handbook | WordPress.org

13. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Exemples :
Contenu = blocs
Widget = blocs
Article/Page = bloc de blocs (conteneur & contenus)
Etc.
Une nouvelle notion : les blocs
Gutenberg n’est pas qu’un nouvel éditeur WYSIWYG amélioré
13
Pour en savoir plus sur la partie technique de
Gutenberg :
https://wordpress.org/gutenberg/handbook/

14. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Démonstration
Présentation du Post Editor
14

15. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Et la suite ?
L’éditeur Gutenberg n’est que la 1ère
phase un projet d’ampleur
15

16. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018 Un projet en 3 étapes
La route est encore longue
16
Étape 1 : le post editor (étape arrivant à son terme)
Étape 2 : le page builder
Étape 3 : le site builder

17. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018 Quelques précisions
17
Extrait des slides de Riad Benguella – WordCamp Paris 2018

18. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018 Pour les devs.
Étendez les possibilités de l’outil grâce à ses APIs
18
Gutenberg a été pensé pour être extensible.
Un code ouvert (évidemment), et structuré pour être utilisé par tous : agences, développeurs de
plugins et thème, etc.
• Gutenberg Custom Fields : Créer des templates de pages
https://wordpress.org/plugins/gutenberg-custom-fields/
• Advanced Gutenberg Blocks : Ensemble de nouveaux blocs (Made in France )
https://fr.wordpress.org/plugins/advanced-gutenberg-blocks/

19. Gutenberg,l’outilquivarévolutionnerlacontributionWordPress
MeetupWordPress–Rennes–29/03/2018
Merci !
A vous le micro
19
MeetupWordPress–Rennes–29/03/2018