From 826721c0f99a0bda77d01841a9b23e535159711c Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 08:46:40 -0500 Subject: [PATCH 01/11] Try: Be more specific about first/last child spacing overrides. --- assets/css/ie-editor.css | 34 +++++++++++++++----- assets/css/style-editor.css | 34 +++++++++++++++----- assets/sass/02-tools/mixins.scss | 13 ++++++++ assets/sass/05-blocks/columns/_editor.scss | 4 +++ assets/sass/05-blocks/cover/_editor.scss | 4 +++ assets/sass/05-blocks/group/_editor.scss | 8 +++-- assets/sass/05-blocks/utilities/_editor.scss | 9 ------ 7 files changed, 79 insertions(+), 27 deletions(-) diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index 19167ad2b..eefb3f398 100644 --- a/assets/css/ie-editor.css +++ b/assets/css/ie-editor.css @@ -573,6 +573,16 @@ a:hover { margin-bottom: 0; } +.wp-block-cover .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image .wp-block-cover__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -732,6 +742,14 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } + +.wp-block-columns .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns .wp-block-column > *:nth-last-child(2) { + margin-bottom: 0; +} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { @@ -946,6 +964,14 @@ a:hover { margin-left: -30px; } +.wp-block-group .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group .wp-block-group__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-group .wp-block-group__inner-container > *:last-child { margin-bottom: 0; } @@ -3077,14 +3103,6 @@ pre.wp-block-verse { margin-bottom: 30px; } -[data-block] [data-block]:first-child { - margin-top: 0; -} - -[data-block] [data-block]:nth-last-child(2) { - margin-bottom: 0; -} - /* Block Alignments */ .wp-block { max-width: calc(100vw - 30px); diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css index 1cd95728c..a3046c4c4 100644 --- a/assets/css/style-editor.css +++ b/assets/css/style-editor.css @@ -677,6 +677,16 @@ a:hover { margin-bottom: 0; } +.wp-block-cover .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image .wp-block-cover__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -759,6 +769,14 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } + +.wp-block-columns .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns .wp-block-column > *:nth-last-child(2) { + margin-bottom: 0; +} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { @@ -910,6 +928,14 @@ a:hover { margin-left: calc(-1 * var(--global--spacing-vertical)); } +.wp-block-group .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group .wp-block-group__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-group .wp-block-group__inner-container > *:last-child { margin-bottom: 0; } @@ -2204,14 +2230,6 @@ pre.wp-block-verse { margin-bottom: var(--global--spacing-vertical); } -[data-block] [data-block]:first-child { - margin-top: 0; -} - -[data-block] [data-block]:nth-last-child(2) { - margin-bottom: 0; -} - /* Block Alignments */ .wp-block { max-width: var(--responsive--aligndefault-width); diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 6988a8e6e..354868aed 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -77,3 +77,16 @@ color: var(--button--color-text-active); } } + +@mixin innerblock-margin-clear() { + + // Clear the top margin for the first-child. + > *:first-child { + margin-top: 0; + } + + // Needs to be the second-last child to avoid applying this to the appender. + > *:nth-last-child(2) { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/assets/sass/05-blocks/columns/_editor.scss b/assets/sass/05-blocks/columns/_editor.scss index b6c257806..273ad34ff 100644 --- a/assets/sass/05-blocks/columns/_editor.scss +++ b/assets/sass/05-blocks/columns/_editor.scss @@ -10,6 +10,10 @@ max-width: inherit; } + .wp-block-column { + @include innerblock-margin-clear(); + } + &.is-style-twentytwentyone-columns-overlap { @include media(laptop) { diff --git a/assets/sass/05-blocks/cover/_editor.scss b/assets/sass/05-blocks/cover/_editor.scss index f7d1b1aa7..ff9bef3bd 100644 --- a/assets/sass/05-blocks/cover/_editor.scss +++ b/assets/sass/05-blocks/cover/_editor.scss @@ -15,6 +15,10 @@ margin-bottom: 0; } + .wp-block-cover__inner-container { + @include innerblock-margin-clear(); + } + .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text, diff --git a/assets/sass/05-blocks/group/_editor.scss b/assets/sass/05-blocks/group/_editor.scss index 159c57a8c..73ed47b0c 100644 --- a/assets/sass/05-blocks/group/_editor.scss +++ b/assets/sass/05-blocks/group/_editor.scss @@ -36,8 +36,12 @@ } } - .wp-block-group__inner-container > *:last-child { - margin-bottom: 0; + .wp-block-group__inner-container { + @include innerblock-margin-clear(); + + > *:last-child { + margin-bottom: 0; + } } } diff --git a/assets/sass/05-blocks/utilities/_editor.scss b/assets/sass/05-blocks/utilities/_editor.scss index 3d963ca19..e663db82b 100644 --- a/assets/sass/05-blocks/utilities/_editor.scss +++ b/assets/sass/05-blocks/utilities/_editor.scss @@ -77,15 +77,6 @@ [data-block] { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); - - [data-block]:first-child { - margin-top: 0; - } - - // Needs to be the second-last child to avoid applying this to the appender. - [data-block]:nth-last-child(2) { - margin-bottom: 0; - } } /* Block Alignments */ From 70e6f3efe4e35dc00e38ce275b48f9e57126a142 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 09:06:35 -0500 Subject: [PATCH 02/11] Select the last child if no appender is present. --- assets/css/ie-editor.css | 29 +++++++++++++++---- assets/css/style-editor.css | 29 +++++++++++++++---- assets/sass/02-tools/mixins.scss | 9 ++++-- assets/sass/05-blocks/media-text/_editor.scss | 9 +----- 4 files changed, 54 insertions(+), 22 deletions(-) diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index eefb3f398..69f5770c0 100644 --- a/assets/css/ie-editor.css +++ b/assets/css/ie-editor.css @@ -578,8 +578,13 @@ a:hover { margin-top: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:nth-last-child(2), -.wp-block-cover-image .wp-block-cover__inner-container > *:nth-last-child(2) { +.wp-block-cover .wp-block-cover__inner-container > *:last-child():not(.block-list-appender), +.wp-block-cover-image .wp-block-cover__inner-container > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-cover .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2), +.wp-block-cover-image .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } @@ -747,7 +752,11 @@ a:hover { margin-top: 0; } -.wp-block-columns .wp-block-column > *:nth-last-child(2) { +.wp-block-columns .wp-block-column > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-columns .wp-block-column.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } @media only screen and (min-width: 652px) { @@ -968,7 +977,11 @@ a:hover { margin-top: 0; } -.wp-block-group .wp-block-group__inner-container > *:nth-last-child(2) { +.wp-block-group .wp-block-group__inner-container > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-group .wp-block-group__inner-container.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } @@ -1720,11 +1733,15 @@ dt { padding: 25px; } -.wp-block-media-text .wp-block-media-text__content [data-block]:first-child { +.wp-block-media-text .wp-block-media-text__content > *:first-child { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content [data-block]:last-child { +.wp-block-media-text .wp-block-media-text__content > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-media-text .wp-block-media-text__content.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css index a3046c4c4..4cb4a1369 100644 --- a/assets/css/style-editor.css +++ b/assets/css/style-editor.css @@ -682,8 +682,13 @@ a:hover { margin-top: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:nth-last-child(2), -.wp-block-cover-image .wp-block-cover__inner-container > *:nth-last-child(2) { +.wp-block-cover .wp-block-cover__inner-container > *:last-child():not(.block-list-appender), +.wp-block-cover-image .wp-block-cover__inner-container > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-cover .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2), +.wp-block-cover-image .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } @@ -774,7 +779,11 @@ a:hover { margin-top: 0; } -.wp-block-columns .wp-block-column > *:nth-last-child(2) { +.wp-block-columns .wp-block-column > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-columns .wp-block-column.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } @media only screen and (min-width: 652px) { @@ -932,7 +941,11 @@ a:hover { margin-top: 0; } -.wp-block-group .wp-block-group__inner-container > *:nth-last-child(2) { +.wp-block-group .wp-block-group__inner-container > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-group .wp-block-group__inner-container.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } @@ -1321,11 +1334,15 @@ dt { padding: var(--global--spacing-horizontal); } -.wp-block-media-text .wp-block-media-text__content [data-block]:first-child { +.wp-block-media-text .wp-block-media-text__content > *:first-child { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content [data-block]:last-child { +.wp-block-media-text .wp-block-media-text__content > *:last-child():not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-media-text .wp-block-media-text__content.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 354868aed..6f9bf782f 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -85,8 +85,13 @@ margin-top: 0; } - // Needs to be the second-last child to avoid applying this to the appender. - > *:nth-last-child(2) { + // Last child that is not the appender. + > *:last-child():not(.block-list-appender) { + margin-bottom: 0; + } + + // When selected, the last item becomes the second last because of the appender. + &.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } } \ No newline at end of file diff --git a/assets/sass/05-blocks/media-text/_editor.scss b/assets/sass/05-blocks/media-text/_editor.scss index 3f3a5fcf5..30af21e23 100644 --- a/assets/sass/05-blocks/media-text/_editor.scss +++ b/assets/sass/05-blocks/media-text/_editor.scss @@ -7,14 +7,7 @@ .wp-block-media-text__content { padding: var(--global--spacing-horizontal); - - [data-block]:first-child { - margin-top: 0; - } - - [data-block]:last-child { - margin-bottom: 0; - } + @include innerblock-margin-clear(); } // Block Styles From d203ab2ba1730942f0f1150048aab1436a2d4b6d Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 09:12:02 -0500 Subject: [PATCH 03/11] =?UTF-8?q?Linting.=20=F0=9F=99=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/sass/02-tools/mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 6f9bf782f..72c210804 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -94,4 +94,4 @@ &.has-child-selected > *:nth-last-child(2) { margin-bottom: 0; } -} \ No newline at end of file +} From c8b568b0872cb889c189b3ef71f868dde9b7d696 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 13:51:53 -0500 Subject: [PATCH 04/11] Fix last-child. Co-authored-by: Kelly Dwan --- assets/sass/02-tools/mixins.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 72c210804..c28863712 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -86,7 +86,7 @@ } // Last child that is not the appender. - > *:last-child():not(.block-list-appender) { + > *:last-child:not(.block-list-appender) { margin-bottom: 0; } From 20c899df2118a73fed8d8992826f0dba70d5ba58 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 13:55:50 -0500 Subject: [PATCH 05/11] Remove unnecessary last-child rule in the group block. --- assets/sass/05-blocks/group/_editor.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/assets/sass/05-blocks/group/_editor.scss b/assets/sass/05-blocks/group/_editor.scss index 73ed47b0c..10c38f8c5 100644 --- a/assets/sass/05-blocks/group/_editor.scss +++ b/assets/sass/05-blocks/group/_editor.scss @@ -38,10 +38,6 @@ .wp-block-group__inner-container { @include innerblock-margin-clear(); - - > *:last-child { - margin-bottom: 0; - } } } From ff76df4c72186bfc95fad2480c50259fba78a15e Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 14:03:58 -0500 Subject: [PATCH 06/11] Compile CSS --- assets/css/ie-editor.css | 43 +++++++++++++++++++++++++++-------- assets/css/ie.css | 45 +++++++++++++++++++++++++++++++++++++ assets/css/style-editor.css | 14 +++++------- 3 files changed, 84 insertions(+), 18 deletions(-) diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index 69f5770c0..5e8b40f76 100644 --- a/assets/css/ie-editor.css +++ b/assets/css/ie-editor.css @@ -578,8 +578,8 @@ a:hover { margin-top: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:last-child():not(.block-list-appender), -.wp-block-cover-image .wp-block-cover__inner-container > *:last-child():not(.block-list-appender) { +.wp-block-cover .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } @@ -682,12 +682,14 @@ a:hover { max-width: inherit; text-align: inherit; } + @media only screen and (min-width: 652px) { .wp-block-cover h2 { font-size: 3rem; } } + @media only screen and (min-width: 652px) { .wp-block-cover h2 { @@ -703,12 +705,14 @@ a:hover { max-width: inherit; text-align: inherit; } + @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { font-size: 3rem; } } + @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { @@ -752,7 +756,7 @@ a:hover { margin-top: 0; } -.wp-block-columns .wp-block-column > *:last-child():not(.block-list-appender) { +.wp-block-columns .wp-block-column > *:last-child:not(.block-list-appender) { margin-bottom: 0; } @@ -977,7 +981,7 @@ a:hover { margin-top: 0; } -.wp-block-group .wp-block-group__inner-container > *:last-child():not(.block-list-appender) { +.wp-block-group .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } @@ -985,10 +989,6 @@ a:hover { margin-bottom: 0; } -.wp-block-group .wp-block-group__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; width: 100%; @@ -1530,6 +1530,7 @@ h6 { line-height: 1.3; margin-bottom: 10px; } + @media only screen and (min-width: 652px) { .wp-block-latest-posts > li > a { @@ -1737,7 +1738,7 @@ dt { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content > *:last-child():not(.block-list-appender) { +.wp-block-media-text .wp-block-media-text__content > *:last-child:not(.block-list-appender) { margin-bottom: 0; } @@ -1823,6 +1824,7 @@ pre.wp-block-preformatted { line-height: 1.3; margin: 0; } + @media only screen and (min-width: 652px) { .wp-block-pullquote p { @@ -1895,6 +1897,7 @@ pre.wp-block-preformatted { .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 2rem; } + @media only screen and (min-width: 652px) { .wp-block-pullquote.is-style-solid-color blockquote p { @@ -1992,6 +1995,7 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-large p { @@ -2004,6 +2008,7 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large p { @@ -2016,6 +2021,7 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-large:before { @@ -2028,6 +2034,7 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large:before { @@ -2172,6 +2179,7 @@ pre.wp-block-preformatted { line-height: 1.3; margin-bottom: 10px; } + @media only screen and (min-width: 652px) { .wp-block-rss .wp-block-rss__item-title > a { @@ -2666,12 +2674,14 @@ hr[style*="text-align: right"] { .wp-block-separator:not(.is-style-dots) { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { .wp-block-separator:not(.is-style-dots) { max-width: min(calc(100vw - 100px), 610px); } } + @media only screen and (min-width: 822px) { .wp-block-separator:not(.is-style-dots) { @@ -2682,12 +2692,14 @@ hr[style*="text-align: right"] { hr:not(.is-style-dots) { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { hr:not(.is-style-dots) { max-width: min(calc(100vw - 100px), 610px); } } + @media only screen and (min-width: 822px) { hr:not(.is-style-dots) { @@ -2943,6 +2955,7 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .is-larger-text { @@ -2954,6 +2967,7 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .has-larger-font-size { @@ -2965,6 +2979,7 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .is-extra-large-text { @@ -2976,6 +2991,7 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .has-extra-large-font-size { @@ -2988,6 +3004,7 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .is-huge-text { @@ -3000,6 +3017,7 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .has-huge-font-size { @@ -3012,6 +3030,7 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .is-gigantic-text { @@ -3024,6 +3043,7 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .has-gigantic-font-size { @@ -3061,6 +3081,7 @@ pre.wp-block-verse { font-weight: 300; line-height: 1.1; } + @media only screen and (min-width: 652px) { .wp-block.editor-post-title__block .editor-post-title__input { @@ -3140,12 +3161,14 @@ pre.wp-block-verse { .wp-block[data-align=wide] { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { .wp-block[data-align=wide] { max-width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .wp-block[data-align=wide] { @@ -3156,12 +3179,14 @@ pre.wp-block-verse { .wp-block.alignwide { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { .wp-block.alignwide { max-width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .wp-block.alignwide { diff --git a/assets/css/ie.css b/assets/css/ie.css index 7d94cff9b..8c0d7de4e 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -837,12 +837,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .entry-header .post-thumbnail { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .entry-header .post-thumbnail { @@ -856,12 +858,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .singular .post-thumbnail { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .singular .post-thumbnail { @@ -875,12 +879,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .alignfull [class*=inner-container] > .alignwide { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .alignfull [class*=inner-container] > .alignwide { @@ -894,12 +900,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .alignwide [class*=inner-container] > .alignwide { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .alignwide [class*=inner-container] > .alignwide { @@ -917,18 +925,21 @@ template { /*rtl:ignore*/ margin-right: 25px; } + @media only screen and (min-width: 482px) { .entry-content > .alignleft { margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 482px) { .entry-content > .alignleft { margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 822px) { .entry-content > .alignleft { @@ -946,18 +957,21 @@ template { /*rtl:ignore*/ margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } + @media only screen and (min-width: 482px) { .entry-content > .alignright { margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 482px) { .entry-content > .alignright { margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 822px) { .entry-content > .alignright { @@ -2916,12 +2930,14 @@ input[type=reset]:hover { text-align: inherit; padding: 0; } + @media only screen and (min-width: 652px) { .wp-block-cover h2 { font-size: 3rem; } } + @media only screen and (min-width: 652px) { .wp-block-cover h2 { @@ -2937,12 +2953,14 @@ input[type=reset]:hover { text-align: inherit; padding: 0; } + @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { font-size: 3rem; } } + @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { @@ -3683,6 +3701,7 @@ img { line-height: 1.3; margin-bottom: 10px; } + @media only screen and (min-width: 652px) { .wp-block-latest-posts > li > a { @@ -4123,6 +4142,7 @@ pre.wp-block-preformatted { line-height: 1.3; margin: 0; } + @media only screen and (min-width: 652px) { .wp-block-pullquote p { @@ -4170,12 +4190,14 @@ pre.wp-block-preformatted { .wp-block-pullquote.alignwide > p { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { .wp-block-pullquote.alignwide > p { max-width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .wp-block-pullquote.alignwide > p { @@ -4186,12 +4208,14 @@ pre.wp-block-preformatted { .wp-block-pullquote.alignwide blockquote { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { .wp-block-pullquote.alignwide blockquote { max-width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .wp-block-pullquote.alignwide blockquote { @@ -4232,6 +4256,7 @@ pre.wp-block-preformatted { .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 2rem; } + @media only screen and (min-width: 652px) { .wp-block-pullquote.is-style-solid-color blockquote p { @@ -4310,6 +4335,7 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-large p { @@ -4322,6 +4348,7 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large p { @@ -4334,6 +4361,7 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-large:before { @@ -4346,6 +4374,7 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large:before { @@ -4508,6 +4537,7 @@ pre.wp-block-preformatted { line-height: 1.3; margin-bottom: 10px; } + @media only screen and (min-width: 652px) { .wp-block-rss .wp-block-rss__item-title > a { @@ -4877,12 +4907,14 @@ hr.wp-block-separator { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: min(calc(100vw - 100px), 610px); } } + @media only screen and (min-width: 822px) { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { @@ -4914,6 +4946,7 @@ hr.wp-block-separator.is-style-dots:before { letter-spacing: 1.125rem; padding-left: 1.125rem; } + @media only screen and (min-width: 652px) { hr.wp-block-separator.is-style-dots:before { @@ -5156,6 +5189,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .is-larger-text { @@ -5167,6 +5201,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .has-larger-font-size { @@ -5178,6 +5213,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .is-extra-large-text { @@ -5189,6 +5225,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .has-extra-large-font-size { @@ -5201,6 +5238,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .is-huge-text { @@ -5213,6 +5251,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .has-huge-font-size { @@ -5225,6 +5264,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .is-gigantic-text { @@ -5237,6 +5277,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .has-gigantic-font-size { @@ -5964,12 +6005,14 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { padding-left: 25px; max-width: calc(100vw - 120px); } + @media only screen and (min-width: 482px) { .author-bio.show-avatars .author-bio-content { max-width: calc(min(calc(100vw - 4 * 25px), 610px) - 90px); } } + @media only screen and (min-width: 822px) { .author-bio.show-avatars .author-bio-content { @@ -6597,6 +6640,7 @@ h1.page-title { .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { top: 32px; } + @media only screen and (max-width: 782px) { .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { @@ -6607,6 +6651,7 @@ h1.page-title { .admin-bar .primary-navigation > .primary-menu-container { height: calc(100vh - 32px); } + @media only screen and (max-width: 782px) { .admin-bar .primary-navigation > .primary-menu-container { diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css index 4cb4a1369..0ec8719e8 100644 --- a/assets/css/style-editor.css +++ b/assets/css/style-editor.css @@ -682,8 +682,8 @@ a:hover { margin-top: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:last-child():not(.block-list-appender), -.wp-block-cover-image .wp-block-cover__inner-container > *:last-child():not(.block-list-appender) { +.wp-block-cover .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } @@ -779,7 +779,7 @@ a:hover { margin-top: 0; } -.wp-block-columns .wp-block-column > *:last-child():not(.block-list-appender) { +.wp-block-columns .wp-block-column > *:last-child:not(.block-list-appender) { margin-bottom: 0; } @@ -941,7 +941,7 @@ a:hover { margin-top: 0; } -.wp-block-group .wp-block-group__inner-container > *:last-child():not(.block-list-appender) { +.wp-block-group .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } @@ -949,10 +949,6 @@ a:hover { margin-bottom: 0; } -.wp-block-group .wp-block-group__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; width: 100%; @@ -1338,7 +1334,7 @@ dt { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content > *:last-child():not(.block-list-appender) { +.wp-block-media-text .wp-block-media-text__content > *:last-child:not(.block-list-appender) { margin-bottom: 0; } From 37be8a30b708bfadb3146a4cfbbd03f7fd4b3a6b Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 14:23:06 -0500 Subject: [PATCH 07/11] Rework the mixin to account for blocks that have containers. --- assets/css/ie-editor.css | 67 ++++++------------- assets/css/style-editor.css | 38 +++++------ assets/sass/02-tools/mixins.scss | 10 +-- assets/sass/05-blocks/columns/_editor.scss | 4 +- assets/sass/05-blocks/cover/_editor.scss | 4 +- assets/sass/05-blocks/group/_editor.scss | 4 +- assets/sass/05-blocks/media-text/_editor.scss | 3 +- 7 files changed, 48 insertions(+), 82 deletions(-) diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index 5e8b40f76..fec3a30d3 100644 --- a/assets/css/ie-editor.css +++ b/assets/css/ie-editor.css @@ -573,18 +573,18 @@ a:hover { margin-bottom: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:first-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { +.wp-block-cover > .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { margin-top: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), -.wp-block-cover-image .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { +.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-cover .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2), -.wp-block-cover-image .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2) { +.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -682,14 +682,12 @@ a:hover { max-width: inherit; text-align: inherit; } - @media only screen and (min-width: 652px) { .wp-block-cover h2 { font-size: 3rem; } } - @media only screen and (min-width: 652px) { .wp-block-cover h2 { @@ -705,14 +703,12 @@ a:hover { max-width: inherit; text-align: inherit; } - @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { font-size: 3rem; } } - @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { @@ -752,15 +748,15 @@ a:hover { max-width: inherit; } -.wp-block-columns .wp-block-column > *:first-child { +.wp-block-columns > .wp-block-column > *:first-child { margin-top: 0; } -.wp-block-columns .wp-block-column > *:last-child:not(.block-list-appender) { +.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-columns .wp-block-column.has-child-selected > *:nth-last-child(2) { +.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2) { margin-bottom: 0; } @media only screen and (min-width: 652px) { @@ -977,15 +973,15 @@ a:hover { margin-left: -30px; } -.wp-block-group .wp-block-group__inner-container > *:first-child { +.wp-block-group > .wp-block-group__inner-container > *:first-child { margin-top: 0; } -.wp-block-group .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { +.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-group .wp-block-group__inner-container.has-child-selected > *:nth-last-child(2) { +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -1530,7 +1526,6 @@ h6 { line-height: 1.3; margin-bottom: 10px; } - @media only screen and (min-width: 652px) { .wp-block-latest-posts > li > a { @@ -1730,22 +1725,22 @@ dt { margin-bottom: 0; } -.wp-block-media-text .wp-block-media-text__content { - padding: 25px; -} - -.wp-block-media-text .wp-block-media-text__content > *:first-child { +.wp-block-media-text > .wp-block-media-text__content > *:first-child { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content > *:last-child:not(.block-list-appender) { +.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-media-text .wp-block-media-text__content.has-child-selected > *:nth-last-child(2) { +.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2) { margin-bottom: 0; } +.wp-block-media-text .wp-block-media-text__content { + padding: 25px; +} + .wp-block-media-text.is-style-twentytwentyone-border { border: 3px solid #28303d; } @@ -1824,7 +1819,6 @@ pre.wp-block-preformatted { line-height: 1.3; margin: 0; } - @media only screen and (min-width: 652px) { .wp-block-pullquote p { @@ -1897,7 +1891,6 @@ pre.wp-block-preformatted { .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 2rem; } - @media only screen and (min-width: 652px) { .wp-block-pullquote.is-style-solid-color blockquote p { @@ -1995,7 +1988,6 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-large p { @@ -2008,7 +2000,6 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large p { @@ -2021,7 +2012,6 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-large:before { @@ -2034,7 +2024,6 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large:before { @@ -2179,7 +2168,6 @@ pre.wp-block-preformatted { line-height: 1.3; margin-bottom: 10px; } - @media only screen and (min-width: 652px) { .wp-block-rss .wp-block-rss__item-title > a { @@ -2674,14 +2662,12 @@ hr[style*="text-align: right"] { .wp-block-separator:not(.is-style-dots) { max-width: calc(100vw - 30px); } - @media only screen and (min-width: 482px) { .wp-block-separator:not(.is-style-dots) { max-width: min(calc(100vw - 100px), 610px); } } - @media only screen and (min-width: 822px) { .wp-block-separator:not(.is-style-dots) { @@ -2692,14 +2678,12 @@ hr[style*="text-align: right"] { hr:not(.is-style-dots) { max-width: calc(100vw - 30px); } - @media only screen and (min-width: 482px) { hr:not(.is-style-dots) { max-width: min(calc(100vw - 100px), 610px); } } - @media only screen and (min-width: 822px) { hr:not(.is-style-dots) { @@ -2955,7 +2939,6 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .is-larger-text { @@ -2967,7 +2950,6 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .has-larger-font-size { @@ -2979,7 +2961,6 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .is-extra-large-text { @@ -2991,7 +2972,6 @@ pre.wp-block-verse { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .has-extra-large-font-size { @@ -3004,7 +2984,6 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .is-huge-text { @@ -3017,7 +2996,6 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .has-huge-font-size { @@ -3030,7 +3008,6 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .is-gigantic-text { @@ -3043,7 +3020,6 @@ pre.wp-block-verse { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .has-gigantic-font-size { @@ -3081,7 +3057,6 @@ pre.wp-block-verse { font-weight: 300; line-height: 1.1; } - @media only screen and (min-width: 652px) { .wp-block.editor-post-title__block .editor-post-title__input { @@ -3161,14 +3136,12 @@ pre.wp-block-verse { .wp-block[data-align=wide] { max-width: calc(100vw - 30px); } - @media only screen and (min-width: 482px) { .wp-block[data-align=wide] { max-width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .wp-block[data-align=wide] { @@ -3179,14 +3152,12 @@ pre.wp-block-verse { .wp-block.alignwide { max-width: calc(100vw - 30px); } - @media only screen and (min-width: 482px) { .wp-block.alignwide { max-width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .wp-block.alignwide { diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css index 0ec8719e8..7afcbb6f5 100644 --- a/assets/css/style-editor.css +++ b/assets/css/style-editor.css @@ -677,18 +677,18 @@ a:hover { margin-bottom: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:first-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { +.wp-block-cover > .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { margin-top: 0; } -.wp-block-cover .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), -.wp-block-cover-image .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { +.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-cover .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2), -.wp-block-cover-image .wp-block-cover__inner-container.has-child-selected > *:nth-last-child(2) { +.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -775,15 +775,15 @@ a:hover { max-width: inherit; } -.wp-block-columns .wp-block-column > *:first-child { +.wp-block-columns > .wp-block-column > *:first-child { margin-top: 0; } -.wp-block-columns .wp-block-column > *:last-child:not(.block-list-appender) { +.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-columns .wp-block-column.has-child-selected > *:nth-last-child(2) { +.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2) { margin-bottom: 0; } @media only screen and (min-width: 652px) { @@ -937,15 +937,15 @@ a:hover { margin-left: calc(-1 * var(--global--spacing-vertical)); } -.wp-block-group .wp-block-group__inner-container > *:first-child { +.wp-block-group > .wp-block-group__inner-container > *:first-child { margin-top: 0; } -.wp-block-group .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { +.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-group .wp-block-group__inner-container.has-child-selected > *:nth-last-child(2) { +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -1326,22 +1326,22 @@ dt { margin-bottom: 0; } -.wp-block-media-text .wp-block-media-text__content { - padding: var(--global--spacing-horizontal); -} - -.wp-block-media-text .wp-block-media-text__content > *:first-child { +.wp-block-media-text > .wp-block-media-text__content > *:first-child { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content > *:last-child:not(.block-list-appender) { +.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { margin-bottom: 0; } -.wp-block-media-text .wp-block-media-text__content.has-child-selected > *:nth-last-child(2) { +.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2) { margin-bottom: 0; } +.wp-block-media-text .wp-block-media-text__content { + padding: var(--global--spacing-horizontal); +} + .wp-block-media-text.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index c28863712..384b29992 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -78,20 +78,20 @@ } } -@mixin innerblock-margin-clear() { +@mixin innerblock-margin-clear($container) { // Clear the top margin for the first-child. - > *:first-child { + > #{$container} > *:first-child { margin-top: 0; } // Last child that is not the appender. - > *:last-child:not(.block-list-appender) { + > #{$container} > *:last-child:not(.block-list-appender) { margin-bottom: 0; } // When selected, the last item becomes the second last because of the appender. - &.has-child-selected > *:nth-last-child(2) { + &.has-child-selected > #{$container} > *:nth-last-child(2) { margin-bottom: 0; } -} +} \ No newline at end of file diff --git a/assets/sass/05-blocks/columns/_editor.scss b/assets/sass/05-blocks/columns/_editor.scss index 273ad34ff..7262fce77 100644 --- a/assets/sass/05-blocks/columns/_editor.scss +++ b/assets/sass/05-blocks/columns/_editor.scss @@ -10,9 +10,7 @@ max-width: inherit; } - .wp-block-column { - @include innerblock-margin-clear(); - } + @include innerblock-margin-clear(".wp-block-column"); &.is-style-twentytwentyone-columns-overlap { diff --git a/assets/sass/05-blocks/cover/_editor.scss b/assets/sass/05-blocks/cover/_editor.scss index ff9bef3bd..9be38c187 100644 --- a/assets/sass/05-blocks/cover/_editor.scss +++ b/assets/sass/05-blocks/cover/_editor.scss @@ -15,9 +15,7 @@ margin-bottom: 0; } - .wp-block-cover__inner-container { - @include innerblock-margin-clear(); - } + @include innerblock-margin-clear(".wp-block-cover__inner-container"); .wp-block-cover__inner-container, .wp-block-cover-image-text, diff --git a/assets/sass/05-blocks/group/_editor.scss b/assets/sass/05-blocks/group/_editor.scss index 10c38f8c5..c3f2bd626 100644 --- a/assets/sass/05-blocks/group/_editor.scss +++ b/assets/sass/05-blocks/group/_editor.scss @@ -36,9 +36,7 @@ } } - .wp-block-group__inner-container { - @include innerblock-margin-clear(); - } + @include innerblock-margin-clear(".wp-block-group__inner-container"); } .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { diff --git a/assets/sass/05-blocks/media-text/_editor.scss b/assets/sass/05-blocks/media-text/_editor.scss index 30af21e23..b42138648 100644 --- a/assets/sass/05-blocks/media-text/_editor.scss +++ b/assets/sass/05-blocks/media-text/_editor.scss @@ -4,10 +4,11 @@ margin-top: 0; margin-bottom: 0; } + + @include innerblock-margin-clear(".wp-block-media-text__content"); .wp-block-media-text__content { padding: var(--global--spacing-horizontal); - @include innerblock-margin-clear(); } // Block Styles From 44b0ec3852fd8c669c76076462a40a5b1e6e37c1 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 20 Nov 2020 15:12:29 -0500 Subject: [PATCH 08/11] Linting fixes. --- assets/sass/02-tools/mixins.scss | 2 +- assets/sass/05-blocks/media-text/_editor.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 384b29992..78b2be0cf 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -94,4 +94,4 @@ &.has-child-selected > #{$container} > *:nth-last-child(2) { margin-bottom: 0; } -} \ No newline at end of file +} diff --git a/assets/sass/05-blocks/media-text/_editor.scss b/assets/sass/05-blocks/media-text/_editor.scss index b42138648..583dc3d9c 100644 --- a/assets/sass/05-blocks/media-text/_editor.scss +++ b/assets/sass/05-blocks/media-text/_editor.scss @@ -4,7 +4,7 @@ margin-top: 0; margin-bottom: 0; } - + @include innerblock-margin-clear(".wp-block-media-text__content"); .wp-block-media-text__content { From 67894cf074a37a143cde2dc61e09ed22b3b28681 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 23 Nov 2020 11:18:20 -0500 Subject: [PATCH 09/11] Try removing all innerblock margin overrides. --- assets/css/ie-editor.css | 53 ------------- assets/css/ie.css | 79 ------------------- assets/css/style-editor.css | 61 -------------- assets/sass/02-tools/mixins.scss | 18 ----- assets/sass/05-blocks/columns/_editor.scss | 2 - assets/sass/05-blocks/columns/_style.scss | 8 -- assets/sass/05-blocks/cover/_editor.scss | 2 - assets/sass/05-blocks/cover/_style.scss | 8 -- assets/sass/05-blocks/group/_editor.scss | 2 - assets/sass/05-blocks/group/_style.scss | 8 -- assets/sass/05-blocks/media-text/_editor.scss | 2 - assets/sass/05-blocks/media-text/_style.scss | 8 -- style-rtl.css | 34 -------- style.css | 34 -------- 14 files changed, 319 deletions(-) diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index 4985141b1..9acbce7ef 100644 --- a/assets/css/ie-editor.css +++ b/assets/css/ie-editor.css @@ -598,21 +598,6 @@ a:hover { margin-bottom: 0; } -.wp-block-cover > .wp-block-cover__inner-container > *:first-child, -.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), -.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), -.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { - margin-bottom: 0; -} - .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -772,18 +757,6 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } - -.wp-block-columns > .wp-block-column > *:first-child { - margin-top: 0; -} - -.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2) { - margin-bottom: 0; -} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { @@ -998,18 +971,6 @@ a:hover { margin-left: -30px; } -.wp-block-group > .wp-block-group__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { - margin-bottom: 0; -} - .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; width: 100%; @@ -1750,18 +1711,6 @@ dt { margin-bottom: 0; } -.wp-block-media-text > .wp-block-media-text__content > *:first-child { - margin-top: 0; -} - -.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2) { - margin-bottom: 0; -} - .wp-block-media-text .wp-block-media-text__content { padding: 25px; } @@ -3168,8 +3117,6 @@ pre.wp-block-verse { margin-bottom: 30px; } -/* Block Alignments */ - .wp-block { max-width: calc(100vw - 30px); } diff --git a/assets/css/ie.css b/assets/css/ie.css index 26918233c..737a90783 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -837,14 +837,12 @@ template { width: calc(100vw - 30px); max-width: 100%; } - @media only screen and (min-width: 482px) { .entry-header .post-thumbnail { width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .entry-header .post-thumbnail { @@ -858,14 +856,12 @@ template { width: calc(100vw - 30px); max-width: 100%; } - @media only screen and (min-width: 482px) { .singular .post-thumbnail { width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .singular .post-thumbnail { @@ -879,14 +875,12 @@ template { width: calc(100vw - 30px); max-width: 100%; } - @media only screen and (min-width: 482px) { .alignfull [class*=inner-container] > .alignwide { width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .alignfull [class*=inner-container] > .alignwide { @@ -900,14 +894,12 @@ template { width: calc(100vw - 30px); max-width: 100%; } - @media only screen and (min-width: 482px) { .alignwide [class*=inner-container] > .alignwide { width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .alignwide [class*=inner-container] > .alignwide { @@ -925,21 +917,18 @@ template { /*rtl:ignore*/ margin-right: 25px; } - @media only screen and (min-width: 482px) { .entry-content > .alignleft { margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } - @media only screen and (min-width: 482px) { .entry-content > .alignleft { margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } - @media only screen and (min-width: 822px) { .entry-content > .alignleft { @@ -957,21 +946,18 @@ template { /*rtl:ignore*/ margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } - @media only screen and (min-width: 482px) { .entry-content > .alignright { margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } - @media only screen and (min-width: 482px) { .entry-content > .alignright { margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } - @media only screen and (min-width: 822px) { .entry-content > .alignright { @@ -2651,14 +2637,6 @@ input[type=reset]:hover { } } -.wp-block-columns .wp-block-column > *:first-child { - margin-top: 0; -} - -.wp-block-columns .wp-block-column > *:last-child { - margin-bottom: 0; -} - .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } @@ -2926,14 +2904,12 @@ input[type=reset]:hover { text-align: inherit; padding: 0; } - @media only screen and (min-width: 652px) { .wp-block-cover h2 { font-size: 3rem; } } - @media only screen and (min-width: 652px) { .wp-block-cover h2 { @@ -2949,14 +2925,12 @@ input[type=reset]:hover { text-align: inherit; padding: 0; } - @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { font-size: 3rem; } } - @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { @@ -3009,16 +2983,6 @@ input[type=reset]:hover { } } -.wp-block-cover .wp-block-cover__inner-container > *:first-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-cover .wp-block-cover__inner-container > *:last-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-cover.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignleft, @@ -3226,14 +3190,6 @@ input[type=reset]:hover { } } -.wp-block-group .wp-block-group__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-group .wp-block-group__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-group.has-background { padding: 20px; } @@ -3697,7 +3653,6 @@ img { line-height: 1.3; margin-bottom: 10px; } - @media only screen and (min-width: 652px) { .wp-block-latest-posts > li > a { @@ -3958,14 +3913,6 @@ dd { margin-bottom: 30px; } } - -.wp-block-media-text .wp-block-media-text__content > *:first-child { - margin-top: 0; -} - -.wp-block-media-text .wp-block-media-text__content > *:last-child { - margin-bottom: 0; -} @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { @@ -4142,7 +4089,6 @@ pre.wp-block-preformatted { line-height: 1.3; margin: 0; } - @media only screen and (min-width: 652px) { .wp-block-pullquote p { @@ -4190,14 +4136,12 @@ pre.wp-block-preformatted { .wp-block-pullquote.alignwide > p { max-width: calc(100vw - 30px); } - @media only screen and (min-width: 482px) { .wp-block-pullquote.alignwide > p { max-width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .wp-block-pullquote.alignwide > p { @@ -4208,14 +4152,12 @@ pre.wp-block-preformatted { .wp-block-pullquote.alignwide blockquote { max-width: calc(100vw - 30px); } - @media only screen and (min-width: 482px) { .wp-block-pullquote.alignwide blockquote { max-width: calc(100vw - 100px); } } - @media only screen and (min-width: 822px) { .wp-block-pullquote.alignwide blockquote { @@ -4256,7 +4198,6 @@ pre.wp-block-preformatted { .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 2rem; } - @media only screen and (min-width: 652px) { .wp-block-pullquote.is-style-solid-color blockquote p { @@ -4349,7 +4290,6 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-large p { @@ -4362,7 +4302,6 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large p { @@ -4375,7 +4314,6 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-large:before { @@ -4388,7 +4326,6 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } - @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large:before { @@ -4574,7 +4511,6 @@ pre.wp-block-preformatted { line-height: 1.3; margin-bottom: 10px; } - @media only screen and (min-width: 652px) { .wp-block-rss .wp-block-rss__item-title > a { @@ -4944,14 +4880,12 @@ hr.wp-block-separator { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: calc(100vw - 30px); } - @media only screen and (min-width: 482px) { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: min(calc(100vw - 100px), 610px); } } - @media only screen and (min-width: 822px) { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { @@ -4983,7 +4917,6 @@ hr.wp-block-separator.is-style-dots:before { letter-spacing: 1.125rem; padding-left: 1.125rem; } - @media only screen and (min-width: 652px) { hr.wp-block-separator.is-style-dots:before { @@ -5226,7 +5159,6 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .is-larger-text { @@ -5238,7 +5170,6 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .has-larger-font-size { @@ -5250,7 +5181,6 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .is-extra-large-text { @@ -5262,7 +5192,6 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } - @media only screen and (min-width: 652px) { :root .has-extra-large-font-size { @@ -5275,7 +5204,6 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .is-huge-text { @@ -5288,7 +5216,6 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .has-huge-font-size { @@ -5301,7 +5228,6 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .is-gigantic-text { @@ -5314,7 +5240,6 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } - @media only screen and (min-width: 652px) { :root .has-gigantic-font-size { @@ -6048,14 +5973,12 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { padding-left: 25px; max-width: calc(100vw - 120px); } - @media only screen and (min-width: 482px) { .author-bio.show-avatars .author-bio-content { max-width: calc(min(calc(100vw - 4 * 25px), 610px) - 90px); } } - @media only screen and (min-width: 822px) { .author-bio.show-avatars .author-bio-content { @@ -6683,7 +6606,6 @@ h1.page-title { .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { top: 32px; } - @media only screen and (max-width: 782px) { .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { @@ -6694,7 +6616,6 @@ h1.page-title { .admin-bar .primary-navigation > .primary-menu-container { height: calc(100vh - 32px); } - @media only screen and (max-width: 782px) { .admin-bar .primary-navigation > .primary-menu-container { diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css index 10ff88596..ab02f0ee9 100644 --- a/assets/css/style-editor.css +++ b/assets/css/style-editor.css @@ -692,21 +692,6 @@ a:hover { margin-bottom: 0; } -.wp-block-cover > .wp-block-cover__inner-container > *:first-child, -.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), -.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), -.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { - margin-bottom: 0; -} - .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -789,18 +774,6 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } - -.wp-block-columns > .wp-block-column > *:first-child { - margin-top: 0; -} - -.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2) { - margin-bottom: 0; -} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { @@ -952,18 +925,6 @@ a:hover { margin-left: calc(-1 * var(--global--spacing-vertical)); } -.wp-block-group > .wp-block-group__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { - margin-bottom: 0; -} - .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; width: 100%; @@ -1341,18 +1302,6 @@ dt { margin-bottom: 0; } -.wp-block-media-text > .wp-block-media-text__content > *:first-child { - margin-top: 0; -} - -.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { - margin-bottom: 0; -} - -.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2) { - margin-bottom: 0; -} - .wp-block-media-text .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } @@ -2270,16 +2219,6 @@ pre.wp-block-verse { margin-bottom: var(--global--spacing-vertical); } -/* Block Alignments */ - -[data-block] [data-block]:first-child { - margin-top: 0; -} - -[data-block] [data-block]:nth-last-child(2) { - margin-bottom: 0; -} - .wp-block { max-width: var(--responsive--aligndefault-width); } diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 78b2be0cf..6988a8e6e 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -77,21 +77,3 @@ color: var(--button--color-text-active); } } - -@mixin innerblock-margin-clear($container) { - - // Clear the top margin for the first-child. - > #{$container} > *:first-child { - margin-top: 0; - } - - // Last child that is not the appender. - > #{$container} > *:last-child:not(.block-list-appender) { - margin-bottom: 0; - } - - // When selected, the last item becomes the second last because of the appender. - &.has-child-selected > #{$container} > *:nth-last-child(2) { - margin-bottom: 0; - } -} diff --git a/assets/sass/05-blocks/columns/_editor.scss b/assets/sass/05-blocks/columns/_editor.scss index 7262fce77..b6c257806 100644 --- a/assets/sass/05-blocks/columns/_editor.scss +++ b/assets/sass/05-blocks/columns/_editor.scss @@ -10,8 +10,6 @@ max-width: inherit; } - @include innerblock-margin-clear(".wp-block-column"); - &.is-style-twentytwentyone-columns-overlap { @include media(laptop) { diff --git a/assets/sass/05-blocks/columns/_style.scss b/assets/sass/05-blocks/columns/_style.scss index 8fb713afb..d88d14e98 100644 --- a/assets/sass/05-blocks/columns/_style.scss +++ b/assets/sass/05-blocks/columns/_style.scss @@ -14,14 +14,6 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } } &:last-child { diff --git a/assets/sass/05-blocks/cover/_editor.scss b/assets/sass/05-blocks/cover/_editor.scss index 9be38c187..f7d1b1aa7 100644 --- a/assets/sass/05-blocks/cover/_editor.scss +++ b/assets/sass/05-blocks/cover/_editor.scss @@ -15,8 +15,6 @@ margin-bottom: 0; } - @include innerblock-margin-clear(".wp-block-cover__inner-container"); - .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text, diff --git a/assets/sass/05-blocks/cover/_style.scss b/assets/sass/05-blocks/cover/_style.scss index 489186460..4b8030c33 100644 --- a/assets/sass/05-blocks/cover/_style.scss +++ b/assets/sass/05-blocks/cover/_style.scss @@ -75,14 +75,6 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } } } diff --git a/assets/sass/05-blocks/group/_editor.scss b/assets/sass/05-blocks/group/_editor.scss index c3f2bd626..75265ee37 100644 --- a/assets/sass/05-blocks/group/_editor.scss +++ b/assets/sass/05-blocks/group/_editor.scss @@ -35,8 +35,6 @@ margin-left: calc(-1 * var(--global--spacing-vertical)); } } - - @include innerblock-margin-clear(".wp-block-group__inner-container"); } .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { diff --git a/assets/sass/05-blocks/group/_style.scss b/assets/sass/05-blocks/group/_style.scss index 72c756d33..a8adbf812 100644 --- a/assets/sass/05-blocks/group/_style.scss +++ b/assets/sass/05-blocks/group/_style.scss @@ -31,14 +31,6 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } } } diff --git a/assets/sass/05-blocks/media-text/_editor.scss b/assets/sass/05-blocks/media-text/_editor.scss index 583dc3d9c..b3d00ce47 100644 --- a/assets/sass/05-blocks/media-text/_editor.scss +++ b/assets/sass/05-blocks/media-text/_editor.scss @@ -5,8 +5,6 @@ margin-bottom: 0; } - @include innerblock-margin-clear(".wp-block-media-text__content"); - .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } diff --git a/assets/sass/05-blocks/media-text/_style.scss b/assets/sass/05-blocks/media-text/_style.scss index 7879886f3..6213216c2 100644 --- a/assets/sass/05-blocks/media-text/_style.scss +++ b/assets/sass/05-blocks/media-text/_style.scss @@ -24,14 +24,6 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } } } diff --git a/style-rtl.css b/style-rtl.css index 79f2a14eb..3158e7b91 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -1918,14 +1918,6 @@ input[type=reset]:hover, } } -.wp-block-columns .wp-block-column > *:first-child { - margin-top: 0; -} - -.wp-block-columns .wp-block-column > *:last-child { - margin-bottom: 0; -} - .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } @@ -2099,16 +2091,6 @@ input[type=reset]:hover, } } -.wp-block-cover .wp-block-cover__inner-container > *:first-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-cover .wp-block-cover__inner-container > *:last-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-cover.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignleft, @@ -2268,14 +2250,6 @@ input[type=reset]:hover, } } -.wp-block-group .wp-block-group__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-group .wp-block-group__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-group.has-background { padding: calc(0.666 * var(--global--spacing-vertical)); } @@ -2781,14 +2755,6 @@ dd { margin-bottom: var(--global--spacing-vertical); } } - -.wp-block-media-text .wp-block-media-text__content > *:first-child { - margin-top: 0; -} - -.wp-block-media-text .wp-block-media-text__content > *:last-child { - margin-bottom: 0; -} @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { diff --git a/style.css b/style.css index f2cdd36ad..08f7557cf 100644 --- a/style.css +++ b/style.css @@ -1928,14 +1928,6 @@ input[type=reset]:hover, } } -.wp-block-columns .wp-block-column > *:first-child { - margin-top: 0; -} - -.wp-block-columns .wp-block-column > *:last-child { - margin-bottom: 0; -} - .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } @@ -2109,16 +2101,6 @@ input[type=reset]:hover, } } -.wp-block-cover .wp-block-cover__inner-container > *:first-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-cover .wp-block-cover__inner-container > *:last-child, -.wp-block-cover-image .wp-block-cover__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-cover.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignleft, @@ -2278,14 +2260,6 @@ input[type=reset]:hover, } } -.wp-block-group .wp-block-group__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-group .wp-block-group__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-group.has-background { padding: calc(0.666 * var(--global--spacing-vertical)); } @@ -2791,14 +2765,6 @@ dd { margin-bottom: var(--global--spacing-vertical); } } - -.wp-block-media-text .wp-block-media-text__content > *:first-child { - margin-top: 0; -} - -.wp-block-media-text .wp-block-media-text__content > *:last-child { - margin-bottom: 0; -} @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { From 07b68c7ff145f27aafb2b0ab32ad86d44819a74b Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 24 Nov 2020 08:16:17 -0500 Subject: [PATCH 10/11] Revert "Try removing all innerblock margin overrides." This reverts commit 67894cf074a37a143cde2dc61e09ed22b3b28681. --- assets/css/ie-editor.css | 53 +++++++++++++ assets/css/ie.css | 79 +++++++++++++++++++ assets/css/style-editor.css | 61 ++++++++++++++ assets/sass/02-tools/mixins.scss | 18 +++++ assets/sass/05-blocks/columns/_editor.scss | 2 + assets/sass/05-blocks/columns/_style.scss | 8 ++ assets/sass/05-blocks/cover/_editor.scss | 2 + assets/sass/05-blocks/cover/_style.scss | 8 ++ assets/sass/05-blocks/group/_editor.scss | 2 + assets/sass/05-blocks/group/_style.scss | 8 ++ assets/sass/05-blocks/media-text/_editor.scss | 2 + assets/sass/05-blocks/media-text/_style.scss | 8 ++ style-rtl.css | 34 ++++++++ style.css | 34 ++++++++ 14 files changed, 319 insertions(+) diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index 9acbce7ef..4985141b1 100644 --- a/assets/css/ie-editor.css +++ b/assets/css/ie-editor.css @@ -598,6 +598,21 @@ a:hover { margin-bottom: 0; } +.wp-block-cover > .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -757,6 +772,18 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } + +.wp-block-columns > .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2) { + margin-bottom: 0; +} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { @@ -971,6 +998,18 @@ a:hover { margin-left: -30px; } +.wp-block-group > .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; width: 100%; @@ -1711,6 +1750,18 @@ dt { margin-bottom: 0; } +.wp-block-media-text > .wp-block-media-text__content > *:first-child { + margin-top: 0; +} + +.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-media-text .wp-block-media-text__content { padding: 25px; } @@ -3117,6 +3168,8 @@ pre.wp-block-verse { margin-bottom: 30px; } +/* Block Alignments */ + .wp-block { max-width: calc(100vw - 30px); } diff --git a/assets/css/ie.css b/assets/css/ie.css index 737a90783..26918233c 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -837,12 +837,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .entry-header .post-thumbnail { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .entry-header .post-thumbnail { @@ -856,12 +858,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .singular .post-thumbnail { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .singular .post-thumbnail { @@ -875,12 +879,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .alignfull [class*=inner-container] > .alignwide { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .alignfull [class*=inner-container] > .alignwide { @@ -894,12 +900,14 @@ template { width: calc(100vw - 30px); max-width: 100%; } + @media only screen and (min-width: 482px) { .alignwide [class*=inner-container] > .alignwide { width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .alignwide [class*=inner-container] > .alignwide { @@ -917,18 +925,21 @@ template { /*rtl:ignore*/ margin-right: 25px; } + @media only screen and (min-width: 482px) { .entry-content > .alignleft { margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 482px) { .entry-content > .alignleft { margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 822px) { .entry-content > .alignleft { @@ -946,18 +957,21 @@ template { /*rtl:ignore*/ margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } + @media only screen and (min-width: 482px) { .entry-content > .alignright { margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 482px) { .entry-content > .alignright { margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); } } + @media only screen and (min-width: 822px) { .entry-content > .alignright { @@ -2637,6 +2651,14 @@ input[type=reset]:hover { } } +.wp-block-columns .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns .wp-block-column > *:last-child { + margin-bottom: 0; +} + .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } @@ -2904,12 +2926,14 @@ input[type=reset]:hover { text-align: inherit; padding: 0; } + @media only screen and (min-width: 652px) { .wp-block-cover h2 { font-size: 3rem; } } + @media only screen and (min-width: 652px) { .wp-block-cover h2 { @@ -2925,12 +2949,14 @@ input[type=reset]:hover { text-align: inherit; padding: 0; } + @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { font-size: 3rem; } } + @media only screen and (min-width: 652px) { .wp-block-cover-image h2 { @@ -2983,6 +3009,16 @@ input[type=reset]:hover { } } +.wp-block-cover .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover .wp-block-cover__inner-container > *:last-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:last-child { + margin-bottom: 0; +} + .wp-block-cover.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignleft, @@ -3190,6 +3226,14 @@ input[type=reset]:hover { } } +.wp-block-group .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group .wp-block-group__inner-container > *:last-child { + margin-bottom: 0; +} + .wp-block-group.has-background { padding: 20px; } @@ -3653,6 +3697,7 @@ img { line-height: 1.3; margin-bottom: 10px; } + @media only screen and (min-width: 652px) { .wp-block-latest-posts > li > a { @@ -3913,6 +3958,14 @@ dd { margin-bottom: 30px; } } + +.wp-block-media-text .wp-block-media-text__content > *:first-child { + margin-top: 0; +} + +.wp-block-media-text .wp-block-media-text__content > *:last-child { + margin-bottom: 0; +} @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { @@ -4089,6 +4142,7 @@ pre.wp-block-preformatted { line-height: 1.3; margin: 0; } + @media only screen and (min-width: 652px) { .wp-block-pullquote p { @@ -4136,12 +4190,14 @@ pre.wp-block-preformatted { .wp-block-pullquote.alignwide > p { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { .wp-block-pullquote.alignwide > p { max-width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .wp-block-pullquote.alignwide > p { @@ -4152,12 +4208,14 @@ pre.wp-block-preformatted { .wp-block-pullquote.alignwide blockquote { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { .wp-block-pullquote.alignwide blockquote { max-width: calc(100vw - 100px); } } + @media only screen and (min-width: 822px) { .wp-block-pullquote.alignwide blockquote { @@ -4198,6 +4256,7 @@ pre.wp-block-preformatted { .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 2rem; } + @media only screen and (min-width: 652px) { .wp-block-pullquote.is-style-solid-color blockquote p { @@ -4290,6 +4349,7 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-large p { @@ -4302,6 +4362,7 @@ pre.wp-block-preformatted { font-style: normal; line-height: 1.35; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large p { @@ -4314,6 +4375,7 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-large:before { @@ -4326,6 +4388,7 @@ pre.wp-block-preformatted { line-height: 1.35; left: -25px; } + @media only screen and (min-width: 652px) { .wp-block-quote.is-style-large:before { @@ -4511,6 +4574,7 @@ pre.wp-block-preformatted { line-height: 1.3; margin-bottom: 10px; } + @media only screen and (min-width: 652px) { .wp-block-rss .wp-block-rss__item-title > a { @@ -4880,12 +4944,14 @@ hr.wp-block-separator { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: calc(100vw - 30px); } + @media only screen and (min-width: 482px) { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: min(calc(100vw - 100px), 610px); } } + @media only screen and (min-width: 822px) { hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { @@ -4917,6 +4983,7 @@ hr.wp-block-separator.is-style-dots:before { letter-spacing: 1.125rem; padding-left: 1.125rem; } + @media only screen and (min-width: 652px) { hr.wp-block-separator.is-style-dots:before { @@ -5159,6 +5226,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .is-larger-text { @@ -5170,6 +5238,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .has-larger-font-size { @@ -5181,6 +5250,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .is-extra-large-text { @@ -5192,6 +5262,7 @@ table.wp-calendar-table caption { font-size: 2.5rem; line-height: 1.3; } + @media only screen and (min-width: 652px) { :root .has-extra-large-font-size { @@ -5204,6 +5275,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .is-huge-text { @@ -5216,6 +5288,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .has-huge-font-size { @@ -5228,6 +5301,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .is-gigantic-text { @@ -5240,6 +5314,7 @@ table.wp-calendar-table caption { line-height: 1.3; font-weight: 300; } + @media only screen and (min-width: 652px) { :root .has-gigantic-font-size { @@ -5973,12 +6048,14 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { padding-left: 25px; max-width: calc(100vw - 120px); } + @media only screen and (min-width: 482px) { .author-bio.show-avatars .author-bio-content { max-width: calc(min(calc(100vw - 4 * 25px), 610px) - 90px); } } + @media only screen and (min-width: 822px) { .author-bio.show-avatars .author-bio-content { @@ -6606,6 +6683,7 @@ h1.page-title { .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { top: 32px; } + @media only screen and (max-width: 782px) { .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { @@ -6616,6 +6694,7 @@ h1.page-title { .admin-bar .primary-navigation > .primary-menu-container { height: calc(100vh - 32px); } + @media only screen and (max-width: 782px) { .admin-bar .primary-navigation > .primary-menu-container { diff --git a/assets/css/style-editor.css b/assets/css/style-editor.css index ab02f0ee9..10ff88596 100644 --- a/assets/css/style-editor.css +++ b/assets/css/style-editor.css @@ -692,6 +692,21 @@ a:hover { margin-bottom: 0; } +.wp-block-cover > .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -774,6 +789,18 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } + +.wp-block-columns > .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2) { + margin-bottom: 0; +} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { @@ -925,6 +952,18 @@ a:hover { margin-left: calc(-1 * var(--global--spacing-vertical)); } +.wp-block-group > .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; width: 100%; @@ -1302,6 +1341,18 @@ dt { margin-bottom: 0; } +.wp-block-media-text > .wp-block-media-text__content > *:first-child { + margin-top: 0; +} + +.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-media-text .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } @@ -2219,6 +2270,16 @@ pre.wp-block-verse { margin-bottom: var(--global--spacing-vertical); } +/* Block Alignments */ + +[data-block] [data-block]:first-child { + margin-top: 0; +} + +[data-block] [data-block]:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block { max-width: var(--responsive--aligndefault-width); } diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 6988a8e6e..78b2be0cf 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -77,3 +77,21 @@ color: var(--button--color-text-active); } } + +@mixin innerblock-margin-clear($container) { + + // Clear the top margin for the first-child. + > #{$container} > *:first-child { + margin-top: 0; + } + + // Last child that is not the appender. + > #{$container} > *:last-child:not(.block-list-appender) { + margin-bottom: 0; + } + + // When selected, the last item becomes the second last because of the appender. + &.has-child-selected > #{$container} > *:nth-last-child(2) { + margin-bottom: 0; + } +} diff --git a/assets/sass/05-blocks/columns/_editor.scss b/assets/sass/05-blocks/columns/_editor.scss index b6c257806..7262fce77 100644 --- a/assets/sass/05-blocks/columns/_editor.scss +++ b/assets/sass/05-blocks/columns/_editor.scss @@ -10,6 +10,8 @@ max-width: inherit; } + @include innerblock-margin-clear(".wp-block-column"); + &.is-style-twentytwentyone-columns-overlap { @include media(laptop) { diff --git a/assets/sass/05-blocks/columns/_style.scss b/assets/sass/05-blocks/columns/_style.scss index d88d14e98..8fb713afb 100644 --- a/assets/sass/05-blocks/columns/_style.scss +++ b/assets/sass/05-blocks/columns/_style.scss @@ -14,6 +14,14 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } &:last-child { diff --git a/assets/sass/05-blocks/cover/_editor.scss b/assets/sass/05-blocks/cover/_editor.scss index f7d1b1aa7..9be38c187 100644 --- a/assets/sass/05-blocks/cover/_editor.scss +++ b/assets/sass/05-blocks/cover/_editor.scss @@ -15,6 +15,8 @@ margin-bottom: 0; } + @include innerblock-margin-clear(".wp-block-cover__inner-container"); + .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text, diff --git a/assets/sass/05-blocks/cover/_style.scss b/assets/sass/05-blocks/cover/_style.scss index 4b8030c33..489186460 100644 --- a/assets/sass/05-blocks/cover/_style.scss +++ b/assets/sass/05-blocks/cover/_style.scss @@ -75,6 +75,14 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } diff --git a/assets/sass/05-blocks/group/_editor.scss b/assets/sass/05-blocks/group/_editor.scss index 75265ee37..c3f2bd626 100644 --- a/assets/sass/05-blocks/group/_editor.scss +++ b/assets/sass/05-blocks/group/_editor.scss @@ -35,6 +35,8 @@ margin-left: calc(-1 * var(--global--spacing-vertical)); } } + + @include innerblock-margin-clear(".wp-block-group__inner-container"); } .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { diff --git a/assets/sass/05-blocks/group/_style.scss b/assets/sass/05-blocks/group/_style.scss index a8adbf812..72c756d33 100644 --- a/assets/sass/05-blocks/group/_style.scss +++ b/assets/sass/05-blocks/group/_style.scss @@ -31,6 +31,14 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } diff --git a/assets/sass/05-blocks/media-text/_editor.scss b/assets/sass/05-blocks/media-text/_editor.scss index b3d00ce47..583dc3d9c 100644 --- a/assets/sass/05-blocks/media-text/_editor.scss +++ b/assets/sass/05-blocks/media-text/_editor.scss @@ -5,6 +5,8 @@ margin-bottom: 0; } + @include innerblock-margin-clear(".wp-block-media-text__content"); + .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } diff --git a/assets/sass/05-blocks/media-text/_style.scss b/assets/sass/05-blocks/media-text/_style.scss index 6213216c2..7879886f3 100644 --- a/assets/sass/05-blocks/media-text/_style.scss +++ b/assets/sass/05-blocks/media-text/_style.scss @@ -24,6 +24,14 @@ margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } } } diff --git a/style-rtl.css b/style-rtl.css index 3158e7b91..79f2a14eb 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -1918,6 +1918,14 @@ input[type=reset]:hover, } } +.wp-block-columns .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns .wp-block-column > *:last-child { + margin-bottom: 0; +} + .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } @@ -2091,6 +2099,16 @@ input[type=reset]:hover, } } +.wp-block-cover .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover .wp-block-cover__inner-container > *:last-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:last-child { + margin-bottom: 0; +} + .wp-block-cover.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignleft, @@ -2250,6 +2268,14 @@ input[type=reset]:hover, } } +.wp-block-group .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group .wp-block-group__inner-container > *:last-child { + margin-bottom: 0; +} + .wp-block-group.has-background { padding: calc(0.666 * var(--global--spacing-vertical)); } @@ -2755,6 +2781,14 @@ dd { margin-bottom: var(--global--spacing-vertical); } } + +.wp-block-media-text .wp-block-media-text__content > *:first-child { + margin-top: 0; +} + +.wp-block-media-text .wp-block-media-text__content > *:last-child { + margin-bottom: 0; +} @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { diff --git a/style.css b/style.css index 08f7557cf..f2cdd36ad 100644 --- a/style.css +++ b/style.css @@ -1928,6 +1928,14 @@ input[type=reset]:hover, } } +.wp-block-columns .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns .wp-block-column > *:last-child { + margin-bottom: 0; +} + .wp-block-columns .wp-block-column:last-child { margin-bottom: 0; } @@ -2101,6 +2109,16 @@ input[type=reset]:hover, } } +.wp-block-cover .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover .wp-block-cover__inner-container > *:last-child, +.wp-block-cover-image .wp-block-cover__inner-container > *:last-child { + margin-bottom: 0; +} + .wp-block-cover.alignleft, .wp-block-cover.alignright, .wp-block-cover-image.alignleft, @@ -2260,6 +2278,14 @@ input[type=reset]:hover, } } +.wp-block-group .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group .wp-block-group__inner-container > *:last-child { + margin-bottom: 0; +} + .wp-block-group.has-background { padding: calc(0.666 * var(--global--spacing-vertical)); } @@ -2765,6 +2791,14 @@ dd { margin-bottom: var(--global--spacing-vertical); } } + +.wp-block-media-text .wp-block-media-text__content > *:first-child { + margin-top: 0; +} + +.wp-block-media-text .wp-block-media-text__content > *:last-child { + margin-bottom: 0; +} @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { From 05db74d3195046beb0efcc183a09e7f8cc76ebfc Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 24 Nov 2020 11:08:20 -0500 Subject: [PATCH 11/11] Update assets/sass/02-tools/mixins.scss Co-authored-by: Kelly Dwan --- assets/sass/02-tools/mixins.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 78b2be0cf..eb5b78f2e 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -91,7 +91,8 @@ } // When selected, the last item becomes the second last because of the appender. - &.has-child-selected > #{$container} > *:nth-last-child(2) { + &.has-child-selected > #{$container} > *:nth-last-child(2), + &.is-selected > #{$container} > *:nth-last-child(2) { margin-bottom: 0; } }