Gutenberg and the future of WordPress | Gutenberg et le futur de WordPress

En 2018, WordPress modernisera et rendra plus facile l'expérience de création de contenu grâce à Gutenberg. Ceci représente un des plus importants changements à WordPress dans les dernières années. Pour plus de contexte, visionnez la présentation annuelle de Matt Mullenweg, fondateur de WordPress. https://www.youtube.com/watch?v=XOY3ZUO6P0k

Comment ça fonctionne? Qui s'en sert? Comment est-ce que je me prépare à ces changements? Comment puis-je contribuer au développement? Cette présentation répondra à toutes ces questions et incluera un demo. Apportez vos ordis!

À propos de la présentatrice: Shannon Smith, Spécialiste plateforme-service, Automattic / WordPress.com VIP

Shannon Smith est spécialiste plateforme-service au sein des services VIP de WordPress.com. Elle livre des solutions de contenu aux plus grands noms en média, marketing, et affaires. Shannon détient plus de 15 ans d’expérience dans le domaine des intégrations de source libre. Longuement partisane de la diversité, de l’accessibilité, et de l’internationalisation, elle a été organisatrice de la communauté WordPress Montréal durant sept ans. Shannon est également adepte de plein air, poétesse et mère de quatre enfants.

_____________________

About Gutenberg and this meetup:

In 2018, WordPress will modernize, streamline, and simplify the content creation experience with Gutenberg. It represents the biggest change to the WordPress user experience in several years. In fact, in the State Of The Word 2017 Matt Mullenweg described its enduring importance as “the editor for the next twelve years.” https://www.youtube.com/watch?v=XOY3ZUO6P0k

How does it work? Who is already using it? How can I get ready? How can I contribute? This presentation will answer all those questions and include a fun demo. Bring your computers!

About the Presenter: Shannon Smith, Platform services specialist, Automattic / WordPress.com VIP

Shannon Smith is a platform services specialist with WordPress.com VIP. She delivers content solutions to some of the biggest names in media, marketing, and enterprise. Shannon has over 15 years experience in open source web development. She is a long-time supporter of diversity, accessibility and internationalization, and was a WordPress Montreal community organizer for seven years. Shannon is also a hiker, poet, and mum of four.

Transcript

1. Demo for the
   Montreal WordPress Community
   Montreal, March 2018
   Gutenberg
   

   View Slide

2. Shannon Smith
   Platform Services Specialist
   WordPress.com VIP
   

   View Slide

3. Gutenberg
   A new post and page
   editing experience that
   makes it easy to create rich
   post layouts using “blocks”.
   

   View Slide

4. Discover the Possibilities
   Let’s take a look at some feature highlights
   - JS-centric - react-like app, modern JS development practises
   - Consistency - one “right way” to build content and extend the editor
   - Dynamically shift blocks around the page akin to visual page layouts
   - Use block templates to guide content creation. Eventually, you’ll use
   blocks instead of custom fields, shortcodes, metaboxes and other
   ad-hoc elements, becoming far more intuitive for editors.
   

   View Slide

5. Let’s Test Gutenberg!
   Frontenberg is a frontend instance of Gutenberg so
   that anyone can test and explore. Frontenberg
   was built by Tom J Nowell of WordPress VIP.
   - Grab some text
   - Grab some images
   - Head over to testgutenberg.com
   - Let’s get started!
   

   View Slide

6. Brief Technical Tour
   - Blocks are plugins
   - Availability/core behaviour/custom blocks
   - Editorial layer / data layer
   - Abstracted react is built-in
   

   View Slide

7. Block Plugins
   editor
   block logic (js)
   (extra editor css )
   front-end
   enqueue:
   enqueue: presentation css
   

   View Slide

8. Declaring Block Types
   // Import __ from i18n internationalization library
   const { __ } = wp.i18n;
   // Import registerBlockType() from block building libary
   const { registerBlockType } = wp.blocks;
   // Import the element creator function (React abstraction layer)
   const el = wp.element.createElement;
   /**
   * Register Block using default icon options.
   *
   * @param {String} name Block name, namespaced
   * @param {Object} settings Block settings
   * @return {?WPBlock} Return the block or 'undefined'
   */
   registerBlockType('example/static-content', {
   title: __('Custom Block', 'translationspace'),
   // Icon for the block
   // Choose from here by default https://developer.wordpress.org/
   resource/dashicons/
   icon: ‘admin-settings',
   category: 'common',
   edit( props ) {
   return el('p', {}, 'Hello world!');
   },
   save( props ) {
   return el('p', {}, 'Hello world!');
   }
   });
   reactJS, abstracted
   block api
   registerBlockType call
   editor behaviors
   data layer behaviors
   

   View Slide

