From ee81effc3244c7dc416c2cb26903431685d75552 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 29 Nov 2023 15:38:06 +0100 Subject: [PATCH 1/5] Editor styles: if scope is needed, don't increase specificity --- packages/block-editor/src/components/editor-styles/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js index 85c54109d0231..024427b0a34a3 100644 --- a/packages/block-editor/src/components/editor-styles/index.js +++ b/packages/block-editor/src/components/editor-styles/index.js @@ -88,7 +88,7 @@ export default function EditorStyles( { styles, scope } ) { return [ transformStyles( _styles.filter( ( style ) => style?.css ), - scope + scope ? `:where(${ scope })` : undefined ), _styles .filter( ( style ) => style.__unstableType === 'svgs' ) From bfc40d2efb777a1d381cd1142b0d9f0f880d9980 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 26 Mar 2024 13:38:54 +1100 Subject: [PATCH 2/5] Define scope specificity per-editor and remove extra layout scope. --- packages/block-editor/src/components/block-canvas/index.js | 2 +- packages/block-editor/src/components/editor-styles/index.js | 2 +- packages/block-editor/src/layouts/utils.js | 4 +--- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js index c6a47b7b5533c..ed73d583019e4 100644 --- a/packages/block-editor/src/components/block-canvas/index.js +++ b/packages/block-editor/src/components/block-canvas/index.js @@ -38,7 +38,7 @@ export function ExperimentalBlockCanvas( { > style?.css ), - scope ? `:where(${ scope })` : undefined + scope ), _styles .filter( ( style ) => style.__unstableType === 'svgs' ) diff --git a/packages/block-editor/src/layouts/utils.js b/packages/block-editor/src/layouts/utils.js index 30280b8906e7a..a813df0f78832 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( ',' ); } From ae30987653ee38450eee3405c7fda855a8017105 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 27 Mar 2024 15:45:43 +1100 Subject: [PATCH 3/5] Update test strings --- packages/block-editor/src/layouts/test/grid.js | 4 ++-- packages/block-editor/src/layouts/test/utils.js | 14 ++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/layouts/test/grid.js b/packages/block-editor/src/layouts/test/grid.js index 79257ec0200be..ab7b279aaae78 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 a2a3ac644d7ba..09cfef8f48f8f 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' ); } ); } ); From d11bd9968eea8740837f4335eb0641388d04df20 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 8 Apr 2024 11:19:35 +1000 Subject: [PATCH 4/5] Remove specificity bump from elements selector. --- packages/block-editor/src/hooks/style.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index dad62bc0594a7..a002f32286cd1 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( () => { From 5d23d70b60ec6ec80a5fc7a4ba7e0c2a1b44097a Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 8 Apr 2024 11:26:18 +1000 Subject: [PATCH 5/5] Add explanatory comment --- packages/block-editor/src/components/block-canvas/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js index ed73d583019e4..f643f11251d30 100644 --- a/packages/block-editor/src/components/block-canvas/index.js +++ b/packages/block-editor/src/components/block-canvas/index.js @@ -38,6 +38,10 @@ export function ExperimentalBlockCanvas( { >