This is a reference of the Block Editor blocks available in WordPress as of 6.4.3. There is an online resource here:
Core Blocks Reference | Block Editor Handbook | WordPress Developer Resources
But being the visual person I am, I find it helps to see what the available blocks are. This is especially useful for those who might want to create custom templates, or do custom work on a WordPress website. Basically I’ve just spat out everything (Blocks) onto the page that comes from this:
Obviously this is based on the vanilla WordPress setup, no custom items have been added, and as of writing I’m using the WordPress twenty twenty theme. I won’t be adding any configuration for any block item, but not that some may have a lot of configuration options.
So use dev tools, inspect the code, view in different viewports, see what is getting output. Have fun!
If you’ve created your own blog post, you can see what editor blocks are being used (on the edit post page) by entering this in the dev console:
wp.data.select("core/block-editor").getBlocks()A word of caution: some of these blocks will override items you have in important places such as site tagline for the website, site title etc. Bear this in mind when working with the blocks in your own code…
Here goes!
[ TEXT BLOCKS ]
This is the paragraph block. Hurray!
Heading Block (H2)
- List item 1
- List item 2
- List item 3
Quote Block Text
Quote block citation
console.log('hello, this is a code block');Details Block
Details block content (hidden). This is just an accordion type toggle, all blocks etc can be nested in here
example paragraph in the Details block content
preformatted text block - respects spacing and tabs
pullquote block
pullquote block citation
| table block | table block |
| table block | table block |
verse block component - (how useful is this actually?)
classic block, from the WordPress olden days…
[ MEDIA BLOCKS ]
cover block
media and text block
[ DESIGN BLOCKS ]
columns block (50/50) with nested paragraph block. smaller text is here compared to the blocks below…
columns block (50/50) with nested paragraph block with a bit more text. But see that the columns are still spaced evenly
group block with nested paragraph
group block with nested paragraph block. split horiztionally. These columns seem to be fluid in width compared to the regular columns block above
row block with a nested paragraph block
row block with another paragraph block. This is horizontal?
no limit on items added
stack block with nested paragraph block
no limit on items added, but is vertical, rather than horizontal as above
a page break block is available, but i don’t want to paginate this blog post…
[ WIDGETS BLOCKS ]
- July 2024
- June 2024
- May 2024
- April 2024
- February 2024
- August 2023
- February 2023
- January 2023
- October 2021
- September 2021
- July 2021
- August 2020
- July 2020
- May 2020
- April 2020
- March 2020
- February 2020
- January 2020
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |
- Blog
- Bugfixing
- Developer Tools
- Freelancing
- Front End Development
- How to
- Javascript
- Node
- React
- Security
- Self Improvement
- Web Design
- Web Hosting
- WordPress
- Workflow
custom html block
- Lint PHP version breaking changes with phpcs
- How to use TypeScript with React: A Brief Overview
- Unlimited SSL Subdomains in cPanel (with Cloudflare)
- How to immediately call a function in JavaScript (IIFE)
- How to Allow HTML formatting in JSX with VS Code
[shortcodeblock]
[ THEME BLOCKS ]
this is how i code
my personal journey through creating with code
WordPress Block Editor Core Blocks Demo (Gutenberg)
This is a reference of the Block Editor blocks available in WordPress as of 6.4.3. There is an online resource here: Core Blocks Reference | Block Editor Handbook | WordPress Developer Resources But being the visual person I am, I find it helps to see what the available blocks are. This is especially useful for
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
[ EMBED BLOCKS ]
I’ve skipped some embeds that looked like they needed account setup (which I don’t have) they are: animoto, cloudup, crowdsignal, issuu, kickstarter (appears to be broken), pocket casts, reddit ( doesnt seem to work, or I can’t get it to work), reverbnation, screencast, smugmug, tiktok ( ain’t signing up for that), videopress, amazon kindle, pinterest, wolfram
Leave a Reply