Title: HTML Attributes Customizer for Blocks
Author: NEERAJ K
Published: <strong>22.05.2026</strong>
Last modified: 18.06.2026

---

Шукати плагіни

![](https://s.w.org/plugins/geopattern-icon/block-attr-customizer.svg)

# HTML Attributes Customizer for Blocks

 Від автора [NEERAJ K](https://profiles.wordpress.org/neerajk1409/)

[Завантажити](https://downloads.wordpress.org/plugin/block-attr-customizer.1.0.3.zip)

 * [Деталі](https://uk.wordpress.org/plugins/block-attr-customizer/#description)
 * [Відгуки](https://uk.wordpress.org/plugins/block-attr-customizer/#reviews)
 *  [Встановлення](https://uk.wordpress.org/plugins/block-attr-customizer/#installation)
 * [Розробка](https://uk.wordpress.org/plugins/block-attr-customizer/#developers)

 [Підтримка](https://wordpress.org/support/plugin/block-attr-customizer/)

## Опис

HTML Attributes Customizer for Blocks adds an **HTML attributes** panel in the block
sidebar. Enter one attribute per line as `name="value"` (double quotes), or a boolean
attribute as a single name (for example `inert`).

Attributes are stored on the block as JSON objects: `htmlbacAttributes` and `htmlbacInnerAttributes`(
for example `{"fetchpriority":"high","data-nolazy":"0"}`). Boolean flags use `true`.

**Merging:** Duplicate names on multiple lines are combined. Values merge with spaces(
semicolons for `style`). `class` merges with the block’s existing classes instead
of replacing them.

**Variables:** Use tokens such as `{{post.title}}` or `{{user.auth_status}}` inside
quoted values. They are replaced when the block renders on the front end.

## Скріншоти

[⌊Attributes tab — HTML attribute lines on a block (one per line: name="value" or
boolean names).⌉⌊Attributes tab — HTML attribute lines on a block (one per line:
name="value" or boolean names).⌉[

**Attributes tab** — HTML attribute lines on a block (one per line: `name="value"`
or boolean names).

[⌊Variables tab — Reference list of variables use inside quoted values.⌉⌊Variables
tab — Reference list of variables use inside quoted values.⌉[

**Variables tab** — Reference list of variables use inside quoted values.

[⌊Block editor — Image block selected with the HTML attributes panel open in the
sidebar (Attributes and Variables tabs).⌉⌊Block editor — Image block selected with
the HTML attributes panel open in the sidebar (Attributes and Variables tabs).⌉[

**Block editor** — Image block selected with the HTML attributes panel open in the
sidebar (Attributes and Variables tabs).

## Встановлення

 1. Upload the plugin folder to `/wp-content/plugins/block-attr-customizer/`.
 2. Activate through **Plugins** in WordPress.
 3. Edit a block, open the sidebar, and expand **HTML attributes**.

## Часті питання

### Will variables work in the editor preview?

No. The editor shows raw `{{…}}` tokens; replacement runs on the published front
end.

### Can I add my own variables?

Yes. Register a token in the editor reference, resolve it on the front end, then
use it in attribute values as `{{my.plugin.token}}`.

**1. Register the token (shows in the Variables tab):**

    ```
    add_filter( 'htmlbac_variable_definitions', function ( $definitions ) {
        $definitions[] = array(
            'key'         => 'my.plugin.token',
            'group'       => 'other',
            'description' => __( 'Example custom token for HTML attributes.', 'my-plugin' ),
        );
        return $definitions;
    } );
    ```

**2. Resolve the token when the block renders:**

    ```
    add_filter( 'htmlbac_resolve_variable', function ( $value, $key ) {
        if ( 'my.plugin.token' === $key ) {
            return esc_attr( 'hello-from-my-plugin' );
        }
        return $value;
    }, 10, 2 );
    ```

**3. Optional — override the full replacement map in one place:**

    ```
    add_filter( 'htmlbac_variable_replacements', function ( $replacements ) {
        $replacements['my.plugin.token'] = esc_attr( 'hello-from-my-plugin' );
        return $replacements;
    } );
    ```

In the block sidebar, add a line such as `data-example="{{my.plugin.token}}"`.

### Some blocks have an “Inner element” field. Why?

Blocks such as Group, Image, and Video output an inner `div`, `img`, or `video` 
that the outer wrapper cannot target. Use **Inner element** for those.

**Enable inner attributes for more blocks (built-in strategies):**

Built-in strategy keys include `first_div`, `first_img`, `first_video`, `first_a`,`
first_figure`, and others. Map a block name to one of those keys:

    ```
    add_filter( 'htmlbac_inner_target_blocks', function ( $strategies ) {
        $strategies['core/columns'] = 'first_div';
        $strategies['core/button']  = 'first_a';
        return $strategies;
    } );
    ```

**Custom strategy (when no built-in key fits):**

    ```
    add_filter( 'htmlbac_inner_target_blocks', function ( $strategies ) {
        $strategies['my-plugin/my-block'] = 'my_first_button';
        return $strategies;
    } );

    add_filter( 'htmlbac_apply_inner_strategy', function ( $block_content, $entries, $strategy, $block_name ) {
        if ( 'my_first_button' !== $strategy || 'my-plugin/my-block' !== $block_name ) {
            return $block_content;
        }
        if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
            return $block_content;
        }

        $processor = new WP_HTML_Tag_Processor( $block_content );
        if ( ! $processor->next_tag( 'button' ) ) {
            return $block_content;
        }

        foreach ( $entries as $entry ) {
            $name = isset( $entry['name'] ) ? (string) $entry['name'] : '';
            if ( '' === $name ) {
                continue;
            }
            if ( null === $entry['value'] ) {
                $processor->set_attribute( $name, true );
                continue;
            }
            $processor->set_attribute( $name, (string) $entry['value'] );
        }

        return $processor->get_updated_html();
    }, 10, 4 );
    ```

## Відгуки

Для цього плагіна немає відгуків.

## Учасники та розробники

“HTML Attributes Customizer for Blocks” — проект з відкритим вихідним кодом. В розвиток
плагіну внесли свій вклад наступні учасники:

Учасники

 *   [ NEERAJ K ](https://profiles.wordpress.org/neerajk1409/)
 *   [ Midnay ](https://profiles.wordpress.org/midnayws/)

[Перекладіть “HTML Attributes Customizer for Blocks” на вашу мову.](https://translate.wordpress.org/projects/wp-plugins/block-attr-customizer)

### Цікавитесь розробкою?

[Перегляньте код](https://plugins.trac.wordpress.org/browser/block-attr-customizer/),
перегляньте [сховище SVN](https://plugins.svn.wordpress.org/block-attr-customizer/)
або підпишіться на [журнал розробки](https://plugins.trac.wordpress.org/log/block-attr-customizer/)
за допомогою [RSS](https://plugins.trac.wordpress.org/log/block-attr-customizer/?limit=100&mode=stop_on_copy&format=rss).

## Журнал змін

#### 1.0.3

 * Fix REST API save errors on custom blocks (`customAttributes is not a valid property
   of Object`) by registering `htmlbacAttributes` in PHP via `register_block_type_args`.
 * Stop registering legacy `customAttributes` / `customInnerAttributes` on block
   types (migration still reads them from older saved content).

#### 1.0.2

 * Replace `group_inner` with reusable `first_div` inner strategy (Group, Cover,
   and filter extensions).
 * Run Group inner attributes on `render_block_core/group` at priority 999 (after
   core and other plugins).
 * Tested up to WordPress 7.0.

#### 1.0.1

 * Fix Group block inner attributes applying after `wp_restore_group_inner_container`
   and other `render_block_core/group` filters (priority 999).
 * Hide Group “Inner element” UI when the inner wrapper is not used (block themes
   with theme.json, flex layout).
 * Run general block rendering at `render_block` priority 999 so other filters run
   first.

#### 1.0.0

 * Initial release.
 * HTML attributes panel in the block sidebar with `htmlbacAttributes` and `htmlbacInnerAttributes`(
   JSON objects).
 * Merge duplicate attribute names; boolean attributes without `=`.
 * Dynamic variable tokens on the front end.
 * Inner element support for blocks such as Group, Image, and Video.

## Мета

 *  Версія **1.0.3**
 *  Останнє оновлення **2 тижні тому**
 *  Активних встановлень **Менше 10**
 *  Версія WordPress ** 6.0 або вище **
 *  Tested up to **7.0**
 *  Версія PHP ** 7.4 або вище **
 *  Мова
 * [English (US)](https://wordpress.org/plugins/block-attr-customizer/)
 * Позначки
 * [block-editor](https://uk.wordpress.org/plugins/tags/block-editor/)[blocks](https://uk.wordpress.org/plugins/tags/blocks/)
   [custom attributes](https://uk.wordpress.org/plugins/tags/custom-attributes/)
   [gutenberg](https://uk.wordpress.org/plugins/tags/gutenberg/)
 *  [Розширений перегляд](https://uk.wordpress.org/plugins/block-attr-customizer/advanced/)

## Оцінки

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/block-attr-customizer/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/block-attr-customizer/reviews/)

## Учасники

 *   [ NEERAJ K ](https://profiles.wordpress.org/neerajk1409/)
 *   [ Midnay ](https://profiles.wordpress.org/midnayws/)

## Підтримка

Є що сказати? Потрібна допомога?

 [Перейти в форум підтримки](https://wordpress.org/support/plugin/block-attr-customizer/)