Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Retain the same specificity for non iframed selectors #64534

Merged
merged 33 commits into from
Aug 28, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
121ab38
WIP
talldan Jul 26, 2024
63daf74
Small fixes, improvements to root selector handling, avoid double pre…
talldan Jul 26, 2024
fa01d08
Add test for compound :where statements
talldan Jul 26, 2024
ca755ce
Fix too specific layout styles in non-iframed editor
talldan Jul 26, 2024
e73b3ae
Update handling of root selectors
talldan Jul 29, 2024
36b6fb4
Fix all the problems
talldan Jul 29, 2024
05282b1
Update comment
talldan Jul 29, 2024
5b02106
Add text for root selector text in middle of selector
talldan Jul 31, 2024
8e94cb1
Also avoid double-prefix of root selectors
talldan Jul 31, 2024
cbd97fc
Change how root selectors are transformed, inject the prefix after th…
talldan Aug 15, 2024
e65d65a
Remove hard-coded editor-styles-wrapper prefix from selectors
talldan Aug 15, 2024
b271945
Update tests and fix double prefixing for root selectors
talldan Aug 15, 2024
a9f8b10
Fix test
talldan Aug 15, 2024
17ac050
Update comment
talldan Aug 15, 2024
93455f8
Update another test
talldan Aug 15, 2024
25bfa9d
Avoid transforming selectors that already contain .editor-styles-wrapper
talldan Aug 21, 2024
6b43b57
Update ignored selectors to match behavior of postcss-prefix-wrap
talldan Aug 21, 2024
1cf8d6c
Stop using snapshots
talldan Aug 21, 2024
06051c3
Add more tests
talldan Aug 21, 2024
53ee8cf
Fix typo
talldan Aug 21, 2024
2fae7f6
Add tests for regex ignores
talldan Aug 22, 2024
8943a84
Fix ropey root selectors and add tests
talldan Aug 22, 2024
cef751e
Use a tokenizer for root prefixing
talldan Aug 23, 2024
170a313
Small optimization, Use a for loop to avoid unneccessary looping
talldan Aug 26, 2024
5292a44
Remove outdated comment
talldan Aug 26, 2024
65071fd
Update block library editor-styles-wrapper styles
talldan Aug 26, 2024
88e328e
Update comment
talldan Aug 26, 2024
9ded287
Add comment
talldan Aug 26, 2024
15f00de
Add more detail to nav block style comment
talldan Aug 27, 2024
f6a8476
Also use same scope specificity in widget editor
talldan Aug 27, 2024
69db0cb
Fix strings that look like regular expressions in ignoredSelectors
talldan Aug 27, 2024
534a8b5
Reduce diff
talldan Aug 27, 2024
b8db01a
Explain the function behavior further
talldan Aug 28, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 29 additions & 16 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 1 addition & 10 deletions packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -811,21 +811,12 @@ _Parameters_

- _styles_ `EditorStyle[]`: CSS rules.
- _wrapperSelector_ `string`: Wrapper selector.
- _transformOptions_ `TransformOptions`: Additional options for style transformation.

_Returns_

- `Array`: converted rules.

_Type Definition_

- _EditorStyle_ `Object`

_Properties_

- _css_ `string`: the CSS block(s), as a single string.
- _baseURL_ `?string`: the base URL to be used as the reference when rewritting urls.
- _ignoredSelectors_ `?string[]`: the selectors not to wrap.

### Typewriter

Ensures that the text selection keeps the same vertical distance from the viewport during keyboard events within this component. The vertical distance can vary. It is the last clicked or scrolled to position.
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,9 @@
"diff": "^4.0.2",
"fast-deep-equal": "^3.1.3",
"memize": "^2.1.0",
"parsel-js": "^1.1.2",
"postcss": "^8.4.21",
"postcss-prefixwrap": "^1.51.0",
"postcss-prefix-selector": "^1.16.0",
"postcss-urlrebase": "^1.4.0",
"react-autosize-textarea": "^7.1.0",
"react-easy-crop": "^5.0.6",
Expand Down
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/block-canvas/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@ import { useMouseMoveTypingReset } from '../observe-typing';
import { useBlockSelectionClearer } from '../block-selection-clearer';
import { useBlockCommands } from '../use-block-commands';

// EditorStyles is a memoized component, so avoid passing a new
// object reference on each render.
const EDITOR_STYLE_TRANSFORM_OPTIONS = {
// Don't transform selectors that already specify `.editor-styles-wrapper`.
ignoredSelectors: [ /\.editor-styles-wrapper/gi ],
};

export function ExperimentalBlockCanvas( {
shouldIframe = true,
height = '300px',
Expand All @@ -38,7 +45,8 @@ export function ExperimentalBlockCanvas( {
>
<EditorStyles
styles={ styles }
scope=".editor-styles-wrapper"
scope=":where(.editor-styles-wrapper)"
transformOptions={ EDITOR_STYLE_TRANSFORM_OPTIONS }
/>
<WritingFlow
ref={ contentRef }
Expand Down
7 changes: 4 additions & 3 deletions packages/block-editor/src/components/editor-styles/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ function useDarkThemeBodyClassName( styles, scope ) {
);
}

function EditorStyles( { styles, scope } ) {
function EditorStyles( { styles, scope, transformOptions } ) {
const overrides = useSelect(
( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
[]
Expand All @@ -88,14 +88,15 @@ function EditorStyles( { styles, scope } ) {
return [
transformStyles(
_styles.filter( ( style ) => style?.css ),
scope
scope,
transformOptions
),
_styles
.filter( ( style ) => style.__unstableType === 'svgs' )
.map( ( style ) => style.assets )
.join( '' ),
];
}, [ styles, overrides, scope ] );
}, [ styles, overrides, scope, transformOptions ] );

return (
<>
Expand Down
4 changes: 0 additions & 4 deletions packages/block-editor/src/hooks/duotone.js
Original file line number Diff line number Diff line change
Expand Up @@ -251,10 +251,6 @@ function useDuotoneStyles( {
const selectors = duotoneSelector.split( ',' );

const selectorsScoped = selectors.map( ( selectorPart ) => {
// Extra .editor-styles-wrapper specificity is needed in the editor
// since we're not using inline styles to apply the filter. We need to
// override duotone applied by global styles and theme.json.

talldan marked this conversation as resolved.
Show resolved Hide resolved
// Assuming the selector part is a subclass selector (not a tag name)
// so we can prepend the filter id class. If we want to support elements
// such as `img` or namespaces, we'll need to add a case for that here.
Expand Down
5 changes: 1 addition & 4 deletions packages/block-editor/src/hooks/style.js
Original file line number Diff line number Diff line change
Expand Up @@ -381,10 +381,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( () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/layouts/test/grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down
14 changes: 6 additions & 8 deletions packages/block-editor/src/layouts/test/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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' );
} );
} );
10 changes: 1 addition & 9 deletions packages/block-editor/src/layouts/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,11 @@ import { LAYOUT_DEFINITIONS } from './definitions';
* @return {string} - CSS selector.
*/
export function appendSelectors( selectors, append = '' ) {
// Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here
// The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style
// it's used to reset the default margin added by wp-admin to paragraphs
// so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
// When the post editor is fully iframed, this extra classname could be removed.

return selectors
.split( ',' )
.map(
( subselector ) =>
`.editor-styles-wrapper ${ subselector }${
append ? ` ${ append }` : ''
}`
`${ subselector }${ append ? ` ${ append }` : '' }`
)
.join( ',' );
}
Expand Down
Loading
Loading