WordPress標準の「タブ」ブロックで変更前・変更後の画像を切り替え表示する方法

以下に手順を示します。

1. WordPress標準の「タブ」ブロックを配置します。
2. それぞれのタブパネルに「画像」ブロックを配置します。1番目のタブパネルには変更前の画像、2番目のタブパネルには変更後の画像を設定します。
3. 「タブ」ブロックに高度な設定→追加CSSクラスにbefore-afterと入力します。

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

.wp-block-tabs.before-after {
  position: relative;

  /* タブリストを画像の上に重ねる */
  > .wp-block-tab-list {
    display: block;
    inset: 0;
    position: absolute;
    z-index: 10;

    /* タブボタンを画像全体に重ねる */
    button {
      height: 100%;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      width: 100%;

      /* 選択されていないタブボタンをクリック可能にする */
      &:not([aria-selected="true"]) {
        pointer-events: auto;
      }
    }
  }

  /* パネルを同じ位置に重ねる */
  > .wp-block-tab-panels {
    display: grid;
    position: relative;
    z-index: 1;

    > .wp-block-tab-panel {
      display: block !important;
      grid-area: 1 / 1;
      transition: opacity 0.2s;

      &[hidden] {
        opacity: 0;
        transition: opacity 0.2s, visibility 0s 0.2s;
        visibility: hidden;
      }
    }
  }

  /* ラベル */
  .wp-block-tab-panel figure {
    margin: 0;
    position: relative;
    width: fit-content;

    &::after {
      background: rgb(0 0 0 / 40%);
      border-radius: 4px;
      bottom: 2%;
      color: #fff;
      font-weight: bold;
      left: 2%;
      padding: 8px;
      position: absolute;
      right: 2%;
      text-align: center;
    }
  }

  .wp-block-tab-panel:first-child figure::after {
    content: "変更前";
  }

  .wp-block-tab-panel:last-child figure::after {
    content: "変更後";
  }
}