Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

@zgordon javascriptforwp.com/bmore drupalgutenberg.org

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@zgordon javascriptforwp.com/bmore

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

javascriptforwp.com/bmore @zgordon React in WordPress

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@zgordon javascriptforwp.com/bmore gutenberg.local

Slide 26

Slide 26 text

@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!');

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

@zgordon javascriptforwp.com/bmore gutenberg.local

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

@zgordon " setAttributes( { textControl } ) } /> " setAttributes( { textareaControl } ) } />

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

@zgordon " setAttributes( { textControl } ) } /> " setAttributes( { textareaControl } ) } />

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

@zgordon javascriptforwp.com/bmore wp.components

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

javascriptforwp.com/bmore @zgordon Redux in WordPress

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

@zgordon const { withSelect } = wp.data; function MyAuthorsListBase( { authors } ) { return (
    { authors.map( ( author ) =>" (
  • { author.name }
  • ) ) }
); } const MyAuthorsList = withSelect( ( select ) =>" ( { authors: select( 'core' ).getAuthors(), } ) )( MyAuthorsListBase );

Slide 46

Slide 46 text

@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 );

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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