| 1 |
( function () { |
| 2 |
var el = wp.element.createElement; |
| 3 |
var Fragment = wp.element.Fragment; |
| 4 |
var __ = wp.i18n.__; |
| 5 |
var registerBlockType = wp.blocks.registerBlockType; |
| 6 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 7 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 8 |
var RichText = wp.blockEditor.RichText; |
| 9 |
var PanelBody = wp.components.PanelBody; |
| 10 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 11 |
var ToggleControl = wp.components.ToggleControl; |
| 12 |
var RangeControl = wp.components.RangeControl; |
| 13 |
var SelectControl = wp.components.SelectControl; |
| 14 |
var TextControl = wp.components.TextControl; |
| 15 |
|
| 16 |
var _TC, _tv; |
| 17 |
Object.defineProperty(window, '_bkbgCBgetTC', { get: function () { return _TC || (_TC = window.bkbgTypographyControl); } }); |
| 18 |
Object.defineProperty(window, '_bkbgCBgetTV', { get: function () { return _tv || (_tv = window.bkbgTypoCssVars); } }); |
| 19 |
|
| 20 |
var _IP; |
| 21 |
function IP() { return _IP || (_IP = window.bkbgIconPicker); } |
| 22 |
|
| 23 |
var presets = { |
| 24 |
info: { bg: '#eff6ff', border: '#3b82f6', title: '#1d4ed8', text: '#1e3a5f', badge: '#dbeafe', badgeColor: '#1d4ed8', icon: 'ℹ️', badge_default: 'Info' }, |
| 25 |
warning: { bg: '#fffbeb', border: '#f59e0b', title: '#92400e', text: '#78350f', badge: '#fef3c7', badgeColor: '#92400e', icon: '⚠️', badge_default: 'Warning' }, |
| 26 |
success: { bg: '#f0fdf4', border: '#22c55e', title: '#15803d', text: '#14532d', badge: '#dcfce7', badgeColor: '#15803d', icon: '� |
| 27 |
', badge_default: 'Success' }, |
| 28 |
tip: { bg: '#fdf4ff', border: '#a855f7', title: '#7c3aed', text: '#5b21b6', badge: '#f3e8ff', badgeColor: '#7c3aed', icon: '💡', badge_default: 'Tip' }, |
| 29 |
quote: { bg: '#f8fafc', border: '#64748b', title: '#334155', text: '#475569', badge: '#e2e8f0', badgeColor: '#475569', icon: '❝', badge_default: 'Quote' }, |
| 30 |
custom: { bg: '#f9fafb', border: '#d1d5db', title: '#111827', text: '#374151', badge: '#e5e7eb', badgeColor: '#374151', icon: '📌', badge_default: 'Note' } |
| 31 |
}; |
| 32 |
|
| 33 |
function getColor(attr, key, fallback) { |
| 34 |
return attr[key] || fallback; |
| 35 |
} |
| 36 |
|
| 37 |
registerBlockType('blockenberg/content-box', { |
| 38 |
edit: function (props) { |
| 39 |
var attr = props.attributes; |
| 40 |
var setAttr = props.setAttributes; |
| 41 |
var TC = window._bkbgCBgetTC; |
| 42 |
var tv = window._bkbgCBgetTV || function () { return {}; }; |
| 43 |
var blockProps = useBlockProps({ className: 'bkbg-cb-editor' }); |
| 44 |
|
| 45 |
var p = presets[attr.variant] || presets.info; |
| 46 |
|
| 47 |
var bg = getColor(attr, 'bgColor', p.bg); |
| 48 |
var border = getColor(attr, 'borderColor', p.border); |
| 49 |
var titleColor = getColor(attr, 'titleColor', p.title); |
| 50 |
var textColor = getColor(attr, 'textColor', p.text); |
| 51 |
var badgeBg = getColor(attr, 'badgeBg', p.badge); |
| 52 |
var badgeColor = getColor(attr, 'badgeColor', p.badgeColor); |
| 53 |
var iconColor = getColor(attr, 'iconColor', p.border); |
| 54 |
|
| 55 |
var borderStyle = {}; |
| 56 |
if (attr.borderPosition === 'left') borderStyle = { borderLeft: attr.borderWidth + 'px solid ' + border }; |
| 57 |
if (attr.borderPosition === 'top') borderStyle = { borderTop: attr.borderWidth + 'px solid ' + border }; |
| 58 |
if (attr.borderPosition === 'all') borderStyle = { border: attr.borderWidth + 'px solid ' + border }; |
| 59 |
if (attr.borderPosition === 'none') borderStyle = {}; |
| 60 |
|
| 61 |
var wrapStyle = Object.assign({ |
| 62 |
background: bg, |
| 63 |
borderRadius: attr.borderRadius + 'px', |
| 64 |
padding: attr.paddingV + 'px ' + attr.paddingH + 'px', |
| 65 |
display: 'flex', |
| 66 |
gap: '16px', |
| 67 |
alignItems: attr.iconLayout === 'left' ? 'flex-start' : 'flex-start', |
| 68 |
flexDirection: attr.iconLayout === 'top' ? 'column' : 'row', |
| 69 |
maxWidth: attr.maxWidth > 0 ? attr.maxWidth + 'px' : '100%' |
| 70 |
}, borderStyle, tv(attr.typoTitle, '--bkcb-title-'), tv(attr.typoBody, '--bkcb-body-')); |
| 71 |
|
| 72 |
return el(Fragment, null, |
| 73 |
el(InspectorControls, null, |
| 74 |
el(PanelBody, { title: __('Style Variant', 'blockenberg'), initialOpen: true }, |
| 75 |
el(SelectControl, { label: __('Variant', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.variant, |
| 76 |
options: [ |
| 77 |
{ label: '🔵 Info', value: 'info' }, |
| 78 |
{ label: '🟡 Warning', value: 'warning' }, |
| 79 |
{ label: '🟢 Success', value: 'success' }, |
| 80 |
{ label: '🟣 Tip', value: 'tip' }, |
| 81 |
{ label: '⬜ Quote', value: 'quote' }, |
| 82 |
{ label: '⚙️ Custom', value: 'custom' } |
| 83 |
], |
| 84 |
onChange: function (v) { |
| 85 |
var newP = presets[v] || presets.info; |
| 86 |
setAttr({ variant: v, icon: newP.icon, iconType: 'custom-char', badge: newP.badge_default, bgColor: '', borderColor: '', titleColor: '', textColor: '', badgeBg: '', badgeColor: '', iconColor: '' }); |
| 87 |
} |
| 88 |
}) |
| 89 |
), |
| 90 |
el(PanelBody, { title: __('Content', 'blockenberg'), initialOpen: true }, |
| 91 |
el(ToggleControl, { label: __('Show Icon', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showIcon, onChange: function (v) { setAttr({ showIcon: v }); } }), |
| 92 |
attr.showIcon && el('div', { style: { marginTop: '8px' } }, |
| 93 |
el(IP().IconPickerControl, IP().iconPickerProps(attr, setAttr)) |
| 94 |
), |
| 95 |
attr.showIcon && el(SelectControl, { label: __('Icon Position', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.iconLayout, |
| 96 |
options: [{ label: 'Left', value: 'left' }, { label: 'Top', value: 'top' }], |
| 97 |
onChange: function (v) { setAttr({ iconLayout: v }); } }), |
| 98 |
el(ToggleControl, { label: __('Show Badge', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showBadge, onChange: function (v) { setAttr({ showBadge: v }); } }), |
| 99 |
attr.showBadge && el(TextControl, { label: __('Badge Text', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.badge, onChange: function (v) { setAttr({ badge: v }); } }), |
| 100 |
el(ToggleControl, { label: __('Show Title', 'blockenberg'), __nextHasNoMarginBottom: true, checked: attr.showTitle, onChange: function (v) { setAttr({ showTitle: v }); } }) |
| 101 |
), |
| 102 |
el(PanelBody, { title: __('Border & Shape', 'blockenberg'), initialOpen: false }, |
| 103 |
el(SelectControl, { label: __('Border Side', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.borderPosition, |
| 104 |
options: [{ label: 'Left', value: 'left' }, { label: 'Top', value: 'top' }, { label: 'All sides', value: 'all' }, { label: 'None', value: 'none' }], |
| 105 |
onChange: function (v) { setAttr({ borderPosition: v }); } }), |
| 106 |
el(RangeControl, { label: __('Border Width (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.borderWidth, min: 1, max: 12, onChange: function (v) { setAttr({ borderWidth: v }); } }), |
| 107 |
el(RangeControl, { label: __('Border Radius (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.borderRadius, min: 0, max: 32, onChange: function (v) { setAttr({ borderRadius: v }); } }), |
| 108 |
el(RangeControl, { label: __('Padding Top/Bottom (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.paddingV, min: 8, max: 64, onChange: function (v) { setAttr({ paddingV: v }); } }), |
| 109 |
el(RangeControl, { label: __('Padding Left/Right (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.paddingH, min: 8, max: 64, onChange: function (v) { setAttr({ paddingH: v }); } }), |
| 110 |
el(RangeControl, { label: __('Max Width (0 = full)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.maxWidth, min: 0, max: 1200, step: 10, onChange: function (v) { setAttr({ maxWidth: v }); } }) |
| 111 |
), |
| 112 |
el(PanelBody, { title: __('Typography', 'blockenberg'), initialOpen: false }, |
| 113 |
el(RangeControl, { label: __('Icon Size (px)', 'blockenberg'), __nextHasNoMarginBottom: true, value: attr.iconSize, min: 14, max: 60, onChange: function (v) { setAttr({ iconSize: v }); } }), |
| 114 |
TC && el(TC, { label: __('Title', 'blockenberg'), value: attr.typoTitle, onChange: function (v) { setAttr({ typoTitle: v }); } }), |
| 115 |
TC && el(TC, { label: __('Body', 'blockenberg'), value: attr.typoBody, onChange: function (v) { setAttr({ typoBody: v }); } }) |
| 116 |
), |
| 117 |
el(PanelColorSettings, { |
| 118 |
title: __('Custom Colors', 'blockenberg'), initialOpen: false, |
| 119 |
colorSettings: [ |
| 120 |
{ value: attr.bgColor, onChange: function (v) { setAttr({ bgColor: v || '' }); }, label: __('Box Background', 'blockenberg') }, |
| 121 |
{ value: attr.borderColor, onChange: function (v) { setAttr({ borderColor: v || '' }); }, label: __('Border Color', 'blockenberg') }, |
| 122 |
{ value: attr.titleColor, onChange: function (v) { setAttr({ titleColor: v || '' }); }, label: __('Title Color', 'blockenberg') }, |
| 123 |
{ value: attr.textColor, onChange: function (v) { setAttr({ textColor: v || '' }); }, label: __('Body Text Color', 'blockenberg') }, |
| 124 |
{ value: attr.badgeBg, onChange: function (v) { setAttr({ badgeBg: v || '' }); }, label: __('Badge Background', 'blockenberg') }, |
| 125 |
{ value: attr.badgeColor, onChange: function (v) { setAttr({ badgeColor: v || '' }); }, label: __('Badge Text', 'blockenberg') }, |
| 126 |
{ value: attr.iconColor, onChange: function (v) { setAttr({ iconColor: v || '' }); }, label: __('Icon Color', 'blockenberg') } |
| 127 |
] |
| 128 |
}) |
| 129 |
), |
| 130 |
el('div', blockProps, |
| 131 |
el('div', { style: wrapStyle }, |
| 132 |
attr.showIcon && el('div', { style: { fontSize: attr.iconSize + 'px', color: iconColor, lineHeight: 1, flexShrink: 0, marginTop: 2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' } }, |
| 133 |
IP().buildEditorIcon(attr.iconType, attr.icon, attr.iconDashicon, attr.iconImageUrl, { dashiconColor: attr.iconDashiconColor, style: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1, fontSize: 'inherit' } }) |
| 134 |
), |
| 135 |
el('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, flex: 1 } }, |
| 136 |
el('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' } }, |
| 137 |
attr.showBadge && el('span', { style: { background: badgeBg, color: badgeColor, borderRadius: 4, padding: '2px 10px', fontSize: 12, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase' } }, attr.badge), |
| 138 |
attr.showTitle && el(RichText, { tagName: 'strong', className: 'bkbg-cb-title', value: attr.title, onChange: function (v) { setAttr({ title: v }); }, style: { color: titleColor }, placeholder: __('Title…', 'blockenberg') }) |
| 139 |
), |
| 140 |
el(RichText, { tagName: 'div', className: 'bkbg-cb-text', value: attr.body, onChange: function (v) { setAttr({ body: v }); }, style: { color: textColor, margin: 0 }, placeholder: __('Box content…', 'blockenberg') }) |
| 141 |
) |
| 142 |
) |
| 143 |
) |
| 144 |
); |
| 145 |
}, |
| 146 |
save: function (props) { |
| 147 |
var attr = props.attributes; |
| 148 |
return el('div', useBlockProps.save(), |
| 149 |
el('div', { className: 'bkbg-content-box-app', 'data-opts': JSON.stringify(attr) }) |
| 150 |
); |
| 151 |
} |
| 152 |
}); |
| 153 |
}() ); |
| 154 |
|
