Hey visitors! If you’re a beginner in WordPress and WP-CLI development, then you should check out my dear friend Bhargav’s Youtube channel! @BuntyWP

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 😀



Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

Powered by WordPress