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

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.

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

April 06, 2019
Tweet

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