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