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

はじめに

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

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

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

lapinweb.com

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

実装手順

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

add_filter('render_block_cocoon-blocks/balloon-ex-box-1', function($block_content, $block) {
  // Blocks AnimationのCSSクラス
  $animations = [
    'sbp-l' => 'slideInLeft delay-500ms',
    'sbp-r' => 'slideInRight delay-500ms',
  ];

  $w = new WP_HTML_Tag_Processor($block_content);

  while ($w->next_tag([
    'tag_name'   => 'div',
    'class_name' => 'speech-wrap',
  ])) {
    $class_attr = $w->get_attribute('class');

    $key = (strpos($class_attr, 'sbp-l') !== false) ? 'sbp-l' : 'sbp-r';

    // にアニメーションを適用
    $w->add_class('animated o-anim-ready ' . $animations[$key]);
  }

  return $w->get_updated_html();
}, 10, 2);

注意点

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

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

さいごに

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