Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Just enough React: Getting ready for Gutenberg

Shannon Smith
October 13, 2018

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.

Shannon Smith

October 13, 2018
Tweet

More Decks by Shannon Smith

Other Decks in Technology

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