WP Manifestindependent plugin directory
manifest / editor / wp-block-custom-variation-and-pattern

wp-block-custom-variatioon-and-pattern

Custom Gutenberg Block Variation and Pattern Using Minimal Setup.

by MainulDip · github.com/mainuldip/wp-block-custom-variation-and-pattern

0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/mainuldip/wp-block-custom-variation-and-pattern/archive/refs/heads/master.zip

Overview


This is a bare minimum plugin to create custom block variation and pattern in wordpress block editor.
Note: Block Variation Use Mostly Client Side Integration Where pattern use server side.
Choose as your preference :)

Instructions


First Install The Packages

npm install

Then Start The Node Server In Watch Mode By Running

npm run start

After finishing development run

npm run build

Folder Structure


Edit the src/index.js file to customize the variation Edit the index.php file to put block pattern

Notes (inline css injection):


As of writing this, maybe to work perfectly with headless architecture, wordpress gives no way (or not documented yet) to push custom inline styles through block variation api. You can use custom css classes to get fine grain control.

Notes (Hooking Block Variation Assets):


Shortet way is through init hook and register_block_type_from_metadata using block.json structure (see index.php for detail). And also alternatively you enqueue scripts and asstes on editor-only or both side.

Happy Coding :)