WordPress.org

日本語

WordPress を入手
WordPress.org

Plugin Directory

Attributes for Blocks

Attributes for Blocks

作者: ska-dev
ダウンロード
ライブプレビュー

説明

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

Demo

スクリーンショット

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

インストール

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

  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-*。

Why is the input disabled?

When the current user doesn’t have unfiltered_html capabilities attributes cannot be added and all existing attributes are stripped when the post is updated.

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

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

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

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

Usage with Alpine.js

@ prefix in an attribute name is used for “override” mode in this plugin, for Alpine.js attributes use x-on:click instead of @click or use the shorthand syntax with two @ characters instead of one: @@click.

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

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

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

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

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

How do I add unfiltered_html capability to user roles?

You can modify which roles have the unfiltered_html capability using custom code in your theme’s functions.php file or via a custom plugin. Only grant this capability if you trust the current and future users of that role to not do anything malicious.

add_action('init', function() {
    if($role = get_role('contributor')) {
        $role->add_cap('unfiltered_html');
    }
});

評価

A must-have plugin that brings true flexibility to the block editor

2025年10月17日
Thank you so much for creating this plugin! It adds a level of versatility to the block editor that WordPress really needed. Being able to easily add custom attributes — like data-*, aria-*, or other HTML attributes — makes it incredibly useful for developers and site builders alike. It works exactly as expected, saves tons of time, and feels lightweight and reliable. Perfect for anyone who wants finer control over blocks without having to write extra code or rely on complex workarounds. Huge thanks to the authors for keeping it simple, powerful, and developer-friendly — I truly hope this continues to be maintained for future WordPress versions. Highly recommended!

Saved me tons of work

2024年11月6日
This is perfect, it saved me tons of work. I am used it for adding the view-transition-classes to query block elements.websevendev & jimedwards million thanks to you!

Very nice and useful

2024年2月14日
Thank you very much for providing this plugin, I have been able to use SAL scroll animation library with it works perfectly! Hope you keep going with this Plugin for future Wordpress versions. Thank YOU!

Awesome plugin!

2024年1月4日
I absolutely love this plugin! Does what it says easily and reliably, doesn’t add any bloat. Amazing.
21件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

1.0.13

  • Tested with WordPress 6.9.

1.0.12

  • Added a donate link on the plugin page – supporters get a 50% off coupon for my brand new WordPress theme.
  • Fix potential duplication when merging style attribute values.
  • Update @wordpress/* packages.
  • Tested with Gutenberg 21.7.0.

1.0.11

  • WP 6.8.

1.0.10

  • Added afb_get_attributes filter, allowing to dynamically modify attributes.

1.0.9

  • Try fix issue with current_user_can check in pre_kses when SECURE_AUTH_COOKIE isn’t defined.

1.0.8

  • Try fix issue with current_user_can check in pre_kses when WP pluggable functions aren’t loaded.

1.0.7

  • Security update: users without unfiltered_html capability can no longer add attributes. When a user without the capability updates a post all existing attributes are stripped. Issue discovered by Francesco Carlucci (CVE ID: CVE-2024-8318, CVSS Severity Score: 6.4 (Medium)). The vulnerability made it possible for authenticated attackers, with Contributor-level access and above, to inject arbitrary web scripts in pages that will execute whenever a user accessed an injected page.
  • Tested up to WordPress 6.6.
  • Update @wordpress/* packages.

1.0.6

  • Tested up to WordPress 6.5.
  • Fix PHP notice when rendering a block that doesn’t have any attributes.
  • Update @wordpress/* packages.

1.0.5

  • Use WP_HTML_Tag_Processor for adding HTML attributes.
  • Remove afb_sanitize_attribute_key and afb_sanitize_attribute_value filters (now handled by WP_HTML_Tag_Processor).
  • Use render_block filter to apply attributes instead of overriding block’s render_callback.
  • Move all PHP code to main file for simplicity.
  • Add $attribute param to afb_attribute_separator filter.
  • Remove uppercase text transform from attribute input labels, use monospace font for value.
  • Add button to edit attributes in a modal for more space.
  • Update @wordpress/* packages.
  • Regression: for blocks that render multiple root elements attributes are only applied to the first one.

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

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

メタ

評価

5つ星中5つ星

レビューを追加

すべてのレビューを見る

サポート

意見や質問がありますか ?

サポートフォーラムを表示

寄付

このプラグインが今後も改善できるよう応援しませんか ?

このプラグインに寄付