How the New Redux Based Data API is Changing Everything in WordPress*

How we get and interact with data in WordPress is changing dramatically as of WordPress 5.0 and the release of the new Data API. The Data API is built with the Redux state management library (although no experience with Redux is necessary). The Data API allows developers to get data from WordPress and dispatch actions using JavaScript in ways that were not possible before.

The Data API is the future of how to interact with data in WordPress using JavaScript and React and is an essential skill for any serious WordPress Developer.

In this talk, educator Zac Gordon, will cover how the Data API works, what options are available and some important things to know. We will also look at how you can use the Data API to manage state for your own WordPress plugins.

Transcript

1. 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
2. Zac Gordon Educator @zgordon javascriptforwp.com OfficeYoga.TV
3. Follow @zgordon | Learn at javascriptforwp.com The Data API is a JavaScript State Management System
4. 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.
5. Follow @zgordon | Learn at javascriptforwp.com In JavaScript, state is most commonly stored in memory
6. Follow @zgordon | Learn at javascriptforwp.com So, What Information Does the Data API Remember?
7. 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
8. Follow @zgordon | Learn at javascriptforwp.com Now, How Do We Get This Information In Our JavaScript?
9. The Data API is built w Redux, a JS state library, But WordPress has made Redux much easier to use.
10. Similar to how we get data with PHP in WordPress, To access the Data API we call new WordPress JavaScript functions.
11. 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
12. 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
13. wp.data.select( “core/block-editor” ).getBlocks() JavaScript
14. const { select } = wp.data; const blocks = select( “core/block-editor” ).getBlocks(); console.log( blocks ); JavaScript
15. Let’s look at some code https://github.com/zgordon/advanced-gutenberg-course
16. Follow @zgordon | Learn at javascriptforwp.com So, select() & withSelect() Lets Us GET Information
17. Getting Information Is Only HALF Of What We Can Do With the Data API We can also dispatch ACTIONS with the Data API
18. 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
19. 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
20. 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
21. Let’s look at some code https://github.com/zgordon/advanced-gutenberg-course
22. 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
23. Let’s look at some docs https://github.com/zgordon/advanced-gutenberg-course
24. I am really excited about a state management system in WordPress! And you should be too :)
25. Thanks! @zgordon Get 50% OFF Advanced Gutenberg Course “WCLDN2019” https://javascriptforwp.com