View all articles

How to list all registered WordPress Gutenberg blocks

Today I'm going to show you how to list all WordPress Gutenberg blocks by using just a little bit of javascript in your browser's web developer console when you're in the WordPress editor view.

For the purposes of simplifying this article, I'll be using Google Chrome as my browser, so using your browser of choice and open the web developer console.

For Google Chrome on mac that means that you either:

  • Press command + option + j, or
  • Select view > developer > javascript console from your browser app toolbar.

Once the web developer console is displayed, click in the console panel to enable focus, allowing you to paste any of the following snippets and press Enter.

List all registered Gutenberg blocks

The following snippet will list all registered Gutenberg blocks, including all Core blocks, and those from any active plugins and themes.

let types = wp.blocks.getBlockTypes();

// grab just the names
let block_names = types.map(type => type.name);

// display output in the console
console.log(block_names);

List all registered Core Gutenberg blocks

The following snippet will list all registered Core Gutenberg blocks.

Core blocks are native WordPress blocks. So this list will filter any non-native registered blocks from themes, plugins, etc.

let types = wp.blocks.getBlockTypes();

// filter to just the core blocks
let core_blocks = types.filter(
 type => type.name.startsWith('core/')
);

// display output in the console
console.log(core_blocks);