Get a list of registered patterns in WordPress Gutenberg

In one of our previous posts, we saw how to retrieve all the registered blocks in Gutenberg. It was pretty easy because Gutenberg provides an API out of the box.

However, to retrieve the list of block patterns, we have to do a little more work as Gutenberg doesn’t have an API yet.

Block Patterns reside under the core/block-editor data store, and this is how we can access them:

import { useSelect } from @wordpress/data;

function Edit( props ) {
    const { patterns } = useSelect( select => {
        const { getSettings } = select( 'core/block-editor' );

        return {
            patterns: getSettings().__experimentalBlockPatterns;
        };
    } );

    return null;
}Code language: JavaScript (javascript)

The above snippet uses ES6 and the @wordpress package.

You can retrieve block patterns directly from the wp global object as well!

Add a new post or open an existing one, open the browser dev console and run the following:

const patterns = wp.data
                .select( 'core/block-editor' )
                .getSettings()
                .__experimentalBlockPatterns;

console.log( patterns );Code language: JavaScript (javascript)

That’s it! Thank you for reading 😀