Customizing: Restricting the Beaver Builder Editor for clients
This video looks at how easy it is to hide and block various parts of the Beaver Builder editor for certain user roles. We’ll look at the hiding the Beaver Builder logo, Toolbar buttons and Module and Saved template areas. We’ll also look at how to restrict client access to Rows, Columns, Modules or even an entire page.
Links
Set Page Builder editing capabilities
Hide options in the Page Builder toolbar
(this from the new Beaver Builder Knowledge base was I discovered after making the videos and includes some other CSS snippets for hiding element. Particularly useful is sub navigation buttons to the “help” button.
The Code Snippets
This needs to go in your child theme’s functions.php file:
// https://gist.github.com/jancbeck/3178689 (Bryan Willis)
if ( is\_user\_logged\_in() ) {
add\_filter('body\_class','add\_role\_to\_body');
add\_filter('admin\_body\_class','add\_role\_to\_body');
}
function add\_role\_to\_body($classes) {
$current\_user = new WP\_User(get\_current\_user\_id());
$user\_role = array\_shift($current\_user->roles);
if (is\_admin()) {
$classes .= 'role-'. $user\_role;
} else {
$classes\[\] = 'role-'. $user\_role;
}
return $classes;
}This needs to go in your child theme’s style.css file:
To make Modules, Columns or Rows clickable to for client you need to add “no-edit” (without the “”) to the advance tab of the area you would like to restrict. Add to the CSS class selector area as in the video.
/\*Example in the video \*/
/\*Removes the Beaver Logo from the Toolbar\*/
.role-editor .fl-builder-bar .fl-builder-bar-title img {
display: none;
}
/\* This hides the editor tabs (style,advanced and any others from 3rd party add-ons)\*/
.role-editor .fl-builder-lightbox .fl-builder-module-settings .fl-builder-settings-tabs {
display: none;
}
/\* Add these to make rows,columns or modules non editable \*/
.fl-builder-edit .role-editor .fl-builder-content .no-edit {
pointer-events: none;
border: 1px solid red;
}
/\* This adds a red border so administrators know which areas they have blocked \*/
.fl-builder-edit .fl-builder-content .no-edit {
border: 1px solid red;
}
.fl-builder-edit .role-editor .fl-builder-content .no-edit:before {
content: "NOT EDITABLE";
color: #FFFFFF;
text-align: center;
background-color: red;
border: 1px solid red;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
z-index: 999999;
position: absolute;
white-space: nowrap;
}This earlier video explain the idea of using CSS to block content areas (not role based here)
More Snippets to Hide individual elements
Hopefully these are understandable from their selector names.
/\*-------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------
Removes Logo, buttons and module sections \*/
.role-editor .fl-builder-bar .fl-builder-bar-title img {
display: none;
}
.role-editor .fl-builder-bar .fl-builder-bar-title {
display: none;
}
.role-editor .fl-builder-bar .fl-builder-help-button {
display: none;
}
.role-editor .fl-builder-bar .fl-builder-tools-button {
display: none;
}
.role-editor .fl-builder-bar .fl-builder-templates-button {
display: none;
}
.role-editor .fl-builder-blocks #fl-builder-blocks-widgets {
display: none;
}
.role-editor .fl-builder-blocks #fl-builder-blocks-saved-rows {
display: none;
}
.role-editor .fl-builder-blocks .fl-builder-blocks-node-template {
display: none;
}
/\*Removes Module icons\*/
.role-editor .fl-module .no-icon .fl-block-remove {
display: none !important;
}
.role-editor .fl-module .no-icon .fl-block-col-settings {
display: none !important;
}
.role-editor .fl-module .no-icon .fl-block-copy {
display: none !important;
}
.role-editor .fl-module .no-icon .fl-block-move {
display: none !important;
}
/\*Removes column icons \*/
.role-editor .fl-col.no-icon .fl-block-remove {
display: none !important;
}
.role-editor .fl-col.no-icon .fl-block-col-settings {
display: none !important;
}
.role-editor .fl-col .no-icon .fl-block-copy {
display: none !important;
}
.role-editor .fl-col .no-mod-icon .fl-block-move {
display: none !important;
}
/\*Removes row icons \*/
.role-editor .fl-row .no-icon .fl-block-remove {
display: none !important;
}
.role-editor .fl-row .no-icon .fl-block-col-settings {
display: none !important;
}
.role-editor .fl-row .no-icon .fl-block-copy {
display: none !important;
}
.fl-builder-edit .role-editor .no-icon .fl-block-move {
display: none !important;
}Restrict editing on a whole page
This CSS need to be added via the Page Builder front editor while in the page that need restricting.
/\*Blocks the whole page - add the Page Builder editor via Tools > Layout CSS/ JavaScript (CSS tab input area) \*/
.fl-builder.role-editor .fl-builder-content {
pointer-events: none;
border: 1px solid red;
}
.fl-builder.role-editor:before {
content: "NOT EDITABLE";
color: #FFFFFF;
text-align: center;
background-color: red;
border: 1px solid red;
padding: 5px 10px;
font-size: 12px;
font-weight: 600;
z-index: 999;
position: absolute;
white-space: nowrap;
}