FCom Bricks Integration
Currently Bricks works with FluentCommunity using a work around. You build the page with the default template and then switch to one of two FCom templates. Why? Because Bricks builder doesn't load when you use their templates.
I started tinkering around some to see if I could find a solution. I've spent several hours the past few days messing around with it. First I tried a child theme but had all sorts of odd behavior. So I dug around in the FCom code further to see exactly how they integrated with Bricks... and other than using the content, they don't. They don't look for the builder at all.... and this my friends is the issue. So I switched to a plugin and have it working. I'm still tweaking some things but just wanted folks to know it's possible. See the video.
https://share.jeffbrigman.com/Jru9DzZr
So, should this be a regular plugin or a mu-plugin? Regular can be deleted from plugins page and mu from within the plugin file folder.
I'm using a staging site to test the plugin, but plan to add it to my production site soon. I have to add compatibility with fcom pages to my collapse to icons menu first.
Jeff Brigman it appears that your styling is being stripped when it's rendered on the front end. Is that intentional?
Chris Davis no, and part of what I’m working to resolve.
Jeff Brigman yeah I have the same problem and didn't feel like looking into it so I just left it alone. Great to see you on the job 🫡
Chris Davis I’ve got the bulk of the styling issues resolved. Having issues with the icons bricks uses but I think I have it figured out too.
Just a lot of searching the code for both and then the browser inspector to figure it out.
Chris Davis This is the intended function of fluent community. Bricks won't load natively because it's designed to work with Wordpress pages, which FComm pages are not. Shortcodes will often pull the html in to where they need to be, but it's like pulling in a single frame of an animation and wondering why it's not moving. Bricks, forms, anything that isn't native FComm content requires it's own css and js files that do not exist in FComm. So it's not that it's been stripped out, it was never there in the first place.
Ross FCA yep, FCom and is just hooking Bricks content and adding it to their template.
Using the builder inline with it is a whole different beast. I did notice that most styling you add outside of the default, works. However any default styling does not which is also why the icons weren’t working. I’m having to go through it all to make sure it uses the associated file paths so it renders correctly.
My first attempt overwrote FCom and was using my styling from Core Framework and jacked up all the sizing because it has the REM converted to a 1 to 1 with pixels.
It’s a work in progress. I figured I would try to tackle this since I’m at a point to start making pages with the collapse to icons menu I’m working on.
Jeff Brigman Yep, the first time you try something like enabling fluent forms entirely inside fcomm, you realise exactly why the ninjas have not done that. These plugins are designed for a totally different setup and environment. Bringing in their massive css and js files just destroys the portal and it's a nightmare to even try to unpick.
For Events for example, it was infinitely easier to build my own one from scratch than to try get The Events Calendar to run natively inside the portal. Page builders rely on their own complex suite of css with their own unique class names and variables, none of which loads in fcomm. Nor are they compatible, even if you loaded them in they wouldn't work with your theme styles, wouldn't adhere to dark mode etc.
It's just not worth the effort, and which is why theme compatibility exists. It does it the other way and adds the fcomm header and sidebar to a standard wordpress page that does load all the styles and scripts of page builders and other plugins.
Ross FCA it’s such a freaking pain for this. I’m right there at it and this last bit is giving me a ton of headache.
Jeff Brigman you need to change the font on the icon. Something like FA,FAS etc.
Inspect the icon and find the font - change that to what it is on the frontend 🙏
Joshua Peterson it’s not that simple because FCom overrides all the CSS, not just icons.
I had to separately container the two while loading them together to get the respective CSS to properly load.
Jeff Brigman and Ross FCA thanks for this elaborate explaination. It's amazing how somethings that appear so simple are so complex to implement.
Chris Davis so I'm pretty sure I've narrowed down the culprit in this and I don't think it's FCom intentionally doing it. In fact not so much Bricks per-say either (all though I could be wrong about both). Bricks implemented the cascade layer for CSS to allow styling easier when dealing with Bricks and it's unique selector structure while maintaining it's original method. So ultimately it comes down to specificity of the selectors and it appears that FCom is winning..... however, if you disable cascade layer css (bricks settings -> performance) you'll notice the styling now returns.
Unfortunately this is not a fix as most modern browsers are moving to the cascade layer and to ensure my plugin is future proof in this regard I have to make sure it's also compatible and forces FCom to respect Bricks CSS specificity.
If you're unfamiliar with CSS specificity, it's essentially a point system that determines what styling has the priority, which is why using !important is frowned upon because it can override normal css unless you have no other choice. So the higher the specificity (points) the greater the priority it has on styling an element/content.
I left out that I'm pretty certain FCom is not using cascading layers as well and since Bricks content is loaded in their frame, it's causing FCom's css to have priority..... and since there is no styling for Bricks in FCom, it defaults to another source or elements such as icons are broken.
Chris Davis Ross FCA I think I finally have it nailed down. This thing has been a major pain in the a** The css was either being overwritten by FCom entirely or by Bricks, which jacked up the styling for both. I had to code in an aggressive method to isolate the two so they work independently. I will continue testing and have to add a few more tweaks but overall it appears to be working correctly now for the styling on both.
I've added an edit with bricks button on the front end when logged in as admin for any pages built using the FCom templates and bricks for Admin. Will also add the backend Built with Bricks box on the page so when you go to view that. I also plan to try to remove/hide the bricks header and footer, and place a banner that states it's an FCom page when in the bricks editor.
Also removed the annoying bricks header/footer that we don't need on FCom pages with a nice little header notice instead so you definitely know it's an FCom page.
Amazing work Jeff Brigman! The "Edit on Bricks" button is a nice touch as well. The only difference I could tell was the search icon on FCom pages in the header.
Chris Davis I think this is intentional on their side. Perhaps the pages/content render the FCom page unsearchable because it's not actually in their ecosystem?
Jeff Brigman you're probably right.
Update video going over how this works. Very straight forward. Excuse my voice, had some sinus/allergy junk the past week going on.
If anyone is interested in testing this to help me find any bugs/typo's etc that I may have missed, send me a message here with an email address and I'll send it over to you. While it is probably safe for production sites, I would recommend doing a site backup and/or testing on a demo/staging site.
Shahjahan Jewel let me know if you guys would be willing to take a look at my code to see if it could possibly be implemented/improved.