shortcoder.js
89 lines
| 1 | (function( blocks, element ){ |
| 2 | var el = element.createElement; |
| 3 | |
| 4 | function shortcoderBlock( props ){ |
| 5 | |
| 6 | return el( 'div', { |
| 7 | 'id': 'shortcoder_wrap_' + props.instanceId, |
| 8 | 'style': { |
| 9 | 'background-color': '#f8f9f9', |
| 10 | 'padding': '15px', |
| 11 | 'border-radius': '5px' |
| 12 | } |
| 13 | }, |
| 14 | el( window.wp.editor.PlainText, { |
| 15 | 'id': 'shortcoder_box_' + props.instanceId, |
| 16 | 'className': 'input-control', |
| 17 | 'onChange': function(value){ |
| 18 | props.setAttributes({ |
| 19 | text: value |
| 20 | }); |
| 21 | }, |
| 22 | 'placeholder': 'Select/enter shortcode', |
| 23 | 'spellcheck': 'false', |
| 24 | 'value': props.attributes.text, |
| 25 | 'style': { |
| 26 | 'font-family': 'monospace', |
| 27 | 'font-size': '15px', |
| 28 | 'padding': '10px' |
| 29 | } |
| 30 | }), |
| 31 | el( 'button', { |
| 32 | 'class': 'button button-primary', |
| 33 | 'onClick': function(){ |
| 34 | if( window.sc_show_insert ){ |
| 35 | var sc_val = document.getElementById('shortcoder_box_' + props.instanceId).value; |
| 36 | window.sc_show_insert( sc_val, props.instanceId ); |
| 37 | } |
| 38 | } |
| 39 | }, 'Select shortcode') |
| 40 | ); |
| 41 | |
| 42 | } |
| 43 | |
| 44 | function icon() { |
| 45 | return el('svg', { |
| 46 | width: 64, |
| 47 | height: 64, |
| 48 | viewBox: '0 0 16.933 16.933' |
| 49 | }, el('g', { |
| 50 | fill: '#00aee9', |
| 51 | transform: 'translate(-22.213 -238.799) scale(.93445)' |
| 52 | }, el('path', { |
| 53 | d: 'M24.549 257.815a.493.493 0 00-.495.494v12.602c0 .274.22.495.495.495h3.541c.274 0 .494-.22.494-.495v-.993a.493.493 0 00-.494-.494h-2.054v-9.627h2.054c.274 0 .494-.22.494-.494v-.994a.493.493 0 00-.494-.494H24.55z' |
| 54 | }), el('rect', { |
| 55 | ry: 0.515, |
| 56 | transform: 'matrix(1 0 -.2671 .96367 0 0)', |
| 57 | y: 265.478, |
| 58 | x: 104.75, |
| 59 | height: 18.217, |
| 60 | width: 2.464 |
| 61 | }), el('path', { |
| 62 | d: 'M37.573 257.815a.493.493 0 00-.494.494v.994c0 .273.22.494.494.494h2.054v9.627h-2.054a.493.493 0 00-.494.494v.993c0 .274.22.495.494.495h3.542c.274 0 .494-.22.494-.495V258.31a.493.493 0 00-.494-.494h-3.542z' |
| 63 | }))); |
| 64 | } |
| 65 | |
| 66 | blocks.registerBlockType( 'shortcoder/shortcoder', { |
| 67 | title: 'Shortcoder', |
| 68 | icon: icon, |
| 69 | category: 'widgets', |
| 70 | attributes: { |
| 71 | text: { |
| 72 | type: 'string', |
| 73 | source: 'text' |
| 74 | }, |
| 75 | }, |
| 76 | supports: { |
| 77 | html: false, |
| 78 | customClassName: false, |
| 79 | className: false |
| 80 | }, |
| 81 | edit: wp.compose.withInstanceId( shortcoderBlock ), |
| 82 | save: function(props) { |
| 83 | return el( element.RawHTML, {}, props.attributes.text); |
| 84 | }, |
| 85 | }); |
| 86 | }( |
| 87 | window.wp.blocks, |
| 88 | window.wp.element |
| 89 | )); |