Skip to content
This repository has been archived by the owner on Jan 15, 2019. It is now read-only.

Commit

Permalink
Merge pull request #552 from WordPress/update/pullquote-block-styles
Browse files Browse the repository at this point in the history 
Update Pullquote Block styles for better front/back end consistency
  • Loading branch information
@allancole
allancole authored Nov 11, 2018
2 parents 7413393 + 1e305ef commit 1d85387
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 54 deletions.
23 changes: 9 additions & 14 deletions sass/blocks/_blocks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,8 @@
blockquote {
color: $color__text-main;
border: none;
padding-bottom: calc(2 * #{$size__spacing-unit});
margin-top: calc(4 * #{ $size__spacing-unit});
margin-bottom: calc(4.33 * #{ $size__spacing-unit});
margin-right: 0;
}

Expand Down Expand Up @@ -338,8 +339,9 @@
}

&.is-style-solid-color {

background-color: $color__link;
padding-left: 0;
padding-right: 0;

p {
font-size: $font__size-lg;
Expand All @@ -362,7 +364,10 @@

blockquote {
color: $color__background-body;
margin: 0 auto;
max-width: 80%;
margin-left: auto;
margin-right: auto;
padding-left: 0;
}

.has-primary-background-color {
Expand All @@ -371,17 +376,7 @@

&.alignleft,
&.alignright {
padding: $size__spacing-unit $size__spacing-unit 0;

blockquote {
padding: 0 0 calc( 1.5 * #{$size__spacing-unit} );
margin-left: 0;
margin-top: 0;
}

@include media(tablet) {
padding: calc( 2 * #{$size__spacing-unit} ) calc( 2 * #{$size__spacing-unit} ) $size__spacing-unit;
}
padding: 0 $size__spacing-unit;
}
}
}
Expand Down
17 changes: 12 additions & 5 deletions style-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,18 @@ figcaption,
/** === Pullquote === */
.wp-block-pullquote {
border: none;
color: #000;
}

.wp-block-pullquote blockquote {
margin-top: calc(3 * 1rem);
margin-bottom: calc(3.33 * 1rem);
hyphens: auto;
word-break: break-word;
}

.wp-block-pullquote:not(.is-style-solid-color) .wp-block-pullquote__citation {
color: #767676;
}

.wp-block-pullquote.is-style-solid-color blockquote {
Expand Down Expand Up @@ -384,11 +396,6 @@ figcaption,
background-color: #0073aa;
}

.wp-block-pullquote blockquote {
hyphens: auto;
word-break: break-word;
}

.wp-block[data-type="core/pullquote"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
.wp-block[data-type="core/pullquote"] blockquote > .editor-rich-text p,
.wp-block[data-type="core/pullquote"] p,
Expand Down
17 changes: 12 additions & 5 deletions style-editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,6 +389,18 @@ figcaption,

.wp-block-pullquote {
border: none;
color: #000;

blockquote {
margin-top: calc(3 * #{ $size__spacing-unit});
margin-bottom: calc(3.33 * #{ $size__spacing-unit});
hyphens: auto;
word-break: break-word;
}

&:not(.is-style-solid-color) .wp-block-pullquote__citation {
color: $color__text-light;
}

&.is-style-solid-color {

Expand All @@ -413,11 +425,6 @@ figcaption,
background-color: $color__link;
}
}

blockquote {
hyphens: auto;
word-break: break-word;
}
}

.wp-block[data-type="core/pullquote"],
Expand Down
24 changes: 9 additions & 15 deletions style-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3414,7 +3414,8 @@ body.page .main-navigation {
.entry .entry-content .wp-block-pullquote blockquote {
color: #111;
border: none;
padding-bottom: calc(2 * 1rem);
margin-top: calc(4 * 1rem);
margin-bottom: calc(4.33 * 1rem);
margin-left: 0;
}

Expand Down Expand Up @@ -3462,6 +3463,8 @@ body.page .main-navigation {

.entry .entry-content .wp-block-pullquote.is-style-solid-color {
background-color: #0073aa;
padding-right: 0;
padding-left: 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color p {
Expand All @@ -3487,27 +3490,18 @@ body.page .main-navigation {

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
color: #fff;
margin: 0 auto;
max-width: 80%;
margin-right: auto;
margin-left: auto;
padding-right: 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color .has-primary-background-color {
background-color: #0073aa;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright {
padding: 1rem 1rem 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft blockquote, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright blockquote {
padding: 0 0 calc( 1.5 * 1rem);
margin-right: 0;
margin-top: 0;
}

@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright {
padding: calc( 2 * 1rem) calc( 2 * 1rem) 1rem;
}
padding: 0 1rem;
}

.entry .entry-content .wp-block-quote:not(.is-large), .entry .entry-content .wp-block-quote:not(.is-style-large) {
Expand Down
24 changes: 9 additions & 15 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3423,7 +3423,8 @@ body.page .main-navigation {
.entry .entry-content .wp-block-pullquote blockquote {
color: #111;
border: none;
padding-bottom: calc(2 * 1rem);
margin-top: calc(4 * 1rem);
margin-bottom: calc(4.33 * 1rem);
margin-right: 0;
}

Expand Down Expand Up @@ -3471,6 +3472,8 @@ body.page .main-navigation {

.entry .entry-content .wp-block-pullquote.is-style-solid-color {
background-color: #0073aa;
padding-left: 0;
padding-right: 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color p {
Expand All @@ -3496,27 +3499,18 @@ body.page .main-navigation {

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
color: #fff;
margin: 0 auto;
max-width: 80%;
margin-left: auto;
margin-right: auto;
padding-left: 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color .has-primary-background-color {
background-color: #0073aa;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright {
padding: 1rem 1rem 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft blockquote, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright blockquote {
padding: 0 0 calc( 1.5 * 1rem);
margin-left: 0;
margin-top: 0;
}

@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright {
padding: calc( 2 * 1rem) calc( 2 * 1rem) 1rem;
}
padding: 0 1rem;
}

.entry .entry-content .wp-block-quote:not(.is-large), .entry .entry-content .wp-block-quote:not(.is-style-large) {
Expand Down

0 comments on commit 1d85387

Please sign in to comment.