Skip to content

Instantly share code, notes, and snippets.

@nico-martin
Last active June 26, 2019 12:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nico-martin/6dadc5fdac3af7afdd4321aa8db7a1de to your computer and use it in GitHub Desktop.
Save nico-martin/6dadc5fdac3af7afdd4321aa8db7a1de to your computer and use it in GitHub Desktop.
This is an example of a server side rendered block without any build step. It's all plain JS/PHP and it uses the helpers and components WordPress already offers in the block admin interface.
(function (blocks, components, element) {
blocks.registerBlockType('test/ssr', {
title: 'Server Side Rendered Block',
icon: 'admin-site-alt3',
category: 'test',
edit: function (props) {
return element.createElement(components.ServerSideRender, {block: 'test/ssr'});
},
save: function () {
return null;
},
});
})(wp.blocks, wp.components, wp.element);
<?php
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script('block-ssr-script', '/SRC_TO_JS/block-ssr.js', ['wp-blocks', 'wp-element', 'wp-edit-post', 'lodash'], '1.0.0');
});
add_filter('block_categories', function ($categories) {
return array_merge($categories, [
[
'slug' => 'test',
'title' => 'Test Blocks',
],
]);
});
register_block_type('test/ssr', [
'render_callback' => function () {
return 'Hello! I am rendered on the server.';
},
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment