Add branded display animation and custom display solutions to platform row

This commit is contained in:
Matt Batchelder
2026-02-21 13:33:53 -05:00
parent bb30f38090
commit 61a7070b0f
3 changed files with 385 additions and 1 deletions

View File

@@ -557,6 +557,7 @@ add_action( 'init', function () {
'tvStick' => [ 'type' => 'boolean', 'default' => false ],
'cameraAnim' => [ 'type' => 'boolean', 'default' => false ],
'neverGoesDark'=> [ 'type' => 'boolean', 'default' => false ],
'brandedAnim' => [ 'type' => 'boolean', 'default' => false ],
],
'supports' => $block_supports,
'render_callback' => 'oribi_render_platform_row',
@@ -1647,6 +1648,75 @@ function oribi_render_platform_row( $a ) {
$visual_html = $ngd;
$visual_cls = 'platform-visual has-ngd';
} elseif ( ! empty( $a['brandedAnim'] ) ) {
/* ── Custom Display Solutions: branded screens cascade animation ── */
$bd = '<div class="bd-stage" aria-hidden="true">';
/* ── Screen 1: Tablet (portrait kiosk) ── */
$bd .= '<div class="bd-device bd-device--tablet">';
$bd .= '<div class="bd-device__body">';
$bd .= '<div class="bd-device__screen">';
$bd .= '<div class="bd-splash">';
$bd .= '<div class="bd-splash__logo"></div>';
$bd .= '</div>';
$bd .= '<div class="bd-ui">';
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
$bd .= '<div class="bd-ui__content">';
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '<span class="bd-device__label">Kiosk</span>';
$bd .= '</div>';
/* ── Screen 2: Wide wall-mount (landscape) ── */
$bd .= '<div class="bd-device bd-device--wall">';
$bd .= '<div class="bd-device__body">';
$bd .= '<div class="bd-device__screen">';
$bd .= '<div class="bd-splash">';
$bd .= '<div class="bd-splash__logo"></div>';
$bd .= '</div>';
$bd .= '<div class="bd-ui">';
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
$bd .= '<div class="bd-ui__content">';
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '<div class="bd-mount"></div>';
$bd .= '<span class="bd-device__label">Wall Display</span>';
$bd .= '</div>';
/* ── Screen 3: Monitor on stand ── */
$bd .= '<div class="bd-device bd-device--monitor">';
$bd .= '<div class="bd-device__body">';
$bd .= '<div class="bd-device__screen">';
$bd .= '<div class="bd-splash">';
$bd .= '<div class="bd-splash__logo"></div>';
$bd .= '</div>';
$bd .= '<div class="bd-ui">';
$bd .= '<div class="bd-ui__header"><div class="bd-ui__logo"></div><div class="bd-ui__brand-bar"></div></div>';
$bd .= '<div class="bd-ui__content">';
$bd .= '<div class="bd-ui__block bd-ui__block--txt"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--txt bd-ui__block--short"></div>';
$bd .= '<div class="bd-ui__block bd-ui__block--img"></div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '</div>';
$bd .= '<div class="bd-stand"><div class="bd-stand__stem"></div><div class="bd-stand__base"></div></div>';
$bd .= '<span class="bd-device__label">Reception</span>';
$bd .= '</div>';
$bd .= '</div>'; /* bd-stage */
$visual_html = $bd;
$visual_cls = 'platform-visual has-branded';
} elseif ( ! empty( $a['cameraAnim'] ) ) {
$ca = '<div class="cam-stage" aria-hidden="true">';