Animations for Blocks

説明

ブロックエディターのブロックに設定パネルを追加し、スクロールでのブロック可視化時にアニメーションを追加できる軽量プラグインです。アニメーションの種類 (フェード、反転、スライド、ズーム)、バリエーション (異なる方向)、遅延、長さなど、より詳細な設定が可能です。オプションを変更すると、エディター内ですぐにアニメーションをプレビューできます。

このプラグインは AOS – Animate on scroll library を使用し、スタイルシート (2.8 kB) とスクリプト (5.2 kB) 、アニメーションを初期化するスクリプト (1.3 kB) をフロントエンドに追加します。

スクリーンショット

  • アニメーションの追加
  • アニメーションの設定

インストール

管理者ダッシュボードからインストール

  1. WordPress の管理画面 → プラグインに移動。
  2. 「新規追加」をクリック。
  3. 「プラグインのアップロード」をクリック。
  4. attributes-for-blocks.zip ファイルを選択。
  5. 「今すぐインストール」をクリックします。
  6. WordPress 管理画面 → プラグイン からプラグインを有効化。

FTP アップロードで手動インストール

  1. attributes-for-blocks.zip ファイルから解凍した「attributes-for-blocks」フォルダを、WordPress の ../wp-content/plugins フォルダにアップロードしてください。
  2. WordPress 管理画面 → プラグイン からプラグインを有効化。

FAQ

アニメーションを追加するにはどうすればよいですか ?

選択したブロックの設定カラム (ブロック設定) で「アニメーション」パネルを開き、アニメーションを選択します。現在のブロックに選択したアニメーションのプレビューが表示され、関連するオプションが下に表示されます。

どのように作動しますか ?

Animations for Blocks プラグインは、Animate on Scroll (AOS) ライブラリを使用して動作します。このライブラリは、ほとんどが CSS ベースで、初期化処理に一部 JavaScript を使用します。プラグインはブロックのルート要素に属性を追加し、AOS ライブラリにアニメーションの方法を指示します。必要なスタイルやスクリプトの読み込みも、プラグインが自動的に行います。

すべてのブロックで機能しますか ?

blocks.getSaveContent.extraProps フィルターが利用でき、有効な WordPress 要素をレンダリングする通常のブロックと、render_callback を利用するダイナミックブロックで動作します。
一般的でない動作のサードパーティ製のブロックでは、動作しないことがあります。
既知の未サポートブロック

ブロックサポートを無効にする

afb_unsupported_blocks フィルターを子テーマの functions.php ファイルで使用して、アニメーションを無効にできます。

add_filter('anfb_unsupported_blocks', function($blocks) {
    $blocks[] = 'core/button';
    return $blocks;
});

このプラグインを無効にするとどうなりますか ?

プラグインを無効化した後、アニメーション付きのブロックが無効になることがあります。この場合、”ブロックのリカバリーを試行” をクリックすることでブロックの復元を試み、カスタムアニメーション属性が削除されるはずです。ブロックが無効になるリスクを避けたい場合は、プラグインを無効化する前に、すべてのアニメーションを無効化する必要があります。

フロントエンドでは、すべてのアニメーション要素が非表示になります

アニメーションが表示されない場合、JavaScript エラーにより AOS が初期化されていない可能性があります。デベロッパーツール (Chrome/Firefox では F12) を開き、「コンソール」タブにあるエラーを確認してください。エラーメッセージと、可能であればお客様のサイトのリンクを添えて、サポートまでご連絡ください。

評価

2022年11月30日
I'm a bit of an "old school" developer and have been struggling to fully embrace Gutenberg/Block Editor. I'm building a new Block Editor base theme for use on my client projects, and I wanted to include AOS. I was preparing to add the library directly in my plugin and trying to figure out how I would ever get it to seamlessly integrate into the Block Editor interface… and then I found this plugin! It is perfect. It includes all of the AOS parameters, works on virtually any block (even nested blocks), and most important to me, it looks like it belongs in the Block Editor. Speaking as a plugin developer as well, I can't stand plugins that try to imprint their own UI elements all over WordPress. If you're adding something to WordPress, make it look like WordPress. Anything else is at best distracting, and at worst, confusing to end users. This one is perfect. I won't spend another second trying to integrate AOS directly into my theme… I'll just install this plugin on any site that needs animation! Very well done, and I hope the user base grows so the devs can continue to support it.
2022年11月25日
I have used several plugins that offer animation blocks or similar. This one is the most straight forward Animate On Scroll wrapper for wordpress blocks.
10件のレビューをすべて表示

貢献者と開発者

Animations for Blocks はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Animations for Blocks” は1ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Animations for Blocks” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.1.0

  • Animation preview works in iframe-d block editors.
  • Rework controls.
  • Add ability to copy-paste animation settings.
  • Update Animation container block to API version 2.
  • Use render_block filter to apply animation attributes instead of overriding block’s render_callback.
  • Add anfb_aos_attributes filter that can modify attributes that are added to animated HTML elements.
  • Convert some code to typescript.
  • Update @wordpress/* packages.
  • Test with WordPress 6.2-RC1.

1.0.6

  • Fix once and mirror options detection in dynamic blocks.
  • Update @wordpress/* packages.
  • WordPress 6.1.1 でテスト済み。

1.0.5

  • Update @wordpress/* packages.
  • Test with WordPress 6.0.
  • Add GitHub link.
  • Remove src folder from plugin.

1.0.4

  • Update block anchor selector.

1.0.3

  • Use generated version number for AOS library.

1.0.2

  • Fix encoding for dynamic blocks.

1.0.1

  • Add more unsupported blocks.
  • Move Animation Container block to “Design” category.

1.0.0

  • Initial release.