Skip to content

Instantly share code, notes, and snippets.

@sirreal
Last active January 8, 2024 15:44
Show Gist options
  • Save sirreal/940bb5917c3c5449c98626a8878bf071 to your computer and use it in GitHub Desktop.
Save sirreal/940bb5917c3c5449c98626a8878bf071 to your computer and use it in GitHub Desktop.
A simple WordPress block plugin with block.json viewModule
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"title": "Jon's cool counter",
"name": "jon/the-block",
"editorScript": "file:./index.js",
"viewModule": "file:./view.js",
"render": "file:./render.php",
"category": "text"
}
<?php return array('dependencies' => array('react', 'wp-blocks'), 'version' => '04a7cb7df938528c50ee');
const e = window.React,
t = window.wp.blocks,
o = JSON.parse(
'{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"title":"Jon\'s cool counter","name":"jon/the-block","editorScript":"file:./index.tsx","viewModule":"file:./view.mts","render":"file:./render.php","category":"text"}',
);
t.registerBlockType(o, {
edit: () => (0, e.createElement)("div", null, "counter"),
save: () => (0, e.createElement)("div", null, "counter"),
});
<?php
/*
* Plugin Name: A counter
*/
add_action(
'init',
function () {
register_block_type_from_metadata(__DIR__ . '/block.json');
}
);
<div data-wp-interactive='{"namespace":"jon/the-block"}' data-wp-context='{"val":0}'>
<input readonly type='number' data-wp-bind--value='context.val' value='0' />
<button data-wp-on--click='actions.inc'>+</button>
<button data-wp-on--click='actions.dec'>-</button>
</div>
<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => 'f282a2a7610fadeab6d4', 'type' => 'module');
import * as t from "@wordpress/interactivity";
var e = {
d: (t, o) => {
for (var r in o)
e.o(o, r) &&
!e.o(t, r) &&
Object.defineProperty(t, r, { enumerable: !0, get: o[r] });
},
o: (t, e) => Object.prototype.hasOwnProperty.call(t, e),
};
const o =
((n = { getContext: () => t.getContext, store: () => t.store }),
(a = {}),
e.d(a, n),
a),
r = o.getContext;
var n, a;
o.store("jon/the-block", {
actions: {
inc() {
r().val += 1;
},
dec() {
r().val -= 1;
},
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment