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

move devices

Browse Source
This commit is contained in:
Matt Batchelder
2026-05-12 23:13:47 -04:00
parent 088e1bdd06
commit 474fe7dfdc
4 changed files with 247 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
theme/blocks/editor.js
View File

@@ -1007,6 +1007,86 @@
save: function () { return null; }
});
/* ── Device Card ──────────────────────────────────────────────────────── */
reg('oribi/device-card', {
title: 'Device Card',
icon: 'laptop',
category: 'oribi',
parent: ['oribi/device-section'],
supports: { html: false, reusable: false },
attributes: Object.assign({}, {
title: { type: 'string', default: '' },
description: { type: 'string', default: '' },
price: { type: 'string', default: '' },
bestFor: { type: 'string', default: '' },
specs: { type: 'array', default: [], items: { type: 'object' } },
btnText: { type: 'string', default: 'Order Now' },
btnUrl: { type: 'string', default: '/contact' },
}, CARD_IMAGE_ATTRS),
edit: function (props) {
var a = props.attributes, s = props.setAttributes;
var imgPrev = cardImagePreview(a);
function updateSpec(i, field, val) {
var next = (a.specs || []).slice();
next[i] = Object.assign({}, next[i], {});
next[i][field] = val;
s({ specs: next });
}
function addSpec() {
s({ specs: (a.specs || []).concat([{ key: '', value: '' }]) });
}
function removeSpec(i) {
var next = (a.specs || []).slice();
next.splice(i, 1);
s({ specs: next });
}
var specsRows = (a.specs || []).map(function (sp, i) {
return el('div', { key: i, style: { display: 'flex', gap: '8px', marginBottom: '6px' } },
el(TC, { label: 'Key', value: sp.key || '', onChange: function (v) { updateSpec(i, 'key', v); }, style: { flex: 1 } }),
el(TC, { label: 'Value', value: sp.value || '', onChange: function (v) { updateSpec(i, 'value', v); }, style: { flex: 1 } }),
el('button', { onClick: function () { removeSpec(i); }, style: { alignSelf: 'flex-end', marginBottom: '8px' }, className: 'button is-small is-destructive' }, '✕')
);
});
return el(Frag, null,
el(IC, null,
el(PB, { title: 'Card Content' },
el(TC, { label: 'Best For (pill)', value: a.bestFor || '', onChange: function (v) { s({ bestFor: v }); } }),
el(TC, { label: 'Price', value: a.price || '', onChange: function (v) { s({ price: v }); } }),
el(TC, { label: 'Button Text', value: a.btnText || '', onChange: function (v) { s({ btnText: v }); } }),
el(TC, { label: 'Button URL', value: a.btnUrl || '', onChange: function (v) { s({ btnUrl: v }); } })
),
el(PB, { title: 'Specs' },
specsRows,
el('button', { onClick: addSpec, className: 'button is-secondary', style: { marginTop: '4px' } }, '+ Add Spec')
),
cardImageControls(a, s)
),
el('div', { className: 'oribi-card device-card' },
imgPrev,
el('div', { className: 'device-card-body' },
a.bestFor ? el('span', { className: 'device-best-for' }, a.bestFor) : null,
el(RT, { tagName: 'h3', value: a.title, onChange: function (v) { s({ title: v }); }, placeholder: 'Device name...' }),
el(RT, { tagName: 'p', value: a.description, onChange: function (v) { s({ description: v }); }, placeholder: 'Short description...' }),
(a.specs || []).length ? el('dl', { className: 'device-specs' },
(a.specs || []).map(function (sp, i) {
return [
el('dt', { key: 'k' + i }, sp.key || ''),
el('dd', { key: 'v' + i }, sp.value || '')
];
})
) : null,
a.price ? el('div', { className: 'device-price' }, a.price) : null,
el('span', { className: 'wp-block-button__link device-card-btn' }, a.btnText || 'Order Now')
)
)
);
},
save: function () { return null; }
});
/* ── Image Card ───────────────────────────────────────────────────────── */
reg('oribi/image-card', {
title: 'Image Card',
@@ -1586,6 +1666,17 @@
save: function () { return el(IB.Content); }
});
/* DEVICE SECTION ───────────────────────────────────────────────────────── */
reg('oribi/device-section', {
title: 'Oribi Device Section',
icon: 'laptop',
category: 'oribi',
supports: { align: ['full'], html: false },
attributes: SECTION_ATTRS,
edit: createCardSectionEdit(['oribi/device-card'], [['oribi/device-card', {}]], 'Device Card'),
save: function () { return el(IB.Content); }
});
/* IMAGE SECTION ────────────────────────────────────────────────────────── */
reg('oribi/image-section', {
title: 'Oribi Image Section',