base article block styles

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;

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;

resources/css/global/framework/_spacing.scss

@@ -26,6 +26,11 @@
   }
 }
 
+figure {
+  margin: 0;
+  padding: 0;
+}
+
 .container {
   width: calc(100% - spacing.$innerMedium * 2);
   margin: auto;

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;

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"
 ]

resources/json/block-parents.json

@@ -1,4 +1,7 @@
 [
+  "core/media-text",
+  "core/details",
+  "core/quote",
   "acf/badegg-editor",
   "badegg/article"
 ]

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;
+    }
+  }
+}
+