1001 façons d'étendre Gutenberg

Riad Benguella
Riad BenguellaWeb Developer at home
Mille et une manières d’étendre Gutenberg
Hi I’m Riad
@riadbenguella
wp.org @youknowriad
https://riad.blog
INTRO
Blocs
Post Content
Block Object
DOM
Parse
Render
Save
Update
name
attributes
isValid
UID
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
Étape 1: DIY
https://github.com/youknowriad/gutenberg-extensibility-workshop
Étape 2: Patterns
https://github.com/youknowriad/gutenberg-extensibility-workshop
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
Themes
THÈMES
➤ Styler les blocs
➤ Support de themes
➤ Wide alignments
➤ Palette de couleurs
➤ Frontend editing
UI
SIDEBAR PLUGIN
Avancé
USE-CASES ADVANCES
➤ Data Module
➤ Templates
➤ Figés ou non
Hack it
Avril/Mai 2018
1 of 17

Recommended

Wordpress tisserands 2012 by
Wordpress tisserands 2012Wordpress tisserands 2012
Wordpress tisserands 2012technologiae
346 views11 slides
RMLL 2014 - Site statique avec Templer, Bootstrap et Git by
RMLL 2014 - Site statique avec Templer, Bootstrap et GitRMLL 2014 - Site statique avec Templer, Bootstrap et Git
RMLL 2014 - Site statique avec Templer, Bootstrap et GitClément OUDOT
1.5K views26 slides
Formation web by
Formation webFormation web
Formation webStéphane BIOKOU
1.4K views23 slides
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l... by
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...
[JDLL 2018] Templer, Git, Bootstrap, PHP : des outils libres pour concevoir l...Clément OUDOT
1.4K views30 slides
Présentation html5 by
Présentation html5Présentation html5
Présentation html5Kénium
9.1K views41 slides
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen by
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygenEmmanuelle Morlock
1.7K views25 slides

More Related Content

Similar to 1001 façons d'étendre Gutenberg

Tout savoir sur l'éditeur de site WordPress by
Tout savoir sur l'éditeur de site WordPressTout savoir sur l'éditeur de site WordPress
Tout savoir sur l'éditeur de site WordPressAlexandre Buffet
31 views51 slides
Les blocs Drupal de drop.org à Drupal 8 by
Les blocs Drupal de drop.org à Drupal 8Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8OSInet
4.9K views88 slides
Projet Plateforme de Partage de Contenus Multimédias (2) by
Projet Plateforme de Partage de Contenus Multimédias (2)Projet Plateforme de Partage de Contenus Multimédias (2)
Projet Plateforme de Partage de Contenus Multimédias (2)Laurent Moccozet
385 views26 slides
A Libre Ouvert : Publication web by
A Libre Ouvert : Publication webA Libre Ouvert : Publication web
A Libre Ouvert : Publication webChristophe Catarina
864 views29 slides
Formation WordPress à Blida by
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à BlidaGd6d
3K views40 slides
Atelier autour de UWA à ParisWeb 2007 by
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Netvibes
2.3K views42 slides

Similar to 1001 façons d'étendre Gutenberg(17)

Tout savoir sur l'éditeur de site WordPress by Alexandre Buffet
Tout savoir sur l'éditeur de site WordPressTout savoir sur l'éditeur de site WordPress
Tout savoir sur l'éditeur de site WordPress
Alexandre Buffet31 views
Les blocs Drupal de drop.org à Drupal 8 by OSInet
Les blocs Drupal de drop.org à Drupal 8Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8
OSInet4.9K views
Projet Plateforme de Partage de Contenus Multimédias (2) by Laurent Moccozet
Projet Plateforme de Partage de Contenus Multimédias (2)Projet Plateforme de Partage de Contenus Multimédias (2)
Projet Plateforme de Partage de Contenus Multimédias (2)
Laurent Moccozet385 views
Formation WordPress à Blida by Gd6d
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
Gd6d3K views
Atelier autour de UWA à ParisWeb 2007 by Netvibes
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
Netvibes2.3K views
ISCOM::HTML/CSS::session1 (20140930) by Nicolas Aguenot
ISCOM::HTML/CSS::session1 (20140930)ISCOM::HTML/CSS::session1 (20140930)
ISCOM::HTML/CSS::session1 (20140930)
Nicolas Aguenot893 views
Semaine de projet H1 P2015 - HETIC - Deccco.com by Vincent Garreau
Semaine de projet H1 P2015 - HETIC - Deccco.comSemaine de projet H1 P2015 - HETIC - Deccco.com
Semaine de projet H1 P2015 - HETIC - Deccco.com
Vincent Garreau798 views
Inclure du Javascript de manière performante by Jean-Pierre Vincent
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
Jean-Pierre Vincent1.9K views
Optimiser réellement le référencement naturel de WordPress by Daniel Roch - SeoMix
Optimiser réellement le référencement naturel de WordPressOptimiser réellement le référencement naturel de WordPress
Optimiser réellement le référencement naturel de WordPress
Daniel Roch - SeoMix19.3K views
Netvibes atelier 14_octobre_2011_kg by kumarutil
Netvibes atelier 14_octobre_2011_kgNetvibes atelier 14_octobre_2011_kg
Netvibes atelier 14_octobre_2011_kg
kumarutil1K views
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2 by Horacio Gonzalez
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez1.2K views

1001 façons d'étendre Gutenberg