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

maximebeguin · August 5, 2022, 4:54am

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

luistinygod · August 5, 2022, 2:23pm

Hello Maxime,

Thank you for your report.

Yes, we are aware of this issue and it will be sorted out in a future release. I’ve added your message to the task in our bug tracker so we could notify you as soon as we get news.

Thank you
Luis

digitalgravy · January 28, 2023, 4:22pm

Any update on this? I’m having issues with this as well and noticed there hasn’t been any activity since August.

beziehungsweise · January 28, 2023, 5:16pm

yep … fully second this … same here!

vleytman · May 10, 2023, 12:46pm

@luistinygod second this, any news on that? it still feels very weird to add some extra JS to put an attribute to an element, when it can be output natively.

timmse · May 11, 2023, 7:26am

Hi Vasilii,
Welcome to the forum!

Unfortunately, I can’t say more than that the topic is still on the ToDo list - among many others. One after the other…

Best regards,
timmse

digitalgravy · September 24, 2023, 7:34pm

Seems like this should be an easy fix, but it’s been lingering for months. Please prioritize.

blakmarkitcreative · October 18, 2023, 10:46pm

I presume this happening for both custom attributes added via the builder UI as well as anything using the render_attributes filter? That seems to be my experience, but just making sure I’m not misunderstanding what I’m seeing.

blakmarkitcreative · November 9, 2023, 9:20pm

Popping back in here—would it be possible to prioritize this for the next release? This was reported in 1.5, more than a year ago.

bbua97 · December 6, 2023, 4:20pm

@timmse Hi This would be a really important thing to be honest. My complete layout is done with a custom class on the tag. It work on front-end but in builder mode, it’s not possible to work there. I have to add the class each time manually via the developer tools of the browser.

aeden · January 15, 2024, 1:49pm

As manu other Bricks Builder users, I also noticed this issue. While working on backend, we need to see every rendering in the Canvas, to have an exact result of what will be displayed client side. Moreover, nowadays attributes are vitals; we can’t work without them anymore; they are absolutely necessary. Please, fix that issue as soon as possible for allowing us working in best conditions.

Thanks again for your incredible tool.

Fredrik · January 30, 2024, 2:56pm

This really needs to get fixed. For me however, the data-attributes are rendered in the builder on single templates but not on section templates. Also scripts added to the $scripts array on custom elements do not execute for me. Same thing there, they execute in single template builder but not in section template builder.

digitalis · May 5, 2024, 6:46pm

Hey team, our agency is porting its framework to bricks. Like many others here, this issue is somewhat of a show-stopper for us. Could we get an update on progress with this one please? Thx

suabahasa · June 8, 2024, 6:57am

Hi @timmse ,

Could you try to adopt my implementation and adjust it to your needs?

github.com

orgrosua/yabe-bricksbender/blob/main/assets/bricks/modules/render-attribute/main.js

/**
 * @module render-attribute
 * @package Yabe Bricksbender
 * @since 1.0.1
 * @author Joshua Gugun Siagian <suabahasa@gmail.com>
 * 
 * Render the custom attribute on the Bricks editor's canvas.
 */

import { brxIframe } from '../../constant.js';
import { logger } from '../../logger.js';

const bindTmpl = `v-bind="{...(settings._attributes ? Object.assign({}, ...settings._attributes.map(attr => ({ [attr.name]: attr.value ?? '' }))) : {})}"`;

const xTemplates = brxIframe.contentDocument.querySelectorAll('script[type="text/x-template"][id^="tmpl-bricks-element-"]');
xTemplates.forEach(element => {
    if (element.id === 'tmpl-bricks-element-text-basic') {
        element.innerHTML = element.innerHTML.replace('<contenteditable', `<contenteditable ${bindTmpl}`);
    }

This file has been truncated. show original

It’s almost 2 years on the WIP, could you give it a chance to get priority, please?

thomas · June 10, 2024, 6:59am

Finally got around to working on this one

We need to do more internal testing first. Depending on the results, it will be part of 1.9.10 or the next beta.

keet · July 14, 2024, 11:56pm

Awesome, while looking into it, can you look into the “data-src” attribute not showing on a div element as well? Other “data” attributes show just fine on the front end, but specifically, “data-src,” when it contains a value on a div element, does not render on the front end.

itchycode · July 15, 2024, 7:55am

@keet ,

As per my email reply, yours is a different one which the data-src being removed by Bricks Lazyload JS.
Already opened a new bug tracker for your issue.

Thanks.

Jenn

Matej · July 16, 2024, 7:31pm

Hi guys,

We’ve added this improvement in Bricks 1.10 beta, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

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,
M

cypher · August 1, 2024, 2:29pm

Is this specific to data-attributes? I ask because I added an HTML attribute (‘open’) to a Details element with the expectation the contents will be shown in the builder, but they do not. It displays appropriately on the frontend.

Matej · August 1, 2024, 2:49pm

It is likely the same bug as this one here:

We are aware of it and are working on a fix.

Best regards,
M