Attributes for Blocks

説明

このプラグインは、Gutenberg ブロックに高度なインスペクターコントロールを追加し、フロントエンド出力にカスタム HTML 属性を追加可能にします。インライン CSS を追加しブロックの外観を調整したり、aria 属性を設定してサイトのアクセシビリティを向上させたり、data 属性の追加で任意の JavaScript モジュールと統合したり、onclickonchangeonload などの JavaScriptDOM イベント属性を追加することができます。

スクリーンショット

  • 段落ブロックにスタイル属性を追加

インストール

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

  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

属性を追加するにはどうすればよいですか ?

選択したブロックのインスペクターコントロール (ブロックの設定) で、一番下までスクロールし、「詳細設定」をクリックします。すると、「追加属性」という項目があるはずです。
「属性の追加」フィールドに属性名を入力し「追加」を押すと、ブロックに属性が追加され、その下にその属性名がラベルされた新しい入力欄が追加表示されます。そこにオプションとしての属性値を挿入できます。
属性の例: style, title, target, class, id, onClick, data-*, aria-*.

どのように機能しますか ?

通常ブロックの場合、属性はブロック保存コンテンツのルート要素に追加されます。つまり、属性はフロントエンドでのみレンダリングされ、エディターではレンダリングされません。ダイナミックブロックの場合、属性は render_callback 関数を介して追加され、ブロックがサーバー側、もしくはクライアント側のどちらでレンダリングされるかに応じて、エディターでも適用される場合があります。

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

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

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

afb_unsupported_blocks フィルターを子テーマの functions.php ファイルで使用し、追加属性を追加するためのブロックサポートを無効にできます。

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

無効にするとどうなりますか ?

カスタム属性を付加したブロックは、追加した属性によっては無効となる場合があります。その場合、「ブロックのリカバリーを試行」をクリックでカスタム属性を除いたブロックを復元、「HTML に変換」を選択すればカスタム属性を含むブロックを HTML として保持できます。ブロックが無効になるリスクを回避したい場合は、プラグインを無効にする前にすべてのカスタム属性を削除する必要があります。

評価

2021年11月13日
It's perfect for what I need! I hope you'll keep it updated as this behaviour should really be native in WordPress!
2021年11月2日
Exactly what I was looking for to make my WordPress Site more accessible! Should be in the core of WP!
2021年9月16日
I like it a lot! Little enhancement: I would love to set default attributes (with emptpy values) to decrease repetitive attribute setup.
5件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

1.0.2

  • スタイル属性の高度なエディターを追加します。
  • jQuery を削除。

1.0.1

  • ダイナミックブロックの特殊文字エンコードを修正しました。