Slide 1

Slide 1 text

JS f WP Follow @zgordon | Learn at javascriptforwp.com Everything You Can Do With The NEW (Redux Based) JavaScript Data API In WordPress Thanks!

Slide 2

Slide 2 text

Zac Gordon Educator @zgordon javascriptforwp.com OfficeYoga.TV

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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