Responsive Spacer Block with the Interactivity API template

[Newton-Adams]

Hey, I've created a Responsive Spacer Block, but my main issue I have now is that it jumps on load. Is there anyone who I can ask to help me please. Here is my repo: https://github.com/Newton-Adams/responsive-spacer-block

[luisherranz]

The problem is not the Interactivity API, but that you're trying to change the element's height using JavaScript and you are causing a layout shift. You should try using CSS instead.

Something like this (not tested, and I'm not a CSS expert by any means):

.responsive-spacer {
  height: var(--mobile-height, var(--tablet-height, var(--desktop-height)));
}

@media (min-width: 769px) {
  .responsive-spacer {
    height: var(--tablet-height, var(--desktop-height));
  }
}

@media (min-width: 1025px) {
  .responsive-spacer {
    height: var(--desktop-height);
  }
}

<?php
$desktop_height = isset($attributes['desktopHeight']) ? $attributes['desktopHeight'] : 0;
$tablet_height  = isset($attributes['tabletHeight']) ? $attributes['tabletHeight'] : null;
$mobile_height  = isset($attributes['mobileHeight']) ? $attributes['mobileHeight'] : null;

$inline_styles = sprintf(
    '--desktop-height: %dpx;%s%s',
    $desktop_height,
    $tablet_height !== null ? " --tablet-height: {$tablet_height}px;" : '',
    $mobile_height !== null ? " --mobile-height: {$mobile_height}px;" : ''
);

$wrapper_attributes = get_block_wrapper_attributes(
  array(
    'class' => 'responsive-spacer',
    'style' => esc_attr($inline_styles),
  )
);
?>

<div <?php echo $wrapper_attributes; ?>></div>

[Newton-Adams]

That's awesome. Thanks so much for the help. I'll remove my issue