| 1 |
/* ==================================================== |
| 2 |
Services Showcase Block — editor (index.js) |
| 3 |
Block: blockenberg/services-showcase |
| 4 |
==================================================== */ |
| 5 |
( function () { |
| 6 |
var el = wp.element.createElement; |
| 7 |
var Fragment = wp.element.Fragment; |
| 8 |
var useState = wp.element.useState; |
| 9 |
var RichText = wp.blockEditor.RichText; |
| 10 |
var MediaUpload = wp.blockEditor.MediaUpload; |
| 11 |
var MediaUploadCheck = wp.blockEditor.MediaUploadCheck; |
| 12 |
var registerBlockType = wp.blocks.registerBlockType; |
| 13 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 14 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 15 |
var PanelBody = wp.components.PanelBody; |
| 16 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 17 |
var RangeControl = wp.components.RangeControl; |
| 18 |
var SelectControl = wp.components.SelectControl; |
| 19 |
var ToggleControl = wp.components.ToggleControl; |
| 20 |
var TextControl = wp.components.TextControl; |
| 21 |
var Button = wp.components.Button; |
| 22 |
var ColorPicker = wp.components.ColorPicker; |
| 23 |
var Popover = wp.components.Popover; |
| 24 |
var __ = wp.i18n.__; |
| 25 |
|
| 26 |
function uid() { return 's' + Math.random().toString(36).slice(2,7); } |
| 27 |
function move(arr, from, to) { var a=arr.slice(); a.splice(to,0,a.splice(from,1)[0]); return a; } |
| 28 |
|
| 29 |
var _tc, _tv; |
| 30 |
function getTC() { return _tc || (_tc = window.bkbgTypographyControl); } |
| 31 |
function getTV() { return _tv || (_tv = window.bkbgTypoCssVars); } |
| 32 |
var IP = function () { return window.bkbgIconPicker; }; |
| 33 |
|
| 34 |
function buildWrapStyle(a) { |
| 35 |
return { |
| 36 |
'--bkbg-sshw-cols': a.columns, |
| 37 |
'--bkbg-sshw-gap': a.gap + 'px', |
| 38 |
'--bkbg-sshw-r': a.cardRadius + 'px', |
| 39 |
'--bkbg-sshw-pad': a.cardPadding + 'px', |
| 40 |
'--bkbg-sshw-icon-sz': a.iconSize + 'px', |
| 41 |
'--bkbg-sshw-icon-bg-sz': a.iconBgSize + 'px', |
| 42 |
'--bkbg-sshw-pt': a.paddingTop + 'px', |
| 43 |
'--bkbg-sshw-pb': a.paddingBottom + 'px', |
| 44 |
'--bkbg-sshw-h-gap': a.headerGap + 'px', |
| 45 |
'--bkbg-sshw-title-sz': a.titleSize + 'px', |
| 46 |
'--bkbg-sshw-desc-sz': a.descSize + 'px', |
| 47 |
'--bkbg-sshw-feat-sz': a.featureSize + 'px', |
| 48 |
'--bkbg-sshw-card-bg': a.cardBg, |
| 49 |
'--bkbg-sshw-card-brd': a.cardBorderColor, |
| 50 |
'--bkbg-sshw-icon-bg': a.iconBg, |
| 51 |
'--bkbg-sshw-icon-color': a.iconColor, |
| 52 |
'--bkbg-sshw-title-color': a.titleColor, |
| 53 |
'--bkbg-sshw-desc-color': a.descColor, |
| 54 |
'--bkbg-sshw-feat-color': a.featureColor, |
| 55 |
'--bkbg-sshw-feat-chk': a.featureCheckColor, |
| 56 |
'--bkbg-sshw-cta-color': a.ctaColor, |
| 57 |
'--bkbg-sshw-eyebrow-bg': a.eyebrowBg, |
| 58 |
'--bkbg-sshw-eyebrow-color': a.eyebrowColor, |
| 59 |
'--bkbg-sshw-title2-color': a.sectionTitleColor, |
| 60 |
'--bkbg-sshw-sub-color': a.sectionSubColor, |
| 61 |
background: a.sectionBg || undefined, |
| 62 |
}; |
| 63 |
} |
| 64 |
|
| 65 |
/* ── Service card preview (editor) ── */ |
| 66 |
function ServiceCard(props) { |
| 67 |
var svc = props.svc; |
| 68 |
var a = props.a; |
| 69 |
var idx = props.idx; |
| 70 |
var total = props.total; |
| 71 |
var onChange = props.onChange; |
| 72 |
|
| 73 |
var badge = a.showBadges && svc.showBadge && svc.badgeLabel |
| 74 |
? el('span', { className:'bkbg-sshw-badge' }, svc.badgeLabel) |
| 75 |
: null; |
| 76 |
|
| 77 |
var iconEl = a.showImages && svc.imageUrl |
| 78 |
? el('div', { className:'bkbg-sshw-card-image' }, |
| 79 |
el('img', { src:svc.imageUrl, alt:svc.title }) |
| 80 |
) |
| 81 |
: el('div', { className:'bkbg-sshw-icon-wrap', style:{ background:svc.accentColor+'22' } }, |
| 82 |
el('span', { className:'bkbg-sshw-icon', style:{ color:svc.accentColor } }, (svc.iconType || 'custom-char') !== 'custom-char' ? IP().buildEditorIcon(svc.iconType, svc.icon, svc.iconDashicon, svc.iconImageUrl, svc.iconDashiconColor) : svc.icon) |
| 83 |
); |
| 84 |
|
| 85 |
var featureList = a.showFeatures && svc.features && svc.features.length > 0 |
| 86 |
? el('ul', { className:'bkbg-sshw-features' }, |
| 87 |
svc.features.map(function(f, fi) { |
| 88 |
return el('li', { key:fi, className:'bkbg-sshw-feature-item' }, |
| 89 |
el('span', { className:'bkbg-sshw-feat-check', style:{ color:svc.accentColor } }, (a.featureIconType || 'custom-char') !== 'custom-char' ? IP().buildEditorIcon(a.featureIconType, a.featureIcon, a.featureIconDashicon, a.featureIconImageUrl, a.featureIconDashiconColor) : a.featureIcon), |
| 90 |
f |
| 91 |
); |
| 92 |
}) |
| 93 |
) |
| 94 |
: null; |
| 95 |
|
| 96 |
var ctaEl = a.showCta && svc.ctaLabel |
| 97 |
? el('a', { href:svc.ctaUrl||'#', className:'bkbg-sshw-cta bkbg-sshw-cta--'+(a.ctaStyle), style:{ color:svc.accentColor }, onClick:function(e){ e.preventDefault(); } }, |
| 98 |
svc.ctaLabel, |
| 99 |
a.ctaStyle === 'link-arrow' ? el('span', { className:'bkbg-sshw-cta-arrow' }, ' →') : null |
| 100 |
) |
| 101 |
: null; |
| 102 |
|
| 103 |
var accentTopBar = el('div', { className:'bkbg-sshw-accent-bar', style:{ background:svc.accentColor } }); |
| 104 |
|
| 105 |
return el('div', { className:'bkbg-sshw-card bkbg-sshw-card--' + a.cardStyle }, |
| 106 |
a.cardStyle === 'accent-top' ? accentTopBar : null, |
| 107 |
badge, |
| 108 |
iconEl, |
| 109 |
el('h3', { className:'bkbg-sshw-card-title' }, svc.title), |
| 110 |
el('p', { className:'bkbg-sshw-card-desc' }, svc.description), |
| 111 |
featureList, |
| 112 |
ctaEl |
| 113 |
); |
| 114 |
} |
| 115 |
|
| 116 |
var BkbgColorSwatch = function (props) { |
| 117 |
var _st = useState(false); var isOpen = _st[0]; var setOpen = _st[1]; |
| 118 |
return el(Fragment, {}, |
| 119 |
el('div', { style: { display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' } }, |
| 120 |
el('span', { style: { fontSize: '11px', fontWeight: 500, textTransform: 'uppercase', color: '#1e1e1e' } }, props.label), |
| 121 |
el('button', { |
| 122 |
type: 'button', |
| 123 |
onClick: function () { setOpen(!isOpen); }, |
| 124 |
style: { width: '28px', height: '28px', borderRadius: '4px', border: '1px solid #ccc', background: props.value || '#ffffff', cursor: 'pointer', padding: 0 } |
| 125 |
}) |
| 126 |
), |
| 127 |
isOpen && el(Popover, { onClose: function () { setOpen(false); } }, |
| 128 |
el('div', { style: { padding: '8px' } }, |
| 129 |
el(ColorPicker, { color: props.value, onChangeComplete: function (c) { props.onChange(c.hex); }, enableAlpha: true }) |
| 130 |
) |
| 131 |
) |
| 132 |
); |
| 133 |
}; |
| 134 |
|
| 135 |
/* ── REGISTER ── */ |
| 136 |
registerBlockType('blockenberg/services-showcase', { |
| 137 |
edit: function (props) { |
| 138 |
var a = props.attributes; |
| 139 |
var setAttr = props.setAttributes; |
| 140 |
var services = a.services; |
| 141 |
|
| 142 |
var _act = useState(null); |
| 143 |
var activeId = _act[0]; var setActiveId = _act[1]; |
| 144 |
|
| 145 |
function updateSvc(id, patch) { |
| 146 |
setAttr({ services: services.map(function(s){ return s.id===id ? Object.assign({},s,patch) : s; }) }); |
| 147 |
} |
| 148 |
function updateSvcFeature(id, fi, val) { |
| 149 |
var svc = services.find(function(s){ return s.id===id; }); |
| 150 |
if (!svc) return; |
| 151 |
var feats = svc.features.slice(); |
| 152 |
feats[fi] = val; |
| 153 |
updateSvc(id, { features: feats }); |
| 154 |
} |
| 155 |
function addFeature(id) { |
| 156 |
var svc = services.find(function(s){ return s.id===id; }); |
| 157 |
if (!svc) return; |
| 158 |
updateSvc(id, { features: svc.features.concat(['']) }); |
| 159 |
} |
| 160 |
function removeFeature(id, fi) { |
| 161 |
var svc = services.find(function(s){ return s.id===id; }); |
| 162 |
if (!svc) return; |
| 163 |
updateSvc(id, { features: svc.features.filter(function(_,i){ return i!==fi; }) }); |
| 164 |
} |
| 165 |
|
| 166 |
var blockProps = useBlockProps((function () { |
| 167 |
var _tv = getTV(); |
| 168 |
var s = buildWrapStyle(a); |
| 169 |
Object.assign(s, _tv(a.sectionTitleTypo, '--bkshw-stt-')); |
| 170 |
Object.assign(s, _tv(a.cardTitleTypo, '--bkshw-ctt-')); |
| 171 |
Object.assign(s, _tv(a.cardDescTypo, '--bkshw-cdt-')); |
| 172 |
return { |
| 173 |
className: 'bkbg-sshw-wrap bkbg-sshw-style--' + a.cardStyle, |
| 174 |
style: s |
| 175 |
}; |
| 176 |
})()); |
| 177 |
|
| 178 |
/* Service row in inspector */ |
| 179 |
function svcRow(svc, idx) { |
| 180 |
var isActive = activeId === svc.id; |
| 181 |
return el('div', { key:svc.id }, |
| 182 |
el('div', { |
| 183 |
style:{ display:'flex', alignItems:'center', gap:'6px', background: isActive?'#f3f0ff':'#f8f9fa', border: isActive?'1px solid #6c3fb5':'1px solid #e2e8f0', borderRadius:'6px', padding:'6px 8px', marginBottom:'4px', cursor:'pointer' }, |
| 184 |
onClick: function(){ setActiveId(isActive ? null : svc.id); } |
| 185 |
}, |
| 186 |
el('span', { style:{ fontSize:'18px', marginRight:'4px' } }, (svc.iconType || 'custom-char') !== 'custom-char' ? IP().buildEditorIcon(svc.iconType, svc.icon, svc.iconDashicon, svc.iconImageUrl, svc.iconDashiconColor) : svc.icon), |
| 187 |
el('span', { style:{ flex:1, fontSize:'13px', fontWeight:500 } }, svc.title || '(untitled)'), |
| 188 |
el(Button, { icon:'arrow-up', isSmall:true, disabled:idx===0, onClick:function(e){ e.stopPropagation(); setAttr({services:move(services,idx,idx-1)}); } }), |
| 189 |
el(Button, { icon:'arrow-down', isSmall:true, disabled:idx===services.length-1, onClick:function(e){ e.stopPropagation(); setAttr({services:move(services,idx,idx+1)}); } }), |
| 190 |
el(Button, { icon:'no-alt', isSmall:true, isDestructive:true, onClick:function(e){ e.stopPropagation(); setAttr({services:services.filter(function(_,i){ return i!==idx; })}); if(activeId===svc.id) setActiveId(null); } }) |
| 191 |
), |
| 192 |
isActive ? el('div', { style:{ padding:'10px', background:'#faf8ff', border:'1px solid #6c3fb5', borderTop:'none', borderRadius:'0 0 6px 6px', marginBottom:'4px' } }, |
| 193 |
el(IP().IconPickerControl, IP().iconPickerProps(svc, function (patch) { updateSvc(svc.id, patch); }, { label: __('Icon', 'blockenberg'), charAttr: 'icon', typeAttr: 'iconType', dashiconAttr: 'iconDashicon', imageUrlAttr: 'iconImageUrl' })), |
| 194 |
el(TextControl, { label:__('Title','blockenberg'), value:svc.title, onChange:function(v){ updateSvc(svc.id,{title:v}); } }), |
| 195 |
el(TextControl, { label:__('Description','blockenberg'), value:svc.description, onChange:function(v){ updateSvc(svc.id,{description:v}); } }), |
| 196 |
el(BkbgColorSwatch, { label:__('Accent color','blockenberg'), value:svc.accentColor, onChange:function(v){ updateSvc(svc.id,{accentColor:v}); } }), |
| 197 |
/* Badge */ |
| 198 |
el(ToggleControl, { label:__('Show badge','blockenberg'), checked:svc.showBadge, onChange:function(v){ updateSvc(svc.id,{showBadge:v}); } }), |
| 199 |
svc.showBadge ? el(TextControl, { label:__('Badge label','blockenberg'), value:svc.badgeLabel, onChange:function(v){ updateSvc(svc.id,{badgeLabel:v}); } }) : null, |
| 200 |
/* CTA */ |
| 201 |
el(TextControl, { label:__('CTA label','blockenberg'), value:svc.ctaLabel, onChange:function(v){ updateSvc(svc.id,{ctaLabel:v}); } }), |
| 202 |
el(TextControl, { label:__('CTA URL','blockenberg'), value:svc.ctaUrl, onChange:function(v){ updateSvc(svc.id,{ctaUrl:v}); } }), |
| 203 |
/* Image */ |
| 204 |
el('p', { style:{ fontWeight:600, fontSize:'12px', textTransform:'uppercase', letterSpacing:'.06em', marginBottom:'6px' } }, __('Card image','blockenberg')), |
| 205 |
el(MediaUploadCheck, null, |
| 206 |
el(MediaUpload, { |
| 207 |
onSelect:function(m){ updateSvc(svc.id,{imageUrl:m.url,imageId:m.id,useImage:true}); }, |
| 208 |
allowedTypes:['image'], value:svc.imageId, |
| 209 |
render:function(o){ return el(Button, { onClick:o.open, variant:'secondary', isSmall:true }, svc.imageUrl ? __('Change image','blockenberg') : __('Upload image','blockenberg')); } |
| 210 |
}) |
| 211 |
), |
| 212 |
svc.imageUrl ? el(Button, { isDestructive:true, variant:'tertiary', isSmall:true, style:{marginTop:'4px'}, onClick:function(){ updateSvc(svc.id,{imageUrl:'',imageId:0,useImage:false}); } }, __('Remove image','blockenberg')) : null, |
| 213 |
/* Features */ |
| 214 |
el('p', { style:{ fontWeight:600, fontSize:'12px', textTransform:'uppercase', letterSpacing:'.06em', margin:'12px 0 6px' } }, __('Feature list','blockenberg')), |
| 215 |
svc.features.map(function(f, fi) { |
| 216 |
return el('div', { key:fi, style:{ display:'flex', gap:'4px', marginBottom:'4px' } }, |
| 217 |
el(TextControl, { value:f, onChange:function(v){ updateSvcFeature(svc.id,fi,v); }, style:{ flex:1 } }), |
| 218 |
el(Button, { icon:'no-alt', isSmall:true, isDestructive:true, onClick:function(){ removeFeature(svc.id,fi); } }) |
| 219 |
); |
| 220 |
}), |
| 221 |
el(Button, { variant:'secondary', isSmall:true, style:{ width:'100%' }, onClick:function(){ addFeature(svc.id); } }, __('+ Add feature','blockenberg')) |
| 222 |
) : null |
| 223 |
); |
| 224 |
} |
| 225 |
|
| 226 |
var inspector = el(InspectorControls, null, |
| 227 |
/* Services items */ |
| 228 |
el(PanelBody, { title:__('Services','blockenberg'), initialOpen:true }, |
| 229 |
services.map(function(svc, idx) { return svcRow(svc, idx); }), |
| 230 |
el(Button, { variant:'primary', style:{ marginTop:'8px', width:'100%' }, |
| 231 |
onClick:function(){ |
| 232 |
var n = { id:uid(), icon:'🔧', iconType:'custom-char', iconDashicon:'', iconImageUrl:'', imageUrl:'', imageId:0, useImage:false, title:'New Service', description:'Describe your service here.', features:['Feature one','Feature two'], ctaLabel:'Learn more', ctaUrl:'#', badgeLabel:'', showBadge:false, accentColor:'#6c3fb5' }; |
| 233 |
setAttr({ services: services.concat([n]) }); |
| 234 |
setActiveId(n.id); |
| 235 |
} |
| 236 |
}, __('+ Add Service','blockenberg')) |
| 237 |
), |
| 238 |
|
| 239 |
/* Layout & Style */ |
| 240 |
el(PanelBody, { title:__('Layout & Style','blockenberg'), initialOpen:false }, |
| 241 |
el(SelectControl, { label:__('Card style','blockenberg'), value:a.cardStyle, options:[ |
| 242 |
{label:'Clean (flat)',value:'clean'}, |
| 243 |
{label:'Bordered',value:'bordered'}, |
| 244 |
{label:'Shadowed card',value:'shadow'}, |
| 245 |
{label:'Accent top bar',value:'accent-top'}, |
| 246 |
{label:'Gradient bg',value:'gradient'}, |
| 247 |
], onChange:function(v){ setAttr({cardStyle:v}); } }), |
| 248 |
el(SelectControl, { label:__('CTA style','blockenberg'), value:a.ctaStyle, options:[ |
| 249 |
{label:'Link with arrow →',value:'link-arrow'}, |
| 250 |
{label:'Solid button',value:'btn-solid'}, |
| 251 |
{label:'Outline button',value:'btn-outline'}, |
| 252 |
], onChange:function(v){ setAttr({ctaStyle:v}); } }), |
| 253 |
el(SelectControl, { label:__('Header alignment','blockenberg'), value:a.headerAlign, options:[ |
| 254 |
{label:'Left',value:'left'},{label:'Center',value:'center'},{label:'Right',value:'right'} |
| 255 |
], onChange:function(v){ setAttr({headerAlign:v}); } }), |
| 256 |
el(RangeControl, { label:__('Columns','blockenberg'), value:a.columns, min:1, max:4, onChange:function(v){ setAttr({columns:v}); } }), |
| 257 |
el(RangeControl, { label:__('Gap (px)','blockenberg'), value:a.gap, min:8, max:80, onChange:function(v){ setAttr({gap:v}); } }), |
| 258 |
el(RangeControl, { label:__('Card radius (px)','blockenberg'), value:a.cardRadius, min:0, max:32, onChange:function(v){ setAttr({cardRadius:v}); } }), |
| 259 |
el(RangeControl, { label:__('Card padding (px)','blockenberg'), value:a.cardPadding, min:12, max:60, onChange:function(v){ setAttr({cardPadding:v}); } }), |
| 260 |
el(RangeControl, { label:__('Icon size (px)','blockenberg'), value:a.iconSize, min:20, max:64, onChange:function(v){ setAttr({iconSize:v}); } }), |
| 261 |
el(RangeControl, { label:__('Icon bg size (px)','blockenberg'), value:a.iconBgSize, min:40, max:120, onChange:function(v){ setAttr({iconBgSize:v}); } }) |
| 262 |
), |
| 263 |
|
| 264 |
/* Section header */ |
| 265 |
el(PanelBody, { title:__('Section Header','blockenberg'), initialOpen:false }, |
| 266 |
el(ToggleControl, { label:__('Show section header','blockenberg'), checked:a.showSectionHeader, onChange:function(v){ setAttr({showSectionHeader:v}); } }), |
| 267 |
el(ToggleControl, { label:__('Show eyebrow label','blockenberg'), checked:a.showEyebrow, onChange:function(v){ setAttr({showEyebrow:v}); } }), |
| 268 |
el(TextControl, { label:__('Eyebrow text','blockenberg'), value:a.eyebrowLabel, onChange:function(v){ setAttr({eyebrowLabel:v}); } }), |
| 269 |
el('p', { style:{ fontSize:'12px', color:'#6b7280', marginTop:'8px' } }, __('Edit title & subtitle in the block preview.','blockenberg')) |
| 270 |
), |
| 271 |
|
| 272 |
/* Toggles */ |
| 273 |
el(PanelBody, { title:__('Content Toggles','blockenberg'), initialOpen:false }, |
| 274 |
el(ToggleControl, { label:__('Show feature list','blockenberg'), checked:a.showFeatures, onChange:function(v){ setAttr({showFeatures:v}); } }), |
| 275 |
el(ToggleControl, { label:__('Show CTA links','blockenberg'), checked:a.showCta, onChange:function(v){ setAttr({showCta:v}); } }), |
| 276 |
el(ToggleControl, { label:__('Show badges','blockenberg'), checked:a.showBadges, onChange:function(v){ setAttr({showBadges:v}); } }), |
| 277 |
el(ToggleControl, { label:__('Show card images (if uploaded)','blockenberg'), checked:a.showImages, onChange:function(v){ setAttr({showImages:v}); } }), |
| 278 |
el(IP().IconPickerControl, IP().iconPickerProps(a, setAttr, { charAttr: 'featureIcon', typeAttr: 'featureIconType', dashiconAttr: 'featureIconDashicon', imageUrlAttr: 'featureIconImageUrl', colorAttr: 'featureIconDashiconColor' })) |
| 279 |
), |
| 280 |
|
| 281 |
/* Typography */ |
| 282 |
el(PanelBody, { title:__('Typography','blockenberg'), initialOpen:false }, |
| 283 |
el(getTC(), { label: __('Section Title', 'blockenberg'), value: a.sectionTitleTypo, onChange: function (v) { setAttr({ sectionTitleTypo: v }); } }), |
| 284 |
el(getTC(), { label: __('Card Title', 'blockenberg'), value: a.cardTitleTypo, onChange: function (v) { setAttr({ cardTitleTypo: v }); } }), |
| 285 |
el(getTC(), { label: __('Card Description', 'blockenberg'), value: a.cardDescTypo, onChange: function (v) { setAttr({ cardDescTypo: v }); } }), |
| 286 |
el(RangeControl, { label:__('Feature size (px)','blockenberg'), value:a.featureSize, min:11, max:20, onChange:function(v){ setAttr({featureSize:v}); } }), |
| 287 |
el(RangeControl, { label:__('Feature weight','blockenberg'), value:a.featureFontWeight, min:300, max:900, step:100, onChange:function(v){ setAttr({featureFontWeight:v}); } }) |
| 288 |
), |
| 289 |
|
| 290 |
/* Spacing */ |
| 291 |
el(PanelBody, { title:__('Spacing','blockenberg'), initialOpen:false }, |
| 292 |
el(RangeControl, { label:__('Padding top (px)','blockenberg'), value:a.paddingTop, min:0, max:160, onChange:function(v){ setAttr({paddingTop:v}); } }), |
| 293 |
el(RangeControl, { label:__('Padding bottom (px)','blockenberg'), value:a.paddingBottom, min:0, max:160, onChange:function(v){ setAttr({paddingBottom:v}); } }), |
| 294 |
el(RangeControl, { label:__('Header gap (px)','blockenberg'), value:a.headerGap, min:0, max:80, onChange:function(v){ setAttr({headerGap:v}); } }) |
| 295 |
), |
| 296 |
|
| 297 |
/* Colors */ |
| 298 |
el(PanelColorSettings, { title:__('Colors','blockenberg'), initialOpen:false, colorSettings:[ |
| 299 |
{label:__('Section bg','blockenberg'), value:a.sectionBg, onChange:function(v){ setAttr({sectionBg:v||''}); }}, |
| 300 |
{label:__('Card bg','blockenberg'), value:a.cardBg, onChange:function(v){ setAttr({cardBg:v||''}); }}, |
| 301 |
{label:__('Card border','blockenberg'), value:a.cardBorderColor, onChange:function(v){ setAttr({cardBorderColor:v||''}); }}, |
| 302 |
{label:__('Icon bg','blockenberg'), value:a.iconBg, onChange:function(v){ setAttr({iconBg:v||''}); }}, |
| 303 |
{label:__('Icon color','blockenberg'), value:a.iconColor, onChange:function(v){ setAttr({iconColor:v||''}); }}, |
| 304 |
{label:__('Title color','blockenberg'), value:a.titleColor, onChange:function(v){ setAttr({titleColor:v||''}); }}, |
| 305 |
{label:__('Description color','blockenberg'), value:a.descColor, onChange:function(v){ setAttr({descColor:v||''}); }}, |
| 306 |
{label:__('Feature text','blockenberg'), value:a.featureColor, onChange:function(v){ setAttr({featureColor:v||''}); }}, |
| 307 |
{label:__('Feature check','blockenberg'), value:a.featureCheckColor, onChange:function(v){ setAttr({featureCheckColor:v||''}); }}, |
| 308 |
{label:__('CTA color','blockenberg'), value:a.ctaColor, onChange:function(v){ setAttr({ctaColor:v||''}); }}, |
| 309 |
{label:__('Eyebrow bg','blockenberg'), value:a.eyebrowBg, onChange:function(v){ setAttr({eyebrowBg:v||''}); }}, |
| 310 |
{label:__('Eyebrow text','blockenberg'), value:a.eyebrowColor, onChange:function(v){ setAttr({eyebrowColor:v||''}); }}, |
| 311 |
{label:__('Section title','blockenberg'), value:a.sectionTitleColor, onChange:function(v){ setAttr({sectionTitleColor:v||''}); }}, |
| 312 |
{label:__('Section subtitle','blockenberg'), value:a.sectionSubColor, onChange:function(v){ setAttr({sectionSubColor:v||''}); }}, |
| 313 |
] }) |
| 314 |
); |
| 315 |
|
| 316 |
/* Section header preview */ |
| 317 |
var headerEl = a.showSectionHeader ? el('div', { className:'bkbg-sshw-header', style:{ textAlign:a.headerAlign, marginBottom:a.headerGap+'px' } }, |
| 318 |
a.showEyebrow ? el('div', { className:'bkbg-sshw-eyebrow' }, a.eyebrowLabel) : null, |
| 319 |
el(RichText, { tagName:'h2', className:'bkbg-sshw-section-title', value:a.sectionTitle, onChange:function(v){ setAttr({sectionTitle:v}); }, placeholder:__('Section title…','blockenberg') }), |
| 320 |
el(RichText, { tagName:'p', className:'bkbg-sshw-section-sub', value:a.sectionSubtitle, onChange:function(v){ setAttr({sectionSubtitle:v}); }, placeholder:__('Subtitle…','blockenberg') }) |
| 321 |
) : null; |
| 322 |
|
| 323 |
/* Grid of cards */ |
| 324 |
var grid = el('div', { className:'bkbg-sshw-grid' }, |
| 325 |
services.map(function(svc, idx) { |
| 326 |
return el(ServiceCard, { key:svc.id, svc:svc, a:a, idx:idx, total:services.length }); |
| 327 |
}) |
| 328 |
); |
| 329 |
|
| 330 |
return el(Fragment, null, |
| 331 |
inspector, |
| 332 |
el('div', blockProps, headerEl, grid) |
| 333 |
); |
| 334 |
}, |
| 335 |
|
| 336 |
save: function (props) { |
| 337 |
var a = props.attributes; |
| 338 |
var _tv = window.bkbgTypoCssVars || function () { return {}; }; |
| 339 |
var s = buildWrapStyle(a); |
| 340 |
Object.assign(s, _tv(a.sectionTitleTypo, '--bkshw-stt-')); |
| 341 |
Object.assign(s, _tv(a.cardTitleTypo, '--bkshw-ctt-')); |
| 342 |
Object.assign(s, _tv(a.cardDescTypo, '--bkshw-cdt-')); |
| 343 |
var blockProps = wp.blockEditor.useBlockProps.save({ |
| 344 |
className: 'bkbg-sshw-wrap bkbg-sshw-style--' + a.cardStyle, |
| 345 |
style: s |
| 346 |
}); |
| 347 |
|
| 348 |
var headerEl = a.showSectionHeader ? el('div', { className:'bkbg-sshw-header', style:{ textAlign:a.headerAlign, marginBottom:a.headerGap+'px' } }, |
| 349 |
a.showEyebrow ? el('span', { className:'bkbg-sshw-eyebrow' }, a.eyebrowLabel) : null, |
| 350 |
el(RichText.Content, { tagName:'h2', className:'bkbg-sshw-section-title', value:a.sectionTitle }), |
| 351 |
el(RichText.Content, { tagName:'p', className:'bkbg-sshw-section-sub', value:a.sectionSubtitle }) |
| 352 |
) : null; |
| 353 |
|
| 354 |
var grid = el('div', { className:'bkbg-sshw-grid' }, |
| 355 |
a.services.map(function(svc) { |
| 356 |
var badge = a.showBadges && svc.showBadge && svc.badgeLabel |
| 357 |
? el('span', { className:'bkbg-sshw-badge' }, svc.badgeLabel) |
| 358 |
: null; |
| 359 |
|
| 360 |
var iconEl = a.showImages && svc.imageUrl |
| 361 |
? el('div', { className:'bkbg-sshw-card-image' }, el('img', { src:svc.imageUrl, alt:svc.title, loading:'lazy' })) |
| 362 |
: el('div', { className:'bkbg-sshw-icon-wrap', style:{ background:svc.accentColor+'22' } }, |
| 363 |
el('span', { className:'bkbg-sshw-icon', style:{ color:svc.accentColor } }, (svc.iconType || 'custom-char') !== 'custom-char' ? IP().buildSaveIcon(svc.iconType, svc.icon, svc.iconDashicon, svc.iconImageUrl, svc.iconDashiconColor) : svc.icon) |
| 364 |
); |
| 365 |
|
| 366 |
var featureList = a.showFeatures && svc.features && svc.features.length > 0 |
| 367 |
? el('ul', { className:'bkbg-sshw-features' }, |
| 368 |
svc.features.map(function(f, fi) { |
| 369 |
return el('li', { key:fi, className:'bkbg-sshw-feature-item' }, |
| 370 |
el('span', { className:'bkbg-sshw-feat-check', style:{ color:svc.accentColor } }, (a.featureIconType || 'custom-char') !== 'custom-char' ? IP().buildSaveIcon(a.featureIconType, a.featureIcon, a.featureIconDashicon, a.featureIconImageUrl, a.featureIconDashiconColor) : a.featureIcon), |
| 371 |
f |
| 372 |
); |
| 373 |
}) |
| 374 |
) |
| 375 |
: null; |
| 376 |
|
| 377 |
var ctaEl = a.showCta && svc.ctaLabel |
| 378 |
? el('a', { href:svc.ctaUrl||'#', className:'bkbg-sshw-cta bkbg-sshw-cta--'+a.ctaStyle, style:{ color:svc.accentColor } }, |
| 379 |
svc.ctaLabel, |
| 380 |
a.ctaStyle==='link-arrow' ? el('span', { className:'bkbg-sshw-cta-arrow' }, ' →') : null |
| 381 |
) |
| 382 |
: null; |
| 383 |
|
| 384 |
return el('div', { key:svc.id, className:'bkbg-sshw-card bkbg-sshw-card--'+a.cardStyle }, |
| 385 |
a.cardStyle==='accent-top' ? el('div', { className:'bkbg-sshw-accent-bar', style:{ background:svc.accentColor } }) : null, |
| 386 |
badge, |
| 387 |
iconEl, |
| 388 |
el('h3', { className:'bkbg-sshw-card-title' }, svc.title), |
| 389 |
el('p', { className:'bkbg-sshw-card-desc' }, svc.description), |
| 390 |
featureList, |
| 391 |
ctaEl |
| 392 |
); |
| 393 |
}) |
| 394 |
); |
| 395 |
|
| 396 |
return el('div', blockProps, headerEl, grid); |
| 397 |
}, |
| 398 |
|
| 399 |
deprecated: [{ |
| 400 |
attributes: Object.assign({}, |
| 401 |
{ |
| 402 |
titleSize: { type: 'number', default: 21 }, |
| 403 |
descSize: { type: 'number', default: 15 }, |
| 404 |
featureSize: { type: 'number', default: 14 }, |
| 405 |
titleFontWeight: { type: 'number', default: 500 }, |
| 406 |
featureFontWeight: { type: 'number', default: 600 } |
| 407 |
} |
| 408 |
), |
| 409 |
save: function (props) { |
| 410 |
var a = props.attributes; |
| 411 |
var blockProps = wp.blockEditor.useBlockProps.save({ |
| 412 |
className: 'bkbg-sshw-wrap bkbg-sshw-style--' + a.cardStyle, |
| 413 |
style: buildWrapStyle(a) |
| 414 |
}); |
| 415 |
|
| 416 |
var headerEl = a.showSectionHeader ? el('div', { className:'bkbg-sshw-header', style:{ textAlign:a.headerAlign, marginBottom:a.headerGap+'px' } }, |
| 417 |
a.showEyebrow ? el('span', { className:'bkbg-sshw-eyebrow' }, a.eyebrowLabel) : null, |
| 418 |
el(RichText.Content, { tagName:'h2', className:'bkbg-sshw-section-title', value:a.sectionTitle }), |
| 419 |
el(RichText.Content, { tagName:'p', className:'bkbg-sshw-section-sub', value:a.sectionSubtitle }) |
| 420 |
) : null; |
| 421 |
|
| 422 |
var grid = el('div', { className:'bkbg-sshw-grid' }, |
| 423 |
(a.services || []).map(function(svc) { |
| 424 |
var badge = a.showBadges && svc.showBadge && svc.badgeLabel |
| 425 |
? el('span', { className:'bkbg-sshw-badge' }, svc.badgeLabel) |
| 426 |
: null; |
| 427 |
|
| 428 |
var iconEl = a.showImages && svc.imageUrl |
| 429 |
? el('div', { className:'bkbg-sshw-card-image' }, el('img', { src:svc.imageUrl, alt:svc.title, loading:'lazy' })) |
| 430 |
: el('div', { className:'bkbg-sshw-icon-wrap', style:{ background:svc.accentColor+'22' } }, |
| 431 |
el('span', { className:'bkbg-sshw-icon', style:{ color:svc.accentColor } }, svc.icon) |
| 432 |
); |
| 433 |
|
| 434 |
var featureList = a.showFeatures && svc.features && svc.features.length > 0 |
| 435 |
? el('ul', { className:'bkbg-sshw-features' }, |
| 436 |
svc.features.map(function(f, fi) { |
| 437 |
return el('li', { key:fi, className:'bkbg-sshw-feature-item' }, |
| 438 |
el('span', { className:'bkbg-sshw-feat-check', style:{ color:svc.accentColor } }, (a.featureIconType || 'custom-char') !== 'custom-char' ? IP().buildSaveIcon(a.featureIconType, a.featureIcon, a.featureIconDashicon, a.featureIconImageUrl, a.featureIconDashiconColor) : a.featureIcon), |
| 439 |
f |
| 440 |
); |
| 441 |
}) |
| 442 |
) |
| 443 |
: null; |
| 444 |
|
| 445 |
var ctaEl = a.showCta && svc.ctaLabel |
| 446 |
? el('a', { href:svc.ctaUrl||'#', className:'bkbg-sshw-cta bkbg-sshw-cta--'+a.ctaStyle, style:{ color:svc.accentColor } }, |
| 447 |
svc.ctaLabel, |
| 448 |
a.ctaStyle==='link-arrow' ? el('span', { className:'bkbg-sshw-cta-arrow' }, ' \u2192') : null |
| 449 |
) |
| 450 |
: null; |
| 451 |
|
| 452 |
return el('div', { key:svc.id, className:'bkbg-sshw-card bkbg-sshw-card--'+a.cardStyle }, |
| 453 |
a.cardStyle==='accent-top' ? el('div', { className:'bkbg-sshw-accent-bar', style:{ background:svc.accentColor } }) : null, |
| 454 |
badge, |
| 455 |
iconEl, |
| 456 |
el('h3', { className:'bkbg-sshw-card-title' }, svc.title), |
| 457 |
el('p', { className:'bkbg-sshw-card-desc' }, svc.description), |
| 458 |
featureList, |
| 459 |
ctaEl |
| 460 |
); |
| 461 |
}) |
| 462 |
); |
| 463 |
|
| 464 |
return el('div', blockProps, headerEl, grid); |
| 465 |
} |
| 466 |
}] |
| 467 |
}); |
| 468 |
}() ); |
| 469 |
|
