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.

Attributes for Blocks je predivan i fkelsivilan plugin.

Global Styles Mods – WordPress 5.9 fix je fix neki.

Block Based Themes

The most basic video introduction on Block Based Themes Development Video explanations on Block Theme from Core Team Lead

Gutenberg Experience

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

Toggle Blocks

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

Plugins to enhance Block Patterns

Block Pattern Management

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 us to override default block attributes ali je u samom markup-u blok i dalje zapamćen kao originalan blok. Što se korisnika tiče varijacije izgledaju kao odvojene instances novih blokova koje in the inserter imaju unique names and icons a mogu imati i neke 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:

Some Block Goals

linkable container block, clickable wrapper, clickable container, clickable Group

Some solutions:

Vrlo dobar tekst o container link types koji objašnjava dva metoda dodavanja linka na neki blok, kao wrapper i kao hidden link koji će raditi even if you add links inside the container, a sve na primeru GenerateBlocks Container block

EditorsKit ima opciju to add link to cover, group and column blocks i ona radi po principu “hidden link”. Jedina mala mana je što, ako isključiš plugin a zatim snimiš post, nećeš ni znati da si izgubio linkove. Takođe, mislim da nema opciju da koristi link iz Query Loop-a nego samo ručni unos.

Moguće je rešiti upotrebom it by using JavaScript so I won’t introduce any wrapper blocks.

The Twentig plugin adds a fantastic feature called “Stretch Link” that does exactly what I need, perfectly, but only on the core/cover block.

— pogleadaj tog autora: svi pluginovi su interesantni ustvari Daniel Floeter (@kometschuh) – WordPress user profile | WordPress.org

Container Block je diskusija kako je Gutenberg tako usran vezano za container/group block

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.

This guy has amazing plugins: Alvaro (@melonpan) – WordPress user profile | WordPress.org

Gallery - Melonpan Block – Images Melonpan Block – Code

Grid Blocks

Using CSS Grid for Gutenberg Columns – Ari Stathopoulos

This is also like core block Layout Grid Block

Grid Blocks

more advanced one: Grids: Layout builder for WordPress https://youtu.be/UE18IsncB7s?t=13659

BinaryMoon/wp-toolbelt: A lightweight, multi-purpose, WordPress plugin with a focus on privacy and speed also has 12 column grid block.

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 ali ima noviji način

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

Note for ACF which now has the ability to create CPT. In order to have the option to select by Taxonomy for a specific Custom Post Type in Query Loop, it must be enabled in ACF or wherever it is being used: “Advanced Settings” > “URLs” > “Front URL Prefix” and “Pagination”, which is not enabled by default.

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://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

Izuzetan izvor informacija za razvoj custom blockova: Gutenberg Best Practices by 10up Guides, Training and Block Editor Reference

How to retrieve WordPress data for blocks with the useSelect hook – BlockifyWP

10up/block-components: A collection of components built to be used in the block editor

How to dynamically populate SelectControl, RadioControl or CheckboxControl options

Mamaduka/create-block-esbuild

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