WIP: Components as block CSS - Gutenberg vs Bricks/Frontend

[tibo]

Hello,

Seems this issue has been partially corrected, all CSS from bricks components are not applied:

Top = Gutenberg (not correct)

Bottom = Bricks/Frontend (correct)

additionally: the container 1440px seems not applied

(title size + caption CSS)

(bullet/number/link color not applied)

(image height not respected)

[charaf]

Hi @tibo,

Could you please export the component and share it so we can replicate it locally? Feel free to share it to help@bricksbuilder.io and include a link to this forum thread so we can track it. Thanks!

[tibo]

Thank you for the reply.

I will send an email with temp access.

[charaf]

Hi @tibo,

Thank you for sharing access

Let’s go through each reported issue.

#1 Header font size
The font size is set to var(--text-xl), which resolves via rem. On the frontend, the root font-size is set to 62.5% by Bricks, so the computed value differs from the block editor.

In the block editor, we cannot override all root styles because they would also affect the editor UI itself. We’ll be providing an improvement but whether this will work on a certain setup depends on how the block editor renders blocks.

Gutenberg has two rendering modes:

• Iframe mode: Blocks are rendered inside an iframe, and Bricks root styles can be safely applied because they only affect block content.
• Non-iframe mode: Root styles affect the entire editor, so we can’t override them.

Your site is currently using the non-iframe rendering mode. The block editor currently only switches to iframe mode when both of these conditions are met:

1. All registered blocks use apiVersion: 3 or higher. If any block is still on apiVersion: 2 or lower, the editor falls back to non-iframe mode. One of your plugins is likely registering legacy blocks.
2. There are no classic (non-block) meta boxes below the editor. Any classic meta box disables iframe isolation (not the case in your setup).

This limitation is expected to be removed in WordPress 7.0:

In WordPress 7.0, the post editor is planned to always work as an iframe, regardless of the apiVersion of registered blocks.

→ API Versions – Block Editor Handbook | Developer.WordPress.org

We’ve added iframe root-style handling to our internal to-do list.

#2 Caption styling
The caption and image styles are injected via custom code in your “Single news” template settings. So that styling only applies where the template is rendered, which is why the styling differs from what you see in the block editor. This is expected behavior, not a bug.

#3 Bullet, number, and link colors
Same root cause as #2. These styles are defined on the single Bricks template and only apply where that template is rendered.

#4 Image height not respected
I’ve identified the root cause. The .post-two-pictures-img class is reused in another component, and its CSS is loaded later, overriding the element-level max-width applied to the image. I’ve added this to our bug tracker.

[tibo]

Thank you for your investigation!

is there a way to overcome #2 / #3 ? this is not ideal and could be very confusing for somebody building a post in Gutenberg. I guess it is to inject it in the custom CSS of the components directly but that’repeating in many cases the same CSS.

[charaf]

Hi @tibo,

Regarding #2 & #3, I thought it through more and you’re right, it does look confusing. We should enqueue theme styles within the block editor if components as blocks is enabled. I have added this to our to-do list.