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.

Transcript

1. Meet the Data API
   

   View Slide

2. Meet the Data API
   Me
   

   View Slide

3. @ChrisVanPatten
   

   View Slide

4. @BusinessOfCMS
   businessofcms.com
   

   View Slide

5. REACT
   

   View Slide

6. REACT
   (is a state management library)
   

   View Slide

7. Props vs State
   

   View Slide

8. Props
   

   View Slide

9. Props
   

   View Slide

10. Props
    

    View Slide

11. Props
    State
    

    View Slide

12. Props
    
    Props
    

    View Slide

13. Props
    
    Props
    

    View Slide

14. Props
    
    Props
    Props
    

    View Slide

15. Prop drilling has its limits.
    

    View Slide

16. Meet Redux
    

    View Slide

17. Meet Redux
    The WordPress Data API
    

    View Slide

18. Data Store
    
    

    View Slide

19. Get and modify data in a store
    

    View Slide

20. Get and modify data in a store
    Subscribe your component to changes in a store
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. Select
    

    View Slide

25. Demo
    

    View Slide

26. Dispatch
    

    View Slide

27. Demo
    

    View Slide

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

    View Slide

29. useSelect
    

    View Slide

30. import { useSelect } from '@wordpress/data';
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. useDispatch
    

    View Slide

38. import { Button } from '@wordpress/components';
    import { useDispatch } from '@wordpress/data';
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

48. Store
    

    View Slide

49. store {
    actions,
    reducer,
    selectors,
    }
    

    View Slide

50. State
    

    View Slide

51. Action
    

    View Slide

52. Reducer
    

    View Slide

53. Selector
    

    View Slide

54. /**
    * WordPress dependencies
    */
    import { registerStore } from '@wordpress/data';
    

    View Slide

55. const defaultState = {
    talks: {},
    };
    /**
    * WordPress dependencies
    */
    import { registerStore } from '@wordpress/data';
    

    View Slide

56. const actions = {
    addTalk( talkName, talkDescription ) {
    return {
    type: 'ADD_TALK',
    talkName,
    talkDescription,
    };
    },
    };
    const defaultState = {
    talks: {},
    };
    

    View Slide

57. const reducer = ( state = defaultState, action ) => {
    switch ( action.type ) {
    case 'ADD_TALK':
    return {
    ...state,
    talks: {
    ...state.talks,
    [ action.talkName ]: action.talkDescription,
    },
    };
    }
    return state;
    };
    };
    

    View Slide

58. const selectors = {
    getTalks( state ) {
    const { talks } = state;
    return talks;
    },
    getTalk( state, talkName ) {
    const { talks } = state;
    return talks[ talkName ] || null;
    },
    };
    return state;
    };
    

    View Slide

59. registerStore(
    'wordcamp/seattle',
    {
    actions,
    reducer,
    selectors,
    },
    );
    return talks[ talkName ] || null;
    },
    };
    

    View Slide

60. /**
    * 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,
    },
    );
    

    View Slide

61. Demo
    

    View Slide

62. Thanks!
    

    View Slide

63. @ChrisVanPatten
    cvp.me/wcsea2019
    

    View Slide