Skip to content
This repository has been archived by the owner on Jun 18, 2020. It is now read-only.

Commit

Permalink
Merge pull request #44 from Automattic/add/line-height-control-support
Browse files Browse the repository at this point in the history 
Varya: Add new line-height control support
  • Loading branch information
@allancole
allancole authored Apr 8, 2020
2 parents 0993fd9 + a605f20 commit 6905c97
Show file tree
Hide file tree
Showing 13 changed files with 57 additions and 26 deletions.
18 changes: 14 additions & 4 deletions varya/assets/css/style-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@
* Output
*/
body {
--wp--typography--line-height: var(--global--line-height-body);
color: var(--global--color-foreground);
background-color: var(--global--color-background);
font-family: var(--global--font-secondary);
Expand All @@ -99,10 +100,6 @@ body {
-webkit-font-smoothing: antialiased;
}

p {
line-height: var(--global--line-height-body);
}

.editor-post-title__block {
font-size: var(--global--font-size-root);
}
Expand Down Expand Up @@ -590,6 +587,15 @@ object {
line-height: var(--global--line-height-body);
}

.wp-block-heading h1[style*="--wp--typography--line-height"], h1[style*="--wp--typography--line-height"], .h1[style*="--wp--typography--line-height"],
.wp-block-heading h2[style*="--wp--typography--line-height"], h2[style*="--wp--typography--line-height"], .h2[style*="--wp--typography--line-height"],
.wp-block-heading h3[style*="--wp--typography--line-height"], h3[style*="--wp--typography--line-height"], .h3[style*="--wp--typography--line-height"],
.wp-block-heading h4[style*="--wp--typography--line-height"], h4[style*="--wp--typography--line-height"], .h4[style*="--wp--typography--line-height"],
.wp-block-heading h5[style*="--wp--typography--line-height"], h5[style*="--wp--typography--line-height"], .h5[style*="--wp--typography--line-height"],
.wp-block-heading h6[style*="--wp--typography--line-height"], h6[style*="--wp--typography--line-height"], .h6[style*="--wp--typography--line-height"] {
line-height: var(--wp--typography--line-height);
}

/* Center image block by default in the editor */
.wp-block-image > div {
text-align: center;
Expand Down Expand Up @@ -748,6 +754,10 @@ dt {
color: currentColor;
}

p {
line-height: var(--wp--typography--line-height, --global--line-height-body);
}

p.has-background {
padding: var(--global--spacing-unit);
}
Expand Down
2 changes: 1 addition & 1 deletion varya/assets/css/variables-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ body {
--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
--heading--line-height: 1.25em;
--heading--line-height: var(--wp--typography--line-height, 1.25);
--heading--font-weight: normal;
--heading--font-weight-strong: 600;
--latest-posts--title-font-family: var(--heading--font-family);
Expand Down
2 changes: 1 addition & 1 deletion varya/assets/css/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
--heading--line-height: 1.25em;
--heading--line-height: var(--wp--typography--line-height, 1.25);
--heading--font-weight: normal;
--heading--font-weight-strong: 600;
--latest-posts--title-font-family: var(--heading--font-family);
Expand Down
7 changes: 2 additions & 5 deletions varya/assets/sass/base/_editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import '../structure/responsive-logic';

body {
--wp--typography--line-height: var(--global--line-height-body);
color: var(--global--color-foreground);
background-color: var(--global--color-background);
font-family: var(--global--font-secondary);
Expand All @@ -10,10 +11,6 @@ body {
-webkit-font-smoothing: antialiased;
}

p {
line-height: var(--global--line-height-body);
}

// Set font size of title block the same as body.
.editor-post-title__block {
font-size: var(--global--font-size-root);
Expand All @@ -34,7 +31,7 @@ a {
}

// Gutenberg injects a rule that limits the max width of .wp-block to 580px
// This line overrides it to use the responsive spacing rules for default width content
// This line overrides it to use the responsive spacing rules for default width content
.wp-block {
&:not([data-align="full"]):not([data-align="wide"]){
max-width: var(--responsive--aligndefault-width);
Expand Down
2 changes: 1 addition & 1 deletion varya/assets/sass/blocks/heading/_config.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);

--heading--line-height: 1.25em;
--heading--line-height: var(--wp--typography--line-height, 1.25);
--heading--font-weight: normal;
--heading--font-weight-strong: 600;
}
11 changes: 11 additions & 0 deletions varya/assets/sass/blocks/heading/_editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,14 @@
letter-spacing: var(--heading--letter-spacing-h6);
line-height: var(--global--line-height-body);
}

.wp-block-heading h1, h1, .h1,
.wp-block-heading h2, h2, .h2,
.wp-block-heading h3, h3, .h3,
.wp-block-heading h4, h4, .h4,
.wp-block-heading h5, h5, .h5,
.wp-block-heading h6, h6, .h6 {
&[style*="--wp--typography--line-height"] {
line-height: var(--wp--typography--line-height);
}
}
12 changes: 6 additions & 6 deletions varya/assets/sass/blocks/heading/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,35 +16,35 @@ h6, .h6 {
h1, .h1 {
font-size: var(--heading--font-size-h1);
letter-spacing: var(--heading--letter-spacing-h1);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h2, .h2 {
font-size: var(--heading--font-size-h2);
letter-spacing: var(--heading--letter-spacing-h2);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h3, .h3 {
font-size: var(--heading--font-size-h3);
letter-spacing: var(--heading--letter-spacing-h3);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h4, .h4 {
font-size: var(--heading--font-size-h4);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h5, .h5 {
font-size: var(--heading--font-size-h5);
letter-spacing: var(--heading--letter-spacing-h5);
line-height: var(--global--line-height-body);
line-height: var(--wp--typography--line-height, --global--line-height-body);
}

h6, .h6 {
font-size: var(--heading--font-size-h6);
letter-spacing: var(--heading--letter-spacing-h6);
line-height: var(--global--line-height-body);
line-height: var(--wp--typography--line-height, --global--line-height-body);
}
2 changes: 2 additions & 0 deletions varya/assets/sass/blocks/paragraph/_editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
p {
line-height: var(--wp--typography--line-height, --global--line-height-body);

&.has-background {
padding: var(--global--spacing-unit);

Expand Down
3 changes: 3 additions & 0 deletions varya/assets/sass/blocks/paragraph/_style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
p {

line-height: var(--wp--typography--line-height, --global--line-height-body);

// inherits general font style set at <body>
&.has-background {
padding: var(--global--spacing-unit);
Expand Down
2 changes: 1 addition & 1 deletion varya/assets/sass/child-theme/variables-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ body {
--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
--heading--line-height: 1.25em;
--heading--line-height: var(--wp--typography--line-height, 1.25);
--heading--font-weight: normal;
--heading--font-weight-strong: 600;
--latest-posts--title-font-family: var(--heading--font-family);
Expand Down
2 changes: 1 addition & 1 deletion varya/assets/sass/child-theme/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
--heading--letter-spacing-h3: var(--global--letter-spacing-xl);
--heading--letter-spacing-h2: var(--global--letter-spacing-xxl);
--heading--letter-spacing-h1: var(--global--letter-spacing-xxxl);
--heading--line-height: 1.25em;
--heading--line-height: var(--wp--typography--line-height, 1.25);
--heading--font-weight: normal;
--heading--font-weight-strong: 600;
--latest-posts--title-font-family: var(--heading--font-family);
Expand Down
4 changes: 4 additions & 0 deletions varya/style-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2115,6 +2115,10 @@ dd {
}
}

p {
line-height: var(--wp--typography--line-height, --global--line-height-body);
}

p.has-background {
padding: var(--global--spacing-unit);
}
Expand Down
16 changes: 10 additions & 6 deletions varya/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1798,37 +1798,37 @@ h6 strong, .h6 strong {
h1, .h1 {
font-size: var(--heading--font-size-h1);
letter-spacing: var(--heading--letter-spacing-h1);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h2, .h2 {
font-size: var(--heading--font-size-h2);
letter-spacing: var(--heading--letter-spacing-h2);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h3, .h3 {
font-size: var(--heading--font-size-h3);
letter-spacing: var(--heading--letter-spacing-h3);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h4, .h4 {
font-size: var(--heading--font-size-h4);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--heading--line-height);
line-height: var(--wp--typography--line-height, --heading--line-height);
}

h5, .h5 {
font-size: var(--heading--font-size-h5);
letter-spacing: var(--heading--letter-spacing-h5);
line-height: var(--global--line-height-body);
line-height: var(--wp--typography--line-height, --global--line-height-body);
}

h6, .h6 {
font-size: var(--heading--font-size-h6);
letter-spacing: var(--heading--letter-spacing-h6);
line-height: var(--global--line-height-body);
line-height: var(--wp--typography--line-height, --global--line-height-body);
}

.wp-block-image {
Expand Down Expand Up @@ -2123,6 +2123,10 @@ dd {
}
}

p {
line-height: var(--wp--typography--line-height, --global--line-height-body);
}

p.has-background {
padding: var(--global--spacing-unit);
}
Expand Down

0 comments on commit 6905c97

Please sign in to comment.