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

[Varya] Refine quote and pullquote block styles #32

Merged
merged 12 commits into from
Apr 3, 2020
Merged

[Varya] Refine quote and pullquote block styles #32

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0b2f1ee
Adjust quote and pullquote variables and associated styles
jffng Mar 31, 2020
e07915f
Remove text transform from pullquote cite
jffng Mar 31, 2020
2e7f749
Check in compiled stylesheets
jffng Mar 31, 2020
089166f
Adjust pullquote padding
jffng Mar 31, 2020
9632683
Merge branch 'master' into update/quote-styles
kjellr Apr 1, 2020
0a34475
Match quote editor styles to frontend
jffng Apr 1, 2020
1cd14d6
Merge branch 'master' into update/quote-styles
jffng Apr 1, 2020
32e029b
Address pullquote editor and frontend inconsistency
jffng Apr 1, 2020
8ae324d
Merge branch 'update/quote-styles' of github.com:Automattic/themes-wo…
jffng Apr 1, 2020
22649b5
Update line heights in quote block
jffng Apr 2, 2020
ec23d8a
Restore right aligned border
jffng Apr 2, 2020
6ff06e4
Change citations to use the xs font size.
kjellr Apr 3, 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
62 changes: 39 additions & 23 deletions varya/assets/css/style-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,8 @@ div[data-type="core/button"] {
* - Styles for basic HTML elemants
*/
blockquote {
padding-left: var(--global--spacing-horizontal);
margin: 0;
padding: 0;
}

blockquote p {
Expand Down Expand Up @@ -760,26 +761,24 @@ p.has-background:not(.has-background-background-color) a {
}

.wp-block-pullquote {
padding: calc( 3 * var(--global--spacing-unit)) 0;
padding: calc( 2 * var(--global--spacing-unit)) 0;
margin-left: 0;
margin-right: 0;
text-align: center;
text-align: left;
border-top-color: var(--pullquote--color-border);
border-top-width: var(--pullquote--border-width);
border-bottom-color: var(--pullquote--color-border);
border-bottom-width: var(--pullquote--border-width);
color: var(--pullquote--color-foreground);
}

.wp-block-pullquote blockquote {
padding-left: 0;
}

.wp-block-pullquote p {
font-family: var(--pullquote--font-family);
font-size: var(--heading--font-size-h4);
font-size: var(--pullquote--font-size);
font-style: var(--pullquote--font-style);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--heading--line-height);
line-height: var(--pullquote--line-height);
margin: 0;
}

.wp-block-pullquote a {
Expand All @@ -800,6 +799,7 @@ p.has-background:not(.has-background-background-color) a {
.wp-block-pullquote.is-style-solid-color {
background-color: var(--pullquote--color-foreground);
color: var(--pullquote--color-background);
padding: calc( 2 * var(--global--spacing-unit));
}

.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
Expand All @@ -810,7 +810,9 @@ p.has-background:not(.has-background-background-color) a {
}

.wp-block-pullquote.is-style-solid-color blockquote {
padding-left: 0;
margin: 0;
text-align: left;
max-width: 100%;
}

.wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation,
Expand All @@ -819,37 +821,51 @@ p.has-background:not(.has-background-background-color) a {
color: currentColor;
}

.wp-block-pullquote.alignwide > p,
.wp-block-pullquote.alignfull > p,
.wp-block-pullquote.alignwide blockquote,
.wp-block-pullquote.alignfull blockquote {
margin-left: auto;
margin-right: auto;
.wp-block[data-align="full"] .wp-block-pullquote:not(.is-style-solid-color) blockquote {
padding: 0 calc( 2 * var(--global--spacing-unit));
}

.wp-block-quote {
border-left-color: var(--quote--border-color);
border-left-width: var(--quote--border-width);
margin: var(--global--spacing-vertical) 0;
padding-left: var(--global--spacing-horizontal);
}

.wp-block-quote p {
font-family: var(--quote--font-family);
font-size: var(--heading--font-size-h4);
font-size: var(--quote--font-size);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--global--line-height-h4);
}

.wp-block-quote.is-large, .wp-block-quote.is-style-large {
border: none;
padding: 0;
border-left: var(--quote--border-width) solid var(--quote--border-color);
padding-left: var(--global--spacing-horizontal);
/* Resetting margins to match _block-container.scss */
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}

.wp-block-quote.is-large p, .wp-block-quote.is-style-large p {
font-family: var(--quote--font-family);
font-size: var(--heading--font-size-h3);
letter-spacing: var(--heading--letter-spacing-h3);
line-height: var(--global--line-height-h3);
font-size: var(--quote--font-size-large);
font-style: normal;
line-height: 1.6;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Does line-height need to be connected to a variable here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It should be.

I connected it to --global--line-height-body, which is 1.7 even though the comps suggest 1.6 for this specific element.

We can revisit this after #37.

}

.wp-block-quote.is-large.has-text-align-right, .wp-block-quote.is-style-large.has-text-align-right {
border-left: none;
border-right: none;
padding-right: 0;
}

.wp-block-quote.has-text-align-right {
border-right: none;
padding-right: 0;
}

.wp-block-quote.has-text-align-center {
border: none;
}

.has-background:not(.has-background-background-color) .wp-block-quote,
Expand Down
20 changes: 11 additions & 9 deletions varya/assets/css/variables-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ body {
/* Line Height */
--global--line-height-base: 1;
--global--line-height-body: 1.7;
--global--line-height-heading: 1.125;
--global--line-height-heading: 1.3;
/* Colors */
--global--color-primary: #000000;
--global--color-primary-hover: #A36265;
Expand Down Expand Up @@ -125,16 +125,18 @@ body {
--list--font-family: var(--global--font-secondary);
--definition-term--font-family: var(--global--font-primary);
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h4);
--pullquote--border-width: 4px;
--pullquote--color-border: var(--global--color-foreground);
--pullquote--font-size: var(--heading--font-size-h2);
--pullquote--font-style: italic;
--pullquote--line-height: var(--global--line-height-heading);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I added two variables here, not entirely sure if they're necessary.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Hmmm, I like the line-height variable. The italic one might be useful too, but just need to be careful that it doesn’t interfere with any inline-italic rules set by the users (which may be a problem already).

--pullquote--border-width: 0;
--pullquote--color-border: transparent;
--pullquote--color-foreground: var(--global--color-foreground);
--pullquote--color-background: var(--global--color-background);
--quote--border-color: var(--global--color-primary);
--quote--border-width: 4px;
--quote--font-family: var(--global--font-primary);
--quote--font-size: var(--heading--font-size-h4);
--quote--font-size-large: var(--heading--font-size-h3);
--quote--border-color: var(--global--color-secondary);
--quote--border-width: 1px;
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-lg);
--separator--border-color: var(--global--color-border);
--separator--height: 2px;
--separator--width: calc(6 * var(--global--spacing-horizontal));
Expand Down
20 changes: 11 additions & 9 deletions varya/assets/css/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
/* Line Height */
--global--line-height-base: 1;
--global--line-height-body: 1.7;
--global--line-height-heading: 1.125;
--global--line-height-heading: 1.3;
Copy link
Contributor Author

@jffng jffng Mar 31, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

I adjusted the value of this global variable to match the H1 - H3 line height from the comps.

The line heights for the headings overall need to be revisited in a follow-up PR.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Coool. Makes sense 👍

/* Colors */
--global--color-primary: #000000;
--global--color-primary-hover: #A36265;
Expand Down Expand Up @@ -125,16 +125,18 @@
--list--font-family: var(--global--font-secondary);
--definition-term--font-family: var(--global--font-primary);
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h4);
--pullquote--border-width: 4px;
--pullquote--color-border: var(--global--color-foreground);
--pullquote--font-size: var(--heading--font-size-h2);
--pullquote--font-style: italic;
--pullquote--line-height: var(--global--line-height-heading);
--pullquote--border-width: 0;
--pullquote--color-border: transparent;
--pullquote--color-foreground: var(--global--color-foreground);
--pullquote--color-background: var(--global--color-background);
--quote--border-color: var(--global--color-primary);
--quote--border-width: 4px;
--quote--font-family: var(--global--font-primary);
--quote--font-size: var(--heading--font-size-h4);
--quote--font-size-large: var(--heading--font-size-h3);
--quote--border-color: var(--global--color-secondary);
--quote--border-width: 1px;
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-lg);
--separator--border-color: var(--global--color-border);
--separator--height: 2px;
--separator--width: calc(6 * var(--global--spacing-horizontal));
Expand Down
2 changes: 1 addition & 1 deletion varya/assets/sass/abstracts/_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-
/* Line Height */
--global--line-height-base: #{$typescale-base / ( $typescale-base * 0 + 1 )};
--global--line-height-body: 1.7;
--global--line-height-heading: 1.125;
--global--line-height-heading: 1.3;

/* Colors */
--global--color-primary: #000000;
Expand Down
8 changes: 5 additions & 3 deletions varya/assets/sass/blocks/pullquote/_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@mixin pullquote-variables() {
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h4);
--pullquote--border-width: 4px; // half of $baseline-unit (8px)
--pullquote--color-border: var(--global--color-foreground);
--pullquote--font-size: var(--heading--font-size-h2);
--pullquote--font-style: italic;
--pullquote--line-height: var(--global--line-height-heading);
--pullquote--border-width: 0;
--pullquote--color-border: transparent;
--pullquote--color-foreground: var(--global--color-foreground);
--pullquote--color-background: var(--global--color-background);
}
34 changes: 18 additions & 16 deletions varya/assets/sass/blocks/pullquote/_editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
.wp-block-pullquote {
padding: calc( 3 * var(--global--spacing-unit) ) 0;
padding: calc( 2 * var(--global--spacing-unit) ) 0;
margin-left: 0;
margin-right: 0;
text-align: center;
text-align: left;
// Theme?
border-top-color: var(--pullquote--color-border);
border-top-width: var(--pullquote--border-width);
border-bottom-color: var(--pullquote--color-border);
border-bottom-width: var(--pullquote--border-width);
color: var(--pullquote--color-foreground);

blockquote {
padding-left: 0;
}

p {
font-family: var(--pullquote--font-family);
font-size: var(--heading--font-size-h4);
font-size: var(--pullquote--font-size);
font-style: var(--pullquote--font-style);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--heading--line-height);
line-height: var(--pullquote--line-height);
margin: 0;
}

