Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Your First Gutenberg Block

486 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Your First Gutenberg Block

  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

×