From 2c82b2e432b06da75b5ea62a2459b222fa23c5be Mon Sep 17 00:00:00 2001 From: Matt Batchelder Date: Sat, 21 Feb 2026 18:55:04 -0500 Subject: [PATCH] Enhance platform-row block with new animation attributes for improved visual effects --- pages/devices.php | 6 +-- pages/home.php | 4 +- theme/blocks/editor.js | 89 +++++++++++++++++++++++++++++++++++------- theme/blocks/index.php | 1 + 4 files changed, 81 insertions(+), 19 deletions(-) diff --git a/pages/devices.php b/pages/devices.php index b515188..e8b6d60 100644 --- a/pages/devices.php +++ b/pages/devices.php @@ -9,11 +9,11 @@ return <<<'ORIBI_SYNC_CONTENT' - + - + - + diff --git a/pages/home.php b/pages/home.php index de49348..324dc37 100644 --- a/pages/home.php +++ b/pages/home.php @@ -13,9 +13,9 @@ return <<<'ORIBI_SYNC_CONTENT' - + - + diff --git a/theme/blocks/editor.js b/theme/blocks/editor.js index 0adffde..a28e9d4 100644 --- a/theme/blocks/editor.js +++ b/theme/blocks/editor.js @@ -1170,29 +1170,80 @@ reg('oribi/platform-row', { parent: ['oribi/platform-section'], supports: { html: false, reusable: false }, attributes: { - heading: { type: 'string', default: '' }, - description: { type: 'string', default: '' }, - btnText: { type: 'string', default: 'Learn More' }, - btnUrl: { type: 'string', default: '' }, - visual: { type: 'string', default: '' }, - reversed: { type: 'boolean', default: false }, - imgId: { type: 'number', default: 0 }, - imgUrl: { type: 'string', default: '' }, - imgAlt: { type: 'string', default: '' }, - imgWidth: { type: 'number', default: 300 }, - cameraAnim: { type: 'boolean', default: false }, - galleryIds: { type: 'array', default: [] }, + heading: { type: 'string', default: '' }, + description: { type: 'string', default: '' }, + btnText: { type: 'string', default: 'Learn More' }, + btnUrl: { type: 'string', default: '' }, + visual: { type: 'string', default: '' }, + reversed: { type: 'boolean', default: false }, + imgId: { type: 'number', default: 0 }, + imgUrl: { type: 'string', default: '' }, + imgAlt: { type: 'string', default: '' }, + imgWidth: { type: 'number', default: 300 }, + isDashboard: { type: 'boolean', default: false }, + deviceAnim: { type: 'boolean', default: false }, + tvStick: { type: 'boolean', default: false }, + cameraAnim: { type: 'boolean', default: false }, + neverGoesDark: { type: 'boolean', default: false }, + brandedAnim: { type: 'boolean', default: false }, + galleryIds: { type: 'array', default: [] }, }, edit: function (props) { var a = props.attributes, s = props.setAttributes; var imgW = a.imgWidth || 300; + + /* ── Animation HTML strings (mirror PHP render, used via dangerouslySetInnerHTML) ── */ + var DA_SCREEN = '
'; + var DA_HTML = ''; + + var TS_MI = '
'; + var TS_COL = '
' + TS_MI + TS_MI + TS_MI + '
'; + var TS_HTML = ''; + + var NGD_ROW = '
'; + var NGD_ROWH = '
'; + var NGD_HTML = ''; + + var BD_SPLASH = '
'; + var BD_HDR = '
'; + var BD_HTML = ''; + + var DB_HTML = '
PerformanceAPICacheDBQueueWorkerRequests/secReadWriteUpdateDeleteTraffic TrendDistribution
'; + return el(Frag, null, el(IC, null, el(PB, { title: 'Row Settings' }, el(TC, { label: 'Visual (emoji)', value: a.visual, onChange: function(v){s({visual:v});} }), el(TC, { label: 'Button URL', value: a.btnUrl, onChange: function(v){s({btnUrl:v});} }), el(TG, { label: 'Reversed', checked: !!a.reversed, onChange: function(v){s({reversed:v});} }), - el(TG, { label: 'Camera Animation', checked: !!a.cameraAnim, onChange: function(v){s({cameraAnim:v});} }) + el(TG, { label: 'Dashboard Animation', checked: !!a.isDashboard, onChange: function(v){s({isDashboard:v});} }), + el(TG, { label: 'Device Animation', checked: !!a.deviceAnim, onChange: function(v){s({deviceAnim:v});} }), + el(TG, { label: 'TV Stick Animation', checked: !!a.tvStick, onChange: function(v){s({tvStick:v});} }), + el(TG, { label: 'Camera Animation', checked: !!a.cameraAnim, onChange: function(v){s({cameraAnim:v});} }), + el(TG, { label: 'Never Goes Dark', checked: !!a.neverGoesDark, onChange: function(v){s({neverGoesDark:v});} }), + el(TG, { label: 'Branded Display', checked: !!a.brandedAnim, onChange: function(v){s({brandedAnim:v});} }) ), el(PB, { title: 'Gallery TV Slideshow', initialOpen: false }, el(MUC, null, @@ -1248,7 +1299,9 @@ reg('oribi/platform-row', { a.btnUrl ? el(RT, { tagName: 'span', className: 'btn btn-outline mt-3', value: a.btnText, onChange: function(v){s({btnText:v});}, placeholder: 'Button...' }) : null ), - a.cameraAnim + a.isDashboard + ? el('div', { className: 'platform-visual has-dashboard', dangerouslySetInnerHTML: { __html: DB_HTML } }) + : a.cameraAnim ? el('div', { className: 'platform-visual has-camera' }, el('div', { className: 'cam-stage', 'aria-hidden': 'true' }, // Photo camera (left) @@ -1308,6 +1361,14 @@ reg('oribi/platform-row', { ) ) ) + : a.deviceAnim + ? el('div', { className: 'platform-visual has-anim', dangerouslySetInnerHTML: { __html: DA_HTML } }) + : a.tvStick + ? el('div', { className: 'platform-visual has-tv-stick', dangerouslySetInnerHTML: { __html: TS_HTML } }) + : a.neverGoesDark + ? el('div', { className: 'platform-visual has-ngd', dangerouslySetInnerHTML: { __html: NGD_HTML } }) + : a.brandedAnim + ? el('div', { className: 'platform-visual has-branded', dangerouslySetInnerHTML: { __html: BD_HTML } }) : a.imgUrl ? el('div', { className: 'platform-visual has-img' }, el('img', { src: a.imgUrl, style: { width: imgW + 'px', maxWidth: '100%', height: 'auto', borderRadius: '4px', objectFit: 'contain', display: 'block', marginInline: 'auto' } }) diff --git a/theme/blocks/index.php b/theme/blocks/index.php index bfcdca8..82c174d 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -553,6 +553,7 @@ add_action( 'init', function () { 'imgUrl' => [ 'type' => 'string', 'default' => '' ], 'imgAlt' => [ 'type' => 'string', 'default' => '' ], 'imgWidth' => [ 'type' => 'number', 'default' => 300 ], + 'isDashboard' => [ 'type' => 'boolean', 'default' => false ], 'deviceAnim' => [ 'type' => 'boolean', 'default' => false ], 'tvStick' => [ 'type' => 'boolean', 'default' => false ], 'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],