Found a bug.
The Basic Text element if empty of content doesn’t exist on the frontend (not in the HTML source). I notice this as I have a counter which uses an after pseudo element and counter-increment. It is visible on the backend but not the frontend unless I add some text to the content area in the Bricks UI. This worked fine in Bricks 1.9.2 and older versions.
The same issue happens if I just insert an empty basic text element or a rich text element. It is not found on the frontend.
Hi Tom,
Thanks so much for your report!
If the element has no content (text), it makes no sense to render it anyway, keyword “clean markup”.
You can solve your very specific problem very easily by simply adding an empty space to the basic text element.
Best regards,
timmse
This is not how it worked in Bricks 1.9.2 and earlier. If the element had pseudo elements it would display. (just like it does within the builder interface)
The counter I have uses 2 pseudo elements for each digit producing text like this:
01
Adding an empty space in the text element puts a space between the 2 digits (pseduo elements) in the counter and breaks the design.
BTW my pseudo elements are created in the elements custom CSS of the Bricks UI
I swapped the text element with a div and set it to a span so that is the fix I am going with.
Though I still think elements that contain pseudo elements built within the element itself either through the Bricks UI or within its own custom css it should remain visible.
In the case of a textarea for example, it makes perfect sense to have empty content. As another example, I’m coding with AlpineJS and want the textarea to be empty and when users fill it with their content, it will display the number of characters typed. If I put a “space” in the builder just so it gets rendered, on the frontend, on load, the counter will already be at 1. In that case, the empty element makes perfect sense. There should be a switch in the builder for each element to have it rendered when empty. Something like “Render if empty”.
Like that, if some js code is used on the page for whatever reason and needs to interact with an element, the element is there even if empty.
@Philb If you need to create a <textarea>, please use the Div or Code element.
Bricks doesn’t render empty text elements for the clean markup reason Stefan already mentioned, to prevent unwanted styling (e.g. empty DD tag with spacing in a query loop), for SEO, accessibility, and validation reasons.