The Data API in WordPress - WCMIA 2019

The Data API in WordPress - WCMIA 2019

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

March 16, 2019
Tweet

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