diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index c6a47b7b5533cc..f643f11251d30b 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -38,7 +38,11 @@ export function ExperimentalBlockCanvas( {
 			>
 				<EditorStyles
 					styles={ styles }
-					scope=".editor-styles-wrapper"
+					/*
+					 * The wrapper selector needs a little specificity but not too much, so block
+					 * styles can override root layout styles but not block style variations.
+					 */
+					scope="div:where(.editor-styles-wrapper)"
 				/>
 				<WritingFlow
 					ref={ contentRef }
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index dad62bc0594a75..a002f32286cd1f 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -373,10 +373,7 @@ function useBlockProps( { name, style } ) {
 		useBlockProps
 	) }`;
 
-	// The .editor-styles-wrapper selector is required on elements styles. As it is
-	// added to all other editor styles, not providing it causes reset and global
-	// styles to override element styles because of higher specificity.
-	const baseElementSelector = `.editor-styles-wrapper .${ blockElementsContainerIdentifier }`;
+	const baseElementSelector = `.${ blockElementsContainerIdentifier }`;
 	const blockElementStyles = style?.elements;
 
 	const styles = useMemo( () => {
diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js
index 79257ec0200be1..ab7b279aaae78c 100644
--- a/packages/block-editor/src/layouts/test/grid.js
+++ b/packages/block-editor/src/layouts/test/grid.js
@@ -5,7 +5,7 @@ import grid from '../grid';
 
 describe( 'getLayoutStyle', () => {
 	it( 'should return only `grid-template-columns` and `container-type` properties if no non-default params are provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
+		const expected = `.my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
@@ -19,7 +19,7 @@ describe( 'getLayoutStyle', () => {
 		expect( result ).toBe( expected );
 	} );
 	it( 'should return only `grid-template-columns` if columnCount property is provided', () => {
-		const expected = `.editor-styles-wrapper .my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
+		const expected = `.my-container { grid-template-columns: repeat(3, minmax(0, 1fr)); }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',
diff --git a/packages/block-editor/src/layouts/test/utils.js b/packages/block-editor/src/layouts/test/utils.js
index a2a3ac644d7ba7..09cfef8f48f8ff 100644
--- a/packages/block-editor/src/layouts/test/utils.js
+++ b/packages/block-editor/src/layouts/test/utils.js
@@ -37,7 +37,7 @@ const layoutDefinitions = {
 describe( 'getBlockGapCSS', () => {
 	it( 'should output default blockGap rules', () => {
 		const expected =
-			'.editor-styles-wrapper .my-container > * { margin-block-start: 0; margin-block-end: 0; }.editor-styles-wrapper .my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
+			'.my-container > * { margin-block-start: 0; margin-block-end: 0; }.my-container > * + * { margin-block-start: 3em; margin-block-end: 0; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -50,7 +50,7 @@ describe( 'getBlockGapCSS', () => {
 	} );
 
 	it( 'should output flex blockGap rules', () => {
-		const expected = '.editor-styles-wrapper .my-container { gap: 3em; }';
+		const expected = '.my-container { gap: 3em; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -97,7 +97,7 @@ describe( 'getBlockGapCSS', () => {
 	} );
 
 	it( 'should treat a blockGap string containing 0 as a valid value', () => {
-		const expected = '.editor-styles-wrapper .my-container { gap: 0; }';
+		const expected = '.my-container { gap: 0; }';
 
 		const result = getBlockGapCSS(
 			'.my-container',
@@ -113,21 +113,19 @@ describe( 'getBlockGapCSS', () => {
 describe( 'appendSelectors', () => {
 	it( 'should append a subselector without an appended selector', () => {
 		expect( appendSelectors( '.original-selector' ) ).toBe(
-			'.editor-styles-wrapper .original-selector'
+			'.original-selector'
 		);
 	} );
 
 	it( 'should append a subselector to a single selector', () => {
 		expect( appendSelectors( '.original-selector', '.appended' ) ).toBe(
-			'.editor-styles-wrapper .original-selector .appended'
+			'.original-selector .appended'
 		);
 	} );
 
 	it( 'should append a subselector to multiple selectors', () => {
 		expect(
 			appendSelectors( '.first-selector,.second-selector', '.appended' )
-		).toBe(
-			'.editor-styles-wrapper .first-selector .appended,.editor-styles-wrapper .second-selector .appended'
-		);
+		).toBe( '.first-selector .appended,.second-selector .appended' );
 	} );
 } );
diff --git a/packages/block-editor/src/layouts/utils.js b/packages/block-editor/src/layouts/utils.js
index 30280b8906e7a0..a813df0f788322 100644
--- a/packages/block-editor/src/layouts/utils.js
+++ b/packages/block-editor/src/layouts/utils.js
@@ -27,9 +27,7 @@ export function appendSelectors( selectors, append = '' ) {
 		.split( ',' )
 		.map(
 			( subselector ) =>
-				`.editor-styles-wrapper ${ subselector }${
-					append ? ` ${ append }` : ''
-				}`
+				`${ subselector }${ append ? ` ${ append }` : '' }`
 		)
 		.join( ',' );
 }