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

Commit

Permalink
Pullquote Block: Sync up spacing between front and back end.
Browse files Browse the repository at this point in the history 
Somewhere along the line, we lost some of the pullquote margin/padding improvements for left/right-aligned pullquote blocks made in #552 and #559. This commit cleans things back up, and syncs up pullquote display between the front and back end.
  • Loading branch information
@kjellr
kjellr committed Nov 30, 2018
1 parent 17e65f2 commit 14ab1a9
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 13 deletions.
17 changes: 15 additions & 2 deletions sass/blocks/_blocks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,10 +363,14 @@
padding: 0;

blockquote {
margin-left: 0;
margin: $size__spacing-unit 0;
padding: 0;
text-align: left;
max-width: 100%;

p:first-child {
margin-top: 0;
}
}
}

Expand Down Expand Up @@ -400,10 +404,11 @@
}

blockquote {
max-width: calc(100% - (2 * #{$size__spacing-unit}));
max-width: 100%;
color: $color__background-body;
padding-left: 0;
margin-left: $size__spacing-unit;
margin-right: $size__spacing-unit;

&.has-text-color p,
&.has-text-color a,
Expand All @@ -421,6 +426,14 @@
}
}

&.alignright,
&.alignleft {

@include media(tablet) {
padding: $size__spacing-unit calc(2 * #{$size__spacing-unit});
}
}

&.alignfull {

@include media(tablet) {
Expand Down
35 changes: 30 additions & 5 deletions style-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -524,14 +524,39 @@ figcaption,
max-width: 50%;
}

.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color),
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) {
.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote,
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote {
margin-top: 0;
margin-bottom: 0;
}

.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote,
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote {
padding: 0;
}

.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color,
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color {
padding: 1em;
.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote,
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote {
width: 100%;
max-width: 100%;
padding: calc(1.375 * 1rem);
}

@media only screen and (min-width: 768px) {
.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote,
.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote {
padding: calc(2.75 * 1rem) calc(2.75 * 1rem) calc(3.125 * 1rem);
}
}

.wp-block[data-type="core/pullquote"][data-align="left"] blockquote,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote {
margin: 1rem 0;
}

.wp-block[data-type="core/pullquote"][data-align="left"] blockquote p:first-child,
.wp-block[data-type="core/pullquote"][data-align="right"] blockquote p:first-child {
margin-top: 0;
}

.wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
Expand Down
26 changes: 24 additions & 2 deletions style-editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -497,12 +497,34 @@ figcaption,
width: calc(4 * (100vw / 12));
max-width: 50%;

.wp-block-pullquote:not(.is-style-solid-color) {
.wp-block-pullquote {
margin-top: 0;
margin-bottom: 0;
}

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

.wp-block-pullquote.is-style-solid-color {
padding: 1em;

blockquote {
width: 100%;
max-width: 100%;
padding: calc(1.375 * #{$size__spacing-unit});

@include media(tablet) {
padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit});
}
}
}
}

blockquote {
margin: $size__spacing-unit 0;

p:first-child {
margin-top: 0;
}
}

Expand Down
83 changes: 81 additions & 2 deletions style-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1233,6 +1233,17 @@ body.page .main-navigation {
/* Nested sub-menu dashes */
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
display: block;
right: 0;
margin-top: 0;
opacity: 1;
width: auto;
min-width: 100%;
/* Non-mobile position */
/* Nested sub-menu dashes */
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
display: block;
right: 0;
Expand All @@ -1245,6 +1256,21 @@ body.page .main-navigation {
}

@media only screen and (min-width: 768px) {
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
display: block;
margin-top: 0;
opacity: 1;
position: absolute;
right: 0;
left: auto;
top: auto;
bottom: auto;
height: auto;
min-width: -moz-max-content;
min-width: -webkit-max-content;
min-width: max-content;
transform: none;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu {
display: block;
margin-top: 0;
Expand Down Expand Up @@ -1284,6 +1310,13 @@ body.page .main-navigation {
position: absolute;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
right: 0;
width: 100%;
display: table;
position: absolute;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu.hidden-links {
right: 0;
width: 100%;
Expand All @@ -1292,6 +1325,12 @@ body.page .main-navigation {
}

@media only screen and (min-width: 768px) {
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
left: 0;
right: auto;
display: block;
width: max-content;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu.hidden-links {
left: 0;
right: auto;
Expand All @@ -1310,6 +1349,10 @@ body.page .main-navigation {
display: none;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .submenu-expand {
display: none;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .submenu-expand {
display: none;
}
Expand All @@ -1324,6 +1367,16 @@ body.page .main-navigation {
/* Non-mobile position */
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
display: block;
margin-top: inherit;
position: relative;
width: 100%;
right: 0;
opacity: 1;
/* Non-mobile position */
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
display: block;
margin-top: inherit;
Expand All @@ -1335,6 +1388,10 @@ body.page .main-navigation {
}

@media only screen and (min-width: 768px) {
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
float: none;
max-width: 100%;
}
.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
float: none;
max-width: 100%;
Expand All @@ -1349,6 +1406,10 @@ body.page .main-navigation {
counter-reset: submenu;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu {
counter-reset: submenu;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu {
counter-reset: submenu;
}
Expand All @@ -1360,6 +1421,13 @@ body.page .main-navigation {
counter-increment: submenu;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas)[focus-within] > .sub-menu .sub-menu > li > a::before {
font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-weight: normal;
content: "– " counters(submenu, "– ", none);
counter-increment: submenu;
}

.main-navigation .main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu .sub-menu > li > a::before {
font-family: "NonBreakingSpaceOverride", "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
font-weight: normal;
Expand Down Expand Up @@ -3805,12 +3873,16 @@ body.page .main-navigation {
}

.entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
margin-right: 0;
margin: 1rem 0;
padding: 0;
text-align: right;
max-width: 100%;
}

.entry .entry-content .wp-block-pullquote.alignleft blockquote p:first-child, .entry .entry-content .wp-block-pullquote.alignright blockquote p:first-child {
margin-top: 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color {
background-color: #0073aa;
padding-right: 0;
Expand Down Expand Up @@ -3846,10 +3918,11 @@ body.page .main-navigation {
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
max-width: calc(100% - (2 * 1rem));
max-width: 100%;
color: #fff;
padding-right: 0;
margin-right: 1rem;
margin-left: 1rem;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color p,
Expand All @@ -3864,6 +3937,12 @@ body.page .main-navigation {
}
}

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

@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignfull {
padding-right: calc(10% + 58px + (2 * 1rem));
Expand Down
15 changes: 13 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3817,12 +3817,16 @@ body.page .main-navigation {
}

.entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote {
margin-left: 0;
margin: 1rem 0;
padding: 0;
text-align: left;
max-width: 100%;
}

.entry .entry-content .wp-block-pullquote.alignleft blockquote p:first-child, .entry .entry-content .wp-block-pullquote.alignright blockquote p:first-child {
margin-top: 0;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color {
background-color: #0073aa;
padding-left: 0;
Expand Down Expand Up @@ -3858,10 +3862,11 @@ body.page .main-navigation {
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote {
max-width: calc(100% - (2 * 1rem));
max-width: 100%;
color: #fff;
padding-left: 0;
margin-left: 1rem;
margin-right: 1rem;
}

.entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color p,
Expand All @@ -3876,6 +3881,12 @@ body.page .main-navigation {
}
}

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

@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-pullquote.is-style-solid-color.alignfull {
padding-left: calc(10% + 58px + (2 * 1rem));
Expand Down

0 comments on commit 14ab1a9

Please sign in to comment.