Builder render issues with Custom private post type

[danieliser]

We migrated to Bricks for our latest site rebuild and have been really enjoying the experience.

We can obviously already insert template shortcodes into plugin Popup Maker’s popups and it seems to work fine.

Trying to integrate it to allow bricks editor directly with our popups which are a private post type that is rendered separately & without their own urls typically.

I’ve implemented a few hacks that seem to be getting us most of the way there at least for a start, but can’t quite work out how to polish it off:

This gives us a mostly there experience where your editing within the actual popup on the frontend… Perfect…

But when rendered in the normal flow of things on other pages, none of the CSS needed to style the template gets loaded, but the HTML is there.

What I’d like help with:

Figuring out how to load the CSS.

I’m sure there is a helper method or something, just not finding it on google or digging in the code for last couple hours.

Polish our hacks into a real feature

Current hacks:

1. When Bricks is in editor mode for a popup, we modify the publicly queryable var to true. This lets the builder run.
2. We modify our CSS selectors and inline our styles, to include the Bricks editor body (overlay) & canvas (popup) so that the editor appears to be editing within the popup, using the users existing popup theming.
3. We load some JS only in the builder iframe along with our popups normal HTML divs (and classes/styles). This JS clones the classes & styles accordingly (on interval currently, needs real events to listen for hopefully)
4. In our content output (which doesn’t typically use the_content or its main filters, we detect if there is bricks data Database::get_template_data( 'content' ) after overloading the global $post (something we normally don’t do) and output using your render method.

In order to style the editor to appear like its editing within the popups narrower container we had to add some CSS to overload the flex display & hard widths of containers (1100px by default).

We also had to clone all the classes from our popups html containers to the relevant parts of the editor canvas (body & canvas area) to fully apply things like theming etc.

1. Would love an official way to append classes/styles to those elements in the editor context if possible.
2. If that’s not possible/workable for now, some guidance on if there is a cleaner way than an interval checking if they have specific classes or not.

Some JS events we can listen for to cover the following would be ideal:

• On Canvas Init
• On Canvas Container Replacement This occurs when it goes from empty container to having content.
• On any other event that changes the or main canvas html elements3

Potentially new helper methods for better private post type support?

Any potential support for this, such as a method that internally handles overloading global $post if that is truly necessary. Have sample code from our Content Control plugin that does this well.

Something like \Bricks\render_post_template( $post_id, $enqueue_scripts );, this might enqueue styles, set global $post before calling render internally etc.

Thanks in advance.