| 1 |
/** |
| 2 |
* |
| 3 |
* ----------------------------------------------------------- |
| 4 |
* |
| 5 |
* Codestar Framework Gutenberg Block |
| 6 |
* A Simple and Lightweight WordPress Option Framework |
| 7 |
* |
| 8 |
* ----------------------------------------------------------- |
| 9 |
* |
| 10 |
*/ |
| 11 |
( function( blocks, blockEditor, element, components ) { |
| 12 |
|
| 13 |
if ( !window.csf_gutenberg_blocks ) { return; } |
| 14 |
|
| 15 |
Object.values(window.csf_gutenberg_blocks).forEach( function( block ) { |
| 16 |
|
| 17 |
var registerBlockType = blocks.registerBlockType; |
| 18 |
var PlainText = blockEditor.PlainText; |
| 19 |
var createElement = element.createElement; |
| 20 |
var RawHTML = element.RawHTML; |
| 21 |
var Button = components.Button; |
| 22 |
|
| 23 |
let ctl_blockName=block.gutenberg.block_name=='ctl_timeline_shortcode'?'csf/ctl-timeline-shortcode':'ctl-gutenberg-block/block-'+block.hash; |
| 24 |
let ctl_class=block.gutenberg.block_name=='ctl_timeline_shortcode'?'csf-shortcode':'ctl-shortcode'; |
| 25 |
|
| 26 |
registerBlockType(ctl_blockName, { |
| 27 |
apiVersion: 3, |
| 28 |
title: block.gutenberg.title, |
| 29 |
description: block.gutenberg.description, |
| 30 |
icon: block.gutenberg.icon || 'screenoptions', |
| 31 |
category: block.gutenberg.category || 'widgets', |
| 32 |
keywords: block.gutenberg.keywords, |
| 33 |
supports: { |
| 34 |
html: false, |
| 35 |
className: false, |
| 36 |
customClassName: false, |
| 37 |
inserter: false |
| 38 |
}, |
| 39 |
attributes: { |
| 40 |
shortcode: { |
| 41 |
string: 'string', |
| 42 |
source: 'text', |
| 43 |
}, |
| 44 |
isPreview:{ |
| 45 |
type: 'boolean', |
| 46 |
default: false |
| 47 |
} |
| 48 |
}, |
| 49 |
edit: function (props) { |
| 50 |
return ( |
| 51 |
props.attributes.isPreview ? |
| 52 |
createElement('img', {src: block.gutenberg.previewImage}) |
| 53 |
: |
| 54 |
createElement('div', {className: ctl_class+'-block'}, |
| 55 |
|
| 56 |
createElement(Button, { |
| 57 |
'data-modal-id': block.modal_id, |
| 58 |
'data-gutenberg-id': block.name, |
| 59 |
className: 'is-secondary '+ctl_class+'-button', |
| 60 |
onClick: function () { |
| 61 |
window.csf_gutenberg_props = props; |
| 62 |
}, |
| 63 |
}, block.button_title ), |
| 64 |
|
| 65 |
createElement(PlainText, { |
| 66 |
placeholder: block.gutenberg.placeholder, |
| 67 |
className: 'input-control blocks-shortcode__textarea', |
| 68 |
onChange: function (value) { |
| 69 |
props.setAttributes({ |
| 70 |
shortcode: value |
| 71 |
}); |
| 72 |
}, |
| 73 |
value: props.attributes.shortcode |
| 74 |
}) |
| 75 |
|
| 76 |
) |
| 77 |
); |
| 78 |
}, |
| 79 |
save: function (props) { |
| 80 |
return createElement(RawHTML, {}, props.attributes.shortcode); |
| 81 |
}, |
| 82 |
example: { |
| 83 |
attributes: { |
| 84 |
isPreview: true, |
| 85 |
}, |
| 86 |
}, |
| 87 |
}); |
| 88 |
|
| 89 |
}); |
| 90 |
|
| 91 |
})( |
| 92 |
window.wp.blocks, |
| 93 |
window.wp.blockEditor, |
| 94 |
window.wp.element, |
| 95 |
window.wp.components |
| 96 |
); |
| 97 |
|
