SOLVED: Custom HTML attributes from Bricks filters not rendering on canvas

Bugs
1

Browser: Any
OS: Windows

In regards to:
Builder: Add custom HTML attributes to the canvas (from Bricks filters & element settings)

I added some a custom checkbox-control via the bricks/elements/section/controls filter to the section element and it adds some class on the frontend via the bricks/element/render_attributes filter, but it’s not working on the canvas.

what am I doing wrong?

This is my code:

add_filter('bricks/elements/section/controls', function ($controls) {
	$controls['testPaddingTop'] = [
		'tab'      => 'content',
		'type'     => 'checkbox',
		'label'    => esc_html__('Padding Top', 'bricks'),
	];

	return $controls;
});

add_filter('bricks/element/render_attributes', function ($attributes, $key, $element) {
	if (
		isset($element->settings['testPaddingTop'])
		&& $element->settings['testPaddingTop'] == true
	) {
		$attributes[$key]['class'][] = 'brxe-section--p-top';
	}

	return $attributes;
}, 10, 3);

And my styles:

.brxe-section--p-top{
  background:red;
  padding-top:300px;
}
2

Hi @UserfreundSuat,

Thanks for the report. We are aware of this bug. When using render_attributes in combination with layout elements (section, container, block, div), it will add attributes on the canvas. For other elements (header for example), it should work fine.

But, your code should work on the front end, so you can still use it. It’s just that it will not be applied in the canvas.

Thanks for understanding.

Best regards,
M

3

CC @timmse

4

Hi guys,

We’ve fixed this issue in Bricks 1.11 BETA, now available as a manual download (Bricks – Account)

Please let us know if you are still experiencing issues.

You can see the full changelog here: Bricks 1.11 Changelog – Bricks

As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

Best regards,
Matej

5

I don’t really get what I’m doing wrong, because i can’t seem to make it work:
This is how I add controls to the section-element:

add_filter('bricks/elements/section/controls', function ($controls) {

    $after_key = 'loopSeparator';

    $padding_top['paddingBlockStart'] = [
        'tab' => 'content',
        'label' => 'Abstand oben',
        'type' => 'checkbox',
        'inline' => true,
        'small' => true,
        'default' => true,
    ];

    $padding_bottom['paddingBlockEnd'] = [
        'tab' => 'content',
        'label' => 'Abstand unten',
        'type' => 'checkbox',
        'inline' => true,
        'small' => true,
        'default' => true,
    ];

    $index = array_search($after_key, array_keys($controls));

    $controls = array_slice($controls, 0, $index + 1) + $padding_top + $padding_bottom + $controls;

    return $controls;
});

and i tried it with the bricks/element/render_attributes filter


add_filter('bricks/element/render_attributes', function ($attributes, $key, $element) {

    if ($element->name !== 'section') return $attributes;

    $settings = $element->settings;

    $padding_block_start = $settings['paddingBlockStart'] ?? false;
    $padding_block_end = $settings['paddingBlockEnd'] ?? false;

    if ($padding_block_start) {
        $attributes[$key]['class'][] = 'brxe-section--p-block-start';
    }

    if ($padding_block_end) {
        $attributes[$key]['class'][] = 'brxe-section--p-block-end';
    }

    return $attributes;
}, 10, 3);

and with the bricks/element/set_root_attributes filter:

add_filter('bricks/element/set_root_attributes', function ($attributes, $element) {
    if ($element->name !== 'section') return $attributes;

    $settings = $element->settings;

    $padding_block_start = $settings['paddingBlockStart'] ?? false;
    $padding_block_end = $settings['paddingBlockEnd'] ?? false;

    if ($padding_block_start) {
        $attributes['class'][] = 'brxe-section--p-block-start';
    }

    if ($padding_block_end) {
        $attributes['class'][] = 'brxe-section--p-block-end';
    }

    return $attributes;
}, 10, 2);

Both work on the frontend, and on the canvas after a full page reload but won’t change on the canvas when the controls inside the builder are used.