簡単に、図の横に説明文を吹き出しで追加する方法

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

1. 「メディアとテキスト」ブロックを配置します。
2. 「メディアを左に表示」をクリックします。
3. 「モバイルでは縦に並べる」を選択します。
4. 高度な設定→追加CSSクラスにmy-expと入力します。

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

:root {
  --my-border-color: #ccc;
  --my-shadow-color: 0 0 3px rgb(0 0 0 / 20%);
}

.my-exp {
  figure {
    box-shadow: var(--my-shadow-color);
    padding: 4px;
  }

  .wp-block-media-text__content {
    border: 2px solid var(--my-border-color);
    margin: 0 0 0 5px;
    padding: 10px;
    position: relative;

    &::before {
      background-color: #fff;
      border-bottom: 2px solid var(--my-border-color);
      border-left: 2px solid var(--my-border-color);
      content: '';
      display: block;
      height: 14px;
      left: -9px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
      width: 14px;
    }
  }

  /* 画像が右側配置の場合 */
  &.has-media-on-the-right {
    .wp-block-media-text__content {
      margin: 0 5px 0 0;

      &::before {
        left: auto;
        right: -9px;
        transform: translateY(-50%) rotate(-135deg);
      }
    }
  }
}

@media (max-width: 600px) {
  .body .my-exp {
    .wp-block-media-text__content {
      margin: 8px auto 0;

      &::before {
        left: 50%;
        right: auto;
        top: -9px;
        transform: translateX(-50%) rotate(135deg);
      }
    }

    &.has-media-on-the-right .wp-block-media-text__content::before {
      left: 50%;
      right: auto;
      top: -8px;
      transform: translateX(-50%) rotate(135deg);
    }
  }
}