diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index fbfb2e68c..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,7 +998,15 @@ a:hover { margin-left: -30px; } -.wp-block-group .wp-block-group__inner-container > *:last-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) { + margin-bottom: 0; +} + +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -1715,18 +1750,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 { + margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content [data-block]: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 .wp-block-media-text__content [data-block]:last-child { +.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; } @@ -3129,13 +3168,7 @@ 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/ie.css b/assets/css/ie.css index 3d97776d1..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 { @@ -2912,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 { @@ -2933,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 { @@ -3679,6 +3697,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 { @@ -4324,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 { @@ -4336,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 { @@ -4348,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 { @@ -4360,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 { @@ -4545,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 { @@ -4914,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) { @@ -4951,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 { @@ -5193,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 { @@ -5204,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 { @@ -5215,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 { @@ -5226,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 { @@ -5238,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 { @@ -5250,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 { @@ -5262,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 { @@ -5274,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 { @@ -6007,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 { @@ -6640,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 { @@ -6650,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 962122fed..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,7 +952,15 @@ a:hover { margin-left: calc(-1 * var(--global--spacing-vertical)); } -.wp-block-group .wp-block-group__inner-container > *:last-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) { + margin-bottom: 0; +} + +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -1306,18 +1341,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 { + margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content [data-block]: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 .wp-block-media-text__content [data-block]:last-child { +.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); } @@ -2231,6 +2270,8 @@ pre.wp-block-verse { margin-bottom: var(--global--spacing-vertical); } +/* Block Alignments */ + [data-block] [data-block]:first-child { margin-top: 0; } diff --git a/assets/sass/02-tools/mixins.scss b/assets/sass/02-tools/mixins.scss index 6988a8e6e..eb5b78f2e 100644 --- a/assets/sass/02-tools/mixins.scss +++ b/assets/sass/02-tools/mixins.scss @@ -77,3 +77,22 @@ 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), + &.is-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/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/group/_editor.scss b/assets/sass/05-blocks/group/_editor.scss index 159c57a8c..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 > *:last-child { - margin-bottom: 0; - } + @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 3f3a5fcf5..583dc3d9c 100644 --- a/assets/sass/05-blocks/media-text/_editor.scss +++ b/assets/sass/05-blocks/media-text/_editor.scss @@ -5,16 +5,10 @@ margin-bottom: 0; } + @include innerblock-margin-clear(".wp-block-media-text__content"); + .wp-block-media-text__content { padding: var(--global--spacing-horizontal); - - [data-block]:first-child { - margin-top: 0; - } - - [data-block]:last-child { - margin-bottom: 0; - } } // Block Styles diff --git a/assets/sass/05-blocks/utilities/_editor.scss b/assets/sass/05-blocks/utilities/_editor.scss index b6d074e60..c9de35285 100644 --- a/assets/sass/05-blocks/utilities/_editor.scss +++ b/assets/sass/05-blocks/utilities/_editor.scss @@ -73,15 +73,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