1.
Digging into Gutenberg
Imran Sayed
@imranhsayed
Ajit Bohra
@ajitbohra
WordPress Meetu
Saturday, 14th Mar 202
10:30 am UTC

2.
Welcome To WordPress

3.
What WordPress can do
▪ Blogs
▪ LMS
▪ Ecommerce
3

4.
Block Editor

5.
Gutenberg Mental Modal
https://atomicdesign.bradfrost.com/table-of-contents/

6.
Look Beyond Blocks

7.
Diving into
Gutenberg Core

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.
Composition of packages

10.
Common Packages

11.
Common Packages
▪ @wordpress/components
▪ @wordpress/block-editor
▪ @wordpress/data
▪ @wordpress/rich-text
▪ @wordpress/i118n
11

12.
wordpress.github.io/gutenberg - View components in Storybook
12

13.
Tools

14.
Build Tools
▪ @wordpress/scripts
▪ @wordpress/create-block
▪ @wordpress/env
14

15.
Editor and data ?

16.
1.
WordPress Data

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.
What is Redux?
A state management tool for javascript apps.

19.
19

20.
20
Store
Cookie Maker

21.
21
Cookie Maker
Distributor

22.
22
Distributor
Store

23.
23
Distributor
Store
Cookie Maker Distributor

24.
24
Store

25.
26
Distributor
Store
Cookie Maker
( Action Creator )
Distributor
( Reducer )
Food: Payload
Subscriber
Instruction:
Dispatch

26.
Actions, Reducers, Store, State
Triggers an action Create & Dispatch an Action
Updates store with
new state based on
action type
Defines

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.
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.
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.
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.
3.
WordPress Data Store

32.
WordPress Data Store
▪ Default stores
▪ Custom store
33

33.
WordPress Data Store
▪ Mostly used packages
▫ core
▫ core/blocks
▫ core/block-editor
▫ core/edit-post
▪ More
▫ core/notices
34

34.
3.
Retrieving Data
( using Selectors )

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.
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.
4.
Updating Data ( using
actions )

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.
Updating Data
Update current post data.
▪ wp.data.dispatch( 'core/editor' ).lockPostSaving()
▪ wp.data.dispatch( 'core/editor' ).unlockPostSaving();
40

40.
5.
Subscribe To Any Change.

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.
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.
2.
WordPress Data Module vs
Redux
Let’s start with the first set of slides

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.
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.
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.
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.
7.
Current State of Gutenberg
What features have currently been added

49.
8.
Future of Gutenberg
Phase 2
https://wordpress.org/about/roadmap/
https://github.com/WordPress/gutenberg/blob/master/docs/roadmap.md

50.
9.
Contributing to Gutenberg

51.
Contributing to gutenberg
▪ Guide https://developer.wordpress.org/block-
editor/contributors/
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.
54
THANKS!
ANY QUESTIONS?
You can find us on Twitter at:
▪ @imranhsayed
▪ @ajitbohra