Disable “Custom CSS” for blocks in WordPress 7.0

Published: June 18, 2026 by Matze – Leave a comment

In WordPress 7.0 and newer, you can use a per-block custom CSS input field to add exactly that: custom CSS for a particular block. And there’s currently no easy way to disable it. Thus, I’ll show you how to do it, even though it is relatively hidden within the “Advanced” settings panel of each block.

There’s two options to disable the custom CSS input field. One via PHP and one via JavaScript. Both come down to explicitly set the customCSS support property to false to tell WordPress that custom CSS is not supported by the blocks.

PHP

/**
 * Disable custom CSS in single blocks.
 * 
 * @param	array{supports: array{supports: array{customCSS?: bool}}}	$metadata Current metadata
 * @return	array{supports: array{supports: array{customCSS?: bool}}} Updated metadata
 */
function disable_block_custom_css( array $metadata ): array {
	$metadata['supports']['customCSS'] = false;
	
	return $metadata;
}

\add_filter( 'block_type_metadata', 'disable_block_custom_css' );
Code language: PHP (php)

JavaScript

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'epiphyt/disable-custom-css',
    disableCustomCSS
);

function disableCustomCSS( settings, name ) {
	if ( ! settings.supports ) {
		settings.supports = {};
	}
	
	settings.supports.customCSS = false;
	
	return settings;
}Code language: JavaScript (javascript)

You can also check for $metadata['name'] in PHP or settings.name in JavaScript to check for specific types of blocks to disable the custom CSS field only for them.