OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Add cardStyle attribute to feature cards for enhanced styling options

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-17 21:24:11 -04:00
parent 93b571d6aa
commit 29ae3632f1
3 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
theme/blocks/editor.js
View File

@@ -781,17 +781,19 @@
title: { type: 'string', default: '' },
description: { type: 'string', default: '' },
url: { type: 'string', default: '' },
centered: { type: 'boolean', default: false }
centered: { type: 'boolean', default: false },
cardStyle: { type: 'string', default: '' }
}, CARD_IMAGE_ATTRS),
edit: function (props) {
var a = props.attributes, s = props.setAttributes;
var imgPos = a.imgPosition || 'top';
var imgPrev = cardImagePreview(a);
var centeredStyle = a.centered ? { marginInline: 'auto' } : {};
var styleClass = a.cardStyle ? ' ' + a.cardStyle : '';
var cardPreview;
if (a.imgUrl && imgPos === 'left') {
cardPreview = el('div', { className: 'oribi-card img-left' },
cardPreview = el('div', { className: 'oribi-card img-left' + styleClass },
imgPrev,
el('div', { className: 'oribi-card-body' },
el(RT, { tagName: 'h3', value: a.title, onChange: function (v) { s({ title: v }); }, placeholder: 'Card title...' }),
@@ -799,7 +801,7 @@
)
);
} else if (a.imgUrl && imgPos === 'background') {
cardPreview = el('div', { className: 'oribi-card img-bg', style: { backgroundImage: 'url(' + a.imgUrl + ')', backgroundSize: 'cover', backgroundPosition: 'center', color: '#fff' } },
cardPreview = el('div', { className: 'oribi-card img-bg' + styleClass, style: { backgroundImage: 'url(' + a.imgUrl + ')', backgroundSize: 'cover', backgroundPosition: 'center', color: '#fff' } },
el('div', { className: 'oribi-card-body' },
iconPreview(a, 'feature-icon', centeredStyle),
el(RT, { tagName: 'h3', value: a.title, onChange: function (v) { s({ title: v }); }, placeholder: 'Card title...' }),
@@ -808,7 +810,7 @@
);
} else {
var showIconPrev = !a.imgUrl || imgPos !== 'replace-icon';
cardPreview = el('div', { className: 'oribi-card' + (a.centered ? ' text-center' : '') + (a.imgUrl ? ' img-' + imgPos : '') },
cardPreview = el('div', { className: 'oribi-card' + styleClass + (a.centered ? ' text-center' : '') + (a.imgUrl ? ' img-' + imgPos : '') },
a.imgUrl && (imgPos === 'top' || imgPos === 'replace-icon') ? imgPrev : null,
showIconPrev ? iconPreview(a, 'feature-icon', centeredStyle) : null,
el(RT, { tagName: 'h3', value: a.title, onChange: function (v) { s({ title: v }); }, placeholder: 'Card title...' }),
@@ -821,6 +823,20 @@
el(PB, { title: 'Card Settings' },
iconControls(a, s),
el(TC, { label: 'URL (optional)', value: a.url || '', onChange: function (v) { s({ url: v }); } }),
el(SC, {
label: 'Card Style',
value: a.cardStyle || '',
options: [
{ label: 'Default', value: '' },
{ label: 'Bold Statement', value: 'bold-statement' },
{ label: 'Minimal Feature', value: 'minimal-feature' },
{ label: 'Prominent Stat', value: 'prominent-stat' },
{ label: 'Testimonial', value: 'testimonial' },
{ label: 'Action', value: 'action' },
{ label: 'Comparison Row', value: 'comparison-row' }
],
onChange: function (v) { s({ cardStyle: v }); }
}),
el(TG, { label: 'Centered', checked: !!a.centered, onChange: function (v) { s({ centered: v }); } })
),
cardImageControls(a, s)