9. Cool Stuff
   - Reusable blocks
   - Dynamic blocks
   - Backend-only (workflow) blocks
   - Integrated editorial workflow and policy
   - Revenue/ad-aware editorial experience
   - Block-level locking
   

   View Slide

10. cloc Gutenberg
    cloc gutenberg
    62 text files.
    62 unique files.
    3 files ignored.
    github.com/AlDanial/cloc v 1.76 T=1.32 s (44.8 files/s, 74009.2 lines/s)
    -------------------------------------------------------------------------------
    Language files blank comment code
    -------------------------------------------------------------------------------
    JavaScript 31 12921 16155 61572
    PHP 17 933 1657 4078
    Markdown 1 31 0 43
    CSS 10 0 0 10
    -------------------------------------------------------------------------------
    SUM: 59 13885 17812 65703
    -------------------------------------------------------------------------------
    

    View Slide

11. How Does
    Gutenberg Work
    As a matter of fact, the
    arrangement of type is a pretty
    inconvenient storage
    mechanism. The page is both
    the result and the proper way
    to store the data. The metal
    type is just an instrument for
    publication and editing, but
    more ephemeral in nature.
    Exactly as our use of an object
    tree (e.g. JSON) in the editor.
    

    View Slide

12. JSON Literals Inside HTML Comments
    {
    "logo": "vip",
    "color": "navy",
    "size": large,
    "hasLongsleeves": false
    }
    
    
    sum :: Foldable t, Num a => t a -> a
    sum = foldl (+) 0
    
    
    

    View Slide

13. An Object Tree
    [
    {
    type: 'core/cover-image',
    attributes: {
    url: 'my-hero.jpg',
    align: 'full',
    hasParallax: false,
    hasBackgroundDim: true
    },
    children: [
    "Gutenberg posts aren't HTML"
    ]
    },
    {
    type: 'core/paragraph',
    children: [
    "Lately I've been hearing plen…"
    ]
    }
    ]
    

    View Slide

14. Serialization
    
    
    
    
    
    

    View Slide

15. Ship of Theseus
    Gutenberg posts aren’t HTML in essence.
    They just happen, incidentally, to be stored
    inside of post_content in a way in which they
    require no transformation in order to be
    viewable by any legacy system.
    

    View Slide

16. Templates
    A block template is defined as a list of block
    items. Such blocks can have predefined
    attributes, placeholder content, and be static
    or dynamic. Block templates allow to specify
    a default initial state for an editor session.
    

    View Slide

17. Fun With Templates
    - template_lock property
    - assign a template to an existing post type
    - nested templates
    

    View Slide

18. Compatibility
    Gutenberg presents new opportunities while allowing
    developers the time and paths to transition effectively.
    - Shortcodes will continue to work
    - Custom Post Types are supported
    - Metaboxes are supported
    

    View Slide

19. Shortcodes
    - Will continue working without changes.
    - There is a new “shortcode block” to help inserting them.
    - There’s a planned mechanism for previewing them in place.
    

    View Slide

20. Custom Post Types
    function myplugin_register_book_post_type() {
    $args = array(
    'public' => true,
    'label' => 'Books',
    'show_in_rest' => true,
    'template' => array(
    array( 'core/image', array(
    'align' => 'left',
    ) ),
    array( 'core/heading', array(
    'placeholder' => 'Add Author...',
    ) ),
    array( 'core/paragraph', array(
    'placeholder' => 'Add Description...',
    ) ),
    ),
    );
    register_post_type( 'book', $args );
    }
    add_action( 'init',
    'myplugin_register_book_post_type' );
    

    View Slide

21. Custom Post Types
    - Are supported by Gutenberg.
    - Need REST API (show_in_rest) declaration.
    - Can opt out by not declaring “editor” support.
    - Will be able to declare supported and default blocks.
    

    View Slide

22. Gutenberg and Metaboxes
    - Metaboxes can be converted to blocks
    - Metaboxes can be used in Gutenberg
    - Metaboxes can have forced backwards compatibility
    add_meta_box( 'my-meta-box', 'My Meta Box',
    'my_meta_box_callback',
    null, 'normal', 'high',
    array(
    '__block_editor_compatible_meta_box' => false,
    )
    );
    https://wordpress.org/gutenberg/handbook/
    

    View Slide

23. Themes
    For Gutenberg?
    “These components can
    also take cues from themes
    — like the color palette
    component does—allowing
    the theme to overwrite the
    default colors.”
    https://hmn.md/white-papers/gutenberg-
    the-new-wordpress-editor/
    https://matiasventura.com/post/
    gutenberg-or-the-ship-of-theseus/
    

    View Slide

