| 1 |
( function () { |
| 2 |
var el = wp.element.createElement; |
| 3 |
var useState = wp.element.useState; |
| 4 |
var Fragment = wp.element.Fragment; |
| 5 |
var registerBlockType = wp.blocks.registerBlockType; |
| 6 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 7 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 8 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 9 |
var PanelBody = wp.components.PanelBody; |
| 10 |
var RangeControl = wp.components.RangeControl; |
| 11 |
var TextControl = wp.components.TextControl; |
| 12 |
var ToggleControl = wp.components.ToggleControl; |
| 13 |
var SelectControl = wp.components.SelectControl; |
| 14 |
|
| 15 |
var _tc, _tv; |
| 16 |
function getTypoControl() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 17 |
function getTypoCssVars() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 18 |
|
| 19 |
var MODES = [ |
| 20 |
{ id: 'paragraphs', label: 'Paragraphs' }, |
| 21 |
{ id: 'sentences', label: 'Sentences' }, |
| 22 |
{ id: 'words', label: 'Words' }, |
| 23 |
{ id: 'list', label: 'List' } |
| 24 |
]; |
| 25 |
|
| 26 |
registerBlockType('blockenberg/lorem-ipsum-generator', { |
| 27 |
edit: function (props) { |
| 28 |
var attributes = props.attributes; |
| 29 |
var setAttributes = props.setAttributes; |
| 30 |
var activeMode = useState(attributes.defaultMode || 'paragraphs'); |
| 31 |
var mode = activeMode[0]; var setMode = activeMode[1]; |
| 32 |
|
| 33 |
var blockProps = useBlockProps((function () { |
| 34 |
var _tvFn = getTypoCssVars(); |
| 35 |
var s = { |
| 36 |
background: attributes.sectionBg, |
| 37 |
paddingTop: attributes.paddingTop + 'px', |
| 38 |
paddingBottom: attributes.paddingBottom + 'px' |
| 39 |
}; |
| 40 |
if (_tvFn) { |
| 41 |
Object.assign(s, _tvFn(attributes.titleTypo, '--bkbg-lig-tt-')); |
| 42 |
Object.assign(s, _tvFn(attributes.subtitleTypo, '--bkbg-lig-st-')); |
| 43 |
Object.assign(s, _tvFn(attributes.outputTypo, '--bkbg-lig-out-')); |
| 44 |
} |
| 45 |
return { style: s }; |
| 46 |
})()); |
| 47 |
|
| 48 |
function togCtrl(label, key) { |
| 49 |
return el(ToggleControl, { |
| 50 |
__nextHasNoMarginBottom: true, label: label, checked: attributes[key], |
| 51 |
onChange: function (v) { var o = {}; o[key] = v; setAttributes(o); } |
| 52 |
}); |
| 53 |
} |
| 54 |
function rng(label, key, min, max, step) { |
| 55 |
return el(RangeControl, { |
| 56 |
__nextHasNoMarginBottom: true, label: label, value: attributes[key], min: min, max: max, step: step || 1, |
| 57 |
onChange: function (v) { var o = {}; o[key] = v; setAttributes(o); } |
| 58 |
}); |
| 59 |
} |
| 60 |
|
| 61 |
var colors = [ |
| 62 |
{ label: 'Accent / buttons', value: attributes.accentColor, onChange: function (v) { setAttributes({ accentColor: v }); } }, |
| 63 |
{ label: 'Section BG', value: attributes.sectionBg, onChange: function (v) { setAttributes({ sectionBg: v }); } }, |
| 64 |
{ label: 'Card BG', value: attributes.cardBg, onChange: function (v) { setAttributes({ cardBg: v }); } }, |
| 65 |
{ label: 'Output BG', value: attributes.outputBg, onChange: function (v) { setAttributes({ outputBg: v }); } }, |
| 66 |
{ label: 'Output border', value: attributes.outputBorder, onChange: function (v) { setAttributes({ outputBorder: v }); } }, |
| 67 |
{ label: 'Output text', value: attributes.outputTextColor, onChange: function (v) { setAttributes({ outputTextColor: v }); } }, |
| 68 |
{ label: 'Title', value: attributes.titleColor, onChange: function (v) { setAttributes({ titleColor: v }); } }, |
| 69 |
{ label: 'Subtitle', value: attributes.subtitleColor, onChange: function (v) { setAttributes({ subtitleColor: v }); } }, |
| 70 |
{ label: 'Label', value: attributes.labelColor, onChange: function (v) { setAttributes({ labelColor: v }); } }, |
| 71 |
{ label: 'Tab BG', value: attributes.tabBg, onChange: function (v) { setAttributes({ tabBg: v }); } } |
| 72 |
]; |
| 73 |
|
| 74 |
var accent = attributes.accentColor || '#6c3fb5'; |
| 75 |
var label = { paragraphs: 'paragraphs', sentences: 'sentences', words: 'words', list: 'items' }[mode] || 'paragraphs'; |
| 76 |
|
| 77 |
return el(Fragment, null, |
| 78 |
el(InspectorControls, null, |
| 79 |
el(PanelBody, { title: 'Content', initialOpen: true }, |
| 80 |
togCtrl('Show title', 'showTitle'), |
| 81 |
attributes.showTitle && el(TextControl, { |
| 82 |
__nextHasNoMarginBottom: true, label: 'Title', value: attributes.title, |
| 83 |
onChange: function (v) { setAttributes({ title: v }); } |
| 84 |
}), |
| 85 |
togCtrl('Show subtitle', 'showSubtitle'), |
| 86 |
attributes.showSubtitle && el(TextControl, { |
| 87 |
__nextHasNoMarginBottom: true, label: 'Subtitle', value: attributes.subtitle, |
| 88 |
onChange: function (v) { setAttributes({ subtitle: v }); } |
| 89 |
}), |
| 90 |
el(SelectControl, { |
| 91 |
__nextHasNoMarginBottom: true, label: 'Default mode', |
| 92 |
value: attributes.defaultMode, |
| 93 |
options: MODES, |
| 94 |
onChange: function (v) { setAttributes({ defaultMode: v }); } |
| 95 |
}), |
| 96 |
rng('Default count', 'defaultCount', 1, 20) |
| 97 |
), |
| 98 |
el(PanelBody, { title: 'Options', initialOpen: false }, |
| 99 |
togCtrl('Start with "Lorem ipsum…"', 'startWithLorem'), |
| 100 |
togCtrl('Show HTML toggle', 'showHtmlToggle'), |
| 101 |
togCtrl('Show word/char stats', 'showStats'), |
| 102 |
rng('Output height (px)', 'outputHeight', 120, 600, 10) |
| 103 |
), |
| 104 |
el(PanelColorSettings, { title: 'Colors', initialOpen: false, colorSettings: colors }), |
| 105 |
el(PanelBody, { title: 'Sizing', initialOpen: false }, |
| 106 |
rng('Max width (px)', 'maxWidth', 400, 1400, 10), |
| 107 |
rng('Card radius (px)', 'cardRadius', 0, 32), |
| 108 |
rng('Output radius (px)', 'outputRadius', 0, 24), |
| 109 |
rng('Padding top (px)', 'paddingTop', 0, 160, 4), |
| 110 |
rng('Padding bottom (px)', 'paddingBottom', 0, 160, 4) |
| 111 |
), |
| 112 |
el(PanelBody, { title: 'Typography', initialOpen: false }, |
| 113 |
el(getTypoControl(), { label: 'Title', value: attributes.titleTypo, onChange: function (v) { setAttributes({ titleTypo: v }); } }), |
| 114 |
el(getTypoControl(), { label: 'Subtitle', value: attributes.subtitleTypo, onChange: function (v) { setAttributes({ subtitleTypo: v }); } }), |
| 115 |
el(getTypoControl(), { label: 'Output Text', value: attributes.outputTypo, onChange: function (v) { setAttributes({ outputTypo: v }); } }) |
| 116 |
), |
| 117 |
|
| 118 |
), |
| 119 |
el('div', blockProps, |
| 120 |
el('div', { |
| 121 |
style: { |
| 122 |
background: attributes.cardBg, borderRadius: attributes.cardRadius + 'px', |
| 123 |
maxWidth: attributes.maxWidth + 'px', margin: '0 auto', padding: '36px 32px', |
| 124 |
boxShadow: '0 4px 32px rgba(0,0,0,0.08)' |
| 125 |
} |
| 126 |
}, |
| 127 |
attributes.showTitle && el('div', { |
| 128 |
className: 'bkbg-lig-title', |
| 129 |
style: { color: attributes.titleColor, textAlign: 'center', marginBottom: '6px' } |
| 130 |
}, attributes.title), |
| 131 |
attributes.showSubtitle && el('div', { |
| 132 |
className: 'bkbg-lig-subtitle', |
| 133 |
style: { color: attributes.subtitleColor, textAlign: 'center', marginBottom: '24px' } |
| 134 |
}, attributes.subtitle), |
| 135 |
/* Mode tabs */ |
| 136 |
el('div', { style: { display: 'flex', background: attributes.tabBg, borderRadius: '10px', padding: '4px', marginBottom: '20px', gap: '4px' } }, |
| 137 |
MODES.map(function (m) { |
| 138 |
var active = m.id === mode; |
| 139 |
return el('button', { |
| 140 |
key: m.id, |
| 141 |
onClick: function () { setMode(m.id); }, |
| 142 |
style: { |
| 143 |
flex: '1', padding: '9px', fontSize: '13px', fontWeight: '700', |
| 144 |
background: active ? accent : 'transparent', |
| 145 |
color: active ? '#fff' : '#6b7280', |
| 146 |
border: 'none', borderRadius: '7px', cursor: 'pointer', |
| 147 |
transition: 'all 0.18s' |
| 148 |
} |
| 149 |
}, m.label); |
| 150 |
}) |
| 151 |
), |
| 152 |
/* Count & buttons row */ |
| 153 |
el('div', { style: { display: 'flex', gap: '10px', alignItems: 'center', marginBottom: '16px', flexWrap: 'wrap' } }, |
| 154 |
el('div', { |
| 155 |
style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 14px', background: attributes.tabBg, borderRadius: '8px', fontSize: '14px', fontWeight: '600', color: '#374151' } |
| 156 |
}, attributes.defaultCount + ' ' + label), |
| 157 |
el('div', { style: { display: 'flex', gap: '8px' } }, |
| 158 |
['Generate', '📋 Copy'].map(function (t, i) { |
| 159 |
return el('div', { |
| 160 |
key: t, |
| 161 |
style: { |
| 162 |
padding: '9px 20px', borderRadius: '8px', fontSize: '13px', fontWeight: '700', |
| 163 |
background: i === 0 ? accent : '#f3f4f6', |
| 164 |
color: i === 0 ? '#fff' : '#374151', display: 'inline-block' |
| 165 |
} |
| 166 |
}, t); |
| 167 |
}) |
| 168 |
) |
| 169 |
), |
| 170 |
/* Output preview */ |
| 171 |
el('div', { |
| 172 |
className: 'bkbg-lig-output', |
| 173 |
style: { |
| 174 |
background: attributes.outputBg, border: '1.5px solid ' + attributes.outputBorder, |
| 175 |
borderRadius: attributes.outputRadius + 'px', padding: '16px 18px', |
| 176 |
color: attributes.outputTextColor, height: attributes.outputHeight + 'px', |
| 177 |
overflow: 'hidden' |
| 178 |
} |
| 179 |
}, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat…') |
| 180 |
) |
| 181 |
) |
| 182 |
); |
| 183 |
}, |
| 184 |
|
| 185 |
save: function (props) { |
| 186 |
var a = props.attributes; |
| 187 |
return el('div', wp.blockEditor.useBlockProps.save(), |
| 188 |
el('div', { className: 'bkbg-lig-app', 'data-opts': JSON.stringify(a) }) |
| 189 |
); |
| 190 |
} |
| 191 |
}); |
| 192 |
}() ); |
| 193 |
|
