Attributes for Blocks

説明

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

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

In your selected block’s inspector controls (Block settings) scroll all the way to the bottom and click on “Advanced”. It should contain a section called “Additional attributes”.
Type an attribute name into the “Add attribute” field and press “Add” to add an attribute for the block. A new input with the attribute’s name should appear below, into which you can optionally insert the attribute value.
Example attributes: 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');
    }
});

評価

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!
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!
2024年1月4日
I absolutely love this plugin! Does what it says easily and reliably, doesn’t add any bloat. Amazing.
2023年11月21日
This adds considerable versatility to the WordPress blocks editor — I wanted to use Bootstrap in my current custom theme, but didn’t want to integrate Bootstrap fully, only using it within blocks when needed. Things like the dark mode (data-bs-theme=”dark”) can be added in, you can use onClick to utilize JavaScript (I used that to click open Bootstrap cards, etc), and really much more. Saved me a lot of time having to do things in a much more manual way. Highly recommend this plugin, works great.
19件のレビューをすべて表示

貢献者と開発者

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

貢献者

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

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

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

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

変更履歴

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

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