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

I am JavaScript (And So Can You!)

I am JavaScript (And So Can You!)

Given at WordCamp US 2017.

1ad9e5c98d81c6815a65dab5b6e1f669?s=128

Gary Pendergast

December 01, 2017
Tweet

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