I am JavaScript (And So Can You!)

Given at WordCamp US 2017.

Transcript

1. I AM JAVASCRIPT AND SO CAN YOU! @GARYPENDERGAST PENTO.NET
2. CALYPSO @GARYPENDERGAST
3. BLAH BLAH BLAH @GARYPENDERGAST
4. I don’t think I would’ve persisted if I weren’t being paid to do it. — Literally me. @GARYPENDERGAST
5. EVERYTHING OLD IS NEW @GARYPENDERGAST
6. SLOW DOWN, @GARYPENDERGAST
7. GUTENBLOCKS @GARYPENDERGAST
8. registerBlockType( 'me/my-block', { title: 'My Block', icon: 'some-icon', category: 'common', // Where we define the data we're storing attributes: {}, // Code to render the block options edit: function( props ) {}, // Code to write the block content to post_content save: function ( props ) {}, } ); @GARYPENDERGAST
9. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image', category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( props ) {}, save: function( props ) {}, } ); @GARYPENDERGAST
10. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image', category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( props ) {}, save: function( props ) {}, } ); @GARYPENDERGAST
11. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image', category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( props ) {}, save: function( props ) {}, } ); @GARYPENDERGAST
12. registerBlockType( 'pento/stars', { attributes: {}, edit: function ( props ) { var stars = props.attributes.stars, children = []; children.push( el( 'input', { key: 'stars-input', type: 'number', value: stars } ) ); return el( 'form', {}, children ); } }, save: function( props ) {}, } ); @GARYPENDERGAST
13. edit: function ( props ) { var stars = props.attributes.stars, children = []; function setStars( event ) { props.setAttributes( { stars: event.target.value } ); event.preventDefault(); } children.push( el( 'input', { key: 'stars-input', type: 'number', value: stars, onChange: setStars } ) ); return el( 'form', {}, children ); } @GARYPENDERGAST
14. registerBlockType( 'pento/stars', { attributes: {}, edit: function( props ) {}, save: function ( props ) { return null; }, } ); @GARYPENDERGAST
15. @GARYPENDERGAST
16. @GARYPENDERGAST
17. function Stars( props ) { return el( 'div', { key: 'stars' }, ' ⭐ '.repeat( props.attributes.stars ) ); } @GARYPENDERGAST
18. edit: function( props ) { // ... if ( stars ) { children.push( Stars( stars ) ); } // ... }, @GARYPENDERGAST
19. @GARYPENDERGAST
20. registerBlockType( 'pento/stars', { attributes: {}, edit: function ( props ) {}, save: function ( props ) { return Stars( props.attributes.stars ); }, } ); @GARYPENDERGAST
21. @GARYPENDERGAST
22. function Stars( stars ) { return el( 'div', { key: 'stars' }, ' ⭐ '.repeat( stars ) ); } registerBlockType( 'pento/stars', { title: 'OMG STARS " ', icon: 'format-image', category: 'common', attributes: { stars: { type: 'int', default: 3, } }, edit: function( props ) { var stars = props.attributes.stars, children = []; function setStars( event ) { props.setAttributes( { stars: event.target.value } ); event.preventDefault(); } if ( stars ) { children.push( Stars( stars ) ); } children.push( el( 'input', { key: 'stars-input', type: 'number', value: stars, onChange: setStars } ) ); return el( 'form', {}, children ); }, save: function( props ) { return Stars( props.attributes.stars ); } } ); @GARYPENDERGAST
23. BUILD TOOLS @GARYPENDERGAST
24. scaffold block @GARYPENDERGAST
25. > wp scaffold block stars --plugin=jetpack @GARYPENDERGAST
26. registerBlockType( 'me/my-block', { title: 'My Block', icon: 'some-icon', category: 'common', // Where we define the data we're storing attributes: {}, // Code to render the block options edit: function( { attributes } ) {}, // Code to write the block content to post_content save: function ( { attributes } ) {}, } ); @GARYPENDERGAST
27. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image', category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( { attributes } ) {}, save: function( { attributes } ) {}, } ); @GARYPENDERGAST
28. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image', category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( { attributes } ) {}, save: function( { attributes } ) {}, } ); @GARYPENDERGAST
29. function Stars( props ) { return el( 'div', { key: 'stars' }, ' ⭐ '.repeat( props.attributes.stars ) ); } @GARYPENDERGAST
30. function Stars( { stars } ) { return ( <div> { ' ⭐ '.repeat( stars ) } </div> ); } @GARYPENDERGAST
31. save: function ( props ) { return Stars( props.attributes.stars ); }, @GARYPENDERGAST
32. save: function ( { attributes } ) { return ( <Stars stars={ attributes.stars } /> ); } @GARYPENDERGAST
33. edit: function ( { attributes, setAttributes } ) { const { stars } = attributes; return ( <form> { stars && <Stars stars={ stars } /> } <input type = 'number' value = { stars } onChange = { ( value ) => setAttributes( { stars: value } ) } /> </form> ); }, @GARYPENDERGAST
34. edit: function ( { attributes, setAttributes } ) { const { stars } = attributes; return ( <form> { stars && <Stars stars={ stars } /> } <input type = 'number' value = { stars } onChange = { ( value ) => setAttributes( { stars: value } ) } /> </form> ); }, @GARYPENDERGAST
35. edit: function ( { attributes, setAttributes } ) { const { stars } = attributes; return ( <form> { stars && <Stars stars={ stars } /> } <input type = 'number' value = { stars } onChange = { ( value ) => setAttributes( { stars: value } ) } /> </form> ); }, @GARYPENDERGAST
36. edit: function ( { attributes, setAttributes } ) { const { stars } = attributes; return ( <form> { stars && <Stars stars={ stars } /> } <input type = 'number' value = { stars } onChange = { ( value ) => setAttributes( { stars: value } ) } /> </form> ); }, @GARYPENDERGAST
37. @GARYPENDERGAST
38. STEP BY STEP @GARYPENDERGAST
39. REDUX @GARYPENDERGAST
40. Actions Filters Reducers Immutable state tree @GARYPENDERGAST
41. BLAH BLAH BLAH @GARYPENDERGAST
42. IMMUTABLE STATE TREE @GARYPENDERGAST
43. IMMUTABLE STATE TREE DATA BLOB @GARYPENDERGAST
44. ACTIONS @GARYPENDERGAST
45. REDUCER @GARYPENDERGAST
46. FILTERS @GARYPENDERGAST
47. REDUX @GARYPENDERGAST
48. WHAT'S NEXT? @GARYPENDERGAST
49. � @GARYPENDERGAST PENTO.NET