Gutenberg Resources
Everything found below is mentioned in this resource: 98 Plugins for the new WordPress Block editor
Preview & share blocks / Block templates:
- Official plugins that offer blocks for the Gutenberg: blocks
- Blocks Directory: Gutenberg Block Library
- Blocks Directory: Gutenberg Block Library
- Share Gutenberg Blocks: ShareABlock via JSON using EditorsKit plugin.
- Gutenberg Cloud has not many blocks.
- Design Hub for Gutenberg (Gutenberg Blocks Templates) I don’t think this one is very active, but it has couple of important ideas: default blocks only, no extra JS code, etc
- Getwid also has extensive template library and is highly rated.
Block Customization Plugins
- Blocks CSS by ThemeIsle is adding not just a CSS class, but any CSS. Changes are immediately visible in editor backend. This one is recommended as it is also used for some block collections.
- Blocks Animation by ThemeIsle will add an animation capability to any block so you could need “group” block to animate couple of blocks together. Animated Blocks by Virgiliu Diaconu and Animation Block are already “wrapper” blocks. Also Animate Blocks based on AOS. There is also paid plugin: Scroll Magic
- Blocks Export Import by ThemeIsle
- Additional design, style and CSS for ANY Gutenberg Block by StylistWP
- EditorsKit plugin has Export/Import functionality and other improvements.
Block Based Themes
The most basic video introduction on Block Based Themes Development Video explanations on Block Theme from Core Team Lead
Gutenberg Experience
Minimum boilerplate code for a block-based theme: theme-experiments/emptytheme
Check: block-templates
and block-template-parts
Template Parts
In the future, template parts will solve the problem of headers and footers.
Useful Block Plugins
Gutenberg Learning Resources
- Learning? Go Gutenberg
Blocks: Creating and Customizing
Create Block from Scratch using React
Question is, Why would I develop a new block if I can modify almost everything using only render
filters.
Because core blocks could change entirely in the future and by introducing mine block I’m minimizing that risk.
Scaffolding React block.
-
create-block
This is an official package, and it was perfectly easy to execute. @wordpress/create-block works as expected. -
wp scaffold block
This is by far the simplest, but it creates a block with vanilla JavaScript without JSX and no build step. This is the fastest process for building simple blocks. I plan on using Babel REPL to transpile JSX to vanilla JS.
- npx
create-guten-block
I don’t like how it installs a staggering amount of tools as part of a cgb-scripts
package that’s never needed.
Decided to stay with the official process. I assume this one was popular before the official one was introduced.
Official deprecation warning that it is no longer recommended to use WP-CLI or create-guten-block
to generate block scaffolding.
-
Create a Custom Block without Plugin and in more details here: hrsetyono/gutenberg-tutorial. Plus How to Compile Gutenberg JS.
-
Build a Block Series is presented by Marcus Kazmierczak, engineering team lead working at Automattic mostly on Gutenberg for WordPress. The video playlist is here
-
Building Custom Gutenberg Blocks: The Definitive Block Development Tutorial
-
Creating a Custom Block Type for WordPress Gutenberg Editor | Stampede
React block examples
-
Amazing resource: Gutenberg WordPress Components
-
Exact? LinkControl and InnerBlocks gutenberg/components/link-control
-
How to Use to registerBlockType() to Create Blocks in WordPress
Modifying existing blocks
Block Patterns
- I’ll use block patterns as page sections.
- When defining block pattern, default “Viewport Width” value is “1200”.
Ways to manage Patterns
Editing patterns inside the admin
Here is the simplest plugin for patterns, if I want to edit them in the admin area. Creates custom post type to create and register block patterns: mkaz/templets: WordPress plugin to make it easier to create block patterns.. Straightforward.
Patterns from theme folder
- https://make.wordpress.org/core/2022/05/02/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0/
- https://github.com/WordPress/gutenberg/pull/36751
- https://kinsta.com/blog/wordpress-6-0/
Plugins to enhance Block Patterns
- Reusable Blocks Extended
- Custom Block Patterns also have block categories. I don’t like a prefix (CBP) that it adds to category and block names.
- Block Pattern Builder was the first one, the simplest solution that should have been merged upstream. It doesn’t include block categories.
Block Pattern Management
- Build & Control Block Patterns. Nije loš za osnovnu manipulaciju.
- Styles Library
Having a pattern inside a pattern
We can include other patterns, even the ones from external source, like this:
<!-- wp:pattern {"slug":"cnc24/benefit-4-cards"} /-->
|
|
Important reminder: these PHP blocks only “run” upon loading the block editor in order to compute the patterns. Once inserted into a post, patterns are static.
Reusable Blocks
Why developer shouldn’t use reusable blocks? Reusable blocks should be used by users, if needed.
- Actually they are rarely useful as most of the time we need to change some content
- They are inserted by ID and because of that fact, export-import of JSON is not straightforward
- Quite slow inside editor
So for developers using Block Patterns is the way to go.
Block Styles
Styles can be created either by using PHP or by using JavaScript but there is a catch about unregistering block styles as PHP function can remove only styles that were registered in PHP using the corresponding register_block_style()
function. Therefore, from now on, use only JavaScript.
Block Variations
Block Variations allow developers to define instances of existing blocks. They appear in the inserter as separate blocks with unique names and icons and can have pre-filled custom attributes and inner blocks, similar to Block Patterns
Block Variations compared to Block Styles? — Block Style is a fancy way of adding a custom class to a block.
How to Use Block Variations in WordPress
Modifying Blocks using block Filters
Mangling ‘render’ in blocks and similar techniques.
Change block edit wrapper attributes · Florian Brinkmann Adding a DIV wrapper to Gutenberg’s Classic block How to add an HTML wrapper to a custom Block Pattern – Birgir Erlendsson (birgire) Adding an html wrapper to a custom Block Pattern - WordPress Development Stack Exchange
And a more advanced examples:
Miscellaneous on blocks
Ideas to Explore on blocks
Maybe to select CSS classes with some kind of dropdown menu, and not entering them manually.
Get inspiration from Classy Blocks and expand on this where offered classes will be specifically based on block location inside a hierarchy.
Or simply, block styles depending on hierarchy (parent selector somewhere).
Create block styling based on block id or class or similar (class is best)
- Gutenberg. How To Register A Custom Block Style For Specific Post Type Only - WordPress Development Stack Exchange
- javascript - Using wp.data.subscribe properly - Stack Overflow
- @wordpress/data | Block Editor Handbook | WordPress Developer Resources
- wp gutenberg subscribe - Google Search
- Gutenberg JS - Sal Ferrarello
- Gutenberg: using the wp.data module with the WordPress REST API
- Gutenberg Archives - Sal Ferrarello
Quirks about blocks
On spacing and Spacer blocks
Unit in spacer block should be vw
by default.
Adding Margin and Padding to Blocks using theme.json
, and also controlling available units.
Some Block Goals
Wrapper link block
-
Writing a wrapper block for Gutenberg in WordPress · Blog · Liip liip/wrapper-block-example-wp-plugin: Example wrapper block for Gutenberg.
-
DanielFloeter/hyperlink-group-block: Combine blocks into a group wrapped with an hyperlink Hyperlink Group Block
I will call it “Clickable Wrapper” or “Clickable Container” or “Clickable Group”
I’ve solved it by using JavaScript so I won’t introduce any wrapper blocks.
Twentig plugin dodaje super foru koju zovu “Stretch link” koja radi baš to što mi treba, savršeno, ali samo na core/cover bloku.
On using element ID aka HTML Anchor
You can use HTML anchor
(ID) instead of Additional CSS class(es)
as it’s value is visible in editor’s List View
. I’ve used it block names to help you navigate document. When specifying CSS ID’s the changes are not immediately presented in editor as it is when playing with CSS Classes, so I’m not using ID for styling but just as an informal helper field.
Very nice addition to Gutenberg Block Navigation
This guy has amazing plugins: Alvaro (@melonpan) – WordPress user profile | WordPress.org
Gallery - Melonpan Block – Images Melonpan Block – Code
Something like Custom Fields - melonpan
VERY nice container: Melonpan Block – Container Woow: melonpan melonpan
Grid Blocks
Using CSS Grid for Gutenberg Columns – Ari Stathopoulos
more advanced one: Grids: Layout builder for WordPress https://youtu.be/UE18IsncB7s?t=13659
Notes on blocks
Blocks and ACF
Please note that only a single <InnerBlocks />
Component may be used per block.
Interesting from article acf_register_block_type
- Adding block previews
- Adding inner blocks, especially - structured array of block content - Block Templates. Extending ACF custom blocks into WordPress core blocks
Kako preview? https://support.advancedcustomfields.com/forums/topic/register-block-preview-image-with-acf_register_block_type/
Custom fields (post meta) inside blocks
Solving the Query Loop problem
- WP 5.8 “Query Loop” block: where to place custom query?
- gutenberg/packages/block-library/src/query at wp/5.9
Blocks to display custom fields or any other post meta
-
Meta Field Block
A block for displaying a meta field on the frontend of a WordPress website, with support for Advanced Custom Fields. The block can be used nested inside another block or as a standalone. This allows for flexible and customizable display of meta fields. -
Advanced Query Loop | ryanwelcher/advanced-query-loop supports post ,meta queries
-
Custom Loop/Query Based on Custom Fields | CSS-Tricks - CSS-Tricks
Now…
https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/ https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/inner-blocks https://www.advancedcustomfields.com/resources/acf_register_block_type/
https://www.advancedcustomfields.com/blog/acf-customizing-wordpress-blocks/ https://wordpress.org/plugins/hyperlink-group-block/ https://wp-gb.com/innerblocks/ https://www.advancedcustomfields.com/resources/acf_register_block_type/ https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/button/block.json
https://poolghost.com/rename-class-names-in-gutenberg-blocks/ https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-getblockdefaultclassname https://wordpress.stackexchange.com/questions/308021/how-to-add-a-custom-css-class-to-core-blocks-in-gutenberg-editor https://wp-qa.com/how-to-add-a-custom-css-class-to-core-blocks-in-gutenberg-editor https://franky-arkon-digital.medium.com/gutenberg-tips-generate-your-blocks-class-name-using-useblockprops-aa77a98f4fd
https://www.forumming.com/question/21149/add-custom-class-to-core-blocks-in-gutenberg https://stackoverflow.com/questions/56258563/modifying-or-adding-classes-to-individual-components-within-core-wordpress-block
dsdsds
sortabrilliant/detectivewapuu is browser extension to reveal which blocks are used on site