7

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!

3
  • 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
    Mar 18, 2020 at 16:40
  • wpdevelopment.courses/articles/… updated to 5.3, no details on each block though. Mar 18, 2020 at 16:56
  • @RiddleMeThis thanks that's a great start!
    – Michelle
    Mar 18, 2020 at 18:03

2 Answers 2

9

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 );
5
  • Thanks Tom! I'm getting errors when I try to run that in the console - did it work for you successfully?
    – Michelle
    Mar 18, 2020 at 17:54
  • Ooops I forgot I renamed a variable at the end, so the console.log didn't work, fixed. I wouldn't treat it as a copypasta though, each line has useful things to know about blocks and JS
    – Tom J Nowell
    Mar 18, 2020 at 18:04
  • Works! Another problem I had was I was testing on a page that already had a saved block. This only works on a blank/new Page for some reason. Thanks again Tom
    – Michelle
    Mar 18, 2020 at 18:31
  • It should work on any block editor screen once the DOM has loaded, it doesn't depend on anything related to the posts state. If you're getting errors at all for wp.blocks.getBlockTypes() then something has gone seriously wrong, or there isn't a block editor loaded. I've tried to reproduce the problem you're seeing and cannot reproduce it. What is the error you're seeing?
    – Tom J Nowell
    Mar 18, 2020 at 18:38
  • @Michelle can you share the error you're experiencing? If it does not work, what happens instead? How are you testing it?
    – Tom J Nowell
    Oct 17, 2021 at 1:04
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.