Skip to content

Instantly share code, notes, and snippets.

@awakekat
Created December 12, 2018 21:14
Show Gist options
  • Save awakekat/1da2ca8356d91a776d5b878e08d10dd8 to your computer and use it in GitHub Desktop.
Save awakekat/1da2ca8356d91a776d5b878e08d10dd8 to your computer and use it in GitHub Desktop.
Vanilla Gutenberg Block
/**
* vanilla-gutenberg-block.js
*
* Hello World: Step 1
*
* Simple block, renders and saves the same content without interactivity.
*
* Using inline styles - no external stylesheet needed. Not recommended
* because all of these styles will appear in `post_content`.
*/
( function( blocks, i18n, element ) {
var el = element.createElement;
var __ = i18n.__;
var blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
i18n.setLocaleData( window.gutenberg_examples_01.localeData, 'gutenberg-examples' );
blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el(
'p',
{ style: blockStyle },
'Hello World, step 1 (from the editor).'
);
},
save: function() {
return el(
'p',
{ style: blockStyle },
'Hello World, step 1 (from the frontend).'
);
},
} );
}(
window.wp.blocks,
window.wp.i18n,
window.wp.element
) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment