SOLVED: Child Theme Stylesheet Overrides Builder UI

Bricks Version: 1.3.7 beta
Browser: Edge 97
OS: macOS

I’m using the Bricks Child and have enqueued a stylesheet that only has the Tailwind CSS 3.0 directives included. No other custom styles to keep testing simple.

@tailwind base;
@tailwind components;
@tailwind utilities;

The white outlines to the inputs in the attached screenshot are caused by the the inclusion of the Tailwind Form add-on. @tailwindcss/forms

There are several noticeable visual interference when using a child stylesheet. The dynamic data lighting bolt is moved out of place. The version number on the loading screen is not positioned.

I wrapped all the styles inside of .bricks-is-frontend and that solves not having the styles interfere with the editor UI. However then none of the custom styles would be visible inside of the editor for the web pages themselves.

I am sure any non-prefixed custom styles or framework CSS would cause interference.

It appears the action wp_enqueue_scripts is loading the enqueued styles for both the editor UI and the editor preview Iframe. Probably need some way that the normal wp_enqueue_scripts doesn’t load directly into the editor UI.

Hi Aaron,

Welcome to the forum and thanks a lot for your report!

We currently have another open report about custom CSS partly affecting the Builder Panel UI, but it needs some more investigation.

I think the easiest solution for your specific Tailwind problem is to prefix your styles, so they shouldn’t affect the builder styles.

I’ll add the link to this thread to our task as well, let’s see if we can make the UI more bulletproof :v:

Best regards,
timmse

1 Like

@aaron A warm welcome also from me :wave: Great to have you here.

Bricks has a PHP function called bricks_is_builder_main() that returns true if the builder panel is being loaded.

By checking against it you can make sure that your files are not being enqueued in the builder panel, but only on the canvas (iframe) and on the frontend :slight_smile:

I’ve added a code example about how to use it the to “Child Theme” Academy article as well:

You can also download the updated child theme code from your Bricks account.

1 Like

Woo that is so awesome! Thanks you for taking care of this.

1 Like