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

TwentyNineteen: fix default presets in 5.9 #2140

Closed
wants to merge 9 commits into from
Closed

TwentyNineteen: fix default presets in 5.9 #2140

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6d4670a
Set default font sizes
oandregal Jan 11, 2022
15f8fb2
Add preset classes to the editor
oandregal Jan 11, 2022
6a63797
Set default colors
oandregal Jan 11, 2022
1b6319f
Fix typo
oandregal Jan 11, 2022
ca59412
Use font size values directly
oandregal Jan 11, 2022
54d062c
Add "tested up to" to the SASS file
oandregal Jan 11, 2022
23aa13e
Keep existing regular css props
oandregal Jan 13, 2022
a407770
Reorganize
oandregal Jan 13, 2022
ec772f1
Use same values as in front (em not px)
oandregal Jan 13, 2022
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
3 changes: 3 additions & 0 deletions src/wp-content/themes/twentynineteen/print.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
h1 {
font-size: 24pt;
}
.has-large-font-size {
--wp--preset--font-size--large: 14pt;
}
h2,
h3,
h4,
Expand Down
8 changes: 6 additions & 2 deletions src/wp-content/themes/twentynineteen/print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,15 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
font-size: 24pt;
}

.has-large-font-size {
--wp--preset--font-size--large: 14pt;
}

h2,
h3,
h4,
.has-regular-font-size,
.has-large-font-size,
.has-regular-font-size,
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title, h3 {
Expand Down
10 changes: 10 additions & 0 deletions src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,10 @@
margin-left: $size__spacing-unit;
margin-right: $size__spacing-unit;

&.has-white-color {
--wp--preset--color--white: inherit;
}

&.has-text-color p,
&.has-text-color a,
&.has-primary-color,
Expand Down Expand Up @@ -930,18 +934,22 @@

//! Font Sizes
.has-small-font-size {
--wp--preset--font-size--small: 0.88889em;
Copy link
Member Author

Choose a reason for hiding this comment

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

The current setup doesn't allow for using --wp--preset--font-size--small: $font__size-sm. I've tried to upgrade to a newer setup but ran into a few issues and couldn't. This is the raw value after compiling SCSS into CSS.

font-size: $font__size-sm;
}

.has-normal-font-size {
--wp--preset--font-size--normal: 1.125em;
font-size: $font__size-md;
}

.has-large-font-size {
--wp--preset--font-size--large: 1.6875em;
font-size: $font__size-lg;
}

.has-huge-font-size {
--wp--preset--font-size--huge: 2.25em;
font-size: $font__size-xl;
}

Expand Down Expand Up @@ -1004,6 +1012,7 @@

.has-white-background-color,
.wp-block-pullquote.is-style-solid-color.has-white-background-color {
--wp--preset--color--white: #FFF;
background-color: #FFF;
}

Expand Down Expand Up @@ -1038,6 +1047,7 @@
.has-white-color,
.wp-block-pullquote blockquote.has-white-color,
.wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
--wp--preset--color--white: #FFF;
color: #FFF;
}
}
8 changes: 8 additions & 0 deletions src/wp-content/themes/twentynineteen/sass/typography/_headings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ h2 {
}
}

.has-large-font-size {
--wp--preset--font-size--large: 1.6875em;
}

.has-regular-font-size,
.has-large-font-size,
.comments-title,
Expand Down Expand Up @@ -110,6 +114,10 @@ h5 {
font-size: $font__size-sm;
}

.has-small-font-size {
--wp--preset--font-size--small: 0.71111em;
}

.entry-meta,
.entry-footer,
.discussion-meta-info,
Expand Down
20 changes: 20 additions & 0 deletions src/wp-content/themes/twentynineteen/style-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,6 +581,26 @@ h6:lang(vi), figcaption:lang(vi),
}

/** === Editor Frame === */
.has-small-font-size {
--wp--preset--font-size--small: 19.5px;
font-size: 0.88889em;
}

.has-normal-font-size {
--wp--preset--font-size--normal: 22px;
font-size: 1.125em;
}

.has-large-font-size {
--wp--preset--font-size--large: 36.5px;
font-size: 1.6875em;
}

.has-huge-font-size {
--wp--preset--font-size--huge: 49.5px;
font-size: 2.25em;
}

