The Data API in WordPress - WCMIA 2019

Transcript

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