React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
October 06, 2018

React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

October 06, 2018
Tweet

Transcript

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

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

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

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

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

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

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

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

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

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

  11. @zgordon javascriptforwp.com/bmore

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

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

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

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

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

  17. @zgordon // Enqueue JS - React Dependency? wp_enqueue_script( 'myplugin-js', plugins_url(

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

    null, __FILE__ ) . '/js/plugin.js', [ 'react' ] );
  19. @zgordon javascriptforwp.com/bmore In WordPress React == wp.element

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

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

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

    // WordPress React const el = wp.element.createElement('h1', null, 'Welcome!');
  23. @zgordon // Normal ReactDOM ReactDOM.render( el, document.getElementById( 'root' ) );

    // WordPress ReactDOM wp.element.render( el, document.getElementById( ‘root' ) );
  24. @zgordon javascriptforwp.com/bmore wp.element is Available in the DOM window object*

    window.wp.element
  25. @zgordon javascriptforwp.com/bmore gutenberg.local

  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!');
  27. javascriptforwp.com/bmore @zgordon To Use React Outside of Gutenberg

  28. @zgordon // Enqueue JS - React Dependency? wp_enqueue_script( 'myplugin-js', plugins_url(

    null, __FILE__ ) . '/js/plugin.js', [ 'wp-element' ] );
  29. @zgordon javascriptforwp.com/bmore gutenberg.local

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

  31. @zgordon <PanelBody> <TextControl label={ __( 'Text Field', 'domain' ) }

    value={ textControl } onChange={ textControl =>" setAttributes( { textControl } ) } /> </PanelBody> <PanelBody> <TextareaControl label={ __( 'Text Area Field', 'domain' ) } value={ textareaControl } onChange={ textareaControl =>" setAttributes( { textareaControl } ) } /> </PanelBody>
  32. @zgordon javascriptforwp.com/bmore You will need Babel to use JSX..

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

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

  35. @zgordon <PanelBody> <TextControl label={ __( 'Text Field', 'domain' ) }

    value={ textControl } onChange={ textControl =>" setAttributes( { textControl } ) } /> <TextareaControl label={ __( 'Text Area Field', 'domain' ) } value={ textareaControl } onChange={ textareaControl =>" setAttributes( { textareaControl } ) } /> </PanelBody>
  36. javascriptforwp.com/bmore @zgordon A React Component Library For WordPress!

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

  38. @zgordon const { Autocomplete, Button, CheckboxControl, ColorPalette, DropZone, FormToggle, Panel,

    Popover, Spinner, TextControl, TextareaControl, Tooltip, } = wp.components; const CustomTooltip = () =>" ( <Tooltip text="More Info"> <Button isDefault> Hover for Tooltip </Button> </Tooltip> );
  39. javascriptforwp.com/bmore @zgordon Redux in WordPress

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

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

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

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

    REST API Calls *
  44. @zgordon const { withSelect, withDispatch, } = wp.data;

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

    authors } ) { return ( <ul> { authors.map( ( author ) =>" ( <li key={ author.id }>{ author.name }</li> ) ) } </ul> ); } const MyAuthorsList = withSelect( ( select ) =>" ( { authors: select( 'core' ).getAuthors(), } ) )( MyAuthorsListBase );
  46. @zgordon const { withSelect } = wp.data; function MyPostsListBase( {

    posts } ) { return ( <ul> { posts.map( ( post ) =>" ( <li key={ post.id }>{ post.title.rendered }</li> ) ) } </ul> ); } const MyPostList = withSelect( ( select ) =>" ( { posts: select( 'core' ).getEntityRecords( 'postType', 'post', { per_page: 5 } ) } ) )( MyPostsListBase );
  47. @zgordon edit: withSelect( select =>" { return { posts: select(

    'core' ).getEntityRecords( 'postType', 'post', { per_page: 5 } ) }; } )( ( { posts } ) =>" { return ( <ul> { posts.map( post =>" { return <li>{ post.title.rendered }</li>; }) } </ul> ); } )
  48. @zgordon javascriptforwp.com/bmore npmjs.com/package/@wordpress/api-fetch

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

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

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

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

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