From a69133ba0fef9af8c4c86bc82f4b54ff1d6ac019 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20=C3=81lvarez?= <89805481+danalvrz@users.noreply.github.com> Date: Mon, 10 Jul 2023 21:41:53 -0600 Subject: [PATCH 1/2] teaser css fixes --- .../Blocks/Listing/GridTemplate.jsx | 4 ++-- src/theme/_layout.scss | 4 ++-- src/theme/blocks/_grid.scss | 10 +++++++- src/theme/blocks/_listing.scss | 11 +++++---- src/theme/blocks/_teaser.scss | 24 +++++++++---------- 5 files changed, 31 insertions(+), 22 deletions(-) diff --git a/src/components/Blocks/Listing/GridTemplate.jsx b/src/components/Blocks/Listing/GridTemplate.jsx index f95d4668..a70a09f1 100644 --- a/src/components/Blocks/Listing/GridTemplate.jsx +++ b/src/components/Blocks/Listing/GridTemplate.jsx @@ -40,10 +40,10 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => { componentName="PreviewImage" item={item} alt="" - className="grid-item-image" + className="item-image" /> )} -
+
{item?.head_title && (
{item.head_title}
diff --git a/src/theme/_layout.scss b/src/theme/_layout.scss index fc8049a7..a79b16a6 100644 --- a/src/theme/_layout.scss +++ b/src/theme/_layout.scss @@ -164,7 +164,7 @@ footer { & > .block.heading .heading-wrapper, & > .block.separator.has--align--full .line, & > .block.introduction .block-container, - & > .block.teaser .grid-teaser-item.default, + & > .block.teaser .teaser-item.default, & > .table-of-contents, & > .slate blockquote { @include default-container-width(); @@ -233,7 +233,7 @@ footer { .block-editor-separator.has--align--full .block.separator, .block-editor-separator .block.separator.has--align--full, .block.teaser.has--align--center, - .block-editor-teaser .grid-teaser-item.default, + .block-editor-teaser .teaser-item.default, .block-editor-toc { @include default-container-width(); @include adjustMarginsToContainer($default-container-width); diff --git a/src/theme/blocks/_grid.scss b/src/theme/blocks/_grid.scss index 4c025394..bcf9691a 100644 --- a/src/theme/blocks/_grid.scss +++ b/src/theme/blocks/_grid.scss @@ -128,10 +128,18 @@ margin: 0.5rem !important; } - .listing { + .block.listing { h2 { margin-bottom: 40px !important; } + &.previous--is--same--block-type.previous--has--same--backgroundColor:not(.has--headline) { + margin-top: unset; + } + .listing-item, + .listing-item:last-child { + padding-bottom: 40px !important; + border-bottom: 1px solid $black !important; + } } .block-editor-empty { diff --git a/src/theme/blocks/_listing.scss b/src/theme/blocks/_listing.scss index e59df960..ca976c77 100644 --- a/src/theme/blocks/_listing.scss +++ b/src/theme/blocks/_listing.scss @@ -1,5 +1,6 @@ // Listing Block -.block.listing { +.block.listing, +.column > .block.listing { &.next--has--same--backgroundColor.next--is--same--block-type, &.next--is--__button { .listing-item:last-child { @@ -13,7 +14,7 @@ border-bottom: 1px solid $black; margin-bottom: 40px; - &:last-child:not(> .column) { + &:last-child { padding-bottom: 0 !important; border-bottom: none !important; margin-bottom: 0; @@ -62,7 +63,7 @@ aspect-ratio: $aspect-ratio; } h3 { - margin-bottom: 40px; + margin-bottom: 40px !important; color: $black; @include text-heading-h2(); } @@ -138,13 +139,13 @@ } } - img.grid-item-image { + img.item-image { width: 100%; margin: 0; aspect-ratio: $aspect-ratio; } - .grid-item { + .item { margin-top: 40px; } diff --git a/src/theme/blocks/_teaser.scss b/src/theme/blocks/_teaser.scss index 5d7be167..d363d983 100644 --- a/src/theme/blocks/_teaser.scss +++ b/src/theme/blocks/_teaser.scss @@ -8,13 +8,13 @@ // We want the image to extend in all its container width height: 100%; - .grid-teaser-item.default { + .teaser-item.default { align-items: start; padding-bottom: 40px; // same as vertical spacing in margin-bottom border-bottom: 1px solid $black; } - .grid-image-wrapper { + .image-wrapper { width: 100%; img { object-position: center; @@ -23,10 +23,10 @@ &.has--align--left, &.has--align--right { - .grid-teaser-item.default { + .teaser-item.default { display: flex; - .grid-image-wrapper { + .image-wrapper { align-self: flex-start; } @@ -37,10 +37,10 @@ } &.has--align--left { - .grid-teaser-item.default { + .teaser-item.default { flex-direction: row; - .grid-image-wrapper { + .image-wrapper { margin-right: 20px; @media only screen and (max-width: $largest-mobile-screen) { @@ -52,10 +52,10 @@ } &.has--align--right { - .grid-teaser-item.default { + .teaser-item.default { flex-direction: row-reverse; - .grid-image-wrapper { + .image-wrapper { margin-left: 20px; @media only screen and (max-width: $largest-mobile-screen) { @@ -67,13 +67,13 @@ } &.has--align--center { - .grid-teaser-item.default { + .teaser-item.default { display: block; a { display: block; } - .grid-image-wrapper { + .image-wrapper { margin-bottom: 26px; } } @@ -102,12 +102,12 @@ &.is--last--of--block-type, &.next--has--different--backgroundColor { - .grid-teaser-item.default { + .teaser-item.default { padding-bottom: 0; border-bottom: none; } &.next--is--__button { - .grid-teaser-item.default { + .teaser-item.default { padding-bottom: 40px; border-bottom: 1px solid $black; } From 55dd06ffd99007c0680f624958d1843e1b60339a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20=C3=81lvarez?= <89805481+danalvrz@users.noreply.github.com> Date: Mon, 10 Jul 2023 21:51:09 -0600 Subject: [PATCH 2/2] changelog --- news/134.bugfix | 1 + 1 file changed, 1 insertion(+) create mode 100644 news/134.bugfix diff --git a/news/134.bugfix b/news/134.bugfix new file mode 100644 index 00000000..64c3c510 --- /dev/null +++ b/news/134.bugfix @@ -0,0 +1 @@ +Fix Teaser block CSS. @danalvrz \ No newline at end of file