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.

Digging Into Gutenberg

190 views

Published on

It's been over a year since Gutenberg was released with WordPress 5.0 and we have seen some great improvements.
While Gutenberg continues to outshine on the content creation experience, there have been so many updates and changes in Gutenberg that it's hard to keep up. Many developers also find block development challenging because there is a learning curve to React and JavaScript

Whether you are someone who always thought of digging into it, but never started, the one who is left behind, or even just want to get your questions answered, this online meetup is for you.

It's time to challenge those challenges.
This meetup helps you build those core concepts and have your questions answered, by diving deep into Gutenberg

Topics that will be covered:

- Touch on basics of Gutenberg
- Understand how things work in Gutenberg behind the scenes.
- Understanding the Gutenberg core.
- Build tools like @wordpress/wp-scripts and @wordpress/create-block
- WordPress Data Module.
- Current State and Future of Gutenberg.

It's been over a year since Gutenberg was released with WordPress 5.0 and we have seen some great improvements.
While Gutenberg continues to outshine on the content creation experience, there have been so many updates and changes in Gutenberg that it's hard to keep up. Many developers also find block development challenging because there is a learning curve to React and JavaScript

Whether you are someone who always thought of digging into it, but never started, the one who is left behind, or even just want to get your questions answered, this online meetup is for you.

It's time to challenge those challenges.
This meetup helps you build those core concepts and have your questions answered, by diving deep into Gutenberg

Topics that will be covered:

