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
WordCamp Kathmandu 2019
1
WHOAMI
Yoav Farhi, @yoavf
— Developer @ Automattic
— Localization specialist (L10N)
— WordPress core and GlotPress contrib...
Your first
Gutenberg Block
WordCamp Kathmandu 2019
3
Our first
Gutenberg Block
WordCamp Kathmandu 2019
4
Today
We'll learn how to create a simple Gutenberg block
— Basic structure
— Use external dependencies
— Making our block ...
Today
But we won't go into
— Build tools (Webpack, babel, npm)
— JSX / React
6
Our mission:
Create a Guentberg
block to display
a Nepali date
7
8
Basic Structure
PHP JS
Script registration
Block registration
Block logic and
presentation
plugin.php block.js
9
PHPwp_register_script()
register_block_type()
10
wp_register_script
Register our block JS file and its optional dependencies
wp_register_script(
'nepali-date-lib',
'https:/...
wp_register_script
Register our block JS file and its optional dependencies
wp_register_script(
'nepali-date-lib',
'https:/...
wp_register_script
Register our block JS file and its optional dependencies
wp_register_script(
'nepali-date-lib',
'https:/...
register_block_type
Register our block and its script
register_block_type(
'wcktm/nepali-date',
[
'editor_script' => 'nepa...
JS
structure
registerBlockType()
edit(),save()
15
Structure
Immediately Invoked Function Expression (IIFE) *
( function() {
// Magic
// happens
// here
} )();
* 
Or: Self-E...
registerBlockType
( function() {
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
// Block configuration
},
edit: funct...
registerBlockType
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
},
edit: function( props ) {}, // editor behaviour
s...
registerBlockType - configuration
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
title: 'Nepali Date',
category: 'widg...
registerBlockType - attributes
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
title: 'Nepali Date',
category: 'widget...
registerBlockType - attributes
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
title: 'Nepali Date',
category: 'widget...
registerBlockType
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( props ) {}, // edito...
registerBlockType - save()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( props ) {},...
registerBlockType - save()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( props ) {},...
registerBlockType - save()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( props ) {},...
registerBlockType - save()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( props ) {},...
registerBlockType - edit()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( props ) {
}...
registerBlockType - edit()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( { isSelecte...
registerBlockType - edit()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( { isSelecte...
30
registerBlockType - edit()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( { isSelecte...
registerBlockType - edit()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( { isSelecte...
registerBlockType - edit()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( { isSelecte...
Structure
( function() {
const blockStyle = {
backgroundColor: '#DC143C',
color: '#fff',
padding: '20px',
};
} )();
34
35
registerBlockType - saveDate()
wp.blocks.registerBlockType( 'wcktm/nepali-date', {
/* config */
},
edit: function( { isSel...
registerBlockType - saveDate()
edit: function( { isSelected, attributes, setAttributes } ) {
if ( isSelected ) { }
/* ... ...
registerBlockType - saveDate()
edit: function( { isSelected, attributes, setAttributes } ) {
const saveDate = function( en...
registerBlockType - saveDate()
edit: function( { isSelected, attributes, setAttributes } ) {
const saveDate = function( en...
40
41
Yay!42
43
automattic.com/work-with-us/
44
धन्यवाद
45
Upcoming SlideShare
Loading in …5
×

Your First Gutenberg Block

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

  • 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

×