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

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.

Zac Gordon

April 06, 2019
Tweet

More Decks by Zac Gordon

Other Decks in Programming

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

    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
    In JavaScript, state is most
    commonly stored in memory

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  17. 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

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide