Mon premier WordCamp en tant que speaker

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”

  1. florent says:

    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 ?

    • Riad Benguella says:

      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

    • florent says:

      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/)

    • Riad Benguella says:

      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.

  2. Ida Benguella says:

    Très fière de mon fils

  3. Florian TIAR says:

    Encore félicitations pour cette très bonne conférence 🙂

  4. Riad Benguella says:

    Article mis à jour avec la vidéo du talk.

  5. M says:

    Il est où le drapeau ? ;P

  6. benoit says:

    Riad, Gutenberg sous le capot: modules réutilisables aussi sera filmé ? Pour ceux qui ne pourrons pas venir à la wptech cette année

  7. adam says:

    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

    • Riad Benguella says:

      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

    • adam says:

      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}) ?

  8. adam says:

    Ne fais pas attention à mon commentaire précédent. J’ai fini ce premier block, merci pour ton aide Riad.

Leave a Reply to adam Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: