1

We are using the WeltPixel Peal theme. Ultimately, I'd like to prevent specific User Roles from having access to the Custom CSS/JS fields that WeltPixel adds.

WeltPixel Custom CSS fields

These are the file paths where these fields are getting set currently:

/app/code/WeltPixel/DesignElements/view/adminhtml/ui_component/category_form.xml /app/code/WeltPixel/DesignElements/view/adminhtml/ui_component/cms_block_form.xml /app/code/WeltPixel/DesignElements/view/adminhtml/ui_component/cms_page_form.xml

I think I can do this by moving them out of its current fieldset and into its own fieldset and then create an ACL for the new fieldset.

Would I create a new module to do this? Or is there another way I can achieve this?

Improve this question

1 Answer 1

Reset to default
0

Here is how I was able to disable these Custom CSS/JS fields for specific User Roles.

I created a new module that referenced the WeltPixel module where these fields come from.

/app/code/Vendor/Module/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="0.0.1.001">
        <sequence>
            <module name="WeltPixel_DesignElementst"/>
        </sequence>
    </module>
</config>

I added the necessary checkboxes to the Categories, CMS Page and CMS Block for the User Roles.

/app/code/Vendor/Module/etc/acl.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
<acl>
    <resources>
        <resource id="Magento_Backend::admin">
            <resource id="Magento_Catalog::catalog">
                <resource id="Magento_Catalog::catalog_inventory">
                    <resource id="Magento_Catalog::categories">
                        <resource id="Vendor_Module::allow_category_css_edits"
                                  title="WeltPixel CSS Options" sortOrder="20"/>
                    </resource>
                </resource>
            </resource>
            <resource id="Magento_Backend::content">
                <resource id="Magento_Backend::content_elements">
                    <resource id="Magento_Cms::page">
                        <resource id="Magento_Cms::save">
                            <resource id="Vendor_Module::allow_cms_css_edits"
                                      title="WeltPixel CSS Options" sortOrder="20"/>
                        </resource>
                    </resource>
                    <resource id="Magento_Cms::block">
                        <resource id="Vendor_Module::allow_block_css_edits"
                                  title="WeltPixel CSS Options" sortOrder="20"/>
                    </resource>
                </resource>
            </resource>
        </resource>
    </resources>
</acl>
</config>

CMS Options Category Option

With the help of this post, Disable customer attribute for editing in magento admin form for specific Roles Resources, I was then able to disable each of the Custom CSS/JS fields that WeltPixel adds.

For each of the form.xml files listed below, I duplicated the file in my module, and copied the fields into a new fieldset and then hid the original fields in their fieldsets.

/app/code/WeltPixel/DesignElements/view/adminhtml/ui_component/category_form.xml /app/code/WeltPixel/DesignElements/view/adminhtml/ui_component/cms_block_form.xml /app/code/WeltPixel/DesignElements/view/adminhtml/ui_component/cms_page_form.xml

This code is for the category_form.xml file.

/src/app/code/Vendor/Module/view/adminhtml/ui_component/category_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="weltpixel_options">
    <field name="css_global">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
    <field name="css_phone_small">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
    <field name="css_phone">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
    <field name="css_tablet_small">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
    <field name="css_tablet">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
    <field name="css_desktop">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
    <field name="css_desktop_large">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
    <field name="custom_js">
        <settings>
            <visible>false</visible>
        </settings>
    </field>
</fieldset>
<fieldset name="weltpixel_cat_css_options">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">WeltPixel CSS Options</item>
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="sortOrder" xsi:type="number">16</item>
        </item>
    </argument>
    <field name="css_global" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">110</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom Global CSS</item>
            </item>
        </argument>
    </field>
    <field name="css_phone_small" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">115</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom CSS for XXS screen size</item>
                <item name="notice" xsi:type="string" translate="true">Configure breakpoints in WeltPixel > Frontend Options > Breakpoints</item>
            </item>
        </argument>
    </field>

    <field name="css_phone" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">120</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom CSS for XS screen size</item>
                <item name="notice" xsi:type="string" translate="true">Configure breakpoints in WeltPixel > Frontend Options > Breakpoints</item>
            </item>
        </argument>
    </field>

    <field name="css_tablet_small" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">125</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom CSS for S screen size</item>
                <item name="notice" xsi:type="string" translate="true">Configure breakpoints in WeltPixel > Frontend Options > Breakpoints</item>
            </item>
        </argument>
    </field>

    <field name="css_tablet" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">130</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom CSS for M screen size</item>
                <item name="notice" xsi:type="string" translate="true">Configure breakpoints in WeltPixel > Frontend Options > Breakpoints</item>
            </item>
        </argument>
    </field>

    <field name="css_desktop" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">140</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom CSS for L screen size</item>
                <item name="notice" xsi:type="string" translate="true">Configure breakpoints in WeltPixel > Frontend Options > Breakpoints</item>
            </item>
        </argument>
    </field>

    <field name="css_desktop_large" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">150</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom CSS for XL screen size</item>
                <item name="notice" xsi:type="string" translate="true">Configure breakpoints in WeltPixel > Frontend Options > Breakpoints</item>
            </item>
        </argument>
    </field>

    <field name="custom_js" class="Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">160</item>
                <item name="dataType" xsi:type="string">varchar</item>
                <item name="formElement" xsi:type="string">textarea</item>
                <item name="label" xsi:type="string" translate="true">Custom Js</item>
            </item>
        </argument>
    </field>

</fieldset>

For cms_block_form.xml, the class on each of the fields is set to: class="Vendor\Module\Ui\Component\Form\Field\DisableBlockCssFields"

For cms_page_form.xml, the class on each of the fields is set to: class="Vendor\Module\Ui\Component\Form\Field\DisableCmsCssFields"

For each of the classes, I created a similar file. This one is for the fields on the category screen.

/src/app/code/Vendor/Module/Ui/Component/Form/Field/DisableCategoryCssFields.php

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);

namespace Vendor\Module\Ui\Component\Form\Field;

use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponentInterface;
use Magento\Framework\AuthorizationInterface;

/**
 * Process setting to set input field Disable according to roles resources
 *
 * Class Vendor\Module\Ui\Component\Form\Field\DisableCategoryCssFields
 */
class DisableCategoryCssFields extends \Magento\Ui\Component\Form\Field
{
/**
 * @var AuthorizationInterface
 */
private $authorization;

/**
 * Constructor
 *
 * @param ContextInterface $context
 * @param UiComponentFactory $uiComponentFactory
 * @param AuthorizationInterface $authorization
 * @param UiComponentInterface[] $components
 * @param array $data
 */
public function __construct(
    ContextInterface $context,
    UiComponentFactory $uiComponentFactory,
    AuthorizationInterface $authorization,
    array $components = [],
    array $data = []
) {
    $this->authorization = $authorization;
    parent::__construct($context, $uiComponentFactory, $components, $data);
}

/**
 * Prepare component configuration
 *
 * @return void
 * @throws \Magento\Framework\Exception\LocalizedException
 */
public function prepare()
{
    parent::prepare();

    $isAllowed = $this->authorization->isAllowed('Vendor_Module::allow_category_css_edits');
    if (!$isAllowed) {
        $currentConfig = $this->getData('config');
        $currentConfig['disabled'] = true;
        $this->setData('config', $currentConfig);
    }
}
}

The "isAllowed" is different for the CMS Page and CMS Blocks. It is also referenced as the resource ID in the acl.xml filed.

For DisableCmsCssFields.php it is: Vendor_Module::allow_cms_css_edits

For DisableBlockCssFields.php it is: Vendor_Module::allow_block_css_edits

That should be it.

Category Form - CSS Fields Disabled

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.