| 1 |
const {registerBlockType, createBlock} = wp.blocks; |
| 2 |
const {Fragment} = wp.element; |
| 3 |
const {TextControl, SelectControl} = wp.components; |
| 4 |
const {InspectorControls, PlainText, RichText, InnerBlocks} = wp.editor; |
| 5 |
|
| 6 |
const snippets = window.winp_snippets.data, |
| 7 |
firstSnippet = snippets[Object.keys(snippets)[0]] || '', |
| 8 |
__ = wp.i18n.__; |
| 9 |
|
| 10 |
registerBlockType('wp-plugin-insert-php/winp-snippet', { |
| 11 |
title: __('Woody snippets'), |
| 12 |
description: __('Executes PHP code, uses conditional logic to insert ads, text, media content and external service’s code. Ensures no content duplication.'), |
| 13 |
//icon: 'format-aside', |
| 14 |
icon: <svg |
| 15 |
width="25" |
| 16 |
height="25" |
| 17 |
viewBox="0 0 254 254" |
| 18 |
shapeRendering="geometricPrecision" |
| 19 |
textRendering="geometricPrecision" |
| 20 |
imageRendering="optimizeQuality" |
| 21 |
fillRule="evenodd" |
| 22 |
clipRule="evenodd"> |
| 23 |
<path d="M76 187l44 48 45-49c1-1-12 5-22 5-10-1-23-15-23-15s-3 9-19 13c-11 4-25-2-25-2z"/> |
| 24 |
<ellipse cx={99} cy={134} rx={11} ry={12}/> |
| 25 |
<ellipse cx={143} cy={135} rx={11} ry={12}/> |
| 26 |
<path d="M103 103s-10-12-4-35c6-22 16-29 23-33 8-5-5 16-4 20 2 3 14-25 39-27 25-1 41 21 41 21l-13-1s13 5 18 11 11 15 10 18-5 1-5 1 19 13 20 24c1 10-11-10-39-14-29-4-50 14-45 8s17-16 29-17 27 3 27 3-21-12-19-16c2-5 16-2 16-2s-9-8-20-9c-10-2-19 3-18-1 1-5 10-13 15-12 6 1-12-6-24-2-11 5-19 11-26 25s-9 22-13 20c-3-1-4-17-4-17l-4 35zm-60 35l16-21s3-8-1-12c-5-3-9-1-9-1l-22 28s-3 3-2 6c0 2 2 5 2 5l21 28s7 3 10-2c4-5 2-9 2-9l-17-22z"/> |
| 27 |
<path d="M199 138l-17-21s-3-8 2-12c4-3 9-1 9-1l23 28s3 3 3 6c0 2-3 5-3 5l-22 28s-7 3-11-2-2-9-2-9l18-22z"/> |
| 28 |
</svg>, |
| 29 |
category: 'formatting', |
| 30 |
attributes: { |
| 31 |
id: { |
| 32 |
type: 'int', |
| 33 |
default: '' |
| 34 |
}, |
| 35 |
attrs: { |
| 36 |
type: 'array', |
| 37 |
default: firstSnippet.tags || [] |
| 38 |
}, |
| 39 |
attrValues: { |
| 40 |
type: 'array', |
| 41 |
default: [] |
| 42 |
}, |
| 43 |
}, |
| 44 |
edit(props) { |
| 45 |
|
| 46 |
const {id, attrValues, attrs} = props.attributes; |
| 47 |
|
| 48 |
let defaultProps = {}; |
| 49 |
|
| 50 |
if( id === '' ) { |
| 51 |
defaultProps['id'] = firstSnippet.id || ''; |
| 52 |
} |
| 53 |
|
| 54 |
if( defaultProps !== {} ) { |
| 55 |
props.setAttributes(defaultProps); |
| 56 |
} |
| 57 |
|
| 58 |
let options = [], |
| 59 |
snippedIds = Object.keys(snippets), |
| 60 |
s = 0; |
| 61 |
|
| 62 |
for( ; s < snippedIds.length; s++ ) { |
| 63 |
let currentSnippedId = snippedIds[s]; |
| 64 |
options.push({ |
| 65 |
label: snippets[currentSnippedId].title, |
| 66 |
value: currentSnippedId |
| 67 |
}) |
| 68 |
} |
| 69 |
|
| 70 |
function onSnippetChange(id) { |
| 71 |
props.setAttributes({ |
| 72 |
id: id, |
| 73 |
attrs: snippets[id].tags |
| 74 |
}); |
| 75 |
} |
| 76 |
|
| 77 |
function onAttributeChange(name, value) { |
| 78 |
let outcome = []; |
| 79 |
|
| 80 |
for( let i = 0; i < attrs.length; i++ ) { |
| 81 |
if( attrs[i] === name ) { |
| 82 |
outcome[i] = value; |
| 83 |
} else { |
| 84 |
if( attrValues.hasOwnProperty(i) ) { |
| 85 |
outcome[i] = attrValues[i]; |
| 86 |
} else { |
| 87 |
outcome[i] = ''; |
| 88 |
} |
| 89 |
} |
| 90 |
} |
| 91 |
|
| 92 |
props.setAttributes({attrValues: outcome}); |
| 93 |
} |
| 94 |
|
| 95 |
function prepareTags() { |
| 96 |
let tags = []; |
| 97 |
|
| 98 |
if( attrs ) { |
| 99 |
for( let i = 0; i < attrs.length; i++ ) { |
| 100 |
const name = attrs[i]; |
| 101 |
tags.push(<div className="winp-snippet-gb-content-tag"> |
| 102 |
<TextControl |
| 103 |
label={__('Attribute "') + attrs[i] + '":'} |
| 104 |
className="winp-snippet-gb-tag" |
| 105 |
value={attrValues[i] || ''} |
| 106 |
name={name} |
| 107 |
placeholder={__('Attribute value (variable $' + attrs[i] + ')')} |
| 108 |
onChange={(value) => onAttributeChange(name, value)} |
| 109 |
/> |
| 110 |
</div>); |
| 111 |
} |
| 112 |
} |
| 113 |
|
| 114 |
return tags; |
| 115 |
} |
| 116 |
|
| 117 |
return ([ |
| 118 |
<div className="winp-snippet-gb-container"> |
| 119 |
<div className="winp-snippet-gb-dropdown"> |
| 120 |
<SelectControl |
| 121 |
label={__('Select snippet shortcode:')} |
| 122 |
value={id} |
| 123 |
options={options} |
| 124 |
onChange={onSnippetChange} |
| 125 |
/> |
| 126 |
</div> |
| 127 |
<div className="winp-snippet-gb-content"> |
| 128 |
<InnerBlocks/> |
| 129 |
</div> |
| 130 |
<InspectorControls> |
| 131 |
<div id="winp-snippet-gb-content-tags"> |
| 132 |
{prepareTags()} |
| 133 |
</div> |
| 134 |
</InspectorControls> |
| 135 |
</div> |
| 136 |
|
| 137 |
]); |
| 138 |
}, |
| 139 |
|
| 140 |
save: function(props) { |
| 141 |
return <div> |
| 142 |
<InnerBlocks.Content/> |
| 143 |
</div>; |
| 144 |
} |
| 145 |
}); |
