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 thoughts on “ Mon premier WordCamp en tant que speaker ”

    1. 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

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

    3. 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.

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

  2. 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

    1. 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

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

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

Leave a Reply