Add better visible controls on Beaver Builder editor. Work by Matt Eastwood

Didou Schol

Last update: Feb 1, 2022

Related tags

PDF bb-ui-enhancements

Overview

Beaver Builder UI Enhancements

Community Plugin by Matt Eastwood / Guy Barry / Didou Schol / Marleen Kiral

Add extra styling when editing Beaver Builder layouts. Hit CTRL+e or CMD+e to activate/deactivate enhancements.

Distinguishes nested columns by showing dotted outlines
Adds a small icon to nested columns
Highlights columns and their parents on hover
Gives distinct colours to rows, columns and modules
Shows all columns when hovering BB admin bar
Shows all rows and columns when hovering "Responsive Editing" bar

Once you've selected to show the enhancements, it will be remembered until you disable it again, much like the dark/light mode option.

change styling

You can change the styling of the enhancements by adding CSS variables to your global CSS. All default colors and the outline width are set at root level, so redeclaring them at anything below that should work:

body.fl-builder-edit {
    --bbui-row-color                        : #5fb238;
    --bbui-row-color-hover                  : #8ac171;
    --bbui-column-color                     : #00A0D2;
    --bbui-column-color-hover               : #00A0D2;
    --bbui-module-color                     : #d2005f;
    --bbui-module-color-hover               : #e05292;
    --bbui-empty-col-highlight-bgcolor      : rgba(0, 160, 210, 0.1);
    --bbui-nested-col-parent-border-color   : rgba(0, 160, 210, 0.5);
    --bbui-outline-width                    : 2px;
}

disable Enhance button

You can remove the enhance button from the toolbar if needed. Simply add a filter to your theme's functions.php

add_filter( 'bb-ui-enhancements-settings' , 'disable_enhance_button' , 10 , 1 );
/**
* disable_enhance_button
*
* @param  mixed $settings
* @return array
*/
function disable_enhance_button( $settings ) {
    $settings[ 'enhanceButton' ] = false;
    return $settings; 
}

Tested with the following themes

BB UI Enhancements has been succesfully tested with the following popular (child-)themes:

Beaver Theme
Page Builder Framework
Astra
GeneratePress

Version history

Version	Changes
1.1.2	Added Enhance Button on Beaver Builder toolbar; tweaked CSS for theme compatability.
1.1.1	Moved loading of bb-ui-enhancements.js to footer to ensure jQuery is loaded.
1.1.0	Store Enhancement preference to local storage so it also starts that way on reload, adding css vars so custom colors and border width can be set easily.
1.0.0	First commit.

Mandatory attribution:

Icons made by Freepik from www.flaticon.com

Integrates the Trix Editor with Laravel. Inspired by the Action Text gem from Rails.

Integrates the Trix Editor with Laravel. Inspired by the Action Text gem from Rails. Installation You can install the package via composer: composer r

267 Jan 4, 2023

ICEcoder is a browser based code editor, which provides a modern approach to building websites

ICEcoder Code editor awesomeness ...in your browser ICEcoder is a browser based code editor, which provides a modern approach to building websites. By

1.4k Dec 18, 2022

A web based file manager,web IDE / browser based code editor

KodExplorer Update to kodbox: https://github.com/kalcaddle/kodbox Download | Demo It is recommended to use a new design upgrade product:kodbox 该项目处于维护

5.8k Jan 3, 2023

Documents WordPress Classic Editor integration points and their Gutenberg equivalents

Gutenberg Migration Guide This repository documents WordPress Classic Editor customization points and their Gutenberg equivalents (if such exist). Its

185 Nov 16, 2022

MailEclipse - Laravel Mailable Editor!

MailEclipse is a mailable editor package for your Laravel applications to create and manage mailables using a web UI.

1.9k Jan 5, 2023

A package that makes it easy to have the `artisan make:` commands open the newly created file in your editor of choice.

Open On Make A package that makes it easy to have the artisan make: commands open the newly created file in your editor of choice. Installation compos

94 Nov 22, 2022

Allow SVG images to be used in Magento CMS blocks and pages via the TinyMCE Wysiwyg Editor.

Hyvä Themes - SVG support for the Magento CMS Wysiwyg Editor Allow SVG images to be used in CMS blocks and pages via the TinyMCE Wysiwyg Editor. hyva-

14 Dec 15, 2022

A plugin to disable the drop cap option in Gutenberg editor paragraph block. This is version 2.

Disable Drop Cap (v2) A plugin to disable drop cap option in the Gutenberg editor block editor paragraph block. Note for WordPress 5.8 With WordPress

4 Jan 4, 2022

A field for editing code in the SilverStripe CMS using Ace Editor

SilverStripe CodeEditorField This module adds a CodeEditorField that uses Ace Editor (http://ace.c9.io/) to let you edit code (mostly HTML or JavaScri

25 Apr 20, 2022

Provides powerful menu editor to replace category based menus in Magento 2

Magento 2 Menu Provides powerful menu editor to replace category based menus in Magento 2. Setup Create new menu in the admin area Content Elements

230 Nov 17, 2022

Yii 2 widget for the Froala WYSIWYG HTML Editor.

Yii Framework Froala WYSIWYG HTML Editor Yii 2 widget for Froala Wysiwyg editor. Installation The preferred way to install this extension is through c

99 Sep 21, 2022

This bundle aims to easily integrate & use the Froala editor in Symfony 4.4+/5.0+.

KMSFroalaEditorBundle Introduction This bundle aims to easily integrate & use the Froala editor in Symfony 4.4+/5.0+. If you want to use it with Symfo

102 Nov 15, 2022

KodExplorer is a file manager for web. It is also a web code editor, which allows you to develop websites directly within the web browser.

5.5k Feb 10, 2022

Comments

Add jQuery as a dependency

Forcing to the footer is not a sure way to make sure it loads after jQuery especially when most people force jquery to the footer to get extra internet points on their 1st day on the job ;) Adding jQuery as a dependency ensures the script loads after it no matter where jQuery is added.

