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!
   

   View Slide

2. Zac Gordon
   Educator
   @zgordon
   javascriptforwp.com
   OfficeYoga.TV
   

   View Slide

3. Follow @zgordon | Learn at javascriptforwp.com
   The Data API is a JavaScript
   State Management System
   

   View Slide

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.
   

   View Slide

5. Follow @zgordon | Learn at javascriptforwp.com
   So,
   What Information
   Does the Data API
   Remember?
   

   View Slide

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
   

   View Slide

7. Follow @zgordon | Learn at javascriptforwp.com
   Now,
   How Do We Get
   This Information
   In Our JavaScript?
   

   View Slide

8. The Data API
   is built w Redux,
   a JS state library,
   But WordPress
   has made Redux
   much easier to use.
   

   View Slide

9. Similar to how we get data
   with PHP in WordPress,
   To access the Data API
   we call NEW WordPress
   JavaScript functions.
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. wp.data.select( “core/block-editor” ).getBlocks()
    JavaScript
    

    View Slide

13. const { select } = wp.data;
    const blocks = select( “core/block-editor” ).getBlocks();
    console.log( blocks );
    JavaScript
    

    View Slide

14. Let’s look at some code
    https://github.com/zgordon/advanced-gutenberg-course
    

    View Slide

15. Follow @zgordon | Learn at javascriptforwp.com
    So,
    select() & withSelect()
    Lets Us GET Information
    

    View Slide

16. Getting Information
    Is Only HALF Of What We Can Do
    With the Data API
    We can also
    dispatch ACTIONS with
    the Data API
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. Let’s look at some code
    https://github.com/zgordon/advanced-gutenberg-course
    

    View Slide

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
    

    View Slide

22. Let’s look at some docs
    https://github.com/zgordon/advanced-gutenberg-course
    

    View Slide

23. I am really excited
    about a state management
    system in WordPress!
    And you should be too :)
    

    View Slide

24. Thanks!
    @zgordon
    Get 50% OFF
    Advanced Gutenberg Course
    “WCMIA2019”
    https://javascriptforwp.com
    

    View Slide