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

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

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, container block

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.

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

Rešen je: Linkable Blocks (solved)

Hyperlink block se potpuno izgubi kada ima bilo kakav link ispod sebe… I koristi classic wrapper a ne hidden.

Uzmi jednom za svagda napravi dobar wrapper za linkove koji radi i unutar query block-a. Tri metode: wrap, hidden and js (no html changes but with js).

Ako možeš nekako da izmeniš Group da to podržava, idealno, ali je bitno da se ne obriše prilikom deinstalacije. Kao da je nešto pokušavao da reši problem “bušenja”.

Problem “bušenja”.

Nekada mi je potrebno da cela grupa bude linkable, a da opet jedan mali deo nje bude linkable na nešto drugo. To rešavam na sledeći način:

Koristiš “hidden” metod, a zatim linkove unutra setuješ na “position: relative; z-index: 999” i oni će probušiti i biti prvi.

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.

Grid Blocks

Grids: Layout builder for WordPress je vrlo napredan i ustvari odličan, koji ima primenu ne samo za grid već i za napredan site dizajn, a oduševljen je bio i Matt Mullenweg na WordCamp Europe 2019

The Using CSS Grid for Gutenberg Columns article demonstrates a now-obsolete approach to converting Flex to Grid, which involves the use of JS. Personally, I find it unclear why this approach is used.

12 column grid system

Sledeća gurpa blokova se ustvari bavi sa 12 column grid, koji je potpuno drugom temom od CSS grid.

Layout Grid Block by Automattic se bavi ustvari sa 12-Column grid sistem koje implementira kroz osnovni CSS grid, ali se u suštini ne bavi sa native CSS grid i ne pruža nijednu opciju za CSS grid.

Grid Block izgleda solidno iako nema korisnika, i čini mi se da ima više opcija od prethodnog, Automattic bloka.

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

Grid Blocks ne radi (wp:pb/block-grid) ali i sam je napisao da je specifičan samo za neke teme.

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

Blockbuddy je čudan ali radi. Samo ga smestiš u Query Loop i napravi template-ove. Testirao sam ga CNC24 ali nisam iskoristio.

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

Objašnjeno kako da Add an image selector to a Gutenberg block in WordPress · Blog · Liip and repo liip/image-selector-example-wp-plugin: Example how to create an image selector for a Gutenberg block in WordPress

Tip: to find the correct block name, open the block editor, launch the browser console and type wp.blocks.getBlockTypes(). You will see the complete list of block names (from core or third-party).

WordPress plugin boilerplate to add Preact app to the admin area: markhowellsmead/mhmpt-plugin-with-preact: Base for a WordPress plugin which adds a Preact app to the admin area

How to modify block supports in WordPress using client-side filters by amazing author and accompanying plugin example at ndiego/editor-curation-examples: A collection of Editor curation examples for WordPress.

WPHTML Converter is a helpful tool when creating your blocks, available on the happyprime/wphtml-converter repository. This tool converts WPHTML (WordPress block markup) into its JSON or PHP format.

dgwyer/gutenberg-development-resources: List of resources related to Gutenberg and block development.

How works?

Official: gutenberg/packages/server-side-render/src at trunk · WordPress/gutenberg. Tekst Gutenberg Components: ServerSideRender - Igor Benić i primena u plugin-u https://wordpress.org/plugins/giveasap/

Nije brža implementacija ServerSideRenderX ali ne skače gore-dole pri izmeni odnosno ne menja dok se ne generiše novi sadržaj: An Improved Server Side Render Component for Dynamic WordPress Blocks - WPGO Plugins

dgwyer/server-side-render-x: Modification of the core component for a better rendering experience.

Full-Site Editing 4-in-1 sporting events website – TipTop-Press

Restricting Full Site Editing Curating the Editor Experience – Block Editor Handbook | Developer.WordPress.org

date 11. Jan 2020 | modified 13. Jun 2024
filename: Wordpress » Gutenberg » Creating Blocks
Article Content