diff --git a/pages/features.php b/pages/features.php index 0fd80b8..2e16915 100644 --- a/pages/features.php +++ b/pages/features.php @@ -56,13 +56,13 @@ return <<<'ORIBI_SYNC_CONTENT' - + - + - + - + diff --git a/theme/blocks/editor.js b/theme/blocks/editor.js index e1d03ff..a13b8f2 100644 --- a/theme/blocks/editor.js +++ b/theme/blocks/editor.js @@ -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) diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 4e1fe70..89d2de5 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -388,6 +388,7 @@ add_action('init', function () { 'url' => ['type' => 'string', 'default' => ''], 'centered' => ['type' => 'boolean', 'default' => false], 'scene' => ['type' => 'string', 'default' => ''], + 'cardStyle' => ['type' => 'string', 'default' => ''], ], oribi_card_image_attributes() ), @@ -1209,10 +1210,26 @@ function oribi_render_feature_card($a) $scene = !empty($a['scene']) ? trim($a['scene']) : ''; $img = oribi_card_image_html($a); $img_cls = $img['card_class'] ? ' ' . $img['card_class'] : ''; + $style_cls = ''; + + if (!empty($a['cardStyle'])) { + $allowed_styles = [ + 'bold-statement', + 'minimal-feature', + 'prominent-stat', + 'testimonial', + 'action', + 'comparison-row', + ]; + $style = sanitize_html_class($a['cardStyle']); + if (in_array($style, $allowed_styles, true)) { + $style_cls = ' ' . $style; + } + } ob_start(); if ($img['html'] && $img['position'] === 'left'): ?> -< class="oribi-card"> +< class="oribi-card">

@@ -1221,7 +1238,7 @@ function oribi_render_feature_card($a) > -< class="oribi-card"> +< class="oribi-card">
>
> -< class="oribi-card"> +< class="oribi-card">