Gutenberg JS

My notes on JavaScript available methods in Gutenberg.

Update post meta template to "my-template" for current post

wp.data.dispatch('core/editor').editPost({ meta: { template: 'my-template' } });

Update post title (in the editor)

wp.data.dispatch( 'core/editor' ).editPost( { title: 'My title' } );

Get Post Status

wp.data.select( 'core/editor' ).getEditedPostAttribute( 'status' );

Update Post Status (does not save)

editPost

wp.data.dispatch('core/editor').editPost({ status: 'publish' });

updatePost

const post = wp.data.select('core/editor').getCurrentPost();
post.status = 'publish';
wp.data.dispatch('core/editor').updatePost(post);

savePost

wp.data.dispatch('core/editor').savePost();

wp.data.subscribe

Listen for any changes to the state (note: a value must change to trigger this, this is different behavior than Redux)

wp.data.subscribe(() => { console.log('A change occurred'); });

List for any changes to the state, and display the value of the “Stick to the top of the blog” checkbox.

wp.data.subscribe(() => {
    console.log(
        'The state of the "Stick to the top of the blog" checkbox is ' +
        wp.data.select( 'core/editor' ).getEditedPostAttribute('sticky')
    );
});

Dispatch a Notice

wp.data.dispatch('core/notices').createInfoNotice('Hello World');

Get Post Meta Values

wp.data.select( 'core/editor' ).getEditedPostAttribute('meta');

Get Post ID

wp.data.select('core/editor').getCurrentPostAttribute('id')

npmjs WordPress org

This is also a good place to start chasing things down.

https://www.npmjs.com/org/wordpress

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.