「吹き出し」ブロックに一括してアニメーション効果を追加する方法

はじめに

以下の内容をCocoonで再現します。

【SWELL】ふきだしブロックがスライドインするようにカスタマイズする | Lapin.web

ある企業サイトのブログページでふきだしがスライドインしてくるアニメーションが設定されているのを見て、自分のブログにも実装したい！と思ったのでやってみました。 完成したら こんな感じ WordPressテーマのSWELL環境上でなるべく手間と

lapinweb.com

アニメーション効果にはプラグイン「Blocks Animation：CSS Animations for Gutenberg Blocks」を使用します。
個々の「吹き出し」ブロックにアニメーション設定を施すのではなく、一括で設定します。
この記事では、この方法について説明します。

実装手順

以下のコードをfunctions.phpに追加します。
アニメーション効果に応じて、変数$leftおよび$rightの値を調整してください。

add_filter('render_block', function($block_content, $block) {
  // Blocks AnimationのCSSクラス
  $left  = 'slideInLeft delay-500ms';
  $right = 'slideInRight delay-500ms';

  // 吹き出しブロックの場合
  if ($block['blockName'] === 'cocoon-blocks/balloon-ex-box-1') {
    $w = new WP_HTML_Tag_Processor($block_content);

    $w->next_tag([
      'tag_name'   => 'div',
      'class_name' => 'speech-wrap',
    ]);

    // 吹き出し左にアニメーションを適用
    if (strpos($w->get_attribute('class'), 'sbp-l') !== false) {
      $w->add_class('animated o-anim-ready ' . $left);
    }

    // 吹き出し右左アニメーションを適用
    if (strpos($w->get_attribute('class'), 'sbp-r') !== false) {
      $w->add_class('animated o-anim-ready ' . $right);
    }
    return $w->get_updated_html();
  }
  return $block_content;
}, 10, 2);

注意点

図1にWindows 11のアクセシビリティ設定を示します。
プラグインのCSSは以下のように定義されており、「アニメーション効果」がオフの場合、アニメーションは動作しません。

@media (prefers-reduced-motion: reduce) {
  /* アニメーション効果を削除するスタイル */
}

さいごに

今回紹介した方法を使えば、Cocoonの「吹き出し」ブロックにアニメーション効果を一括で適用することができます。
プラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」を使用することで、個別設定の手間を省きながら、動きのあるデザインを簡単に実現できる点が魅力です。