add article block editor style overrides

app/blocks.php

@@ -31,6 +31,12 @@ add_filter( 'block_categories_all' , __NAMESPACE__ . '\\add_categories' );
 add_filter( 'badegg_block_types_allow', __NAMESPACE__ . '\\allowed_list' );
 add_action( 'init', __NAMESPACE__ . '\\auto_register' );
 
+/**
+ * Core Blocks
+ */
+add_filter( 'render_block_core/details', __NAMESPACE__ . '\\core_details_modified', 10, 2 );
+add_filter( 'render_block_core/image', __NAMESPACE__ . '\\core_image_modified', 10, 2 );
+
 
 function remove_action_block_inline()
 {
@@ -251,3 +257,59 @@ function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $w
         <?php echo ob_get_clean();
     }
 }
+
+function core_details_modified($content, $block)
+{
+    $content = str_replace('</summary>', '</summary><div class="wp-block-details__inner inner inner-zero-x wysiwyg">', $content);
+    $content = str_replace('</details>', '</div></details>', $content);
+
+    return $content;
+}
+
+function core_image_modified($content, $block)
+{
+    $imageID = @$block['attrs']['id'];
+    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
+    $large = wp_get_attachment_image_src($imageID, '2048x2048');
+
+    $dom = new \DomDocument();
+    $dom->strictErrorChecking = false;
+    @$dom->loadHTML($content);
+    @$images = $dom->getElementsByTagName('img');
+
+    // create lightbox link node
+    $link = $dom->createElement('a');
+    $link->setAttribute('class', 'badegg-lightbox');
+    $link->setAttribute('target', '_blank');
+    $link->setAttribute('role', 'button');
+    $link->setAttribute('tabindex', '0');
+    $link->setAttribute('aria-label', __('expand image', 'badegg'));
+
+    foreach($images as $image) {
+        // define new image attributes
+        $src = $image->getAttribute('src');
+        $srcset = $image->getAttribute('srcset');
+        $class = $image->getAttribute('class');
+
+        // set image attributes
+        $image->setAttribute('src', $lazy[0]);
+        $image->setAttribute('srcset', '');
+        $image->setAttribute('data-src', $src);
+        $image->setAttribute('data-srcset', $srcset);
+        $image->setAttribute('class', $class . ' lazy');
+
+        // clone lightbox link
+        $linkClone = $link->cloneNode();
+
+        // set lightbox link attributes
+        $linkClone->setAttribute('href', $large[0]);
+
+        // replace image with lightbox link
+        $image->parentNode->replaceChild($linkClone, $image);
+
+        // append original image to lightbox link
+        $linkClone->appendChild($image);
+    }
+
+    return $dom->saveHTML();
+}

resources/css/components/_button.scss