a {
Expand All @@ -41,6 +39,7 @@

background-color: var(--pullquote--color-foreground);
color: var(--pullquote--color-background);
padding: calc( 2 * var(--global--spacing-unit) );

&.alignleft blockquote,
&.alignright blockquote {
Expand All @@ -50,7 +49,9 @@
}

blockquote {
padding-left: 0;
margin: 0;
text-align: left;
max-width: 100%;
}

.wp-block-pullquote__citation,
Expand All @@ -60,11 +61,12 @@
}
}

&.alignwide > p,
&.alignfull > p,
&.alignwide blockquote,
&.alignfull blockquote {
margin-left: auto;
margin-right: auto;
}
}

.wp-block[data-align="full"] {
.wp-block-pullquote:not(.is-style-solid-color) {
blockquote {
padding: 0 calc( 2 * var(--global--spacing-unit));
}
}
}
45 changes: 20 additions & 25 deletions varya/assets/sass/blocks/pullquote/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.wp-block-pullquote {

padding: calc( 3 * var(--global--spacing-unit) ) 0;
padding: calc( 2 * var(--global--spacing-unit) ) 0;
margin-left: 0;
margin-right: 0;
text-align: left;
Expand All @@ -14,8 +13,10 @@
p {
font-family: var(--pullquote--font-family);
font-size: var(--pullquote--font-size);
font-style: var(--pullquote--font-style);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--heading--line-height);
line-height: var(--pullquote--line-height);
margin: 0;
}

