Aujourd'hui s'est déroulée la dixième édition du WordCamp Paris et j'ai eu l'honneur d'y participer en tant que speaker pour parler de Gutenberg.
Conférence
Vous trouvez ci-dessous les slides de ma conférence intitulée "Gutenberg, le futur de la création de contenu dans WordPress"
Atelier
J'ai aussi eu la chance d'animer un atelier sur l'extensibilité de Gutenberg dont voici les slides et le repository GitHub qui contient les exemples exposés.
Et le repository GitHub https://github.com/youknowriad/gutenberg-extensibility-workshop/
N'oubliez pas de regarder le README en français du repository ici pour plus de détails concernant l'organisation de ce repository.
La vidéo de la conférence n'est pas encore disponible, j'essairai de mettre à jour l'article lorsque celle-ci serait disponible.
Revoir la vidéo du talk
This post is brought to you by the new Gutenberg Editor
15 responses to “Mon premier WordCamp en tant que speaker”
Félicitation
Riad est ce que l’atelier était filmé ?
Sinon je me demandais si c’était possible d’utiliser styled components (https://www.styled-components.com/) pour styliser des blocks dans gutenberg ?
Merci, oui je pense que l’atelier était filmé. Il faudra attendre que les vidéos soit publiées sur wordpress.tv.
Pour styled-components, tu pourrais l’utiliser pour les styles spécifique à l’éditeur (`edit` function) mais tu ne pourrais pas l’utiliser pour les styles de blocks chargés en frontend. parce qu’il n’y a pas d’appli React qui affiche les blocs en Front, c’est juste du HTML + CSS
On peut le faire en important react ? du genre :
import React from ‘react’;
const { registerBlockType, InspectorControls } = wp.blocks; // Import registerBlockType() from wp.blocks
const { SelectControl } = InspectorControls;
class mafonctionreact extends React.Component {
render() {
qqch
}
}
registerBlockType( ‘gb/blockpost’, {
// …
save: mafonctionreact,
// …
} );
Sur ton dernier slide de l’atelier j’ai vu avril mai 2018 c’est pas trop juste vu que wordpress 4.9.5 est prevu pour le 3 avril (https://make.wordpress.org/core/tag/4-9-5/)
Oui tu peux, il faudrait plutot utilisé `wp.element.Component` à la place de React.Component et il faudrait déclarer React en external dans ta config webpack (ou autre) pour éviter de dupliquer React dans ton bundle car il est déjà disponible.
pour ce qui est de la date, rien n’est figé pour le moment, c’est une date prévisionnelle on vera comment ça va se passer.
Très fière de mon fils
Encore félicitations pour cette très bonne conférence 🙂
Article mis à jour avec la vidéo du talk.
Il est où le drapeau ? ;P
Riad, Gutenberg sous le capot: modules réutilisables aussi sera filmé ? Pour ceux qui ne pourrons pas venir à la wptech cette année
Je ne sais pas il faut demander aux organisateurs 🙂
Mais je partagerai les slides de toutes les manières.
Riad j’essaie de creer un petit slideshow en attendant celui de gutenberg mais j’ai un souci pour la fonction save.
C’est le slider slick qui depend de jquery donc je fais import ‘slick-carousel’ dans le block.js et ensuite
wp_enqueue_script(
‘gb-block-06-slider’, // Handle.
plugins_url( ‘block.build.js’, __FILE__ ), // Block.build.js: We register the block here. Built with Webpack.
array( ‘wp-blocks’, ‘wp-i18n’, ‘wp-element’,’wp-utils’,’jquery’ ) // Dependencies, defined above.
);
comme ca il utilise le jquery de wordpress
Mais ca me donne error can’t resolve jquery in slick.js
du coup j’essaie d’importer jquery dans block.js directement
avec
import $ from ‘jquery’
import ‘slick-carousel’
mais ca ne fonction pas non plus.
Quand on a notre fonction save qui depend de jquery, d’une librarie externe comme slick et d’un fichier js d’initialisation, comment on fait avec gutenberg d’autant plus que notre block.js ou se trouve notre save() on l’enqueue uniquement dans l’editeur avec enqueue_block_editor_assets
la function save ne fait que renvoyer le HTML, ça ne doit contenir aucun JS. si tu veux charger du JS coté front, il faut le faire comme d’habitude enqueue_sript ou qq chose du style séparément de Gutenberg. le script js `gb-block-06-slide` n’est pas chargé coté front
ah et pour recuperer les query dans le save on utilise uniquement attributes ou le nom du query
par exemple
attributes: {
images: {
type: ‘array’,
default: [],
source: ‘query’,
selector: ‘div.slider img’,
query: {
url: {
source: ‘attribute’,
selector: ‘img’,
attribute: ‘src’,
}
}
}
},
on fait save( {attributes, url}) ?
Ne fais pas attention à mon commentaire précédent. J’ai fini ce premier block, merci pour ton aide Riad.