wp.blocks.registerBlockType(
'spiro/box',
{
title: 'Spiro Box',
icon: 'tablet',
category: 'layout',
attributes: {
headline: {
type: 'string',
},
color: {
type: 'string',
},
boxurl: {
type: 'string',
},
content: {
type: 'string',
}
},
edit: function(props) {
return wp.element.createElement(
'div',
{
className: 'box box-' + props.attributes.color
},
[
// Headline
wp.element.createElement(
'h3',
{
style:
{
display: 'flex',
},
},
[
wp.element.createElement(
'span',
{},
'Headline: '
),
wp.element.createElement(
wp.editor.RichText,
{
key: 'editable',
tagName: 'span',
style: {
display: 'inline-block',
minWidth: '100px',
border: '1px dashed gray'
},
onChange: function(data) {
props.setAttributes({headline: data});
},
value: props.attributes.headline
}
),
]
),
// Color
wp.element.createElement(
'div',
{
style:
{
display: 'flex',
}
},
[
wp.element.createElement(
'span',
{},
'Color:'
),
// White
wp.element.createElement(
'label',
{},
[
wp.element.createElement(
'input',
{
style: {marginLeft: '2em'},
type: 'radio',
name: props.id + '_color',
onChange: function(data) {
props.setAttributes({color: 'white'});
},
}
),
wp.element.createElement('span', {}, 'White'),
]
),
// Gold
wp.element.createElement(
'label',
{},
[
wp.element.createElement(
'input',
{
style: {marginLeft: '2em'},
type: 'radio',
name: props.id + '_color',
onChange: function(data) {
props.setAttributes({color: 'gold'});
},
}
),
wp.element.createElement('span', {}, 'Gold'),
]
),
// Blue
wp.element.createElement(
'label',
{},
[
wp.element.createElement(
'input',
{
style: {marginLeft: '2em'},
type: 'radio',
name: props.id + '_color',
onChange: function(data) {
props.setAttributes({color: 'blue'});
},
}
),
wp.element.createElement('span', {}, 'Blue'),
]
),
]
),
// URL
wp.element.createElement(
'label',
{
style: {
display: 'flex',
}
},
wp.element.createElement(
'span',
{},
'URL:'
),
wp.element.createElement(
wp.editor.RichText,
{
key: 'editable',
tagName: 'p',
style: {
minWidth: '100px',
border: '1px dashed gray'
},
onChange: function(data) {
props.setAttributes({boxurl: data});
window.console.log('new url: ', data);
window.console.log('url: ', props.attributes.boxurl);
},
value: props.attributes.boxurl
}
),
),
// Text
wp.element.createElement(
'label',
{
style:
{
display: 'flex',
}
},
[
'Text:',
wp.element.createElement(
wp.editor.RichText,
{
key: 'editable',
tagName: 'p',
style: {
minWidth: '100px',
border: '1px dashed gray'
},
onChange: function(data) {
props.setAttributes({content: data});
},
value: props.attributes.content
}
)
]
),
]
)
;
},
save: function(props) {
return wp.element.createElement(
'div',
{
className: 'box box-' + props.attributes.color
},
wp.element.createElement(
'a',
{
href: props.attributes.boxurl,
},
[
wp.element.createElement(
'h3',
{},
props.attributes.headline
),
wp.element.createElement(
'p',
{},
props.attributes.content
)
]
)
)
}
}
);
Comments