Subject: Feature Question: Restricting Builder UI/Panels based on User Roles (Agency/SaaS use case)

[Samy82]

Hi,

I have a separate question regarding User Roles and the Website Builder.

I am a beginning programmer (currently learning HTML, CSS, JS, and Next.js) and I am building an agency service (SaaS) using Vvveb. I am very impressed with the platform so far!

For my 'Basic' subscription clients, I want to create a "locked-down" experience to prevent them from accidentally breaking the design. Ideally, I want them to be able to edit only specific things.

My Questions:

Is it possible to restrict the builder panels so a user with a specific role can only edit text and images, while hiding advanced panels like Typography, Colors, or Layout?

Does Vvveb have a built-in way to define which "Sectors" in the Style Manager are visible per role?

If this needs to be done via custom code, where would be the best place to inject a script to modify the editor UI? Would something like this be the right direction?

JavaScript
// Example: Hide specific style sectors for 'basic' role
if (userRole === 'basic') {
const styleManager = editor.StyleManager;
// Logic to remove or hide specific sectors/panels
styleManager.getSectors().reset();
styleManager.addSector('Content', {
name: 'Text & Image Edit Only',
open: true,
buildProps: ['text-content', 'src']
});
}
I would love to hear your advice on how to best achieve this "Client-Safe" mode for an agency setup.

Best regards!

[hayden-t]

most editor elements are defined in the base editor.html file, so you can just conditionally switch on/off those blocks/buttons being shown, this however is only client side protection, and if someone experienced enough could bypass it, but it would be enough to stop base users.

[givanz]

Hi,

If you want to have the logic in javascript then you can insert something like this in public/admin/default/editor/editor.html

<script>
let adminRole = '{$this->adminRole}';
if (adminRole == 'super_admin') {
	
}
</script>

You will need a plugin to set adminRole variable, just create a file /plugins/my-plugin/plugin.php with the following

/*
Name: Hide editor based on role
Slug: hide-editor
*/

use Vvveb\System\Event;
use Vvveb\System\User\Admin;

Event::on('Vvveb\System\Core\View', 'render', __CLASS__, function ($template, $tplFile, $templateEngine, $view) {
	if ($template == 'editor/editor.html') {
		$admin = Admin::current();
		$view->adminRole = $admin['role'];
	}
	
	return [$template, $tplFile, $templateEngine, $view];

});

In addition you can also insert the javascript code with the plugin from a file (my-plugin/editor.html) to avoid manually editing editor/editor.html

Event::on('Vvveb\System\Core\View', 'compile:after', __CLASS__, function ($template, $htmlFile, $tplFile, $vTpl, $view) {
	if ($template == 'editor/editor.html') {
		$vTpl->addCommand('body|append','from(/plugins/my-plugin/editor.html|script)');
	}

	return [$template, $htmlFile, $tplFile, $vTpl, $view];
});

You can also hide editor elements from php without any javascript code by loading a template from a plugin

.style-tab|hide    = $this->hideStyles
.advanced-tab|hide = $this->hideAdvanced
.blocks-tab|hide   = $this->hideBlocks

And the flags can be set in the plugin code with

if ($admin['role']	== 'super_admin') {
	$view->hideStyles = true;
	$view->hideAdvanced = true;
	$view->hideBlocks = true;
	$view->hideConfiguration = true;
	
	$view->adminRole = $admin['role'];
}

I added all example code in a single plugin

hide-editor.zip

[Samy82]

Hi Givanz,

Thanks a lot for the examples and the plugin! This is exactly what I need to separate my Basic and Premium packages.

I will test it tomorrow and let you know how it works.

Best regards,