How to Easily List All Registered Blocks in WordPress Using JavaScript

How to Easily List All Registered Blocks in WordPress Using JavaScript

Last Updated on January 15, 2025 by Mike Kipruto

If you’re diving into the world of WordPress block development, you might find yourself wanting to see all the registered blocks in your Gutenberg setup.

This is useful for developers and can help you get familiar with the available blocks at your disposal.

Getting Started with the WordPress Block API

To list all registered blocks, you can leverage the WordPress Block API. Specifically, you’ll use the wp.blocks.getBlockTypes() method to retrieve a comprehensive list.:

wp.blocks.getBlockTypes();

This one-liner outputs an array of all registered blocks, revealing details like:

  • Name: Unique identifier (e.g., core/paragraph).
  • Title: Display name in the editor.
  • Category: Where it appears in the block inserter.
  • Attributes: Block settings.

πŸ’‘ Pro Tip: For better readability, consider formatting your output using console.table(). Here’s an example of how to do that:

console.table(wp.blocks.getBlockTypes().map(block => ({
    Name: block.name,
    Title: block.title,
    Category: block.category
})));

For further details on the Block API, you can reference the official WordPress Block API documentation: WordPress Developer Resources – Block API.

With this method, you’ll not only uncover the blocks available in your setup, but you’ll also gain insights into how to leverage them effectively. Happy developing! πŸ› οΈ

1