24. Building Blocks with
    Gutenberg
    

    View Slide

25. Creating Blocks
    function gutenberg_boilerplate_block() {
    wp_register_script(
    'gutenberg-boilerplate-es5-step01',
    plugins_url( 'step-01/block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' )
    );
    register_block_type( 'gutenberg-boilerplate-es5/hello-world-step-01',
    array(
    'editor_script' => 'gutenberg-boilerplate-es5-step01',
    ) );
    }
    add_action( 'init', 'gutenberg_boilerplate_block' );
    https://wordpress.org/gutenberg/handbook/
    

    View Slide

26. Creating Blocks
    var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };
    registerBlockType( ‘gutenberg-boilerplate-es5/hello-world-step-02', {
    title: 'Hello World (Step 1)',
    icon: 'universal-access-alt',
    category: 'layout',
    edit: function() {
    return el( 'p', { style: blockStyle }, 'Hello editor.' );
    },
    save: function() {
    return el( 'p', { style: blockStyle }, 'Hello saved content.' );
    },
    } );
    

    View Slide

27. Block Styles
    .wp-block-gutenberg-boilerplate-es5-hello-world-step-02 {
    color: green;
    background: #cfc;
    border: 2px solid #9c9;
    padding: 20px;
    }
    https://wordpress.org/gutenberg/handbook/
    

    View Slide

28. Putting The Two Together
    function gutenberg_boilerplate_block() {
    wp_register_style(
    'gutenberg-boilerplate-es5-step02',
    plugins_url( 'step-02/style.css', __FILE__ ),
    array( 'wp-blocks' ),
    filemtime( plugin_dir_path( __FILE__ ) . 'step-02/style.css' )
    );
    register_block_type( 'gutenberg-boilerplate-esnext/hello-world-
    step-02', array(
    'style' => 'gutenberg-boilerplate-es5-step02',
    ) );
    }
    add_action( 'init', 'gutenberg_boilerplate_block' );
    https://wordpress.org/gutenberg/handbook/
    

    View Slide

29. Attributes Object
    {
    url: {
    source: 'attribute',
    selector: 'img',
    attribute: 'src',
    }
    }
    // { "url": "https://lorempixel.com/1200/800/" }
    https://wordpress.org/gutenberg/handbook/
    

    View Slide

30. Fun With Block Creation
    - editable fields and attributes
    - toolbars and inspectors
    - dynamic blocks
    

    View Slide

31. Blocks with WP-CLI
    - The following command generates PHP, JS and CSS code for
    registering a Gutenberg block.
    wp scaffold block [--title=]
    [--dashicon=] [--
    category=] [--theme] [--
    plugin=] [--force]
    https://wordpress.org/gutenberg/handbook/
    

    View Slide

32. How to Win at Go
    Lose your first 50 games as
    quickly as possible.
    

    View Slide

33. How will Gutenberg Roll Out?
    It’s time to get on the Gutenramp!
    - April 2018 WordPress 5.0
    -Gutenberg will be in 5.0
    -Gutenberg will be ON by default. Users can opt-out by installing
    Classic Editor plugin.
    - We encourage you to start transitioning. Aim to be compatible (no
    breakage) within 3 months, and optimized in 6-12 months.
    

    View Slide

34. Three Phases
    - Phase I : post editing experience and the implementation of
    blocks
    - Phase II : page templates
    - Phase III : full site customization
    

    View Slide

35. Ready
    For Gutenberg?
    An in-depth look at how
    this new wordpress feature
    will affect your business.
    https://hmn.md/white-papers/gutenberg-
    the-new-wordpress-editor/
    

    View Slide

36. Gutenberg News
    A collection of Gutenberg
    tutorials & resources.
    http://gutenberg.news/
    

    View Slide

37. Gutenberg Plugin
    Compatibility
    Project
    How do I know whether a
    plugin is compatible with
    Gutenberg?
    https://github.com/danielbachhuber/
    gutenberg-plugin-compatibility
    

    View Slide

38. How to Contribute
    Help guide Gutenberg to become an excellent tool.
    - Start transitioning, and post issues you encounter on GitHub
    - Keep informed via Slack / WordPress.org / Github so you’re in
    the loop
    - Stay positive. Innovate. This is an opportunity to shape the
    editorial experience of the future.
    

    View Slide

39. Montreal WordPress Community
    Montreal, March 2018
    Questions?
    

    View Slide

40. vip.wordpress.com/jobs
    

    View Slide