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

React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018

Zac Gordon
October 06, 2018

React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018

Zac Gordon

October 06, 2018
Tweet

More Decks by Zac Gordon

Other Decks in Technology

Transcript

  1. javascriptforwp.com/bmore @zgordon
    React for Gutenberg,
    WordPress & Beyond
    w Zac Gordon

    View full-size slide

  2. javascriptforwp.com/bmore @zgordon
    Hi! I’m Zac
    zacgordon.com

    View full-size slide

  3. javascriptforwp.com/bmore @zgordon
    How & Why
    React is Included
    w WordPress

    View full-size slide

  4. javascriptforwp.com/bmore @zgordon
    A bit of history..

    View full-size slide

  5. javascriptforwp.com/bmore @zgordon
    Gutenberg is React
    Under the Hood

    View full-size slide

  6. javascriptforwp.com/bmore @zgordon
    Built Decoupled
    Wired to WordPress

    View full-size slide

  7. @zgordon
    javascriptforwp.com/bmore
    gutenberg-standalone.surge.sh

    View full-size slide

  8. @zgordon
    javascriptforwp.com/bmore
    drupalgutenberg.org

    View full-size slide

  9. javascriptforwp.com/bmore @zgordon
    Gutenberg Editor is a
    Modern React App

    View full-size slide

  10. @zgordon
    javascriptforwp.com/bmore
    npmjs.com/~WordPress

    View full-size slide

  11. @zgordon
    javascriptforwp.com/bmore

    View full-size slide

  12. javascriptforwp.com/bmore @zgordon
    Better Standards
    for WordPress JavaScript

    View full-size slide

  13. @zgordon
    javascriptforwp.com/bmore
    github.com/WordPress-Coding-Standards/eslint-plugin-wordpress

    View full-size slide

  14. javascriptforwp.com/bmore @zgordon
    Gutenberg Editor is a
    Modern React App

    View full-size slide

  15. javascriptforwp.com/bmore @zgordon
    React in WordPress

    View full-size slide

  16. javascriptforwp.com/bmore @zgordon
    The Great WordPress
    React Abstraction

    View full-size slide

  17. @zgordon
    // Enqueue JS - React Dependency?
    wp_enqueue_script(
    'myplugin-js',
    plugins_url( null, __FILE__ ) . '/js/plugin.js',
    [ 'jquery' ]
    );

    View full-size slide

  18. @zgordon
    // Enqueue JS - React Dependency?
    wp_enqueue_script(
    'myplugin-js',
    plugins_url( null, __FILE__ ) . '/js/plugin.js',
    [ 'react' ]
    );

    View full-size slide

  19. @zgordon
    javascriptforwp.com/bmore
    In WordPress
    React == wp.element

    View full-size slide

  20. @zgordon
    javascriptforwp.com/bmore
    github.com/WordPress/gutenberg/tree/master/packages/element

    View full-size slide

  21. @zgordon
    javascriptforwp.com/bmore
    The Great WordPress
    React Abstraction

    View full-size slide

  22. @zgordon
    // Normal React
    const el = React.createElement('h1', null, 'Welcome!');
    // WordPress React
    const el = wp.element.createElement('h1', null, 'Welcome!');

    View full-size slide

  23. @zgordon
    // Normal ReactDOM
    ReactDOM.render( el, document.getElementById( 'root' ) );
    // WordPress ReactDOM
    wp.element.render( el, document.getElementById( ‘root' ) );

    View full-size slide

  24. @zgordon
    javascriptforwp.com/bmore
    wp.element is Available in
    the DOM window object*
    window.wp.element

    View full-size slide

  25. @zgordon
    javascriptforwp.com/bmore
    gutenberg.local

    View full-size slide

  26. @zgordon
    // WordPress React - Normal
    const el = wp.element.createElement('h1', null, 'Welcome!');
    // WordPress React - Destructured
    const { createElement } = wp.element;
    const el = createElement('h1', null, 'Welcome!');

    View full-size slide

  27. javascriptforwp.com/bmore @zgordon
    To Use React
    Outside of Gutenberg

    View full-size slide

  28. @zgordon
    // Enqueue JS - React Dependency?
    wp_enqueue_script(
    'myplugin-js',
    plugins_url( null, __FILE__ ) . '/js/plugin.js',
    [ 'wp-element' ]
    );

    View full-size slide

  29. @zgordon
    javascriptforwp.com/bmore
    gutenberg.local

    View full-size slide

  30. javascriptforwp.com/bmore @zgordon
    We Also Have JSX
    In WordPress

    View full-size slide

  31. @zgordon

    label={ __( 'Text Field', 'domain' ) }
    value={ textControl }
    onChange={ textControl =>" setAttributes( { textControl } ) }
    />


    label={ __( 'Text Area Field', 'domain' ) }
    value={ textareaControl }
    onChange={ textareaControl =>" setAttributes( { textareaControl } ) }
    />

    View full-size slide

  32. @zgordon
    javascriptforwp.com/bmore
    You will need Babel
    to use JSX..

    View full-size slide

  33. @zgordon
    javascriptforwp.com/bmore
    npmjs.com/package/@wordpress/babel-preset-default

    View full-size slide

  34. @zgordon
    javascriptforwp.com/bmore
    npmjs.com/package/@wordpress/babel-plugin-import-jsx-pragma

    View full-size slide

  35. @zgordon

    label={ __( 'Text Field', 'domain' ) }
    value={ textControl }
    onChange={ textControl =>" setAttributes( { textControl } ) }
    />
    label={ __( 'Text Area Field', 'domain' ) }
    value={ textareaControl }
    onChange={ textareaControl =>" setAttributes( { textareaControl } ) }
    />

    View full-size slide

  36. javascriptforwp.com/bmore @zgordon
    A React
    Component Library
    For WordPress!

    View full-size slide

  37. @zgordon
    javascriptforwp.com/bmore
    wp.components

    View full-size slide

  38. @zgordon
    const {
    Autocomplete,
    Button,
    CheckboxControl,
    ColorPalette,
    DropZone,
    FormToggle,
    Panel,
    Popover,
    Spinner,
    TextControl,
    TextareaControl,
    Tooltip,
    } = wp.components;
    const CustomTooltip = () =>" (


    Hover for Tooltip


    );

    View full-size slide

  39. javascriptforwp.com/bmore @zgordon
    Redux in
    WordPress

    View full-size slide

  40. @zgordon
    javascriptforwp.com/bmore
    github.com/WordPress/gutenberg/tree/master/packages/data#comparison-with-redux

    View full-size slide

  41. @zgordon
    javascriptforwp.com/bmore
    Ability to Create
    Our Own Data Stores
    Using WP Redux

    View full-size slide

  42. @zgordon
    javascriptforwp.com/bmore
    github.com/WordPress/gutenberg/tree/master/packages/core-data

    View full-size slide

  43. @zgordon
    javascriptforwp.com/bmore
    Use Data API
    Instead Of Your Own
    WP REST API Calls *

    View full-size slide

  44. @zgordon
    const {
    withSelect,
    withDispatch,
    } = wp.data;

    View full-size slide

  45. @zgordon
    const { withSelect } = wp.data;
    function MyAuthorsListBase( { authors } ) {
    return (

    { authors.map( ( author ) =>" (
    { author.name }
    ) ) }

    );
    }
    const MyAuthorsList = withSelect( ( select ) =>" ( {
    authors: select( 'core' ).getAuthors(),
    } ) )( MyAuthorsListBase );

    View full-size slide

  46. @zgordon
    const { withSelect } = wp.data;
    function MyPostsListBase( { posts } ) {
    return (

    { posts.map( ( post ) =>" (
    { post.title.rendered }
    ) ) }

    );
    }
    const MyPostList = withSelect( ( select ) =>" ( {
    posts: select( 'core' ).getEntityRecords( 'postType', 'post', { per_page: 5 } )
    } ) )( MyPostsListBase );

    View full-size slide

  47. @zgordon
    edit: withSelect( select =>" {
    return {
    posts: select( 'core' ).getEntityRecords( 'postType', 'post', { per_page: 5 } )
    };
    } )( ( { posts } ) =>" {
    return (

    { posts.map( post =>" {
    return { post.title.rendered };
    }) }

    );
    } )

    View full-size slide

  48. @zgordon
    javascriptforwp.com/bmore
    npmjs.com/package/@wordpress/api-fetch

    View full-size slide

  49. javascriptforwp.com/bmore @zgordon
    React in WP
    Immediate Future
    vs. Next Few Years

    View full-size slide

  50. javascriptforwp.com/bmore @zgordon
    Gutenberg
    “Block” Editor

    View full-size slide

  51. javascriptforwp.com/bmore @zgordon
    Gutenberg
    “Block” Editor, Widgets,
    Customizer, Themes,
    Plugins, Decoupled

    View full-size slide

  52. javascriptforwp.com/bmore @zgordon
    Do I Need
    to Learn
    All of This?

    View full-size slide

  53. javascriptforwp.com/bmore @zgordon
    20% OFF Gutenberg Course
    javascriptforwp.com/bmore
    Q&A

    View full-size slide