Skip to content

Instantly share code, notes, and snippets.

@Shelob9
Last active August 30, 2018 20:56
Show Gist options
  • Save Shelob9/7f219d330011767bb1c6ed5b76ce0a1f to your computer and use it in GitHub Desktop.
Save Shelob9/7f219d330011767bb1c6ed5b76ce0a1f to your computer and use it in GitHub Desktop.
( function( blocks, element ) {
var el = element.createElement;
blocks.registerBlockType( 'namespace/block-name', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
edit: function() {
return el(
'p',
{},
'Hello World, step 1 (from the editor).'
);
},
save: function() {
return el(
'p',
{},
'Hello World, step 1 (from the frontend).'
);
},
} );
}(
window.wp.blocks,
window.wp.element
) );
( function( blocks, element ) {
const el = element.createElement;
blocks.registerBlockType( 'namespace/block-name', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
attributes: {
message: {
type: 'string',
default: 'Hi Roy'
}
},
edit: function(props) {
return el(
'p',
{},
props.attributes.message
);
},
save: function() {
return null;
},
} );
}(
window.wp.blocks,
window.wp.element
) );
( function( blocks, element ) {
const el = element.createElement;
blocks.registerBlockType( 'namespace/block-name', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
attributes: {
message: {
type: 'string',
default: 'Hi Roy'
}
},
edit: function(props) {
return el(
'input',
{
type: 'text',
onChange: (e) => {
e.preventDefault();
props.setAttributes( { message: e.target.value})
}
},
props.attributes.message
);
},
save: function() {
return null;
},
} );
}(
window.wp.blocks,
window.wp.element
) );
( function( blocks, element ) {
const el = element.createElement;
const {TextControl} = wp.components;
blocks.registerBlockType( 'namespace/block-name', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
attributes: {
message: {
type: 'string',
default: 'Hi Roy'
}
},
edit: function(props) {
return el(
TextControl,
{
onChange: (message) => {
props.setAttributes( { message})
},
label: 'Message'
},
props.attributes.message
);
},
save: function() {
return null;
},
} );
}(
window.wp.blocks,
window.wp.element
) );
( function( blocks, element ) {
const el = element.createElement;
const {TextControl} = wp.components;
blocks.registerBlockType( 'namespace/block-name', {
title: __( 'Example: Basic', 'gutenberg-examples' ),
icon: 'universal-access-alt',
category: 'layout',
attributes: {
message: {
type: 'string',
default: 'Hi Roy'
}
},
edit: function(props) {
//When block is selected, show control
if(props.isSelected){
return el(
TextControl,
{
onChange: (e) => {
e.preventDefault();
props.setAttributes( { message: e.target.value})
}
},
props.attributes.message
);
}
//When block is not connected, show paragraph
return el(
'p',
{
},
props.attributes.message
);
},
save: function() {
return null;
},
} );
}(
window.wp.blocks,
window.wp.element
) );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment