説明
ブロックエディターのブロックに設定パネルを追加し、スクロールでのブロック可視化時にアニメーションを追加できる軽量プラグインです。アニメーションの種類 (フェード、反転、スライド、ズーム)、バリエーション (異なる方向)、遅延、長さなど、より詳細な設定が可能です。オプションを変更すると、エディター内ですぐにアニメーションをプレビューできます。
このプラグインは AOS – Animate on scroll library を使用し、スタイルシート (2.8 kB) とスクリプト (5.2 kB) 、アニメーションを初期化するスクリプト (1.3 kB) をフロントエンドに追加します。
スクリーンショット
アニメーションの追加 
アニメーションの設定
インストール
管理者ダッシュボードからインストール
- WordPress の管理画面 プラグインに移動。
- 「新規追加」をクリック。
- 「プラグインのアップロード」をクリック。
attributes-for-blocks.zipファイルを選択。- 「今すぐインストール」をクリックします。
- WordPress 管理画面 プラグイン からプラグインを有効化。
FTP アップロードで手動インストール
attributes-for-blocks.zipファイルから解凍した「attributes-for-blocks」フォルダを、WordPress の../wp-content/pluginsフォルダにアップロードしてください。- WordPress 管理画面 プラグイン からプラグインを有効化。
FAQ
-
アニメーションを追加するにはどうすればよいですか ?
-
選択したブロックの設定カラム (ブロック設定) で「アニメーション」パネルを開き、アニメーションを選択します。現在のブロックに選択したアニメーションのプレビューが表示され、関連するオプションが下に表示されます。
-
どのように作動しますか ?
-
Animations for Blocks plugin works by using the Animate on Scroll (AOS) library that is mostly CSS-based with some JavaScript to handle initialization. The plugin adds attributes to block’s root element that tell the AOS library how to animate it. Loading the necessary styles and scripts is also handled automatically by the plugin.
-
Animations are not playing for me
-
By default the plugin will not play animations for users that have the “prefers-reduced-motion” setting enabled for their device. This functionality can be turned off by enabling the “Ignore reduced motion preference” plugin option, how ever it’s not recommended. Other users that don’t have reduced motion preference enabled will still see the animations.
-
Animations cause a horizontal scrollbar
-
Since some elements are initially placed off-screen to then animate back to their normal position it can cause a scrollbar to appear. To prevent this the overflow should be hidden on one of the parent elements. Which element you should target is specific to your site. For example, you can try adding custom CSS:
.wp-site-blocks { overflow: hidden; }, but you have to make sure that this doesn’t break any other features on your site that require overflow being visible. -
すべてのブロックで機能しますか ?
-
通常のブロックで、
blocks.getSaveContent.extraPropsフィルターを利用できる有効な WP 要素をレンダリングするもの、またはrender_callbackを利用する動的ブロックであれば、動作するはずです。
独自の方法を用いているサードパーティ製のブロックは、動作しない可能性があります。
対応していないことが確認されているブロック一覧はこちら -
ブロック機能の無効化について
-
afb_unsupported_blocksフィルターを子テーマのfunctions.phpファイルで使用して、アニメーションを無効にできます。add_filter('anfb_unsupported_blocks', function($blocks) { $blocks[] = 'core/button'; return $blocks; }); -
このプラグインを無効にするとどうなりますか ?
-
このプラグインを無効化すると、アニメーション付きのブロックが無効になる場合があります。その場合は、「ブロックの復元を試みる」をクリックしてブロックを復元できます。この操作により、カスタムアニメーション属性が削除されるはずです。
ブロックが無効になるリスクを避けたい場合は、プラグインを無効化する前にすべてのアニメーションを無効にしてください。 -
すべてのアニメーション要素がフロントエンドで表示されません
-
アニメーションが表示されない場合、JavaScript エラーにより AOS が初期化されていない可能性があります。デベロッパーツール (Chrome/Firefox では F12) を開き、「コンソール」タブにあるエラーを確認してください。エラーメッセージと、可能であればお客様のサイトのリンクを添えて、サポートまでご連絡ください。
評価
貢献者と開発者
変更履歴
1.2.5
- Tested with WordPress 6.9.
- Update Lenis to 1.3.15.
@wordpress/*パッケージを更新しました。
1.2.4
- Added a donate link on the plugin page – supporters get a 50% off coupon for my brand new WordPress theme.
- Added notice that lets you know when your device has
prefers-reduced-motionenabled. - Added plugin option “Ignore reduced motion preference”.
- Improved help text and FAQs.
- Update Lenis to 1.3.11.
@wordpress/*パッケージを更新しました。- Tested with Gutenberg 21.7.0.
1.2.3
- Change Animate on Scroll front end style media from
alltoscreen and (prefers-reduced-motion: no-preference).
1.2.2
- 属性を持たない解析済みブロックで発生する
Warning: Undefined array key "attrs"を修正しました。 - 修正:
Incorrect use of <label for=FORM_ELEMENT> - 非推奨となった
wp.components.ButtonGroupを置き換えました。 - Lenis を 1.3.8 に更新しました。
@wordpress/*パッケージを更新しました。
1.2.1
- WordPress 6.8 に対応しました。
- Lenis を 1.2.3 に更新しました。
@wordpress/*パッケージを更新しました。
1.2
- フロントエンドのスクリプトを defer 属性付きで読み込むようにしました。
- 「アセットの遅延読み込み」オプションのデフォルト値を 有効 (true) に変更しました。
- 新アニメーション 「Scale」 を追加しました。わずかに拡大または縮小された状態（不透明度 0）から、元のサイズに変化しながらフェードインするアニメーションです。
- 新アニメーション 「Default」 を追加しました。プラグイン設定で「Default」アニメーションを選択したブロックに適用するアニメーションを設定できます。
- 新アニメーション 「Inherit」 を追加しました。「アニメーションコンテナ」ブロックが「アニメーションプロバイダー」になるオプションが追加され、内部のブロックで「Inherit」アニメーションを選択するとプロバイダー側のアニメーションが適用されます。また、プロバイダーはアニメーション開始を一定時間ずつずらすこともできます。
- 軽量スムーススクロールライブラリ Lenis を同梱しました。プラグイン設定から有効化できます。
- AOS が window.AOS としてフロントエンドで利用可能になりました (
window.AOS)。 - WordPress 6.7 で動作確認済
- WordPress 6.6 以上が必要になりました。
- PHP 8.1 が必要になりました。
@wordpress/*パッケージを更新しました。
1.1.6
- WordPress 6.6で動作確認済み
@wordpress/*パッケージを更新しました。- 「アニメーションコンテナ」ブロックで
block.jsonを使用するようにしました。 - ブロックスタイルを別のスタイルシートに分離しました。
- RangeControl におけるラベルと値の取り違えを修正しました。
- 一部の不要になったコードを削除しました。
- WordPress 6.6 未満でも動作するように、
react-jsx-runtimeを同梱しました。
1.1.5
- WordPress 6.5で動作確認済み
- アニメーションコントロールの表示位置を選べるオプションを追加しました。「スタイル」タブ、または「高度な設定」インスペクターに移動できます。
@wordpress/*パッケージを更新しました。
1.1.4
- バージョンを誤って更新しました。
1.1.3
__unstableElementContextが削除されたことによる、最新の Gutenberg プラグインでのクラッシュを修正しました。@wordpress/*パッケージを更新しました。
1.1.2
- 自動アニメーションプレビューを無効化できるオプションを追加しました。
- 現在のページにアニメーション付きブロックがある場合のみ、アセットを遅延読み込みできるオプションを追加しました。
@wordpress/*パッケージを更新しました。- スクリーンショットを更新
1.1.1
- HTML 属性の追加に
WP_HTML_Tag_Processorを使用しました。 - 複数のルート要素をレンダリングするブロックは、自動的にラップされなくなりました。これを行うには Animation container ブロックを使用してください。
- シンプル化のため、すべての PHP コードをメインファイルに移動しました。
1.1.0
- アニメーションプレビューが iframe 化されたブロックエディターでも動作するようになりました。
- コントロールを再構築しました。
- アニメーション設定をコピー & ペーストできる機能を追加しました。
- Animation container ブロックを API バージョン2 に更新しました。
- ブロックの
render_callbackを上書きする代わりに、アニメーション属性を適用するためrender_blockフィルターを使用するようにしました。 - アニメーションが付与された HTML 要素に追加される属性を変更できる
anfb_aos_attributesフィルターを追加しました。 - 一部のコードを TypeScript に変換しました。
@wordpress/*パッケージを更新しました。- WordPress 6.2-RC1 で動作検証済み。
1.0.6
- 動的ブロックにおける
onceとmirrorオプション検出を修正しました。 @wordpress/*パッケージを更新しました。- WordPress 6.1.1 で動作検証済み。
1.0.5
@wordpress/*パッケージを更新しました。- WordPress 6.0で動作検証済み。
- GitHub リンクを追加しました。
- プラグインから
srcフォルダーを削除しました。
1.0.4
- ブロックのアンカーセレクターを更新しました。
1.0.3
- AOS ライブラリに生成されたバージョン番号を使用するようにしました。
1.0.2
- 動的ブロックのエンコードを修正しました。
1.0.1
- 非対応ブロックを追加しました。
- Animation Container ブロックを「デザイン」カテゴリーに移動しました。
1.0.0
- 初回リリース。