Restrict WordPress Gutenberg Block Settings Based on Post Type, User Roles, or Block Context

, ,

Welcome to the world of WordPress block design and development! The WordPress Editor empowers users with significant control over their content layout. However, this freedom can sometimes lead to challenges, especially on websites with diverse user roles and responsibilities. While administrators may require access to all design tools, content creators often prefer a simpler experience.

Have you ever wondered how to strike a balance between design flexibility and user restrictions? In this tutorial, we will explore a clever approach how to manage block settings and restrictions based on post type, user roles, and even specific block contexts. By the end, you’ll have the knowledge to create a tailored and user-friendly content creation experience for your website.

While the theme.json file offers options for global or block-level settings restrictions, controlling user-level restrictions requires a different strategy.

So, imagine this scenario: you want to limit the dimension settings (both padding and margin) for blocks used specifically on pages. Administrators should have the power to modify dimensions, while other users should not.

Use the arrow to slide down and compare the block settings

To achieve our goal, we’ll make use of the blockEditor.useSetting.before filter and leverage two powerful tools: the canUser selector from the @wordpress/data package to handle permissions and the getCurrentPostType selector from the @wordpress/editor package to determine the current post type.

Ready to dive in? Let’s explore a simplified code snippet that demonstrates how to retrieve these selectors and restrict dimension settings for blocks used on pages:

import { select } from '@wordpress/data';
import { addFilter } from '@wordpress/hooks';
/**
* Component to disable dimension settings based on block context.
*
* @param {Object} settings – The block settings object.
* @param {string} settingsName – The name of the settings being modified.
* @param {string} clientId – The block id.
* @param {string} blockName – The block name.
* @returns {Object} The updated block settings object.
*/
const disableDimensionSettings = (settings, settingsName, clientId, blockName) => {
// Retrieve current user with capability to update settings
const { canUser } = select('core');
const currentUser = canUser('update', 'settings');
// Retrieve the current post type
const { getCurrentPostType } = select('core/editor');
const currentPostType = getCurrentPostType();
// Disable these block settings.
const disabledBlockSettings = [
'spacing.padding',
'spacing.margin',
];
if (
disabledBlockSettings.includes( settingsName ) &&
currentPostType === 'page' &&
!currentUser // Add this condition for Admin only access
) {
return false;
}
return settings;
};
addFilter(
'blockEditor.useSetting.before',
'my-plugin/disable-dimension-settings',
disableDimensionSettings
);
view raw disable-block-settings.js hosted with ❤ by GitHub

Congratulations! You’ve now learned how to effectively manage block settings in WordPress Gutenberg block editor based on post type, user roles, and block contexts. By utilizing the blockEditor.useSetting.before filter, along with selectors like canUser and getCurrentPostType, you have gained the power to fine-tune the design control of your website’s blocks.

Leave a Reply

I won’t send you spam. Unsubscribe at any time.

%d bloggers like this: