From 040f0cf464d22cb6ce65987b10c04edae830d3f5 Mon Sep 17 00:00:00 2001 From: Steve Ross Date: Tue, 3 Feb 2026 22:54:29 +0000 Subject: [PATCH] base article block styles --- app/blocks.php | 1 + resources/css/global/_typography.scss | 2 +- resources/css/global/framework/_spacing.scss | 5 + resources/css/global/variables/_spacing.scss | 5 + resources/json/block-core-whitelist.json | 5 +- resources/json/block-parents.json | 3 + resources/views/blocks/article/style.scss | 139 +++++++++++++++++++ 7 files changed, 155 insertions(+), 5 deletions(-) create mode 100644 resources/views/blocks/article/style.scss diff --git a/app/blocks.php b/app/blocks.php index 0b92c48a..7f6bb7e1 100644 --- a/app/blocks.php +++ b/app/blocks.php @@ -69,6 +69,7 @@ function unset_core_supports($metadata){ if (str_starts_with($name, 'core/') ) { unset($metadata['supports']['color']); unset($metadata['supports']['typography']); + unset($metadata['supports']['border']); } return $metadata; diff --git a/resources/css/global/_typography.scss b/resources/css/global/_typography.scss index bca55d78..4a5b9e1b 100644 --- a/resources/css/global/_typography.scss +++ b/resources/css/global/_typography.scss @@ -129,7 +129,7 @@ ol { } hr { - margin: 1.5em auto 2em; + margin: 2em auto; height: 0; border: 0 solid colours.$grey-light; border-width: spacing.$borderThin 0 0; diff --git a/resources/css/global/framework/_spacing.scss b/resources/css/global/framework/_spacing.scss index 2823fa5b..87cfcbc3 100644 --- a/resources/css/global/framework/_spacing.scss +++ b/resources/css/global/framework/_spacing.scss @@ -26,6 +26,11 @@ } } +figure { + margin: 0; + padding: 0; +} + .container { width: calc(100% - spacing.$innerMedium * 2); margin: auto; diff --git a/resources/css/global/variables/_spacing.scss b/resources/css/global/variables/_spacing.scss index 42635b8d..1d2c7b47 100644 --- a/resources/css/global/variables/_spacing.scss +++ b/resources/css/global/variables/_spacing.scss @@ -30,6 +30,11 @@ $innerSmall: 1.000em; $innerSmaller: 0.750em; $innerSmallest: 0.500em; +$gap: 1em; +$gapSmall: 0.5em; +$gapMedium: 1em; +$gapLarge: 2em; + $borderRadiusLargeer: 1.500em; $borderRadiusLarge: 1.000em; $borderRadius: 1.000em; diff --git a/resources/json/block-core-whitelist.json b/resources/json/block-core-whitelist.json index 7cbec7a4..aefa9c41 100644 --- a/resources/json/block-core-whitelist.json +++ b/resources/json/block-core-whitelist.json @@ -2,8 +2,6 @@ "core/separator", "core/spacer", - "core/cover", - "core/file", "core/gallery", "core/image", "core/media-text", @@ -18,9 +16,8 @@ "core/list-item", "core/missing", "core/paragraph", - "core/preformatted", - "core/pullquote", "core/quote", + "core/pullquote", "core/table", "core/verse" ] diff --git a/resources/json/block-parents.json b/resources/json/block-parents.json index ecb5a4cd..94bdf174 100644 --- a/resources/json/block-parents.json +++ b/resources/json/block-parents.json @@ -1,4 +1,7 @@ [ + "core/media-text", + "core/details", + "core/quote", "acf/badegg-editor", "badegg/article" ] diff --git a/resources/views/blocks/article/style.scss b/resources/views/blocks/article/style.scss new file mode 100644 index 00000000..1a8d31fe --- /dev/null +++ b/resources/views/blocks/article/style.scss @@ -0,0 +1,139 @@ + +@use "sass:math"; +@use "../../../css/global/variables/breakpoints"; +@use "../../../css/global/variables/spacing"; +@use "../../../css/global/variables/colours"; +@use "../../../css/global/fonts"; + +.wp-block-badegg-article { + container-name: BadEggArticle; + container-type: inline-size; + + figure { + img { + display: block; + } + } + + .wp-block { + &-image, + &-audio, + &-media-text, + &-quote, + &-pullquote { + margin: spacing.$innerMedium auto; + } + } + + .is-layout-flex { + display: flex; + flex-wrap: wrap; + gap: spacing.$gap; + } + + @for $i from 2 through 8 { + .columns-#{$i} > * { width: calc(math.div(1, $i) * 100% - (spacing.$gap - math.div(spacing.$gap, $i))); } + } + + .wp-block-image { + &.is-style-rounded { + img { + border-radius: 9999px; + } + } + + @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) { + .alignleft { + float: left; + margin-right: spacing.$innerMedium; + } + + .alignright { + float: right; + margin-left: spacing.$innerMedium; + } + } + } + + .is-image-fill-element, + .is-cropped { + figure { + display: flex; + flex-direction: column; + margin: 0; + + img { + flex: 1 0 0%; + height: 100%; + object-fit: cover; + width: 100%; + aspect-ratio: 1; + } + } + } + + .wp-block-media-text { + display: grid; + gap: spacing.$innerMedium; + + @container BadEggArticle (max-width: #{breakpoints.$screen-xs-max}) { + display: block; + } + } + + blockquote { + text-align: center; + font-size: 1.25em; + padding: 0; + margin: spacing.$innerLarge auto; + + p { + font-family: serif; + font-style: italic; + margin: 0 0 0.25em; + } + + cite { + font-size: 0.6em; + font-family: fonts.$font; + font-style: normal; + } + + &:not(.is-style-plain) { + position: relative; + padding: 1em 0; + margin: 2em auto; + + * { + position: relative; + z-index: 3; + } + + &::before, + &::after { + position: absolute; + z-index: 2; + left: calc(50% - 0.5em); + display: block; + text-align: center; + font-size: 1.5em; + width: 1em; + } + + &::before { + content: '\201C'; + top: -0.25em; + } + + &::after { + content: '\201D'; + bottom: -1em; + } + } + + @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) { + font-size: 1.5em; + } + } +} +