「画像」ブロックにSWELL風のブラウザ枠を追加する方法

以下の手順で作成します。

1. 「画像」ブロックを配置します。
2. 高度な設定→追加CSSクラスにmy-windowと入力します。

以下のコードをfunctions.phpに追加します。
「画像」ブロックを表示する際、フックを使用してブラウザ枠を追加します。

add_filter('render_block_core/image', function ($block_content, $block, $instance) {
  if (!isset($block['attrs']['className']) || strpos($block['attrs']['className'], 'my-window') === false) {
    return $block_content;
  }

  ob_start();
  ?>
  <div class="window">
    <div class="window__head">
      <div class="window__buttons">
        <div class="window__button" style="--btn-color: #ff0000;"></div>
        <div class="window__button" style="--btn-color: #f5c050;"></div>
        <div class="window__button" style="--btn-color: #00cc00;"></div>
      </div>
    </div>
    <div class="window__body"><?php echo $block_content; ?></div>
  </div>
  <?php
  return ob_get_clean();
}, 10, 3);

以下のコードをstyle.phpに追加します。

.window__body {
  aspect-ratio: 3 / 2;
  overflow-y: scroll;
  position: relative;

  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }

  .my-window {
    margin: 0;
  }
}

.window {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.window__head {
  background-color: #555;
  padding: 10px;
}

.window__buttons {
  display: flex;
  gap: 10px;
}

.window__button {
  background-color: var(--btn-color);
  border-radius: 50%;
  height: 15px;
  width: 15px;
}

.window img {
  width: 100%;
}

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  $('.window img').hover(
    function () {
      // マウスオーバーの場合
      var imgWidth  = $(this).width();
      var imgHeight = $(this).height();
      var wrapHeight = $('.window__body').height();
      $(this).stop(true).animate({'top': -imgHeight + wrapHeight}, imgHeight * 5);
    },
    function () {
      // マウスオーバー以外の場合
      var imgWidth  = $(this).width();
      var imgHeight = $(this).height();
      $(this).stop(true).animate({'top': 0}, imgHeight * 1);
    }
  );
});

前述のコードに以下のコードを追加します。

.window__body {
  overflow: hidden;
}

.window__body img {
  position: absolute;
}