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.

Sign up for GitHub

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

Jump to bottom

Editor styles: delete duplicate backwards compat CSS custom properties #60400

Merged
merged 6 commits into from
Apr 15, 2024
Merged

Editor styles: delete duplicate backwards compat CSS custom properties #60400

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6977f43
This is a test to move editor backwards compatibility CSS properties …
ramonjd Apr 3, 2024
0662651
Added ref to PR
ramonjd Apr 3, 2024
cd18b1f
The font size backwards compat CSS rules and properties are duplicate…
ramonjd Apr 5, 2024
5022ba7
reinstate other
ramonjd Apr 5, 2024
f1fcb17
Remove styles that are already set in common.scss
ramonjd Apr 5, 2024
f3a6198
Revert removal of duplicated deprecated CSS, as it's not relevant to …
ramonjd Apr 14, 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
16 changes: 0 additions & 16 deletions packages/block-library/src/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@
@import "./post-featured-image/editor.scss";
@import "./post-comments-form/editor.scss";
@import "./post-content/editor.scss";

@import "./editor-elements.scss";

:root .editor-styles-wrapper {
Expand All @@ -64,13 +63,6 @@
@include gradient-colors-deprecated();
}

// This CSS Custom Properties aren't used anymore as defaults,
// but we still need to keep them for backward compatibility.
:where(.editor-styles-wrapper) {
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
}

Copy link
Member Author

@ramonjd ramonjd Apr 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we also delete in this file the following rules that are duplicated in common.scss?

:root .editor-styles-wrapper {
	@include background-colors-deprecated();
	@include foreground-colors-deprecated();
	@include gradient-colors-deprecated();
}

:where(.editor-styles-wrapper) .has-normal-font-size {
	font-size: var(--wp--preset--font-size--normal);
}

:where(.editor-styles-wrapper) .has-huge-font-size {
	font-size: var(--wp--preset--font-size--huge);
}

?

They are loaded in the top-level and editor frames.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we also delete in this file the following rules that are duplicated in common.scss?

From what I've tested, removing these styles should be fine. As I remember, @ellatrix was involved in the process of injecting the document stylesheet into the iframe editor instance. Maybe she has some knowledge.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks again. I'll remove them and ask for forgiveness later :trollface:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no idea. If both stylesheets are present in the iframe, it should be fine

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for checking!

// Font sizes (not used now, kept because of backward compatibility).
//
// The reason we add the editor class wrapper here is
Expand All @@ -83,14 +75,6 @@
font-size: 42px;
}

:where(.editor-styles-wrapper) .has-normal-font-size {
font-size: var(--wp--preset--font-size--normal);
}

:where(.editor-styles-wrapper) .has-huge-font-size {
font-size: var(--wp--preset--font-size--huge);
}

/**
* Editor Normalization Styles
*
Expand Down
Loading