diff --git a/packages/block-editor/src/hooks/custom-css.js b/packages/block-editor/src/hooks/custom-css.js
index 5bd3347726e524..3076b145f912e3 100644
--- a/packages/block-editor/src/hooks/custom-css.js
+++ b/packages/block-editor/src/hooks/custom-css.js
@@ -7,6 +7,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 import { processCSSNesting } from '@wordpress/global-styles-engine';
+import { useBlockEditingMode } from '../components/block-editing-mode';
 
 /**
  * Internal dependencies
@@ -33,6 +34,11 @@ const EMPTY_STYLE = {};
  * @param {Object}   props.style         Block style attribute.
  */
 function CustomCSSControl( { blockName, setAttributes, style } ) {
+	const blockEditingMode = useBlockEditingMode();
+
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
 	const blockType = getBlockType( blockName );
 
 	function onChange( newStyle ) {
diff --git a/test/e2e/specs/site-editor/navigation-editor.spec.js b/test/e2e/specs/site-editor/navigation-editor.spec.js
index 8e39578b31ebab..17d6b6de0a765d 100644
--- a/test/e2e/specs/site-editor/navigation-editor.spec.js
+++ b/test/e2e/specs/site-editor/navigation-editor.spec.js
@@ -107,10 +107,10 @@ test.describe( 'Editing Navigation Menus', () => {
 				sidebar.getByRole( 'tab', { name: 'Document Overview' } )
 			).toBeHidden();
 
-			// The Settings tab is visible due to Custom CSS support.
 			await expect(
 				sidebar.getByRole( 'tab', { name: 'Settings' } )
-			).toBeVisible();
+			).toBeHidden();
+
 			await expect(
 				sidebar.getByRole( 'tab', { name: 'Styles' } )
 			).toBeHidden();