opened by Pross 3
Feature Request: Module type shown on hover

I'd love an UI enhancement option for BB which showed the module type on hover (module custom classes/ID's would be a bonus) It would speed up our workflow and we'd pay for a pro version which had this if needed.

I like the way Wayfinder adds this for Gut blocks. https://wordpress.org/plugins/wayfinder/

opened by gbissland 0
1.1.4 stopped working

I updated from 1.1.3 to 1.1.4 and the plugin stopped working - the icon on the BB toolbar is gone and the highlights on hover don't work. Tested on 3 different sites.

opened by innovauno 1
Plugin warning: illegal string offset

Hello, I keep getting a plugin warnings: Warning: illegal string offset 'tag_name' in /wp-content/plugins/bb-ui-enhancements-master/inc/GithubUpdater.php on line 155

opened by innovauno 0

Releases(1.2.0)

1.2.0(Nov 18, 2022)

Made to be compatible with upcoming bb 2.7

fixed button not displaying when initialized too early.
Source code(tar.gz)
Source code(zip)
1.1.5(Nov 16, 2021)

Removed the dependencies.
Source code(tar.gz)
Source code(zip)
1.1.4(Nov 16, 2021)

Added dependencies for loading script, added FLBuilder hook to load after BB UI has finished init.
Source code(tar.gz)
Source code(zip)
1.1.2(Apr 25, 2021)

Source code(tar.gz)
Source code(zip)
1.1.1(Apr 20, 2021)

Source code(tar.gz)
Source code(zip)
1.1.0(Apr 20, 2021)

Source code(tar.gz)
Source code(zip)
1.0.0(Apr 20, 2021)

Source code(tar.gz)
Source code(zip)

Add better visible controls on Beaver Builder editor. Work by Matt Eastwood

Related tags

Overview

Beaver Builder UI Enhancements

Community Plugin by Matt Eastwood / Guy Barry / Didou Schol / Marleen Kiral

change styling

disable Enhance button

Tested with the following themes

Version history

Mandatory attribution:

You might also like...

Integrates the Trix Editor with Laravel. Inspired by the Action Text gem from Rails.

ICEcoder is a browser based code editor, which provides a modern approach to building websites

A web based file manager,web IDE / browser based code editor

Documents WordPress Classic Editor integration points and their Gutenberg equivalents

MailEclipse - Laravel Mailable Editor!

A package that makes it easy to have the `artisan make:` commands open the newly created file in your editor of choice.

Allow SVG images to be used in Magento CMS blocks and pages via the TinyMCE Wysiwyg Editor.

A plugin to disable the drop cap option in Gutenberg editor paragraph block. This is version 2.

A field for editing code in the SilverStripe CMS using Ace Editor

Provides powerful menu editor to replace category based menus in Magento 2

Yii 2 widget for the Froala WYSIWYG HTML Editor.

This bundle aims to easily integrate & use the Froala editor in Symfony 4.4+/5.0+.

KodExplorer is a file manager for web. It is also a web code editor, which allows you to develop websites directly within the web browser.

JSON Editor for Laravel-admin

Provides a twig editor field with Twig & Craft API autocomplete

File & Folders & Media Browser With Code Editor

WordPress plugin boilerplate using React and Block Editor components.

PDF API. JSON to PDF. PDF Template Management, Visual HTML Template Editor and API to render PDFS by json data

This WordPress Plugin introduces advanced citation capabilities to the WordPress Block Editor.

Comments

Add jQuery as a dependency

Feature Request: Module type shown on hover

1.1.4 stopped working

Plugin warning: illegal string offset

Releases(1.2.0)

1.2.0(Nov 18, 2022)

1.1.5(Nov 16, 2021)

1.1.4(Nov 16, 2021)

1.1.2(Apr 25, 2021)

1.1.1(Apr 20, 2021)

1.1.0(Apr 20, 2021)

1.0.0(Apr 20, 2021)

Owner

Didou Schol

Scaffold plugin for creating and managing Blocks, Block Patterns, Block Styles and Block Editor Sidebars in the WordPress Block Editor (aka Gutenberg).

Better Moderation, moderation just done better.

Main component controls and coordinates saga participants

A lightweight PHP paginator, for generating pagination controls in the style of Stack Overflow and Flickr.

Oxygen Builder's better workflow and environment

Oxygen Builder's better workflow and environment

Facebook Query Builder: A query builder for nested requests in the Facebook Graph API

Boilerplate code for protecting a form with proof of work. Uses javascript in the browser to generate the hashcash and PHP on the server to generate the puzzle and validate the proof of work.

A PHP Library To Make Your Work Work Easier/Faster

Create videos programmatically in the cloud from PHP: add watermarks, resize videos, create slideshows, add soundtrack, voice-over with text-to-speech (TTS), text animations.