body .wp-block[data-align="full"],
body .wp-block.alignfull {
max-width: calc(100% + 16px);
Expand Down
20 changes: 20 additions & 0 deletions src/wp-content/themes/twentynineteen/style-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,26 @@ Twenty Nineteen Editor Styles

/** === Editor Frame === */

.has-small-font-size {
Copy link
Member Author

@oandregal oandregal Jan 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Ported the font sizes here. This was a bug on its own that this PR also fixes: the theme needs to enqueue the font size classes, which TwentyNineteen didn't do, forcing Gutenberg to add inline styles to the blocks to make it work.

--wp--preset--font-size--small: 19.5px;
font-size: $font__size-sm;
}

.has-normal-font-size {
--wp--preset--font-size--normal: 22px;
font-size: $font__size-md;
}

.has-large-font-size {
--wp--preset--font-size--large: 36.5px;
font-size: $font__size-lg;
}

.has-huge-font-size {
--wp--preset--font-size--huge: 49.5px;
font-size: $font__size-xl;
}

body {

.wp-block[data-align="full"],
Expand Down
18 changes: 18 additions & 0 deletions src/wp-content/themes/twentynineteen/style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2333,6 +2333,10 @@ h2 {
}
}

.has-large-font-size {
--wp--preset--font-size--large: 1.6875em;
}

.has-regular-font-size,
.has-large-font-size,
.comments-title,
Expand Down Expand Up @@ -2360,6 +2364,10 @@ h5 {
font-size: 0.88889em;
}

.has-small-font-size {
--wp--preset--font-size--small: 0.71111em;
}

.entry-meta,
.entry-footer,
.discussion-meta-info,
Expand Down Expand Up @@ -5760,6 +5768,10 @@ body.page .main-navigation {
margin-left: 1rem;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
--wp--preset--color--white: inherit;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color p,
.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color a, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
color: inherit;
Expand Down Expand Up @@ -6283,18 +6295,22 @@ body.page .main-navigation {
}

.entry .entry-content .has-small-font-size {
--wp--preset--font-size--small: 0.88889em;
font-size: 0.88889em;
}

.entry .entry-content .has-normal-font-size {
--wp--preset--font-size--normal: 1.125em;
font-size: 1.125em;
}

.entry .entry-content .has-large-font-size {
--wp--preset--font-size--large: 1.6875em;
font-size: 1.6875em;
}

.entry .entry-content .has-huge-font-size {
--wp--preset--font-size--huge: 2.25em;
font-size: 2.25em;
}

Expand Down Expand Up @@ -6377,6 +6393,7 @@ body.page .main-navigation {

.entry .entry-content .has-white-background-color,
.entry .entry-content .wp-block-pullquote.is-style-solid-color.has-white-background-color {
--wp--preset--color--white: #FFF;
background-color: #FFF;
}

Expand Down Expand Up @@ -6410,6 +6427,7 @@ body.page .main-navigation {
.entry .entry-content .has-white-color,
.entry .entry-content .wp-block-pullquote blockquote.has-white-color,
.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
--wp--preset--color--white: #FFF;
color: #FFF;
}

Expand Down
18 changes: 18 additions & 0 deletions src/wp-content/themes/twentynineteen/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2333,6 +2333,10 @@ h2 {
}
}

.has-large-font-size {
--wp--preset--font-size--large: 1.6875em;
}

.has-regular-font-size,
.has-large-font-size,
.comments-title,
Expand Down Expand Up @@ -2360,6 +2364,10 @@ h5 {
font-size: 0.88889em;
}

.has-small-font-size {
--wp--preset--font-size--small: 0.71111em;
}

.entry-meta,
.entry-footer,
.discussion-meta-info,
Expand Down Expand Up @@ -5772,6 +5780,10 @@ body.page .main-navigation {
margin-right: 1rem;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
--wp--preset--color--white: inherit;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color p,
.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color a, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-primary-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-secondary-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-dark-gray-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-light-gray-color, .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
color: inherit;
Expand Down Expand Up @@ -6295,18 +6307,22 @@ body.page .main-navigation {
}

.entry .entry-content .has-small-font-size {
--wp--preset--font-size--small: 0.88889em;
font-size: 0.88889em;
}

.entry .entry-content .has-normal-font-size {
--wp--preset--font-size--normal: 1.125em;
font-size: 1.125em;
}

.entry .entry-content .has-large-font-size {
--wp--preset--font-size--large: 1.6875em;
font-size: 1.6875em;
}

.entry .entry-content .has-huge-font-size {
--wp--preset--font-size--huge: 2.25em;
font-size: 2.25em;
}

Expand Down Expand Up @@ -6389,6 +6405,7 @@ body.page .main-navigation {

.entry .entry-content .has-white-background-color,
.entry .entry-content .wp-block-pullquote.is-style-solid-color.has-white-background-color {
--wp--preset--color--white: #FFF;
background-color: #FFF;
}

Expand Down Expand Up @@ -6422,6 +6439,7 @@ body.page .main-navigation {
.entry .entry-content .has-white-color,
.entry .entry-content .wp-block-pullquote blockquote.has-white-color,
.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
--wp--preset--color--white: #FFF;
color: #FFF;
}

Expand Down
1 change: 1 addition & 0 deletions src/wp-content/themes/twentynineteen/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Tested up to: 5.9
Copy link
Member Author

Choose a reason for hiding this comment

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

In 2a04054#diff-43320bbf5db05687019f349593821f99e7827c259d03e05867b4cd3f2a81f74d this live was added to the CSS file but should have been added here instead (and build to CSS after).

Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 2.1
Expand Down