This is probably the worst title for any blog post, ever in the history of the internet.
Although overall I’ve been unsuccessful in what I was originally trying to achieve (although, I thought I was – I’ll explain shortly), I am excited (perhaps too much) about a new filter that’s been added to Beaver Builder that Justin from the core team kindly helped with.
Before I go into the nuts and bolts of this new addition, I do want to highlight the awesome support from the core team.
You are probably bored of me saying this by now, but I think Beaver Builder deserves to be recognised not only as a great page builder for WordPress, but as a development platform.
To build a solid community of developers, you need to have a solid product, and provide support to developers (which will of course have different skillsets and experience) that will feel comfortable falling back on – otherwise, it’s a lot to risk.
That’s what I would call the barebones benchmark.
While it might sound like I’m over-excited about a filter and am gushing a little bit (which, maybe I am) – I have to hand it to the Beaver Builder team for going over and above that benchmark.
Here’s the most-definitely-not-a-support-ticket support ticket I sent to them on January 6th:
Now, I’ve sent many an email which are much less ‘demanding’ (for want of a better word) to support teams of many other plugins, only to wait weeks for a reply, or to get flat out rejected (“sorry it’s not on our roadmap”), which is why I’m so tentative to ask.
Don’t get me wrong – support is HARD, and processes and boundaries need to be put in place – I fully understand that.
So, I’d exhausted every avenue I could personally find to solve my problem and concluded it “was impossible”. I was fully expecting to see “Sorry Doug” as the opening line when I opened the reply from Justin @ Beaver Builder (a mere 4 days later), but was delighted to instead see this:
Like I say, perhaps I’m over excited, but I’d put a lot of my very limited brain power into solving this over the course of a couple of days, and to see it solved was great!
So with all that said and done, I should get back to the point of this article, which is explaining this new magical filter called fl_builder_render_module_settings
This allows us to access the $module object and it’s form.
Why is this unbelievably cool?
Here’s a glimpse in not-very-polished GIF:
So let me explain what’s happening:
- We have a row containing 2 modules (buttons)
- When you set the row to full height, an additional field is then added (conditionally) to the button modules within the row which allow us to choose positioning
(I’ll post some more code soon with how I find the modules within the row.)
Why is this cool?
The positioning thing in itself is very useful – a number of people on Slack and Facebook have mentioned this as something they want – but actually, beyond that, it opens up a number of possibilities for clean user interfaces that display settings fields according to external factors (such as another setting applied elsewhere, like a row).
So back to positioning.
Once I had got the fields to appear, I needed to add the styling to make the positioning ‘work’.
Now, I need to confess at this point… Getting the fields to appear within the correct modules was kinda tough, and perhaps I was in a ‘battle-ready’ mindstate, but after looking at the styling for Beaver Builder modules (which use Flexbox) I immediately went head to head with it, thinking that was the only way to position this stuff.
Needless to say, with little Flexbox experience, I wasn’t very successful.
Flexbox – I appreciate you, but I don’t understand you.
So after conceding defeat, and thinking there’d be plenty of other use-cases for my new favourite filter, I thought I’d park it.
However, as if by fate, today (the day after Justin provided the solution) someone else in the Beaver Builder Slack channel posted a problem that required exactly this brand new filter!
So I began to explain how it worked, and people said (again) that if the positioning worked, it would help them.
Not one to back down from a challenge, I took responsibility, and ‘roped’ someone else (@guy_b on Slack) into my conversation, with the hopes of offloading this entire thing on to him:
It was a very good question indeed. I’ve been using the CSS ‘position’ property for YEARS, yet it didn’t occur to me even ONCE to try it. I assumed Flexbox was now the magical overlord of all DOM elements’ positioning.
And it worked!
So now, we can achieve this:
Now, of course, you could have added a CSS class to the bottom module, and then written custom CSS, but I feel this is a bit more user-friendly.
Besides, this isn’t the only use case. There’s lots of scope to do other very cool things, which I’m sure we’ll explore soon.
3 important things worth mentioning:
- This filter isn’t currently available (Beaver Builder version 1.9.2), but as you’ll have seen above from Justin’s email, it’ll be included in the next Beaver Builder update.
- I’ve had a couple of glasses of red wine tonight and I’ve not fully tested the styling side of things. I’ll do so when I get a chance later this week to see what’s possible, and then post a tutorial and some code snippets so you can implement this yourself.
- Sober or otherwise – don’t hire me for your Flexbox needs.
If you’ve got any further thoughts on how you might use this filter, and want me to try something out, just drop me a note below and I’ll do so.
Bye for now!