Learn.WordPress.Org, working with the data layer

These are my notes from Using the WordPress Data Layer . This course seems to assume a pretty good working knowledge of JavaScript, ESNext, and webpack. I’m in over my head.

Getting started

copy the four files from the course to create a basic plugin

having already installed node.js,

npm i browserlist
npm start

First additions

Starts with some mock data, note for self if you have a function in js like: function PageList ( { foo } ), you can call it in ESNext like this <PageList foo={ bar }/>

Course showed the function to fetch some dummy data, then went on to talk about the @wordpress/core-data package. Can use this to fetch all pages:

wp.data.select( 'core' ).getEntityRecords( 'postType', 'page' )

The course mentions that snippet should work in the browser’s dev console, but it throws and error for me. We’ll see if it works in the actual code…

decodeEntities can decode html code like international characters

SearchControl is a component to make a search box.

useState is a react hook that that you can use to change a state variable (can be anything). Actually, seems like useState is how variables should be updated in react. If you just use a regular variable, the code gets out of sync with the view.

A lot going on here. This is how we use the endpoint api to select a page based on name (code directly from the tutorial:

import { useSelect } from '@wordpress/data';
import { store as coreDataStore } from '@wordpress/core-data';
function MyFirstApp() {
    // ...
    const { pages } = useSelect( select => {
        const query = {};
        if ( searchTerm ) {
            query.search = searchTerm;
        return {
            pages: select( coreDataStore ).getEntityRecords( 'postType', 'page', query )
    }, [searchTerm] );
    // ...

Something like this can check to see if a query (other actions?) has finished yet:

Many of these functions could be implemented with REST API, but it would result in a lot of requests, and would not sync. So best to use hooks, etc.

wp.data.select('core').hasFinishedResolution( 'getEntityRecords', [ 'postType', 'page', { search: 'home' } ] )

Just realized this whole course is basically just showing the implementation of CRUD. Going to skip the styling and try to focus on that.

… Turns out, I’m too busy to do that. Just remember, for that course the order is: RUCD.

If I end up building something like this, I’ll come back and rewrite update this article.






Leave a Reply

Your email address will not be published. Required fields are marked *