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

Meet the Data API

Meet the Data API

(Also known as "The Ultimate Beginner's Guide to the Gutenberg Data API")

One of the most challenging pieces of building powerful Gutenberg integrations is working with the WordPress Data API. The Data API is how you get data in and out of Gutenberg, track changes across blocks, and execute events around the editor. If you’re unfamiliar with the Data API (or Redux, the technology that powers it), this talk is for you. You’ll learn why the Data API matters, how it’s architected, when and how to use it, and much more.

Chris Van Patten

November 09, 2019
Tweet

More Decks by Chris Van Patten

Other Decks in Technology

Transcript

  1. Get and modify data in a store Subscribe your component

    to changes in a store Send changes from your component to a store
  2. Get and modify data in a store Subscribe your component

    to changes in a store Send changes from your component to a store Register your own store
  3. Get and modify data in a store Subscribe your component

    to changes in a store Send changes from your component to a store Register your own store
  4. Get and modify data in a store Subscribe your component

    to changes in a store Send changes from your component to a store Register your own store
  5. import { useSelect } from '@wordpress/data'; const Edit = (

    props ) => { const blocks = useSelect( ); };
  6. import { useSelect } from '@wordpress/data'; const Edit = (

    props ) => { const blocks = useSelect( ( select ) => ( select( 'core/block-editor' ).getBlocks() ) ); };
  7. import { useSelect } from '@wordpress/data'; const Edit = (

    props ) => { const blocks = useSelect( ( select ) => ( select( 'core/block-editor' ).getBlocks() ) ); return ( <p>{ JSON.stringify( blocks ) }</p> ); };
  8. import { useSelect } from '@wordpress/data'; const Edit = (

    props ) => { const blocks = useSelect( ( select ) => ( select( 'core/block-editor' ).getBlocks() ) ); return ( <p>{ JSON.stringify( blocks ) }</p> ); };
  9. Get and modify data in a store Subscribe your component

    to changes in a store Send changes from your component to a store Register your own store
  10. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { };
  11. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { const { } = useDispatch( ); };
  12. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { const { } = useDispatch( 'core/edit-post' ); };
  13. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); };
  14. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( ); };
  15. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( <Button isPrimary onClick={ } > Click to open sidebar! </Button> ); };
  16. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( <Button isPrimary onClick={ () => openGeneralSidebar( 'edit-post/document' ) } > Click to open sidebar! </Button> ); };
  17. import { Button } from '@wordpress/components'; import { useDispatch }

    from '@wordpress/data'; const Edit = ( props ) => { const { openGeneralSidebar } = useDispatch( 'core/edit-post' ); return ( <Button isPrimary onClick={ () => openGeneralSidebar( 'edit-post/document' ) } > Click to open sidebar! </Button> ); };
  18. Get and modify data in a store Subscribe your component

    to changes in a store Send changes from your component to a store Register your own store
  19. const defaultState = { talks: {}, }; /** * WordPress

    dependencies */ import { registerStore } from '@wordpress/data';
  20. const actions = { addTalk( talkName, talkDescription ) { return

    { type: 'ADD_TALK', talkName, talkDescription, }; }, }; const defaultState = { talks: {}, };
  21. const reducer = ( state = defaultState, action ) =>

    { switch ( action.type ) { case 'ADD_TALK': return { ...state, talks: { ...state.talks, [ action.talkName ]: action.talkDescription, }, }; } return state; }; };
  22. const selectors = { getTalks( state ) { const {

    talks } = state; return talks; }, getTalk( state, talkName ) { const { talks } = state; return talks[ talkName ] || null; }, }; return state; };
  23. /** * WordPress dependencies */ import { registerStore } from

    '@wordpress/data'; const defaultState = { talks: {}, }; const actions = { addTalk( talkName, talkDescription ) { return { type: 'ADD_TALK', talkName, talkDescription, }; }, }; const reducer = ( state = defaultState, action ) => { switch ( action.type ) { case 'ADD_TALK': return { ...state, talks: { ...state.talks, [ action.talkName ]: action.talkDescription, }, }; } return state; }; const selectors = { getTalks( state ) { const { talks } = state; return talks; }, getTalk( state, talkName ) { const { talks } = state; return talks[ talkName ] || null; }, }; registerStore( 'wordcamp/seattle', { actions, reducer, selectors, }, );