Lara L. Schenck

The WordPress data package exposes methods to retrieve and update data from WordPress, and it all of these methods be accessed via the console. It is very useful to experiment in the console, especially while learning and when planning your code, for example if you can validate the way something works and the methods you might use. I wrote a short post about this before, with the script for logging a block’s attributes to the console.

For my work I need to verify a layout issue in the way buttons are displayed in notices in the WordPress editor (read more about notices here). Pasting this snippet of code in the console immediately opens up a warning notice:

wp.data.dispatch('core/notices').createWarningNotice(
    'Text for the notice',
    {
        id: 2,
        isDismissable: false,
        actions: [
            {
                label: 'First Action',
                isPrimary: true,
                noDefaultClasses: true,
            },
            {
                label: 'Second Action',
                isPrimary: true,
                noDefaultClasses: true,
            },
        ]
    }
);

I can then inspect the markup and search in the Gutenberg repository for relevant terms to find where I would make my updates. I can also test my updates without having to set up a build step and “sandbox” i.e. demo plugin to verify my code.

select vs. dispatch

Unlike my previous example for logging attributes to the console (linked above), this snippet accesses the Redux data store via dispatch vs. select – generally speaking, methods available via dispatch provide options for updating the content in the WordPress data stores, while methods available via select provide options for accessing content in WordPress data stores.

I found the documentation for the WordPress data package to be quite informative, but a lot of this is learning from trial and error and slowly developing my mental model for how all of these pieces fit together.