$30 off During Our Annual Pro Sale. View Details »

I am JavaScript (And So Can You!)

I am JavaScript (And So Can You!)

Given at WordCamp US 2017.

Gary Pendergast

December 01, 2017
Tweet

More Decks by Gary Pendergast

Other Decks in Technology

Transcript

  1. I don’t think I would’ve persisted if I weren’t being

    paid to do it. — Literally me. @GARYPENDERGAST
  2. 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
  3. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image',

    category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( props ) {}, save: function( props ) {}, } ); @GARYPENDERGAST
  4. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image',

    category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( props ) {}, save: function( props ) {}, } ); @GARYPENDERGAST
  5. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image',

    category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( props ) {}, save: function( props ) {}, } ); @GARYPENDERGAST
  6. 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
  7. 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
  8. registerBlockType( 'pento/stars', { attributes: {}, edit: function( props ) {},

    save: function ( props ) { return null; }, } ); @GARYPENDERGAST
  9. function Stars( props ) { return el( 'div', { key:

    'stars' }, ' ⭐ '.repeat( props.attributes.stars ) ); } @GARYPENDERGAST
  10. edit: function( props ) { // ... if ( stars

    ) { children.push( Stars( stars ) ); } // ... }, @GARYPENDERGAST
  11. registerBlockType( 'pento/stars', { attributes: {}, edit: function ( props )

    {}, save: function ( props ) { return Stars( props.attributes.stars ); }, } ); @GARYPENDERGAST
  12. 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
  13. 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
  14. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image',

    category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( { attributes } ) {}, save: function( { attributes } ) {}, } ); @GARYPENDERGAST
  15. registerBlockType( 'pento/stars', { title: 'OMG STARS ! ', icon: 'format-image',

    category: 'common', attributes: { stars: { type: 'int', default: 3, }, }, edit: function( { attributes } ) {}, save: function( { attributes } ) {}, } ); @GARYPENDERGAST
  16. function Stars( props ) { return el( 'div', { key:

    'stars' }, ' ⭐ '.repeat( props.attributes.stars ) ); } @GARYPENDERGAST
  17. function Stars( { stars } ) { return ( <div>

    { ' ⭐ '.repeat( stars ) } </div> ); } @GARYPENDERGAST
  18. save: function ( { attributes } ) { return (

    <Stars stars={ attributes.stars } /> ); } @GARYPENDERGAST
  19. 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
  20. 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
  21. 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
  22. 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