Attributes for Blocks

描述

This plugin adds additional advanced inspector controls to Gutenberg blocks that allow to add any custom HTML attributes to the block’s front-end output. This allows you to add inline styles to fine-tune the block’s appearance, set aria attributes to improve your site’s accessibility, add data attributes to integrate with any JavaScript modules or even JavaScript DOM event attributes such as onclick, onchange or onload.

屏幕截图

  • Adding style attribute to paragraph block

安装

Install via admin dashboard

  1. Go to your WordPress admin dashboard -> Plugins.
  2. Click “Add New”.
  3. Click “Upload Plugin”.
  4. Select the attributes-for-blocks.zip file.
  5. Click “Install Now”.
  6. Activate the plugin from WordPress admin dashboard -> Plugins.

Manual install via FTP upload

  1. Upload the folder “attributes-for-blocks” from attributes-for-blocks.zip file to your WordPress installations ../wp-content/plugins folder.
  2. Activate the plugin from WordPress admin dashboard -> Plugins.

常见问题

How do I add an attribute?

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

How does it work?

For regular blocks, attributes are added to the block save content’s root element, meaning they will be rendered only on the front end and not in the editor. For dynamic blocks the attributes are added via render_callback function and they may also be applied in the editor, depending if the block is rendered server or client side.

Does it work for every block?

It should work with normal blocks that render a valid WP Element that can utilize the blocks.getSaveContent.extraProps filter as well as dynamic blocks that utilize a render_callback. Third party blocks that do something unorthodox may not work.
Known unsupported blocks

Disable block support

The afb_unsupported_blocks filter can be used in your child theme’s functions.php file to disable block support for adding additional attributes.

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

What happens when I disable this plugin?

Blocks with custom attributes may become invalid, depending on which attributes you’ve added. From there you can recover the block without the custom attributes by clicking “Attempt Block Recovery” or keep the block with custom attributes as HTML by choosing “Convert to HTML”. If you don’t want to risk blocks becoming invalid you need to remove all custom attributes before disabling the plugin.

评价

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

  • Add advanced editor for style attribute.
  • Remove jQuery.

1.0.1

  • Fix special character encoding for dynamic blocks.