a {
Expand All @@ -26,19 +27,16 @@
cite,
footer {
color: currentColor;
font-size: var(--global--font-size-sm);
display: block;
font-size: var(--global--font-size-sm);
text-transform: none;
}

/**
* Block Options
*/
&:not(.is-style-solid-color) {
background: none;

blockquote {
padding-left: 0;
}
}

&.is-style-default {
Expand All @@ -54,22 +52,27 @@
&.is-style-large {
border-left-color: var(--quote--border-color);
border-left-style: solid;
border-left-width: var(--quote--border-width);
padding-left: var(--global--spacing-horizontal);
}
border-left-width: var(--quote--border-width);
font-style: normal;
}

&.alignwide > p,
&.alignwide blockquote {
max-width: var(--responsive--alignwide-width);

}
&.alignfull:not(.is-style-solid-color) > p,
&.alignfull:not(.is-style-solid-color) blockquote {
padding: 0 calc( 2 * var(--global--spacing-unit) );
}

&.is-style-solid-color {

background-color: var(--pullquote--color-foreground);
color: var(--pullquote--color-background);

&:not(.alignleft):not(.alignright) blockquote {
@extend %responsive-aligndefault-width;
}
padding: calc( 2 * var(--global--spacing-unit) );

blockquote {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
max-width: inherit;
}

Expand All @@ -80,12 +83,4 @@
}
}

&.alignwide > p,
&.alignfull > p,
&.alignwide blockquote,
&.alignfull blockquote {
margin-left: auto;
margin-right: auto;
@extend %responsive-aligndefault-width;
}
}
12 changes: 6 additions & 6 deletions varya/assets/sass/blocks/quote/_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@mixin quote-variables() {
--quote--border-color: var(--global--color-primary);
--quote--border-width: 4px;
--quote--font-family: var(--global--font-primary);
--quote--font-size: var(--heading--font-size-h4);
--quote--font-size-large: var(--heading--font-size-h3);
}
--quote--border-color: var(--global--color-secondary);
--quote--border-width: 1px;
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-lg);
}
Loading