From 14ab1a9eee1fabdcbf59712f17d6b22e9fe0951d Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 30 Nov 2018 08:41:50 -0500 Subject: [PATCH 1/2] Pullquote Block: Sync up spacing between front and back end. 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. --- sass/blocks/_blocks.scss | 17 +++++++- style-editor.css | 35 ++++++++++++++--- style-editor.scss | 26 ++++++++++++- style-rtl.css | 83 +++++++++++++++++++++++++++++++++++++++- style.css | 15 +++++++- 5 files changed, 163 insertions(+), 13 deletions(-) diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index 28572e08..2d0dbfaf 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -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; + } } } @@ -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, @@ -421,6 +426,14 @@ } } + &.alignright, + &.alignleft { + + @include media(tablet) { + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); + } + } + &.alignfull { @include media(tablet) { diff --git a/style-editor.css b/style-editor.css index 911bba16..0d110dc3 100644 --- a/style-editor.css +++ b/style-editor.css @@ -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, diff --git a/style-editor.scss b/style-editor.scss index 2467cf51..afc49822 100644 --- a/style-editor.scss +++ b/style-editor.scss @@ -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; } } diff --git a/style-rtl.css b/style-rtl.css index d0fc3e66..c47493b0 100755 --- a/style-rtl.css +++ b/style-rtl.css @@ -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; @@ -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; @@ -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%; @@ -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; @@ -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; } @@ -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; @@ -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%; @@ -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; } @@ -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; @@ -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; @@ -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, @@ -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)); diff --git a/style.css b/style.css index 45b3e543..1ddc186d 100755 --- a/style.css +++ b/style.css @@ -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; @@ -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, @@ -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)); From af71ff49107e63bdac071d7e2e1cd97239bc6ec4 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 30 Nov 2018 08:56:10 -0500 Subject: [PATCH 2/2] Sync up right/left-alignment padding with the cover image block. Re-compile CSS. --- sass/blocks/_blocks.scss | 2 +- style-editor.css | 9 +++++- style-editor.scss | 15 +++++---- style-rtl.css | 70 +--------------------------------------- style.css | 2 +- 5 files changed, 20 insertions(+), 78 deletions(-) diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index 2d0dbfaf..5e9057a9 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -558,7 +558,7 @@ width: 100%; @include media(tablet) { - padding: $size__spacing-unit; + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); } } diff --git a/style-editor.css b/style-editor.css index 0d110dc3..7f698585 100644 --- a/style-editor.css +++ b/style-editor.css @@ -332,12 +332,19 @@ figcaption, .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { width: 100%; max-width: 100%; + padding: calc(1.375 * 1rem); +} + +.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover p, +.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover p { + padding-left: 0; + padding-right: 0; } @media only screen and (min-width: 768px) { .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover, .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { - padding: 1rem; + padding: calc(2.75 * 1rem) calc(2.75 * 1rem) calc(3.125 * 1rem); } } diff --git a/style-editor.scss b/style-editor.scss index afc49822..f2d3e75e 100644 --- a/style-editor.scss +++ b/style-editor.scss @@ -294,12 +294,15 @@ figcaption, .wp-block-cover { width: 100%; max-width: 100%; - } - - @include media(tablet) { - - .wp-block-cover { - padding: $size__spacing-unit; + padding: calc(1.375 * #{$size__spacing-unit}); + + p { + padding-left: 0; + padding-right: 0; + } + + @include media(tablet) { + padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); } } } diff --git a/style-rtl.css b/style-rtl.css index c47493b0..01fcc590 100755 --- a/style-rtl.css +++ b/style-rtl.css @@ -1233,17 +1233,6 @@ 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; @@ -1256,21 +1245,6 @@ 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; @@ -1310,13 +1284,6 @@ 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%; @@ -1325,12 +1292,6 @@ 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; @@ -1349,10 +1310,6 @@ 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; } @@ -1367,16 +1324,6 @@ 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; @@ -1388,10 +1335,6 @@ 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%; @@ -1406,10 +1349,6 @@ 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; } @@ -1421,13 +1360,6 @@ 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; @@ -4075,7 +4007,7 @@ body.page .main-navigation { .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, .entry .entry-content .wp-block-cover.alignleft, .entry .entry-content .wp-block-cover.alignright { - padding: 1rem; + padding: 1rem calc(2 * 1rem); } } diff --git a/style.css b/style.css index 1ddc186d..cfa252eb 100755 --- a/style.css +++ b/style.css @@ -4019,7 +4019,7 @@ body.page .main-navigation { .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, .entry .entry-content .wp-block-cover.alignleft, .entry .entry-content .wp-block-cover.alignright { - padding: 1rem; + padding: 1rem calc(2 * 1rem); } }