I'm working on a theme that should style all native WordPress blocks via CSS, including potentially extending them with custom 'style' options in the block editor via JS. Does anyone know of a list or reference site which lists all native blocks, ideally including information on the WordPress version(s) where they were introduced and links to their registerBlockStyle 'names' (ie, core/button or core/buttons)? Searching in the Codex, Handbook and in Google isn't getting me anywhere so far.

Obviously I can go in and add every block to a Page and style it but it's hard to keep track of what's needed. An updated version of the Block Unit Test plugin might help too, but it looks like that's not being updated.

If I have to roll my own so be it (and I'll happily share) but I figured why reinvent the wheel... :) Thanks!

I'm working on a theme that should style all native WordPress blocks via CSS, including potentially extending them with custom 'style' options in the block editor via JS. Does anyone know of a list or reference site which lists all native blocks, ideally including information on the WordPress version(s) where they were introduced and links to their registerBlockStyle 'names' (ie, core/button or core/buttons)? Searching in the Codex, Handbook and in Google isn't getting me anywhere so far.

Obviously I can go in and add every block to a Page and style it but it's hard to keep track of what's needed. An updated version of the Block Unit Test plugin might help too, but it looks like that's not being updated.

If I have to roll my own so be it (and I'll happily share) but I figured why reinvent the wheel... :) Thanks!

• block-editor
• documentation
• references

• For any answer out there, it's useful to know that all the core blocks have core/ as a prefix to their internal names – Tom J Nowell ♦ Commented Mar 18, 2020 at 16:40
• wpdevelopment.courses/articles/… updated to 5.3, no details on each block though. – RiddleMeThis Commented Mar 18, 2020 at 16:56
• @RiddleMeThis thanks that's a great start! – Michelle Commented Mar 18, 2020 at 18:03

2 Answers 2

Not at the moment, but, you can go to a page with the block editor, open the browser dev tools, go to the console, and run the following:

// grab all block types
const types = wp.blocks.getBlockTypes();

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

// grab just the names
const block_names = core_blocks.map( type => type.name );

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

WordPress now has a list of core blocks in the developer docs at https://developer.wordpress.org/block-editor/reference-guides/core-blocks/.

Note: Layout is not straightforward if you are accustomed to templating languages. JavaScript is used extensively to assign tags, attributes, concatenate, and more.

Learn more about WordPress' use of React and JSX to create elements at https://github.com/WordPress/gutenberg/blob/368f8545c8c495681a937d421c0056843a3d88cf/packages/element/README.md