NO BUG: 'class' attribute removes all other applied classes (also fatal error)

[blakmarkitcreative]

Browser: Firefox 118.0.1
OS: Windows
URL: nothing public, just testing
WP: 6.3

I’m working on adding some toggle options to the Section element for a build that will automatically add classes to the given section. I’m using the bricks/element/render_attributes filter to add the classes. That part seems to be working.

side questions:

• Is that the correct filter to be using for this situation?
• Should my classes/attributes be able to function in the editor canvas as well as the frontend? Should the bricks_is_builder_main method work here? (see code snippet below)

If I add a custom class attribute via the element’s Style tab:

• it causes a fatal error when I have my filter active (see below).
• If I disable the filter, the error clears.
• The default brxe-section class is removed.
• If I add a class via the usual “class” field, it is also removed.
• If I add a second class attribute it wipes out the first one.
• If I add a class via the Style > CSS field, that is also removed.
• If I change the attribute(s) to something else like data-class-x all of the previously-set classes (and attributes) render as expected.

I’m more concerned about it removing UI-defined classes than it interfering with my code at the moment. Presumably the attributes panel is using the render_attributes filter, but it’s passing in only a single string? Am I doing something wrong? Looking at the documentation, it appears that it might be expected behavior, but that seems like it’d be a problem for people who are trying to add classes dynamically via metadata. I would think this would be causing some huge headaches.

I think the ideal way for this to work would be to append any class attributes to the classList for an element rather than replacing it entirely. Not sure if I’m not clear on the use case where that would be undesirable behavior.

to track down the fatal error:

PHP Fatal error:  Uncaught Error: [] operator not supported for strings in C:\Users\dreadnoughtus\Local Sites\dataclaywpengine\app\public\wp-content\themes\dclay-wp-theme-bricks\elements\background-grid-extension.php:52
Stack trace:
#0 C:\Users\dreadnoughtus\Local Sites\dataclaywpengine\app\public\wp-includes\class-wp-hook.php(310): section_bg_grid_classes(Array, '_root', Object(Bricks\Element_Section))
#1 C:\Users\dreadnoughtus\Local Sites\dataclaywpengine\app\public\wp-includes\plugin.php(205): WP_Hook->apply_filters(Array, Array)
#2 C:\Users\dreadnoughtus\Local Sites\dataclaywpengine\app\public\wp-content\themes\bricks\includes\elements\base.php(2026): apply_filters('bricks/element/...', Array, '_root', Object(Bricks\Element_Section))
#3 C:\Users\dreadnoughtus\Local Sites\dataclaywpengine\app\public\wp-content\themes\bricks\includes\elements\container.php(896): Bricks\Element->render_attributes('_root')
#4 C:\Users\dreadnoughtus\Local Sites\dataclaywpengine\app\public\wp-content\themes\bricks\includes\elements\base.php(2249 in C:\Users\dreadnoughtus\Local Sites\dataclaywpengine\app\public\wp-content\themes\dclay-wp-theme-bricks\elements\background-grid-extension.php on line 52

the code on line 52:

function section_bg_grid_classes( $attributes, $key, $element ) {
	if ( ! bricks_is_builder_main() ) {
		if ( isset( $element->settings['enableBgGrid'] ) && $element->settings['enableBgGrid'] == true ) {
			for( $x=1; $x<12; $x++ ) {
				if ( isset( $element->settings['bgGrid-'.$x] ) && $element->settings['bgGrid-'.$x] == true ) {
					$attributes[$key]['class'][] = 'bgd-'.$x; // line 52
				}
			}
		}
	}

  return $attributes;
}

[itchycode]

Hi @blakmarkitcreative ,

Based on your code, seems like you didn’t check the type of $attributes[$key]['class']
If it’s not an array, you will encounter that error.

Regards,
Jenn

[blakmarkitcreative]

What about my other questions? Specifically, any class added via the custom attributes wipes out all other classes applied to the element?

edit: to put it more clearly, if you add a class or multiple classes via the custom attributes, only the last class is added to the element. All others, from any source, are removed. Could you verify this behavior?

[blakmarkitcreative]

Following up on one of my other questions, too. It appears that it’s not clear what the correct filter is to see content on the editor canvas. See this post:

Backend for? bricks/element/set_root_attributes and bricks/element/render_attributes

Hi guys! regarding the filter bricks/element/set_root_attributes and bricks/element/render_attributes it only works on the frontend? How can we also apply to the builder rendering too?

edit:
Also relevant, these appear to explain that there is a bug in the render_attributes filter and/or custom attributes that’s been WIP for over a year. Was it forgotten?:

WIP: Data-attributes not showing in the DOM structure of the backend

Bricks Version: 1.5 RC Browser: Chrome 90 OS: macOS / Windows / Linux / etc. URL: local Hey guys, I’m not sure if this is intended or if it is a bug, but I noticed the data-attributes are not being output on the elements inside the builder view - which leads the scripts that depend on it to be non-working. While everything is working on the frontend, it makes the backend experience quite messy. Thanks, Maxime

DUPLICATE: Custom attributes should be rendered in builder, not only on front end

Bricks Version: 1.5.3 Browser: Chrome Version 105.0.5195.125 (Build officiel) (x86_64) OS: macOS URL: N/A Hi Bricks team, When adding a custom attribute to an element, this attribute is rendered on the element on frontend, but not on the element in the builder. This may not be a bug, but a deliberate choice, but. when this attribute plays a role in the element styling, this results in incorrect visual aspect in the builder when frontend is actually correct. So, when a custom attribute is …

[itchycode]

Hi @blakmarkitcreative ,

Yes, that’s the expected result and custom attribute behaviour in Bricks.
Defining attributes will overwrite the element attributes.

For example, if you define id attribute = my_id, the element will get a final in frontend.
Same if you define class attribute = my_class, the element will get a final in frontend.

Custom Attributes

Regarding the attributes not showing in the builder, it’s in WIP.

WIP: Data-attributes not showing in the DOM structure of the backend

Bricks Version: 1.5 RC Browser: Chrome 90 OS: macOS / Windows / Linux / etc. URL: local Hey guys, I’m not sure if this is intended or if it is a bug, but I noticed the data-attributes are not being output on the elements inside the builder view - which leads the scripts that depend on it to be non-working. While everything is working on the frontend, it makes the backend experience quite messy. Thanks, Maxime

Regards,
Jenn

[blakmarkitcreative]

Thank you for the replies. That seems like an odd functionality decision for dynamic classes via attributes, but I guess it can be worked around in slightly less ideal ways.

@itchycode

Based on your code, seems like you didn’t check the type of $attributes[$key]['class']
If it’s not an array, you will encounter that error.

Just to loop back to this briefly in case someone reads this later, I didn’t have an error check on this, previously, because the classList for the element was an array—until it appears like the custom attributes wiped the array and replaced it with a string for a single class?

To clarify, the render_attributes filter is the correct one? There isn’t another one I missed, or an undocumented one that would work? There’s a note in the set_root_attributes filter doc that seems to imply that the former should work.

Do you have any insight into the timeline for the attributes-in-editor fix? The Bricks team is usually very responsive about bugfixes, and this seems like a fairly glaring oversight for anyone trying to extend Bricks.