Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Data API in WordPress - WCMIA 2019

The Data API in WordPress - WCMIA 2019

Zac Gordon

March 16, 2019
Tweet

More Decks by Zac Gordon

Other Decks in Technology

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. 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.
  3. 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
  4. Follow @zgordon | Learn at javascriptforwp.com Now, How Do We

    Get This Information In Our JavaScript?
  5. The Data API is built w Redux, a JS state

    library, But WordPress has made Redux much easier to use.
  6. Similar to how we get data with PHP in WordPress,

    To access the Data API we call NEW WordPress JavaScript functions.
  7. 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
  8. 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
  9. const { select } = wp.data; const blocks = select(

    “core/block-editor” ).getBlocks(); console.log( blocks ); JavaScript
  10. Getting Information Is Only HALF Of What We Can Do

    With the Data API We can also dispatch ACTIONS with the Data API
  11. 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
  12. 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
  13. 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
  14. 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
  15. I am really excited about a state management system in

    WordPress! And you should be too :)