Skip to content

Instantly share code, notes, and snippets.

View sanzeeb3's full-sized avatar
🚩
You are here!

Sanzeeb Aryal sanzeeb3

🚩
You are here!
View GitHub Profile
@sanzeeb3
sanzeeb3 / serve-side-block.js
Created May 4, 2019 16:33 — forked from Shelob9/serve-side-block.js
Example Gutenberg block with server-side rendering. Gutenberg edit() block creates interface. Gutenberg saves settings automatically, the PHP function passed as `render_callback` to `register_block_type` is used to create HTML for front-end rendering of block.
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;
registerBlockType( 'hiRoy/serverSide', {
title: __( 'Server Side Block', 'text-domain' ),
icon: 'networking',
category: 'common',
attributes: {

Custom Gutenberg Block

This is a basic custom Gutenberg block. Files explained below.

  • block.js — We register Custom Gutenberg block here.
  • editor.css _ Block CSS for the editor.
  • style.css — Block CSS for the front end.
  • index.php — Enqueue block's assets for editor and the front end.