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.
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
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
27. Actions, Reducers, Store, State
Triggers an action Create & Dispatch an Action
Updates store with
new state based on
action type
Defines
28. 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
29. 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
30. 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
31. 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
42. 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
43. 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
45. 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
46. 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
47. 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.
48. 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.