Successfully reported this slideshow.

Your First Gutenberg Block

0

Share

Loading in …3
×
1 of 45
1 of 45

Your First Gutenberg Block

0

Share

Download to read offline

Description

Presentation from WordCamp Kathmandu 2019 - creating a Nepali date Block for the block Editor of WordPress (no build process required).

Transcript

  1. 1. Your first Gutenberg Block WordCamp Kathmandu 2019 1
  2. 2. WHOAMI Yoav Farhi, @yoavf — Developer @ Automattic — Localization specialist (L10N) — WordPress core and GlotPress contributor 2
  3. 3. Your first Gutenberg Block WordCamp Kathmandu 2019 3
  4. 4. Our first Gutenberg Block WordCamp Kathmandu 2019 4
  5. 5. Today We'll learn how to create a simple Gutenberg block — Basic structure — Use external dependencies — Making our block editable 5
  6. 6. Today But we won't go into — Build tools (Webpack, babel, npm) — JSX / React 6
  7. 7. Our mission: Create a Guentberg block to display a Nepali date 7
  8. 8. 8
  9. 9. Basic Structure PHP JS Script registration Block registration Block logic and presentation plugin.php block.js 9
  10. 10. PHPwp_register_script() register_block_type() 10
  11. 11. wp_register_script Register our block JS file and its optional dependencies wp_register_script( 'nepali-date-lib', 'https://[...]jquery.nepaliDatePicker.min.js', ); _ 11
  12. 12. wp_register_script Register our block JS file and its optional dependencies wp_register_script( 'nepali-date-lib', 'https://[...]jquery.nepaliDatePicker.min.js', ); wp_register_script( 'nepali-date-block', plugins_url( 'nepali-date-block.js', __FILE__ ), _ ); 12
  13. 13. wp_register_script Register our block JS file and its optional dependencies wp_register_script( 'nepali-date-lib', 'https://[...]jquery.nepaliDatePicker.min.js', ); wp_register_script( 'nepali-date-block', plugins_url( 'nepali-date-block.js', __FILE__ ), [ 'wp-blocks', 'wp-i18n', 'wp-element', 'nepali-date-lib' ], ); 13
  14. 14. register_block_type Register our block and its script register_block_type( 'wcktm/nepali-date', [ 'editor_script' => 'nepali-date-block' ] ); 14
  15. 15. JS structure registerBlockType() edit(),save() 15
  16. 16. Structure Immediately Invoked Function Expression (IIFE) * ( function() { // Magic // happens // here } )(); *  Or: Self-Executing Anonymous Function 16
  17. 17. registerBlockType ( function() { wp.blocks.registerBlockType( 'wcktm/nepali-date', { // Block configuration }, edit: function( props ) { // Controls our block in the editor }, save: function( props ) { // Generates our block final markup }, } ); } )(); 17
  18. 18. registerBlockType wp.blocks.registerBlockType( 'wcktm/nepali-date', { }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 18
  19. 19. registerBlockType - configuration wp.blocks.registerBlockType( 'wcktm/nepali-date', { title: 'Nepali Date', category: 'widgets', icon: 'calendar-alt', }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 19
  20. 20. registerBlockType - attributes wp.blocks.registerBlockType( 'wcktm/nepali-date', { title: 'Nepali Date', category: 'widgets', icon: 'calendar-alt', attributes: { }, }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 20
  21. 21. registerBlockType - attributes wp.blocks.registerBlockType( 'wcktm/nepali-date', { title: 'Nepali Date', category: 'widgets', icon: 'calendar-alt', attributes: { englishDate: { type: 'string' }, nepaliDate: { type: 'string' }, }, }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 21
  22. 22. registerBlockType wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 22
  23. 23. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { } } ); 23
  24. 24. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { if ( props.attributes.nepaliDate !== undefined ) { return wp.element.createElement( 'p', {}, props.attributes.nepaliDate ); }, } } ); 24
  25. 25. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { if ( props.attributes.nepaliDate !== undefined ) { // => <p>{nepaliDate}</p> return wp.element.createElement( 'p', {}, props.attributes.nepaliDate ); }, } } ); 25
  26. 26. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { } } ); 26
  27. 27. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) { }, save: function( props ) {} } ); 27
  28. 28. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { }, save: function( props ) {} } ); 28
  29. 29. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); }, save: function( props ) {} } ); 29
  30. 30. 30
  31. 31. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); }, save: function( props ) {} } ); 31
  32. 32. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); } }, save: function( props ) {} } ); 32
  33. 33. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); } const text = typeof attributes.nepaliDate !== 'undefined' ? attributes.nepaliDate : wp.i18n.__( 'Click to select a date' ); return wp.element.createElement( 'p', { style: blockStyle }, text ); }, save: function( props ) {} } ); 33
  34. 34. Structure ( function() { const blockStyle = { backgroundColor: '#DC143C', color: '#fff', padding: '20px', }; } )(); 34
  35. 35. 35
  36. 36. registerBlockType - saveDate() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { /* ... */ } /* ... */ }, save: function( props ) {} } ); 36
  37. 37. registerBlockType - saveDate() edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { } /* ... */ }, 37
  38. 38. registerBlockType - saveDate() edit: function( { isSelected, attributes, setAttributes } ) { const saveDate = function( englishDate ) { // Vodoo setAttributes( { 'englishDate': englishDate, 'nepaliDate' : nepaliDate, } ); } if ( isSelected ) { } /* ... */ }, 38
  39. 39. registerBlockType - saveDate() edit: function( { isSelected, attributes, setAttributes } ) { const saveDate = function( englishDate ) { const englishDateObject = new Date( englishDate ); const nepaliDate = calendarFunctions.getBsDateByAdDate( englishDateObject.getFullYear(), englishDateObject.getMonth() + 1, englishDateObject.getDay() ); setAttributes( { 'englishDate': englishDate, 'nepaliDate' : calendarFunctions.bsDateFormat( "%y-%m-%d", nepaliDate.bsYear, nepaliDate.bsMonth, nepaliDate.bsDate ), } ); } if ( isSelected ) { } /* ... */ }, 39
  40. 40. 40
  41. 41. 41
  42. 42. Yay!42
  43. 43. 43
  44. 44. automattic.com/work-with-us/ 44
  45. 45. धन्यवाद 45

Description

Presentation from WordCamp Kathmandu 2019 - creating a Nepali date Block for the block Editor of WordPress (no build process required).

Transcript

  1. 1. Your first Gutenberg Block WordCamp Kathmandu 2019 1
  2. 2. WHOAMI Yoav Farhi, @yoavf — Developer @ Automattic — Localization specialist (L10N) — WordPress core and GlotPress contributor 2
  3. 3. Your first Gutenberg Block WordCamp Kathmandu 2019 3
  4. 4. Our first Gutenberg Block WordCamp Kathmandu 2019 4
  5. 5. Today We'll learn how to create a simple Gutenberg block — Basic structure — Use external dependencies — Making our block editable 5
  6. 6. Today But we won't go into — Build tools (Webpack, babel, npm) — JSX / React 6
  7. 7. Our mission: Create a Guentberg block to display a Nepali date 7
  8. 8. 8
  9. 9. Basic Structure PHP JS Script registration Block registration Block logic and presentation plugin.php block.js 9
  10. 10. PHPwp_register_script() register_block_type() 10
  11. 11. wp_register_script Register our block JS file and its optional dependencies wp_register_script( 'nepali-date-lib', 'https://[...]jquery.nepaliDatePicker.min.js', ); _ 11
  12. 12. wp_register_script Register our block JS file and its optional dependencies wp_register_script( 'nepali-date-lib', 'https://[...]jquery.nepaliDatePicker.min.js', ); wp_register_script( 'nepali-date-block', plugins_url( 'nepali-date-block.js', __FILE__ ), _ ); 12
  13. 13. wp_register_script Register our block JS file and its optional dependencies wp_register_script( 'nepali-date-lib', 'https://[...]jquery.nepaliDatePicker.min.js', ); wp_register_script( 'nepali-date-block', plugins_url( 'nepali-date-block.js', __FILE__ ), [ 'wp-blocks', 'wp-i18n', 'wp-element', 'nepali-date-lib' ], ); 13
  14. 14. register_block_type Register our block and its script register_block_type( 'wcktm/nepali-date', [ 'editor_script' => 'nepali-date-block' ] ); 14
  15. 15. JS structure registerBlockType() edit(),save() 15
  16. 16. Structure Immediately Invoked Function Expression (IIFE) * ( function() { // Magic // happens // here } )(); *  Or: Self-Executing Anonymous Function 16
  17. 17. registerBlockType ( function() { wp.blocks.registerBlockType( 'wcktm/nepali-date', { // Block configuration }, edit: function( props ) { // Controls our block in the editor }, save: function( props ) { // Generates our block final markup }, } ); } )(); 17
  18. 18. registerBlockType wp.blocks.registerBlockType( 'wcktm/nepali-date', { }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 18
  19. 19. registerBlockType - configuration wp.blocks.registerBlockType( 'wcktm/nepali-date', { title: 'Nepali Date', category: 'widgets', icon: 'calendar-alt', }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 19
  20. 20. registerBlockType - attributes wp.blocks.registerBlockType( 'wcktm/nepali-date', { title: 'Nepali Date', category: 'widgets', icon: 'calendar-alt', attributes: { }, }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 20
  21. 21. registerBlockType - attributes wp.blocks.registerBlockType( 'wcktm/nepali-date', { title: 'Nepali Date', category: 'widgets', icon: 'calendar-alt', attributes: { englishDate: { type: 'string' }, nepaliDate: { type: 'string' }, }, }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 21
  22. 22. registerBlockType wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) {}, // markup generation } ); 22
  23. 23. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { } } ); 23
  24. 24. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { if ( props.attributes.nepaliDate !== undefined ) { return wp.element.createElement( 'p', {}, props.attributes.nepaliDate ); }, } } ); 24
  25. 25. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { if ( props.attributes.nepaliDate !== undefined ) { // => <p>{nepaliDate}</p> return wp.element.createElement( 'p', {}, props.attributes.nepaliDate ); }, } } ); 25
  26. 26. registerBlockType - save() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) {}, // editor behaviour save: function( props ) { } } ); 26
  27. 27. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( props ) { }, save: function( props ) {} } ); 27
  28. 28. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { }, save: function( props ) {} } ); 28
  29. 29. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); }, save: function( props ) {} } ); 29
  30. 30. 30
  31. 31. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); }, save: function( props ) {} } ); 31
  32. 32. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); } }, save: function( props ) {} } ); 32
  33. 33. registerBlockType - edit() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { return wp.element.createElement( wp.components.DatePicker, { onChange: saveDate, currentDate: typeof attributes.englishDate !== 'undefined' ? new Date( attributes.englishDate ) : new Date() }); } const text = typeof attributes.nepaliDate !== 'undefined' ? attributes.nepaliDate : wp.i18n.__( 'Click to select a date' ); return wp.element.createElement( 'p', { style: blockStyle }, text ); }, save: function( props ) {} } ); 33
  34. 34. Structure ( function() { const blockStyle = { backgroundColor: '#DC143C', color: '#fff', padding: '20px', }; } )(); 34
  35. 35. 35
  36. 36. registerBlockType - saveDate() wp.blocks.registerBlockType( 'wcktm/nepali-date', { /* config */ }, edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { /* ... */ } /* ... */ }, save: function( props ) {} } ); 36
  37. 37. registerBlockType - saveDate() edit: function( { isSelected, attributes, setAttributes } ) { if ( isSelected ) { } /* ... */ }, 37
  38. 38. registerBlockType - saveDate() edit: function( { isSelected, attributes, setAttributes } ) { const saveDate = function( englishDate ) { // Vodoo setAttributes( { 'englishDate': englishDate, 'nepaliDate' : nepaliDate, } ); } if ( isSelected ) { } /* ... */ }, 38
  39. 39. registerBlockType - saveDate() edit: function( { isSelected, attributes, setAttributes } ) { const saveDate = function( englishDate ) { const englishDateObject = new Date( englishDate ); const nepaliDate = calendarFunctions.getBsDateByAdDate( englishDateObject.getFullYear(), englishDateObject.getMonth() + 1, englishDateObject.getDay() ); setAttributes( { 'englishDate': englishDate, 'nepaliDate' : calendarFunctions.bsDateFormat( "%y-%m-%d", nepaliDate.bsYear, nepaliDate.bsMonth, nepaliDate.bsDate ), } ); } if ( isSelected ) { } /* ... */ }, 39
  40. 40. 40
  41. 41. 41
  42. 42. Yay!42
  43. 43. 43
  44. 44. automattic.com/work-with-us/ 44
  45. 45. धन्यवाद 45

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

×