- Touch on basics of Gutenberg
- Understand how things work in Gutenberg behind the scenes.
- Understanding the Gutenberg core.
- Build tools like @wordpress/wp-scripts and @wordpress/create-block
- WordPress Data Module.
- Current State and Future of Gutenberg.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Digging Into Gutenberg

  1. 1. Digging into Gutenberg Imran Sayed @imranhsayed Ajit Bohra @ajitbohra WordPress Meetu Saturday, 14th Mar 202 10:30 am UTC
  2. 2. Welcome To WordPress
  3. 3. What WordPress can do ▪ Blogs ▪ LMS ▪ Ecommerce 3
  4. 4. Block Editor
  5. 5. Gutenberg Mental Modal https://atomicdesign.bradfrost.com/table-of-contents/
  6. 6. Look Beyond Blocks
  7. 7. Diving into Gutenberg Core
  8. 8. Gutenberg Packages ▪ Packages can be used independently ▪ Can be used outside WordPress ▪ Have documentation. ▪ https://github.com/WordPress/gutenberg/tree/maste r/packages 8
  9. 9. Composition of packages
  10. 10. Common Packages
  11. 11. Common Packages ▪ @wordpress/components ▪ @wordpress/block-editor ▪ @wordpress/data ▪ @wordpress/rich-text ▪ @wordpress/i118n 11
  12. 12. wordpress.github.io/gutenberg - View components in Storybook 12
  13. 13. Tools
  14. 14. Build Tools ▪ @wordpress/scripts ▪ @wordpress/create-block ▪ @wordpress/env 14
  15. 15. Editor and data ?
  16. 16. 1. WordPress Data
  17. 17. WordPress Data Module ▪ Serves as a hub to manage application state for both plugins and WordPress itself ▪ Provides tools to manage data within and between distinct modules. ▪ designed as a modular pattern for organizing and sharing data ▪ Its implemented atop redux. 17
  18. 18. What is Redux? A state management tool for javascript apps.
  19. 19. 19
  20. 20. 20 Store Cookie Maker
  21. 21. 21 Cookie Maker Distributor
  22. 22. 22 Distributor Store
  23. 23. 23 Distributor Store Cookie Maker Distributor
  24. 24. 24 Store
  25. 25. 26 Distributor Store Cookie Maker ( Action Creator ) Distributor ( Reducer ) Food: Payload Subscriber Instruction: Dispatch
  26. 26. Actions, Reducers, Store, State Triggers an action Create & Dispatch an Action Updates store with new state based on action type Defines
  27. 27. Why use Redux? ▪ Allows you to share the state between components ▪ It integrates nicely with React. Can use it with any other view library. It allow us to track changing data. ▪ When we have big complicated data for complex applications. 28
  28. 28. Why use Redux? ▪ Any component can pull any piece of data from the redux store. So data needs to be shared between multiple components. ▪ Run in different environments (client, server, and native), and are easy to test. 29
  29. 29. Why use Redux? ▪ Reusing the components because they no longer are dependent to get the props from their parents, they can all get their state values as props ,from a single redux store 30
  30. 30. WordPress Data Module ▪ Simple enough to satisfy the needs of a small plugin ▪ Scalable to serve the requirements of a complex single-page application ▪ Built upon and shares many of the same core principles of Redux ▪ But it's only merely ‘Redux for WordPress’ ▪ Includes a few of its own distinguishing characteristics 31
  31. 31. 3. WordPress Data Store
  32. 32. WordPress Data Store ▪ Default stores ▪ Custom store 33
  33. 33. WordPress Data Store ▪ Mostly used packages ▫ core ▫ core/blocks ▫ core/block-editor ▫ core/edit-post ▪ More ▫ core/notices 34
  34. 34. 3. Retrieving Data ( using Selectors )
  35. 35. Retrieving Data ▪ wp.data.select( 'namespace' ).selector( param ); Get edited and current post data. ▪ wp.data.select( 'core/editor' ).getEditedPostAttribute( 'title' ); ▪ wp.data.select( 'core/editor' ).getEditedPostAttribute( 'excerpt' ); ▪ wp.data.select( 'core/editor' ).getEditedPostAttribute( 'featured_media' ) ▪ wp.data.select( 'core/editor' ).getEditedPostAttribute( 'content' ); 36
  36. 36. Retrieving Data Get post meta ▪ wp.data.select( 'core/editor' ).getCurrentPost().meta Get settings ▪ wp.data.select( 'core/block-editor' ).getSettings(); ▪ wp.data.select( 'core/block-editor' ).getBlock( ‘client-id’ ); Get WordPress Data ▪ wp.data.select( 'core' ).getEntityRecords( 'postType', 'post' ); ▪ wp.data.select( 'core' ).getAuthors(); ▪ wp.data.select( 'core' ).getTaxonomies() 37
  37. 37. 4. Updating Data ( using actions )
  38. 38. Updating Data ▪ wp.data.dispatch( 'namespace' ).action( params ); Update current post data. ▪ wp.data.dispatch( 'core/editor' ).editPost( { title: 'My New Title' } ); ▪ wp.data.dispatch( 'core/editor' ).editPost( { excerpt: 'My excerpt' } ); ▪ wp.data.dispatch( 'core/editor' ).editPost( { featured_media: imageID } ); Update data ▪ wp.data.dispatch('core/notices').createNotice( 'success', 'Here is our notice!' ); 39
  39. 39. Updating Data Update current post data. ▪ wp.data.dispatch( 'core/editor' ).lockPostSaving() ▪ wp.data.dispatch( 'core/editor' ).unlockPostSaving(); 40
  40. 40. 5. Subscribe To Any Change.
  41. 41. Subscribe to any change - Saving Post wp.data.subscribe( () => { const isSavingPost = wp.data.select( 'core/editor').isSavingPost(); const isAutoSavingPost = wp.data.select( 'core/editor').isAutosavingPost(); // Update post data when the post is saving. if ( isSavingPost && ! isAutoSavingPost ) { // Do something } } ); 42
  42. 42. Subscribe to any change = Typing wp.data.select( 'core/block-editor' ).isTyping(); wp.data.subscribe( () => { const isTyping = wp.data.select( 'core/block-editor' ).isTyping(); // Get the post title when user is typing, and do something if ( isTyping ) { const title = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'title' ); console.warn( 'Typing..', title ); } } ); 43
  43. 43. 2. WordPress Data Module vs Redux Let’s start with the first set of slides
  44. 44. WordPress Data Module Vs Redux - Similarities ▪ Many of the same core principles like: ▫ Single store object. ▫ State is changed by emitting an action. ▫ Making state changes with Reducers. ▪ Many of the same API method naming like: ▫ Dispatch, subscribe, createStore etc. ▪ Implemented atop Redux 45
  45. 45. WordPress Data Module Vs Redux - Difference ▪ Differs is in establishing a modularization pattern for creating separate but interdependent stores. ▪ Higher-order components were created to complement this distinction 46
  46. 46. Redux WordPress Data Module Vs Redux - Difference WordPress Data Module 47 ▪ A subscribe listener is called on every dispatch, regardless of state change ▪ A subscriber is only called when state has changed ▪ In React Redux, a mapStateToProps function must return an object. ▪ A withSelect mapping function can return undefined if it has no props to inject.
  47. 47. Redux WordPress Data Module Vs Redux - Difference WordPress Data Module 48 ▪ In React Redux, the mapDispatchToProps argument can be defined as an object or a function. ▪ The withDispatch higher-order component creator must be passed a function.
  48. 48. 7. Current State of Gutenberg What features have currently been added
  49. 49. 8. Future of Gutenberg Phase 2 https://wordpress.org/about/roadmap/ https://github.com/WordPress/gutenberg/blob/master/docs/roadmap.md
  50. 50. 9. Contributing to Gutenberg
  51. 51. Contributing to gutenberg ▪ Guide https://developer.wordpress.org/block- editor/contributors/ 52
  52. 52. Contributing to gutenberg ▪ Contribute to : ● Good first issue https://mkaz.blog/code/good-first-issue- on-gutenberg/ ● Documentation ● Design ● Adding Stories to StoryBook https://mkaz.blog/code/coding-a-storybook-story/ ● Testing ● Write Test Cases ● PR Reviews 53
  53. 53. 54 THANKS! ANY QUESTIONS? You can find us on Twitter at: ▪ @imranhsayed ▪ @ajitbohra

×