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 として保持できます。ブロックが無効になるリスクを回避したい場合は、プラグインを無効にする前にすべてのカスタム属性を削除する必要があります。

評価

2022年9月24日
this simple plugin is really necessary to be able to use javascript. thanks a lot!
2022年7月30日
Perfect for the feature it adds: block attributes. And it's a really handy feature for developers and anybody who knows enough HTML to edit tag attributes. I appreciate plugins that do something without trying to be all things to all people. This does its thing without fanfare or bloat. And it exceeds expectations with a handy style editor when "style"' is the attribute. Nice touch. Thanks for the handy plugin.
2022年6月7日
I was busy building a group block variation with a attribute field when I bumped into your plug-in. It just do what I was looking for in a more comprehensive way. This should definitly be native to wp ! Thank's
10件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

1.0.4

  • Add afb_sanitize_attribute_key and afb_sanitize_attribute_value filters.
  • Catch errors when using invalid characters in attribute name/value.
  • Update @wordpress/* packages.

1.0.3

  • Update @wordpress/* packages.
  • Test with WordPress 6.0.
  • Convert advanced style attribute editor to TypeScript and refactor.
  • Fix duplicate attribute values being output when the block has both JS and PHP render functions.
  • Add GitHub link.
  • Remove src folder from plugin.

1.0.2

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

1.0.1

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