1. Riad Benguella @riadbenguella riad.blog
Gutenberg sous le capot

2. CHAPTER I
Vue Globale

4. “
”
MATT MULLENWEG
Learn JavaScript Deeply
The State of the Word 2015

5. Technologies

6. Monolithique
Modulaire

7. Modules Gutenberg
• Un module = un script wordpress
• Un module peut avoir une feuille de style associée
• Chaque module est disponible dans wp.*
• Les modules génériques sont sur npm

8. Utiliser un script Gutenberg
wp_register_script(
‘my-plugin-script’,
‘path/to/my-script’,
array( ‘wp-components’ ),
);
wp_register_style(
‘my-plugin-style’,
‘path/to/my-style’,
array( ‘wp-components’ ),
);

9. CHAPTER II
Plugin
Fil Rouge

10. CHAPTER III
Module Element

11. Abstraction on top of React
wp_register_script(
‘my-plugin-script’,
‘path/to/my-script’,
array( ‘wp-element’ ),
);
Ajout de la dépendance

12. const { render, createElement: el } = wp.element;
function Hello({ name }) {
Return <h1>{ ‘Hello ‘ + name }</h1>;
// el( ‘h1’, {}, ‘Hello’ + name )
}
render(
<Hello name=“Lyon” />,
document.querySelector( ‘#root’ )
);
Abstraction on top of React

13. const { render, createElement: el } = wp.element;
function Hello({ name }) {
Return <h1>{ ‘Hello ‘ + name }</h1>;
// el( ‘h1’, {}, ‘Hello’ + name )
}
render(
<Hello name=“Lyon” />,
document.querySelector( ‘#root’ )
);
Abstraction on top of React

14. const { render, createElement: el } = wp.element;
function Hello({ name }) {
Return <h1>{ ‘Hello ‘ + name }</h1>;
// el( ‘h1’, {}, ‘Hello’ + name )
}
render(
<Hello name=“Lyon” />,
document.querySelector( ‘#root’ )
);
Abstraction on top of React

15. À retenir
wp.element.createElement <=> JSX pour créer des éléments
wp.element.render pour afficher un composant.

16. CHAPTER |V
Module Plugins

17. The new Meta Boxes?
Un module générique pour étendre l’UI de
WordPress

18. wp_register_script(
‘my-plugin-script’,
‘path/to/my-script’,
array(
‘wp-element’,
‘wp-plugins’,
‘wp-edit-post’
),
);
Ajout de la dépendance
The new meta boxes

19. const { registerPlugin } = wp.plugins;
const { PluginSidebar, PluginMoreMenuItem } = wp.editPost;
The new meta boxes

20. The new meta boxes
const { registerPlugin } = wp.plugins;
const { PluginSidebar, PluginMoreMenuItem } = wp.editPost;

21. const DropIt = () => (
<Fragment>
<PluginSidebar name="dropit-sidebar" title=“Drop it">
Bienvenue dans Drop it
</PluginSidebar>
<PluginMoreMenuItem
icon="art"
target="dropit-sidebar"
>
Open Drop it
</PluginMoreMenuItem>
</Fragment>
);
The new meta boxes

22. The new meta boxes
const DropIt = () => (
<Fragment>
<PluginSidebar name="dropit-sidebar" title=“Drop it">
Bienvenue dans Drop it
</PluginSidebar>
<PluginMoreMenuItem
icon="art"
target="dropit-sidebar"
>
Open Drop it
</PluginMoreMenuItem>
</Fragment>
);

23. The new meta boxes
registerPlugin("dropit", {
render: DropIt
});

25. À retenir
• wp.plugins.registerPlugin pour définir un plugin
• Chaque plugin peut afficher plusieurs “Slots”
• Exemple: Sidebar, MenuItem…
https://github.com/WordPress/gutenberg/tree/master/edit-post

26. CHAPTER V
Module Components

27. Reusable UI components
Une collection de composants graphiques
pour construire son interface

28. Ajout de la dépendance
Reusable components
wp_register_script(
‘my-plugin-script’,
‘path/to/my-script’,
array( ‘wp-components’ ),
);
wp_register_style(
‘my-plugin-style’,
‘path/to/my-style’,
array( ‘wp-components’ ),
);

29. Le composant React de base

30. const { Component } = wp.element;
const searchPhotos = ( query ) => {
// Do something and return a promise of photos
}
class PhotoList extends Component {
state = { query: ‘’, photos: [] };
changeQuery = event => this.setState( {
query: event.target.value
} );
search = () => searchPhotos( this.state.query ).then( photos
=>
this.setState( { photos } );
);
}

31. const { Component } = wp.element;
const searchPhotos = ( query ) => {
// Do something and return a promise of photos
}
class PhotoList extends Component {
state = { query: ‘’, photos: [] };
changeQuery = event => this.setState( {
query: event.target.value
} );
search = () => searchPhotos( this.state.query ).then( photos
=>
this.setState( { photos } );
);
}

32. const { Component } = wp.element;
const searchPhotos = ( query ) => {
// Do something and return a promise of photos
}
class PhotoList extends Component {
state = { query: ‘’, photos: [] };
changeQuery = event => this.setState( {
query: event.target.value
} );
search = () => searchPhotos( this.state.query ).then( photos
=>
this.setState( { photos } );
);
}

33. const { Component } = wp.element;
const searchPhotos = ( query ) => {
// Do something and return a promise of photos
}
class PhotoList extends Component {
state = { query: ‘’, photos: [] };
changeQuery = event => this.setState( {
query: event.target.value
} );
search = () => searchPhotos( this.state.query ).then( photos
=>
this.setState( { photos } );
);
}

34. const { Component } = wp.element;
const searchPhotos = ( query ) => {
// Do something and return a promise of photos
}
class PhotoList extends Component {
state = { query: ‘’, photos: [] };
changeQuery = event => this.setState( {
query: event.target.value
} );
search = () => searchPhotos( this.state.query ).then( photos
=>
this.setState( { photos } );
);
}

35. La méthode render:
Réutiliser des composants

36. const { IconButton } = wp.components;
class PhotoList extends Component {
// Remaining methods and properties go here.
render() {
return (
<div>
<form onSubmit={this.search}>
<input value={this.state.query} onChange={this.
changeQuery} />
<IconButton icon=“search” type=“submit” />
</form>
</div>
);
}

37. const { IconButton } = wp.components;
class PhotoList extends Component {
// Remaining methods and properties go here.
render() {
return (
<div>
<form onSubmit={this.search}>
<input value={this.state.query} onChange={this.
changeQuery} />
<IconButton icon=“search” type=“submit” />
</form>
</div>
);
}

38. const { IconButton } = wp.components;
class PhotoList extends Component {
// Remaining methods and properties go here.
render() {
return (
<div>
<form onSubmit={this.search}>
<input value={this.state.query} onChange={this.
changeQuery} />
<IconButton icon=“search” type=“submit” />
</form>
</div>
);
}

39. La méthode render:
Afficher les photos

40. const { IconButton } = wp.components;
class PhotoList extends Component {
render() {
return (
<div>
<form /*… */ />
{ this.state.photos.map( photo => (
<Photo key={photo.id} photo={photo} />
) ) }
</div>
);
}
}

41. class Photo extends Component {
onAddPhoto() => {}
render() {
return (
<div>
<img src={this.props.photo.url} />
<IconButton icon=“plus” onClick={ this.onAddPhoto } />
</div>
);
}
}

42. class Photo extends Component {
onAddPhoto() => {}
render() {
return (
<div>
<img src={this.props.photo.url} />
<IconButton icon=“plus” onClick={ this.onAddPhoto } />
</div>
);
}
}

43. class Photo extends Component {
onAddPhoto() => {}
render() {
return (
<div>
<img src={this.props.photo.url} />
<IconButton icon=“plus” onClick={ this.onAddPhoto } />
</div>
);
}
}

45. À retenir
• On peut facilement composer différents composants pour
faire une UI riche
• wp.components met à disposition des composants prêt à
être utilisés:
• UI: Button, IconButton, Dropdown, Tooltip, Popover…
• A11Y: NavigableContainer, withFocusReturn,…
https://github.com/WordPress/gutenberg/tree/master/components

46. CHAPTER VI
Module Data

47. Chaque module WP peut mettre des
données à disposition des plugins.

48. wp_register_script(
‘my-plugin-script’,
‘path/to/my-script’,
array( ‘wp-data’, ‘wp-editor` ),
);
Ajout de la dépendance

49. const { withSelect } = wp.data;
function MyBlockCount( { count } ) {
return “Nombre de blocs: “ + count;
}
export default withSelect( ( select ) => {
return {
count: select( ‘core/editor’ ).getBlockCount()
};
} )( MyBlockCount );
Exemple: Récupérer des données

50. const { withSelect } = wp.data;
function MyBlockCount( { count } ) {
return “Nombre de blocs: “ + count;
}
export default withSelect( ( select ) => {
return {
count: select( ‘core/editor’ ).getBlockCount()
};
} )( MyBlockCount );
Exemple: Récupérer des données

51. const { withSelect } = wp.data;
function MyBlockCount( { count } ) {
return “Nombre de blocs: “ + count;
}
export default withSelect( ( select ) => {
return {
count: select( ‘core/editor’ ).getBlockCount()
};
} )( MyBlockCount );
Exemple: Récupérer des données
https://github.com/WordPress/gutenberg/blob/master/editor/store/selectors.js

52. const { withDispatch } = wp.data;
class Photo extends Component {
/** Photo component with its render function **/
}
export default withDispatch( ( dispatch ) => {
return {
insertBlock: select( ‘core/editor’ ).insertBlock
};
} )( Photo );
Lancer des actions

53. const { withDispatch } = wp.data;
class Photo extends Component {
/** Photo component with its render function **/
}
export default withDispatch( ( dispatch ) => {
return {
insertBlock: select( ‘core/editor’ ).insertBlock
};
} )( Photo );
Lancer des actions

54. const { withDispatch } = wp.data;
class Photo extends Component {
onAddPhoto() => {
this.props.insertBlock( ‘core/image’, {
url: this.props.photo.url
} );
}
}
export default withDispatch( ( dispatch ) => {
return {
insertBlock: select( ‘core/editor’ ).insertBlock
Lancer des actions
https://github.com/WordPress/gutenberg/blob/master/editor/store/actions.js

55. À retenir
• wp.data.withSelect pour récupérer des données
• wp.data.withDispatch pour lancer des actions
• Chaque module met à disposition:
• Des selecteurs pour récupérer des données
• Des actions pour effectuer des actions
• Utiliser wp.data pour gérer vos données.
https://github.com/WordPress/gutenberg/tree/master/data

56. CHAPTER VII
Module i18n

57. wp_register_script(
‘my-plugin-script’,
‘path/to/my-script’,
array( ‘wp-i18n’ ),
);
Ajout de la dépendance

58. const { __ } = wp.i18n;
class PhotoList extends Component {
/** **/
render() {
return (
<div>
<form onSubmit={this.search}>
<input
value={this.state.query}
onChange={this. changeQuery}
placeholder={ __( ‘Search’, ‘dropit’ ) }
/>
<IconButton icon=“search” type=“submit” />
</form>
</div>
);
}

59. const { __ } = wp.i18n;
class PhotoList extends Component {
/** **/
render() {
return (
<div>
<form onSubmit={this.search}>
<input
value={this.state.query}
onChange={this. changeQuery}
placeholder={ __( ‘Search’, ‘dropit’ ) }
/>
<IconButton icon=“search” type=“submit” />
</form>
</div>
);
}

60. À retenir
• wp.i18n.__ pour internationaliser un texte.
• wp.i18n.setLocaleData pour fournir les chaines traduites
• Inclut des outils pour faciliter la génération de .pot et la
traduction au niveau de wp.org
https://github.com/WordPress/packages/tree/master/packages/i18n

61. CHAPTER VIII
Autres

62. À retenir
• wp.a11y.speak pour annoncer des messages.
• wp.date.format pour formater les dates
• wp.viewport pour gérer la taille de l’écran (responsive)

63. CHAPTER IX
The future

64. Suivre ici:
github.com/wordpress/packages
github.com/wordpress/gutenberg

65. Documentation
wordpress.org/gutenberg/handbook/
READMEs

66. Join the conversation:
#core-editor, mercredi 16:00
#core-js, mardi 15:00

67. Et notre plugin alors?
wordpress.org/plugins/dropit

68. Venez me voir, parlons Gutenberg