Beaver Builder, Sage 9 (dev-master), and module overrides

sage
1

Come on a journey with me. It’s a journey of trying to do too many things at once:

I am using Sage9 (dev-master), and Beaver Builder (1.9.4, and I’ve also tried the latest 1.10 beta), and I’m trying to override the default button module in Beaver using the typical method outlined here:

http://kb.wpbeaverbuilder.com/article/124-custom-module-developer-guide#override-built-in

Placing the fl-builder directory in the root of my Sage9 theme doesn’t work --nothing happens. Placing it in /resources does something --it breaks my entire site:

When I drop in a button module with the overrides in place (the fl-builder directory in /resources), Beaver Builder’s UI locks up and I get an error in the console:
Unexpected token '<'

If I hit Refresh, I see the button in place, but trying to click on it to edit locks the editor up again.

If I cancel out of Beaver Builder and discard changes my WordPress admin bar disappears on both the front and back end of the site. The HTML is still there, but it’s hidden by a stylesheet inserted in the site header.

Deactivating my theme doesn’t fix it. Deactivating Beaver Builder doesn’t fix it. Deleting Beaver Builder doesn’t fix it.

I am baffled by this. Is BB adding filters to the database and getting stuck somehow?

So my question is twofold:

  1. How can I use module overrides with Sage9’s new resources directory?

  2. What the hell is going on with my admin bar?

I think the answer to #1 will make #2 irrelevant.

Thanks!

2

OK I’ve worked around the issue by rolling my modules into a separate plugin, but it would be good to know what’s breaking when trying to do the overrides; it might come up with other plugins.

3

Great to see another BB + Sage user! Hooray!

Just to confirm, however, you didn’t mention in your post that you created a modules sub folder inside fl-builder.

If you check the BB model, you’ll see this

$child_path		= get_stylesheet_directory() . '/fl-builder/modules/' . $module_path;
$theme_path		= get_template_directory() . '/fl-builder/modules/' . $module_path;

Are you using Themer too, by any chance? (I have a Blade-related issue, which means, for now, I might need to revert to a non-Blade setup… I think it’s more of a BB thing rather than Sage/Blade, for the record)

4

Sorry, yes, I did use a modules subfolder.

Here’s how I worked around it: https://github.com/MWDelaney/bs-pagebuilder-modules

I should have just done this as a plugin in the first place rather than overriding modules on a per-project basis.

My plan is to add Bootstrap-friendly modules to this plugin as I need them. It only has (and overrides) button at the moment (and I should really add a filter to add btn-types from your theme).

I’d love some pull requests :slight_smile:

5

I’ve only quickly scanned your code, but what you might consider instead of manging your own duplicate modules is adding a new field to the settings form of the default/normal BB button with select fields to choose style (brand-primary etc), size (btn-lg etc) and display type (btn-block etc).

Then, depending on your selections in the button settings form you would then apply a class at the module level, using a filter, such as ‘contains-btn-block’, ‘contains-btn-primary’ etc

then you could simply create a mixin in Sage theme SCSS that resets BB button styles, then extends the Bootstrap classes

.contains-btn a {
@include reset-bb-styles();
}

.contains-btn-primary a {
@extend .btn-primary;
}
// It's fairy easy to create a SASS map to loop thru all of the styles to save lots of lines of code

.contains-btn-block a {
@extend .btn-block;
}

If you need to change the markup, then it’s a different story, and you’d need to make your own version.

1 Like
6

This is a good note. The code you see is basically my old template override slammed into a plugin between the hours of 4:45pm and 5:00pm one afternoon. It’s not… what’s the word… “good” yet.