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

Remove editor styles from front-facing stylesheets #24439

Merged
merged 3 commits into from
Aug 11, 2020
Merged

Remove editor styles from front-facing stylesheets #24439

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d47b80
Remove editor styles from front-facing stylesheets
aristath Aug 7, 2020
786e9ef
inline comments should end in full-stops
aristath Aug 11, 2020
07c07a4
Missed this period
aristath Aug 11, 2020
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
198 changes: 198 additions & 0 deletions packages/base-styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,204 @@
}
}

@mixin background-colors() {
.has-pale-pink-background-color {
background-color: #f78da7;
}

.has-vivid-red-background-color {
background-color: #cf2e2e;
}

.has-luminous-vivid-orange-background-color {
background-color: #ff6900;
}

.has-luminous-vivid-amber-background-color {
background-color: #fcb900;
}

.has-light-green-cyan-background-color {
background-color: #7bdcb5;
}

.has-vivid-green-cyan-background-color {
background-color: #00d084;
}

.has-pale-cyan-blue-background-color {
background-color: #8ed1fc;
}

.has-vivid-cyan-blue-background-color {
background-color: #0693e3;
}

.has-vivid-purple-background-color {
background-color: #9b51e0;
}

.has-white-background-color {
background-color: #fff;
}

// Deprecated from UI, kept for back-compat
aristath marked this conversation as resolved.
Show resolved Hide resolved
.has-very-light-gray-background-color {
background-color: #eee;
}

.has-cyan-bluish-gray-background-color {
background-color: #abb8c3;
}

// Deprecated from UI, kept for back-compat
.has-very-dark-gray-background-color {
background-color: #313131;
}

.has-black-background-color {
background-color: #000;
}
}

@mixin foreground-colors() {
.has-pale-pink-color {
color: #f78da7;
}

.has-vivid-red-color {
color: #cf2e2e;
}

.has-luminous-vivid-orange-color {
color: #ff6900;
}

.has-luminous-vivid-amber-color {
color: #fcb900;
}

.has-light-green-cyan-color {
color: #7bdcb5;
}

.has-vivid-green-cyan-color {
color: #00d084;
}

.has-pale-cyan-blue-color {
color: #8ed1fc;
}

.has-vivid-cyan-blue-color {
color: #0693e3;
}

.has-vivid-purple-color {
color: #9b51e0;
}

.has-white-color {
color: #fff;
}

// Deprecated from UI, kept for back-compat
.has-very-light-gray-color {
color: #eee;
}

.has-cyan-bluish-gray-color {
color: #abb8c3;
}

// Deprecated from UI, kept for back-compat
.has-very-dark-gray-color {
color: #313131;
}

.has-black-color {
color: #000;
}
}

@mixin gradient-colors() {
// Our classes uses the same values we set for gradient value attributes, and we can not use spacing because of WP multi site kses rule.

/* stylelint-disable function-comma-space-after */
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
background: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
}

.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
}

.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
background: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
}

.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
background: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
}

.has-luminous-vivid-orange-to-vivid-red-gradient-background {
background: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
}

.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
background: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
}

.has-cool-to-warm-spectrum-gradient-background {
background: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
}

.has-blush-light-purple-gradient-background {
background: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
}

.has-blush-bordeaux-gradient-background {
background: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
}

.has-purple-crush-gradient-background {
background: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%);
}

.has-luminous-dusk-gradient-background {
background: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
}

.has-hazy-dawn-gradient-background {
background: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%);
}

.has-pale-ocean-gradient-background {
background: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
}

.has-electric-grass-gradient-background {
background: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
}

.has-subdued-olive-gradient-background {
background: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%);
}

.has-atomic-cream-gradient-background {
background: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%);
}

.has-nightshade-gradient-background {
background: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%);
}

.has-midnight-gradient-background {
background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
}
/* stylelint-enable function-comma-space-after */
}

// It is important to include these styles in all built stylesheets
aristath marked this conversation as resolved.
Show resolved Hide resolved
// This allows to CSS variables post CSS plugin to generate fallbacks.
:root {
Expand Down
36 changes: 36 additions & 0 deletions packages/block-library/src/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,42 @@
*/
@import "./block/edit-panel/editor.scss";

:root .editor-styles-wrapper {
// Background colors.
@include background-colors();

// Foreground colors.
@include foreground-colors();

// Gradients
@include gradient-colors();
}

// Font sizes.
// The reason we add the editor class wrapper here is
// to avoid enqueing the classes twice: here and in ./editor.scss
.editor-styles-wrapper .has-small-font-size {
font-size: 13px;
}

.editor-styles-wrapper .has-regular-font-size, // Not used now, kept because of backward compatibility.
.editor-styles-wrapper .has-normal-font-size {
font-size: 16px;
}

.editor-styles-wrapper .has-medium-font-size {
font-size: 20px;
}

.editor-styles-wrapper .has-large-font-size {
font-size: 36px;
}

.editor-styles-wrapper .has-larger-font-size, // Not used now, kept because of backward compatibility.
.editor-styles-wrapper .has-huge-font-size {
font-size: 42px;
}

/**
* Editor Normalization Styles
*
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/latest-posts/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,7 @@
.wp-block-latest-posts li a > div {
display: inline;
}

.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
margin-bottom: 20px;
}
4 changes: 0 additions & 4 deletions packages/block-library/src/latest-posts/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,3 @@
text-align: center;
}
}

.edit-post-visual-editor .wp-block-latest-posts.is-grid li {
margin-bottom: 20px;
}
Loading