Slide 1
Slide 1 text
JS f WP
Follow @zgordon | Learn at javascriptforwp.com
How the New Redux Based
Data API Changes Everything
in WordPress*
Slides at https://javascriptforwp.com/wc/london-2019
Slide 2
Slide 2 text
Zac Gordon
Educator
@zgordon
javascriptforwp.com
OfficeYoga.TV
Slide 3
Slide 3 text
Follow @zgordon | Learn at javascriptforwp.com
The Data API is a JavaScript
State Management System
Slide 4
Slide 4 text
A program is described as stateful
if it is designed to remember
preceding events or user interactions.
The remembered information
is called the state of the system.
Slide 5
Slide 5 text
Follow @zgordon | Learn at javascriptforwp.com
In JavaScript, state is most
commonly stored in memory
Slide 6
Slide 6 text
Follow @zgordon | Learn at javascriptforwp.com
So,
What Information
Does the Data API
Remember?
Slide 7
Slide 7 text
Information the Data API Remembers
● Authors
● “Entities”
● Theme Support
● User Permissions
● Blocks in the Editor
● Specific Block Data
● Selected Blocks
● Block Inserter Data
● Block Types
● Block Styles
● Block Templates
● Taxonomies
● Annotations
● Editor Settings
● Editor undo / redo actions
● “Post” information
● “Post” revisions
● Unsaved editor changes
● Post status ~ Hi Brian!
● Sidebar data
● Meta Box data
● Notices
Slide 8
Slide 8 text
Follow @zgordon | Learn at javascriptforwp.com
Now,
How Do We Get
This Information
In Our JavaScript?
Slide 9
Slide 9 text
The Data API
is built w Redux,
a JS state library,
But WordPress
has made Redux
much easier to use.
Slide 10
Slide 10 text
Similar to how we get data
with PHP in WordPress,
To access the Data API
we call new WordPress
JavaScript functions.
Slide 11
Slide 11 text
Follow @zgordon | Learn at javascriptforwp.com
The Data API
Is Modular & Extendable
- Core
- Annotations
- Blocks
- Block Editor
- Editor
- Editor UI
- Notices
- New User Experience
- Viewport
- Your own
Slide 12
Slide 12 text
wp.data.select( “data/module” ).dataFunction()
wp.data.select( “core” ).getAuthors()
wp.data.select( “core/blocks” ).getBlockTypes()
wp.data.select( “core/block-editor” ).getBlocks()
wp.data.select( “core/editor” ).getCurrentPostId()
wp.data.select( “core/edit-post” ).isEditorPanelOpened()
wp.data.select( “core/notices” ).getNotices()
JavaScript
Slide 13
Slide 13 text
wp.data.select( “core/block-editor” ).getBlocks()
JavaScript
Slide 14
Slide 14 text
const { select } = wp.data;
const blocks = select( “core/block-editor” ).getBlocks();
console.log( blocks );
JavaScript
Slide 15
Slide 15 text
Let’s look at some code
https://github.com/zgordon/advanced-gutenberg-course
Slide 16
Slide 16 text
Follow @zgordon | Learn at javascriptforwp.com
So,
select() & withSelect()
Lets Us GET Information
Slide 17
Slide 17 text
Getting Information
Is Only HALF Of What We Can Do
With the Data API
We can also
dispatch ACTIONS with
the Data API
Slide 18
Slide 18 text
GETTING Information from Data API
● Authors
● “Entities”
● Theme Support
● User Permissions
● Blocks in the Editor
● Specific Block Data
● Selected Blocks
● Block Inserter Data
● Block Types
● Block Styles
● Block Templates
● Taxonomies
● Annotations
● Editor Settings
● Editor undo / redo actions
● “Post” information
● “Post” revisions
● Unsaved editor changes
● Post status ~ Hi Brian!
● Sidebar data
● Meta Box data
● Notices
Slide 19
Slide 19 text
ACTIONS Can Dispatch with the Data API
● Add / Remove Block Types
● Show / Hide Block Types
● Add / Remove Block Styles
● Add / Update / Remove Blocks
● Move / Replace Blocks
● Select / Unselect Blocks
● Toggle Block Mode
● Add / Update “Entities”
● Add / Update / Remove Annotation
● Set / Update Categories (Taxonomies?)
● Save / Update / Refresh / Trash “Post”
● Autosave “Post”
● Undo / Redo Edits (Undo Levels)
● Add / Update / Delete Reusable Blocks
● Convert Reusable Blocks to Static
● Enable / Disable Publish Sidebar
● Lock / Unlock the Editor
● Open / Close Sidebars & Modals
● Create / Remove Notices
● Create / Disable New User Guides
Slide 20
Slide 20 text
const { dispatch , withDispatch } = wp.data;
dispatch( “data/module” ).actionFunction( parameters )
dispatch( “core” ).saveEntityRecord( type, entity )
dispatch( “core/blocks” ).addBlockTypes( blockType )
dispatch( “core/block-editor” ).selectBlock( blockId )
dispatch( “core/editor” ).savePost()
dispatch( “core/edit-post” ).togglePublishSidebar()
dispatch( “core/notices” ).createNotice( status, content )
JavaScript
Slide 21
Slide 21 text
Let’s look at some code
https://github.com/zgordon/advanced-gutenberg-course
Slide 22
Slide 22 text
Eventually, “everything”
WordPress does,
the Data API will do.
But, let me show you
what it’s really like
to work with the Data API
Slide 23
Slide 23 text
Let’s look at some docs
https://github.com/zgordon/advanced-gutenberg-course
Slide 24
Slide 24 text
I am really excited
about a state management
system in WordPress!
And you should be too :)
Slide 25
Slide 25 text
Thanks!
@zgordon
Get 50% OFF
Advanced Gutenberg Course
“WCLDN2019”
https://javascriptforwp.com