Just enough React: Getting ready for Gutenberg

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.

This session will teach just enough React for theme and plugin developers to start using Gutenberg today. Colour palettes, meta boxes, reusable blocks: all the new features, made easy.

This presentation was give at WordCamp Vancouver 2018.

***********

Shannon Smith is a platform services specialist with WordPress.com VIP/Automattic. 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. Getting Ready for Gutenberg
   WordCamp Vancouver 2018
   Just Enough React
   

   View Slide

2. Shannon Smith
   Platform Services Specialist
   WordPress.com VIP
   

   View Slide

3. What is 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
   - Consistent
   - Dynamically shift blocks
   - Block templates to guide content creation
   

   View Slide

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

   View Slide

6. Test Gutenberg!
   

   View Slide

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

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

   View Slide

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

   View Slide

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

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

    View Slide

12. cloc Gutenberg
    cloc gutenberg.3.9.0.zip
    100 text files.
    100 unique files.
    3 files ignored.
    github.com/AlDanial/cloc v 1.80 T=1.35 s (71.9 files/s, 45480.2 lines/s)
    -------------------------------------------------------------------------------
    Language files blank comment code
    -------------------------------------------------------------------------------
    JavaScript 50 4792 15232 30433
    PHP 28 1512 2969 6341
    Markdown 1 31 0 44
    CSS 18 0 0 27
    -------------------------------------------------------------------------------
    SUM: 97 6335 18201 36845
    -------------------------------------------------------------------------------
    

    View Slide

13. What is React?
    React makes it painless to
    create interactive UIs.
    Design simple views for
    each state in your
    application, and React will
    efficiently update and
    render just the right
    components when your
    data changes.
    

    View Slide

14. JSON Literals Inside HTML Comments
    {
    "logo": "vip",
    "color": "navy",
    "size": large,
    "hasLongsleeves": false
    }
    
    
    sum :: Foldable t, Num a => t a -> a
    sum = foldl (+) 0
    
    
    https://fluffyandflakey.blog/2017/09/04/gutenberg-posts-arent-html/
    

    View Slide

15. 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…"
    ]
    }
    ]
    https://fluffyandflakey.blog/2017/09/04/gutenberg-posts-arent-html/
    

    View Slide

16. Serialization
    
    
    
    
    
    

    View Slide

17. 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.
    https://matiasventura.com/post/gutenberg-or-the-ship-of-theseus/

    https://fluffyandflakey.blog/2017/09/04/gutenberg-posts-arent-html/

    

    

    View Slide

18. 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.
    https://wordpress.org/gutenberg/handbook/templates/
    

    View Slide

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

    View Slide

20. Compatibility
    Gutenberg presents new
    opportunities while
    allowing developers the
    time and paths to
    transition effectively.
    

    View Slide

21. Compatibility
    - Shortcodes will continue to work
    - Custom Post Types are supported
    - Metaboxes are supported
    

    View Slide

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

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

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

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

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

27. Building Blocks with
    Gutenberg
    

    View Slide

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

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

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

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

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

    View Slide

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

    View Slide

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

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

    View Slide

36. How will Gutenberg Roll Out?
    It’s time to get on the Gutenramp!
    • Beta 1: October 19, 2018
    • RC 1: October 30, 2018
    • Release: November 19, 2018
    

    View Slide

37. Four Phases
    - Phase I : post editing experience and the implementation of
    blocks
    - Phase II : entire-site layouts
    - Phase III : ???
    - Phase IV : ???
    

    View Slide

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

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

    View Slide

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

    View Slide

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

42. WordCamp Vancouver 2018
    Questions?
    

    View Slide

43. vip.wordpress.com/jobs
    

    View Slide