CodeVoyager

Gutenberg Resources

Edit Page

Gutenberg Resources

Everything found below is mentioned in this resource: 98 Plugins for the new WordPress Block editor

Preview & share blocks / Block templates:

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

WordPress/theme-experiments

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.

johnbillion/extended-template-parts: A library provides extended functionality to WordPress template parts, including template variables and caching.

Useful Block Plugins

Gutenberg Learning Resources

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.

  1. create-block
    This is an official package, and it was perfectly easy to execute. @wordpress/create-block works as expected.

  2. 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.

  1. 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.

More about it here and here

Official deprecation warning that it is no longer recommended to use WP-CLI or create-guten-block to generate block scaffolding.

React block examples

Modifying existing blocks

Block Patterns

I’ll use block patterns as page sections.

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

Plugins to enhance Block Patterns

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"} /-->

1
2
3
4
5
6

<!-- wp:group {"align":"full","className":"pattern-in-a-pattern"} -->
<div class="wp-block-group alignfull pattern-in-a-pattern" id="pattern-in-a-pattern">
  <!-- wp:pattern {"slug":"cnc24/benefit-4-cards"} /-->
  <!-- wp:pattern {"slug":"cnc24/cta-accent"} /-->
</div>
<!-- /wp:group -->

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.

  1. Actually they are rarely useful as most of the time we need to change some content
  2. They are inserted by ID and because of that fact, export-import of JSON is not straightforward
  3. 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)

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

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.

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

Layout Grid Block

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

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

Blocks to display custom fields or any other post meta

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

Container Block

date 11. Jan 2020 | modified 10. Jan 2023
filename: Wordpress » Gutenberg Blocks
Article Content