@@ -1,4 +1,4 @@
-@use "../global/fonts";
+@use "../global/variables/fonts";
 @use "../global/variables/colours";
 
 button {

resources/css/components/_forms.scss

@@ -1,4 +1,4 @@
-@use "../global/fonts";
+@use "../global/variables/fonts";
 @use "../global/variables/breakpoints";
 @use "../global/variables/colours";
 

resources/css/global/_fonts.scss

@@ -1,5 +1,3 @@
-$font: "Ubuntu", Helvetica, Arial, sans-serif;
-
 /*
  * Roots Fonts Setup
  * https://roots.io/sage/docs/fonts-setup/

resources/css/global/_typography.scss

@@ -1,14 +1,14 @@
-@use "fonts";
+@use "variables/fonts";
 @use "variables/breakpoints";
 @use "variables/colours";
 @use "variables/spacing";
 
 .wysiwyg {
-  *:first-child {
+  > *:first-child {
     margin-top: 0;
   }
 
-  *:last-child {
+  > *:last-child {
     margin-bottom: 0;
   }
 }

resources/css/global/_variables.scss

@@ -1,3 +1,4 @@
+@use "variables/fonts";
 @use "variables/colours";
 @use "variables/breakpoints";
 @use "variables/spacing";

resources/css/global/framework/_normalise.scss

@@ -32,6 +32,11 @@ img {
   transition: all 300ms ease;
 }
 
+video {
+  max-width: 100%;
+  height: auto;
+}
+
 img.lazy,
 .lazy-bg,
 .lazy-loaded {

resources/css/global/variables/_fonts.scss

@@ -0,0 +1,2 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+$blockquote: serif;

resources/js/editor.js

@@ -12,16 +12,20 @@ domReady(() => {
     return settings
   }
 
-  wp.hooks.addFilter(
+  const coreInnerBlocks = (settings, name) => {
-      'blocks.registerBlockType',
+    if (['core/media-text', 'core/details', 'core/quote'].includes(name)) {
-      'badegg/restrict-parent-blocks',
-      restrictEditorParentBlocks
-  );
 
-  // find blocks styles
+      settings.allowedBlocks = [
-  wp.blocks.getBlockTypes().forEach((block) => {
+        'core/paragraph',
-      if (_.isArray(block['styles'])) {
+        'core/heading',
-          console.log('editor.js ' + block.name, _.pluck(block['styles'], 'name'));
+        'core/list',
+      ];
     }
-  });
+
+    return settings;
+  }
+
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/restrict-parent-blocks', restrictEditorParentBlocks );
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/core-inner-blocks', coreInnerBlocks );
+
 });

resources/json/block-core-whitelist.json

@@ -7,17 +7,16 @@
   "core/media-text",
   "core/audio",
   "core/video",
+  "core/embed",
 
   "core/footnotes",
   "core/heading",
   "core/list",
-  "core/code",
   "core/details",
   "core/list-item",
   "core/missing",
   "core/paragraph",
   "core/quote",
   "core/pullquote",
-  "core/table",
   "core/verse"
 ]

resources/json/block-parents.json

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

resources/views/blocks/article/css/_base.scss

@@ -0,0 +1,20 @@
+@use "sass:math";
+
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+@use "../../../../css/global/variables/colours";
+
+.wp-block-badegg-article {
+  container-name: BadEggArticle;
+  container-type: inline-size;
+
+  > .container > [class^="wp-block-"]:not(.wp-block-heading) {
+    margin: spacing.$innerLarge auto;
+  }
+
+  .is-layout-flex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing.$gap;
+  }
+}

resources/views/blocks/article/css/_details.scss

@@ -0,0 +1,17 @@
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-details {
+  summary {
+    font-family: fonts.$font;
+    font-weight: bold;
+  }
+
+  @media screen {
+    .knockout & {
+      summary {
+        color: colours.$white;
+      }
+    }
+  }
+}

resources/views/blocks/article/css/_embed.scss

@@ -0,0 +1,10 @@
+.wp-block-badegg-article {
+  .is-type-video {
+    iframe {
+      display: block;
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16 / 9;
+    }
+  }
+}

resources/views/blocks/article/css/_gallery.scss

@@ -0,0 +1,12 @@
+@use "sass:math";
+
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  .wp-block-gallery {
+    @for $i from 2 through 8 {
+      &.columns-#{$i} > * { width: calc(math.div(1, $i) * 100% - (spacing.$gap - math.div(spacing.$gap, $i))); }
+    }
+  }
+}

resources/views/blocks/article/css/_image.scss

@@ -0,0 +1,52 @@
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  figure {
+    img {
+      display: block;
+    }
+  }
+
+  .wp-block-image {
+    &.is-style-rounded {
+      img {
+        border-radius: 9999px;
+      }
+    }
+
+    @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) {
+      .alignleft,
+      .alignright {
+        margin-bottom: spacing.$innerSmall;
+      }
+
+      .alignleft {
+        float: left;
+        margin-right: spacing.$innerLarge;
+      }
+
+      .alignright {
+        float: right;
+        margin-left: spacing.$innerLarge;
+      }
+    }
+  }
+
+  .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;
+      }
+    }
+  }
+}

resources/views/blocks/article/css/_media-text.scss

@@ -0,0 +1,24 @@
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  .wp-block-media-text {
+    display: grid;
+    gap: spacing.$innerLarge;
+
+    @container BadEggArticle (max-width: #{breakpoints.$screen-xs-max}) {
+      &.is-stacked-on-mobile {
+        display: block;
+
+        .wp-block-media-text__media {
+          margin-bottom: spacing.$innerLarge;
+        }
+      }
+    }
+
+    &__content {
+      > *:first-child { margin-top: 0; }
+      > *:last-child { margin-bottom: 0; }
+    }
+  }
+}

resources/views/blocks/article/css/_quote.scss

@@ -0,0 +1,117 @@
+@use "../../../../css/global/variables/breakpoints";
+@use "../../../../css/global/variables/spacing";
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-badegg-article {
+  .wp-block-pullquote blockquote,
+  .wp-block-quote {
+    position: relative;
+    text-align: center;
+    font-size: 1.25em;
+    padding: 0;
+    padding: 1em 0;
+    margin: spacing.$innerLarge auto;
+
+    * {
+      position: relative;
+      z-index: 3;
+    }
+
+    p {
+      font-family: fonts.$blockquote;
+      font-style: italic;
+      margin: 0 0 0.25em;
+      color: colours.$primary;
+    }
+
+    cite {
+      font-size: 0.6em;
+      font-family: fonts.$font;
+      font-style: normal;
+      color: colours.$grey;
+    }
+
+    &::before {
+      content: '\201C';
+      position: absolute;
+      z-index: 2;
+      top: -0.25em;
+      left: calc(50% - 0.5em);
+      display: block;
+      text-align: center;
+      font-size: 1.5em;
+      width: 1em;
+      color: colours.$secondary;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: auto calc(20% - 1em) 0;
+      border-width: 1px 0 0;
+      border-style: solid;
+    }
+
+    > *:first-child {
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        top: -0.75em;
+        display: block;
+        width: 30%;
+        border-width: 1px 0 0;
+        border-style: solid;
+      }
+
+      &::before {
+        right: calc(50% + 1em);
+      }
+
+      &::after {
+        left: calc(50% + 1em);
+      }
+    }
+
+    &::after,
+    > *:first-child::before,
+    > *:first-child::after {
+      border-color: colours.$grey-lighter;
+    }
+
+    &.is-style-plain {
+      &::before,
+      &::after,
+      > *:first-child::before,
+      > *:first-child::after {
+        content: none;
+      }
+    }
+
+    @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) {
+      font-size: 1.5em;
+    }
+  }
+
+  @media screen {
+  &.knockout {
+    .wp-block-pullquote blockquote,
+    .wp-block-quote {
+      p {
+        color: colours.$primary-light;
+      }
+
+      cite {
+        color: rgba(colours.$white, 0.7);
+      }
+
+      &::after,
+      > *:first-child::before,
+      > *:first-child::after {
+        border-color: rgba(colours.$white,0.2);
+      }
+    }
+  }
+  }
+}

resources/views/blocks/article/css/_verse.scss

@@ -0,0 +1,14 @@
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-verse {
+  font-family: fonts.$font;
+  line-height: 2;
+  word-wrap: normal;
+
+  @media screen {
+    .knockout & {
+      color: colours.$white;
+    }
+  }
+}

resources/views/blocks/article/editor.scss

@@ -0,0 +1,8 @@
+@use "../../../css/global/variables/spacing";
+
+.wp-block-badegg-article {
+  .wp-block-pullquote {
+    padding: 0;
+    margin: spacing.$innerLarge auto;
+  }
+}

resources/views/blocks/article/style.scss

@@ -1,139 +1,8 @@
-
+@use 'css/base';
-@use "sass:math";
+@use 'css/image';
-@use "../../../css/global/variables/breakpoints";
+@use 'css/gallery';
-@use "../../../css/global/variables/spacing";
+@use 'css/media-text';
-@use "../../../css/global/variables/colours";
+@use 'css/quote';
-@use "../../../css/global/fonts";
+@use 'css/embed';
-
+@use 'css/verse';
-.wp-block-badegg-article {
+@use 'css/details';
-  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;
-    }
-  }
-}
-