React for Gutenberg, WordPress & Beyond - WordCamp Baltimore 2018

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