expose new image sizes to javascript and properly get specified image sizes in react

BackgroundImage component: support specific image sizes and lazy loading
add lazy background image
2026-01-05 17:23:59 +00:00 · 2026-01-05 14:49:33 +00:00 · 2026-01-05 13:39:42 +00:00 · 2026-01-05 13:39:24 +00:00 · 2026-01-04 18:03:17 +00:00 · 2026-01-04 18:02:58 +00:00
56 changed files with 14077 additions and 1516 deletions
--- a/app/ACF/Dynamic.php
+++ b/app/ACF/Dynamic.php
@@ -108,7 +108,9 @@ class Dynamic
            '0' => '<i class="fa-solid"></i> <span>Please select an icon</span>',
        ];

-        foreach($icons as $slug):
+        foreach($icons as $slug => $props):
+            if(in_array($slug, range(0,9))) continue;
+
            $choices[$slug] = '<i class="fa-'.$set.' fa-'.$slug.'" style="color: #2271b1;"></i> <span>' . (ucwords(str_replace('-', ' ', $slug))) . '</span>';
        endforeach;

@@ -135,8 +137,6 @@ class Dynamic
                        'bg_colour',
                        'angle_colour',
                        'fontawesome_brands',
-                        'fontawesome_regular',
-                        'fontawesome_solid',
                    ];

                    // do something to the original_value to override the default escaping, then return it.
--- a/app/Admin/Enqueue.php
+++ b/app/Admin/Enqueue.php
@@ -13,9 +13,9 @@ class Enqueue
    {
        wp_enqueue_style(
            'fontawesome',
-            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css',
            false,
-            '7.0.1',
+            '6.5.2',
            'all'
        );
    }
--- a/app/Admin/Integrations.php
+++ b/app/Admin/Integrations.php
@@ -7,7 +7,6 @@ class Integrations
    public function __construct()
    {
        add_action( 'wp_head',  [$this, 'FathomAnalytics']);
-        add_action( 'wp_footer',  [$this, 'FontAwesomeKit'], 100);
    }

    public function FathomAnalytics()
@@ -22,17 +21,4 @@ class Integrations

        <?php endif;
    }
-
-    public function FontAwesomeKit()
-    {
-        $kit = get_field('badegg_integrations_fontawesome_kit', 'option');
-
-        if($kit): ?>
-
-<!-- FontAwesome Kit -->
-<script src="https://kit.fontawesome.com/<?= $kit ?>.js" crossorigin="anonymous"></script>
-<!-- / FontAwesome Kit -->
-
-        <?php endif;
-    }
 }
--- a/app/Utilities/Colour.php
+++ b/app/Utilities/Colour.php
@@ -32,7 +32,7 @@ class Colour
        $values = [];

        if(function_exists('get_field')):
-            $colours = @get_field('badegg_colours', 'option');
+            $colours = get_field('badegg_colours', 'option');

            if($colours):
                foreach($colours as $index => $props):
--- a/app/blocks.php
+++ b/app/blocks.php
@@ -6,89 +6,30 @@

 namespace App\Blocks;

-/**
- * Disable block styles in frontend
- */
-add_filter( 'should_load_separate_core_block_assets', '__return_false', 99 );
-add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
-add_action( 'init', __NAMESPACE__ . '\\remove_action_block_inline' );
-add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\disable_frontend_inline_css', 20 );
-add_action( 'template_redirect', __NAMESPACE__ . '\\delete_block_support_inline_css' );
-
-/**
- * block editor back end tweaks
- *  - Disable all core blocks except what we need as inner blocks
- *  - resources/js/editor.js handles hiding the inner blocks at the top level
- */
-add_action( 'allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2 );
-add_action( 'admin_init', __NAMESPACE__ . '\\admin_block_cleanup' );
-add_filter( 'block_type_metadata', __NAMESPACE__ . '\\unset_core_supports' );
-
-/**
- * Custom blocks
- */
-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()
-{
-    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
-    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_support_styles');
-    remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
-    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
-}
-
-function admin_block_cleanup()
-{
-    remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
-}
-
-function disable_frontend_inline_css()
-{
-    wp_dequeue_style( 'wp-block-library' );
-    wp_dequeue_style( 'wp-block-library-theme' );
-    wp_dequeue_style( 'classic-theme-styles' );
-}
-
-function delete_block_support_inline_css ()
-{
-	ob_start( function ( $html ) {
-		return preg_replace(
-			'#<style id=[\'"]core-block-supports-inline-css[\'"][^>]*>.*?</style>#s',
-			'',
-			$html
-		);
-	} );
-}
-
-function unset_core_supports($metadata){
+add_filter('block_type_metadata', function($metadata){
    $name = $metadata['name'];

    if (str_starts_with($name, 'core/') ) {
        unset($metadata['supports']['color']);
        unset($metadata['supports']['typography']);
-        unset($metadata['supports']['border']);
    }

    return $metadata;
-}
+});

+// Disable all core blocks except what we need as inner blocks
+// resources/js/editor.js handles hiding the inner blocks at the top level
+add_action('allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2);

-function allowed_list($allowed){
+// add blocks to the allowed list via filter
+add_filter('badegg_block_types_allow', function($allowed){
    return array_merge($allowed, [
        // 'core/categories',
    ]);
-}
+});

-function add_categories( $categories ) {
+// Add the badegg block category
+add_filter( 'block_categories_all' , function ( $categories ) {

        // Adding a new category.
        $categories = array_merge([
@@ -99,9 +40,10 @@ function add_categories( $categories ) {
        ], $categories);

        return $categories;
-}
+});

-function auto_register() {
+// Auto register WP blocks
+add_action('init', function () {
    $blocks = glob(get_theme_file_path('resources/views/blocks/*/block.json'));

    foreach ($blocks as $block_json) {
@@ -178,7 +120,7 @@ function auto_register() {

        register_block_type($block_json, $props);
    }
-}
+});

 function list_inner()
 {
@@ -257,72 +199,3 @@ 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)
-{
-    if(!$content) return '';
-
-    $dom = new \DomDocument();
-    $dom->strictErrorChecking = false;
-    @$dom->loadHTML($content);
-
-    $images = @$dom->getElementsByTagName('img');
-    $figures = @$dom->getElementsByTagName('figure');
-
-    if(!$figures) return $content;
-
-    // get image data
-    $imageID = @$block['attrs']['id'];
-    $lazy = wp_get_attachment_image_src($imageID, 'lazy');
-    $specifiedSize = @wp_get_attachment_image_src($imageID, $block['sizeSlug']);
-    $large = wp_get_attachment_image_src($imageID, '2048x2048');
-
-    // 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');
-
-        if($specifiedSize) {
-            $image->setAttribute('width', $specifiedSize[1]);
-            $image->setAttribute('height', $specifiedSize[2]);
-        }
-
-        // 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($figures[0]);
-}
--- a/app/setup.php
+++ b/app/setup.php
@@ -164,17 +164,13 @@ function cors() {
    if(WP_ENV == 'development'):
        header( 'Access-Control-Allow-Origin: *' );
    endif;
+
 }

-add_action('wp_head', function(){
-    if(file_exists(get_theme_file_path('resources/images/favicon/site.webmanifest'))) {
-        echo \Roots\view("partials.favicon")->render();
-    }
+add_action('after_setup_theme', function(){
+  $image_srcset = new Utilities\ImageSrcset;
+  $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
+  add_image_size('lazy', 50, 50);
+  add_image_size('hero', 1920, 1080, true);
 });

-add_action('after_setup_theme', function(){
-    $image_srcset = new Utilities\ImageSrcset;
-    $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
-    add_image_size('lazy', 50, 50);
-    add_image_size('hero', 1920, 1080, true);
-});
--- a/resources/acf/group_options_global_settings.json
+++ b/resources/acf/group_options_global_settings.json
@@ -17,8 +17,7 @@
                "id": ""
            },
            "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
        },
        {
            "key": "field_67658e49aba4f",
@@ -59,10 +58,7 @@
                    "default_value": "",
                    "enable_opacity": 0,
                    "return_format": "string",
-                    "parent_repeater": "field_67658e49aba4f",
-                    "custom_palette_source": "",
-                    "palette_colors": "",
-                    "show_color_wheel": true
+                    "parent_repeater": "field_67658e49aba4f"
                },
                {
                    "key": "field_67658fba41889",
@@ -171,7 +167,6 @@
                        "id": ""
                    },
                    "layout": "block",
-                    "parent_repeater": "field_67658e49aba4f",
                    "sub_fields": [
                        {
                            "key": "field_676590414188c",
@@ -189,10 +184,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_676590684188d",
@@ -210,10 +202,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_6765907f4188e",
@@ -231,10 +220,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_676590924188f",
@@ -252,10 +238,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_6765909941890",
@@ -273,10 +256,7 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        },
                        {
                            "key": "field_6765909f41891",
@@ -294,12 +274,10 @@
                            },
                            "default_value": "",
                            "enable_opacity": 0,
-                            "return_format": "string",
-                            "custom_palette_source": "",
-                            "palette_colors": "",
-                            "show_color_wheel": true
+                            "return_format": "string"
                        }
-                    ]
+                    ],
+                    "parent_repeater": "field_67658e49aba4f"
                }
            ]
        },
@@ -318,8 +296,7 @@
                "id": ""
            },
            "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
        },
        {
            "key": "field_67659cb08081e",
@@ -395,8 +372,7 @@
                "id": ""
            },
            "placement": "top",
-            "endpoint": 0,
-            "selected": 0
+            "endpoint": 0
        },
        {
            "key": "field_676594615ead2",
@@ -417,27 +393,6 @@
            "placeholder": "",
            "prepend": "",
            "append": ""
-        },
-        {
-            "key": "field_698b36010d055",
-            "label": "Font Awesome Kit ID",
-            "name": "badegg_integrations_fontawesome_kit",
-            "aria-label": "",
-            "type": "text",
-            "instructions": "The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener nofollow noindex\">Visit website<\/a>",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "default_value": "",
-            "maxlength": "",
-            "allow_in_bindings": 1,
-            "placeholder": "",
-            "prepend": "",
-            "append": ""
        }
    ],
    "location": [
@@ -458,6 +413,5 @@
    "active": true,
    "description": "",
    "show_in_rest": 0,
-    "display_title": "",
-    "modified": 1770736471
+    "modified": 1734712625
 }
--- a/resources/acf/group_post_social.json
+++ b/resources/acf/group_post_social.json
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -1,25 +1,24 @@
 // Global Variables, Mixins, and Framework
-@forward "global/variables";
-@forward "global/mixins";
-@forward "global/fonts";
-@forward "global/typography";
-@forward "global/framework";
+@use "global/variables";
+@use "global/mixins";
+@use "global/fonts";
+@use "global/typography";
+@use "global/framework";

 // Third Party Plugins
-@forward "plugins/contact-form-7";
-@forward "plugins/mce";
-
-// Components
-@forward "components/block";
-@forward "components/forms";
-@forward "components/button";
-@forward "components/card";
-@forward "components/BadEggLightbox";
+@use "plugins/contact-form-7";
+@use "plugins/mce";

 // Sections
-@forward "../views/sections/header/header";
-@forward "../views/sections/footer/footer";
+@use "sections/header";
+@use "sections/footer";
+
+// Components
+@use "components/block";
+@use "components/forms";
+@use "components/button";
+@use "components/card";

 // Page Styles
-@forward "views/page";
+@use "views/page";

--- a/resources/css/components/_BadEggLightbox.scss
+++ b/resources/css/components/_BadEggLightbox.scss
@@ -1,92 +0,0 @@
-#badegg-lightbox {
-  &-overlay,
-  &-image,
-  &-close {
-    transition: all 300ms ease;
-    opacity: 0;
-  }
-
-  &-modal {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-    padding: 3em;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(white, 0.5);
-
-    .open & {
-      opacity: 1;
-      backdrop-filter: blur(1em);
-    }
-  }
-
-  &-image {
-    position: relative;
-    z-index: 2;
-    object-fit: contain;
-    max-width: 100%;
-    max-height: 100%;
-    width: auto;
-    height: auto;
-    transform: scale(0.8);
-
-    .open & {
-      transform: none;
-      opacity: 1;
-    }
-  }
-
-  &-close {
-    position: absolute;
-    z-index: 3;
-    top: 1em;
-    right: 1em;
-    display: block;
-    appearance: none;
-    border: none;
-    background: transparent;
-    border: 2px solid black;
-    border-radius: 50%;
-    width: 2em;
-    height: 2em;
-    cursor: pointer;
-    transform: scale(0.01) rotate(-360deg);
-
-    .open & {
-      opacity: 1;
-      transform: none;
-    }
-
-    &:hover,
-    &:focus {
-      transform: scale(1.2) rotate(90deg);
-    }
-
-    .admin-bar & {
-      top: calc(1em + 32px);
-
-      @media (max-width: 782px) {
-        top: calc(1em + 46px);
-      }
-    }
-
-    svg {
-      display: block;
-      width: 100%;
-      stroke: black;
-      stroke-width: 5;
-    }
-
-    &:focus {
-      outline: 2px dashed red;
-    }
-  }
-}
--- a/resources/css/components/_button.scss
+++ b/resources/css/components/_button.scss
@@ -1,4 +1,4 @@
-@use "../global/variables/fonts";
+@use "../global/fonts";
@use "../global/variables/colours";

 button {
--- a/resources/css/components/_forms.scss
+++ b/resources/css/components/_forms.scss
@@ -1,4 +1,4 @@
-@use "../global/variables/fonts";
+@use "../global/fonts";
@use "../global/variables/breakpoints";
@use "../global/variables/colours";

--- a/resources/css/editor.scss
+++ b/resources/css/editor.scss
@@ -1,5 +1,5 @@
@use "app";
-@use "global/variables";
+@use "global/variables/colours";

 html :where(.wp-block) {
  max-width: none;
@@ -8,7 +8,7 @@ html :where(.wp-block) {
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
  &:hover:after {
    content: '';
-    outline: 2px solid variables.$wpblue;
+    outline: 2px solid colours.$wpblue;
    position: absolute;
    inset: 0;
  }
@@ -36,7 +36,7 @@ html :where(.wp-block) {
 }

 .editor-styles-wrapper {
-  background: variables.$grey-lightest;
+  background: colours.$grey-lightest;

  .block-list-appender {
    width: 350px;
--- a/resources/css/global/_fonts.scss
+++ b/resources/css/global/_fonts.scss
@@ -1,3 +1,5 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+
 /*
 * Roots Fonts Setup
 * https://roots.io/sage/docs/fonts-setup/
--- a/resources/css/global/_framework.scss
+++ b/resources/css/global/_framework.scss
@@ -1,4 +1,4 @@
-@forward "framework/breakpoints";
-@forward "framework/normalise";
-@forward "framework/colours";
-@forward "framework/spacing";
+@use "framework/breakpoints";
+@use "framework/normalise";
+@use "framework/colours";
+@use "framework/spacing";
--- a/resources/css/global/_mixins.scss
+++ b/resources/css/global/_mixins.scss
@@ -1,4 +1,4 @@
-@forward "mixins/linear-gradient";
-@forward "mixins/text-contrast";
-@forward "mixins/generate-colour-classes";
-@forward "mixins/generate-button-classes";
+@use "mixins/linear-gradient";
+@use "mixins/text-contrast";
+@use "mixins/generate-colour-classes";
+@use "mixins/generate-button-classes";
--- a/resources/css/global/_typography.scss
+++ b/resources/css/global/_typography.scss
@@ -1,11 +1,14 @@
-@use "variables";
+@use "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;
  }
 }
@@ -16,9 +19,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: variables.$primary;
+  color: colours.$primary;
  font-weight: 700;
-  font-family: variables.$font;
+  font-family: fonts.$font;
  line-height: 1.1em;
  margin: 1.5em 0 0.25em;
  padding: 0;
@@ -29,7 +32,7 @@ h6 {

  @media screen {
    .knockout & {
-      color: variables.$white;
+      color: colours.$white;
    }
  }
 }
@@ -45,7 +48,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }

-@media (min-width: variables.$screen-sm) {
+@media (min-width: breakpoints.$screen-sm) {
  h1 { font-size: 2.5em; }
  h2 { font-size: 2em; }
  h3 { font-size: 1.5em; }
@@ -60,8 +63,8 @@ p,
 li,
 td,
 label {
-  color: variables.$grey-darker;
-  font-family: variables.$font;
+  color: colours.$grey-darker;
+  font-family: fonts.$font;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0 0 0.8em;
@@ -69,30 +72,30 @@ label {

  @media screen {
    .knockout & {
-      color: variables.$white;
+      color: colours.$white;
    }
  }
 }

 a {
-  color: variables.$primary;
+  color: colours.$primary;
  text-decoration: none;
  outline: none;
  transition: all 300ms ease;

  &:hover,
  &:focus {
-    color: variables.$primary-dark;
+    color: colours.$primary-dark;
    text-decoration: none;
  }

  @media screen {
    .knockout & {
-      color: variables.$white;
+      color: colours.$white;

      &:hover,
      &:focus {
-        color: variables.$primary-light;
+        color: colours.$primary-light;
      }
    }
  }
@@ -110,6 +113,7 @@ ul,
 ol {
  margin: 0 0 0.7em;
  padding: 0 0 0 1.2em;
+  text-align: left;
 }

 .nolist {
@@ -125,14 +129,14 @@ ol {
 }

 hr {
-  margin: 2em auto;
+  margin: 1.5em auto 2em;
  height: 0;
-  border: 0 solid variables.$grey-light;
-  border-width: variables.$borderThin 0 0;
+  border: 0 solid colours.$grey-light;
+  border-width: spacing.$borderThin 0 0;

  @media screen {
    .knockout & {
-      border-color: variables.$white;
+      border-color: colours.$white;
    }
  }
 }
--- a/resources/css/global/_variables.scss
+++ b/resources/css/global/_variables.scss
@@ -1,4 +1,3 @@
-@forward "variables/fonts";
-@forward "variables/colours";
-@forward "variables/breakpoints";
-@forward "variables/spacing";
+@use "variables/colours";
+@use "variables/breakpoints";
+@use "variables/spacing";
--- a/resources/css/global/framework/_breakpoints.scss
+++ b/resources/css/global/framework/_breakpoints.scss
@@ -1,6 +1,6 @@
-@use "../variables";
+@use "../variables/breakpoints";

-@each $label, $value in variables.$breakpoints {
+@each $label, $value in breakpoints.$breakpoints {
  .min-#{$label} {
    @media (min-width: $value) {
      display: none;
--- a/resources/css/global/framework/_colours.scss
+++ b/resources/css/global/framework/_colours.scss
@@ -1,12 +1,13 @@
-@use "../mixins";
-@use "../variables";
+@use "../mixins/generate-button-classes";
+@use "../mixins/generate-colour-classes";
+@use "../variables/colours";

 ::selection {
-  color: variables.$white;
-  background: variables.$primary;
+  color: colours.$white;
+  background: colours.$primary;
 }

-@each $color, $hex in variables.$colors {
-  @include mixins.generate_colour_classes($color, $hex);
-  @include mixins.generate_button_colors($color, $hex);
+@each $color, $hex in colours.$colors {
+  @include generate-colour-classes.generate_colour_classes($color, $hex);
+  @include generate-button-classes.generate_button_colors($color, $hex);
 }
--- a/resources/css/global/framework/_normalise.scss
+++ b/resources/css/global/framework/_normalise.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../variables/colours";

 * {
  box-sizing: border-box;
@@ -13,7 +13,7 @@ body,
 html {
  margin: 0;
  padding: 0;
-  background: variables.$white;
+  background: colours.$white;
 }

 .visually-hidden {
@@ -32,11 +32,6 @@ img {
  transition: all 300ms ease;
 }

-video {
-  max-width: 100%;
-  height: auto;
-}
-
 img.lazy,
 .lazy-bg,
 .lazy-loaded {
--- a/resources/css/global/framework/_spacing.scss
+++ b/resources/css/global/framework/_spacing.scss
@@ -1,120 +1,72 @@
-@use "../variables";
+@use "../variables/colours";
+@use "../variables/spacing";

 .brand {
  display: block;
-  width: variables.$brandWidth;
-  height: variables.$brandHeight;
+  width: spacing.$brandWidth;
+  height: spacing.$brandHeight;

  svg,
  img {
    display: block;
-    width: variables.$brandWidth;
-    height: variables.$brandHeight;
+    width: spacing.$brandWidth;
+    height: spacing.$brandHeight;
  }

  .knockout & {
    @media screen {
      .fill-primary {
-        fill: variables.$white;
+        fill: colours.$white;
      }

      .fill-grey {
-        fill: rgba(variables.$white, 0.8);
+        fill: rgba(colours.$white, 0.8);
      }
    }
  }
 }

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

-  @container (min-width: #{variables.$screen-md}) {
-    width: calc(100% - variables.$innerLarge * 3);
-  }
-
-  @container (min-width: #{variables.$screen-lg}) {
-    width: calc(100% - variables.$innerLarge * 4);
-  }
-
  &-full { width: auto; }
-  &-larger { max-width: variables.$containerLarger; }
-  &-large { max-width: variables.$containerLarge; }
-  &-medium { max-width: variables.$containerMedium; }
-  &-small { max-width: variables.$containerSmall; }
-  &-narrow { max-width: variables.$containerNarrow; }
+  &-large { max-width: spacing.$containerLarge; }
+  &-medium { max-width: spacing.$containerMedium; }
+  &-small { max-width: spacing.$containerSmall; }
+  &-narrow { max-width: spacing.$containerNarrow; }
 }

 .section {
-  padding: variables.$sectionMedium 0;
+  padding: spacing.$sectionMedium 0;

-  &-small {  padding: variables.$sectionSmall  unset; }
-  &-medium { padding: variables.$sectionMedium unset; }
-  &-large {  padding: variables.$sectionLarge  unset; }
+  &-small { padding: spacing.$sectionSmall 0; }
+  &-medium { padding: spacing.$sectionMedium 0; }
+  &-large { padding: spacing.$sectionLarge 0; }

-  @container (min-width: #{variables.$screen-md}) {
-    padding: (variables.$sectionMedium * 1.5) unset;
-
-    &-small { padding: (variables.$sectionSmall * 1.5) unset; }
-    &-medium { padding: (variables.$sectionMedium * 1.5) unset; }
-    &-large { padding: (variables.$sectionLarge * 1.5) unset; }
-  }
-
-  @container (min-width: #{variables.$screen-lg}) {
-    padding: (variables.$sectionMedium * 2) 0;
-
-    &-small { padding: (variables.$sectionSmall * 2) 0; }
-    &-medium { padding: (variables.$sectionMedium * 2) 0; }
-    &-large { padding: (variables.$sectionLarge * 2) 0; }
-  }
-
-  &-zero-top {    padding-top:    unset; }
-  &-zero-bottom { padding-bottom: unset; }
+  &-zero-top { padding-top: 0; }
+  &-zero-bottom { padding-bottom: 0; }
 }

 .inner {
-  padding: variables.$innerMedium;
+  padding: spacing.$innerMedium;

-  &-largest {  padding: variables.$innerLargest;  }
-  &-larger {   padding: variables.$innerLarger;   }
-  &-large {    padding: variables.$innerLarge;    }
-  &-small {    padding: variables.$innerSmall;    }
-  &-smaller {  padding: variables.$innerSmaller;  }
-  &-smallest { padding: variables.$innerSmallest; }
+  &-small { padding: spacing.$innerSmall; }
+  &-large { padding: spacing.$innerLarge; }

-  @container (min-width: #{variables.$screen-md}) {
-    padding: (variables.$innerMedium * 1.5);
-
-    &-largest {  padding: (variables.$innerLargest * 1.25);  }
-    &-larger {   padding: (variables.$innerLarger * 1.25);   }
-    &-large {    padding: (variables.$innerLarge * 1.25);    }
-    &-small {    padding: (variables.$innerSmall * 1.25);    }
-    &-smaller {  padding: (variables.$innerSmaller * 1.25);  }
-    &-smallest { padding: (variables.$innerSmallest * 1.25); }
+  &-zero-x {
+    padding-left: 0;
+    padding-right: 0;
  }

-  @container (min-width: #{variables.$screen-lg}) {
-    padding: (variables.$innerMedium * 2);
-
-    &-largest {  padding: (variables.$innerLargest * 1.5);  }
-    &-larger {   padding: (variables.$innerLarger * 1.5);   }
-    &-large {    padding: (variables.$innerLarge * 1.5);    }
-    &-small {    padding: (variables.$innerSmall * 1.5);    }
-    &-smaller {  padding: (variables.$innerSmaller * 1.5);  }
-    &-smallest { padding: (variables.$innerSmallest * 1.5); }
+  &-zero-y {
+    padding-top: 0;
+    padding-top: 0;
  }
-
-  &-zero-x { padding-left: unset; padding-right: unset; }
-  &-zero-y { padding-top:  unset; padding-top:   unset; }
 }

 .rounded {
-  border-radius: variables.$borderRadius;
+  border-radius: spacing.$borderRadius;

  &-top {
    border-bottom-right-radius: 0;
@@ -129,12 +81,12 @@ figure {

 .border {
  border-style: solid;
-  border-width: variables.$borderWidth;
+  border-width: spacing.$borderWidth;

  &-thin { border-width: 0.0625em; }
-  &-regular { border-width: variables.$borderWidth; }
-  &-thick { border-width: variables.$borderThick; }
-  &-thicker { border-width: variables.$borderThicker; }
+  &-regular { border-width: spacing.$borderWidth; }
+  &-thick { border-width: spacing.$borderThick; }
+  &-thicker { border-width: spacing.$borderThicker; }

  &-top {
    border-right-width: 0;
--- a/resources/css/global/mixins/_generate-button-classes.scss
+++ b/resources/css/global/mixins/_generate-button-classes.scss
@@ -1,4 +1,4 @@
-@use "../variables";
+@use "../variables/colours";

@use "sass:color";

@@ -12,13 +12,13 @@

  @each $button in $buttons {
    #{$button}.#{$name} {
-      color: variables.$white;
+      color: colours.$white;
      background: $hex;
      border-color: $hex;

      &:hover,
      &:focus {
-        color: variables.$white;
+        color: colours.$white;
        background: color.adjust($hex, $lightness: 10%);
        border-color: color.adjust($hex, $lightness: 10%);
      }
--- a/resources/css/global/mixins/_generate-colour-classes.scss
+++ b/resources/css/global/mixins/_generate-colour-classes.scss
@@ -1,5 +1,4 @@
@use "text-contrast";
-@use "../variables";

@use "sass:color";

@@ -23,16 +22,6 @@
      ::selection {
        @include text-contrast.text_contrast(color.invert($hex));
        background: color.invert($hex);
-        @if($name == "white") {
-          color: variables.$white;
-          background: variables.$primary;
-        } @else if($name == "black") {
-          color: variables.$white;
-          background: variables.$primary-lighter;
-        } @else {
-          @include text-contrast.text_contrast(color.invert($hex));
-          background: color.invert($hex);
-        }
      }
    }
  }
--- a/resources/css/global/mixins/_text-contrast.scss
+++ b/resources/css/global/mixins/_text-contrast.scss
@@ -1,11 +1,11 @@
+@use "../variables/colours";
+
@use "sass:color";
@use "sass:math";

-@use "../variables";
-
-@mixin text-contrast($n, $dark: variables.$black, $light: variables.$white, $cutoff: 1.667) {
+@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
  $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
-  $light-color: math.round((color.channel(variables.$white, "red") * 299) + (color.channel(variables.$white, "green") * 587) + math.div((color.channel(variables.$white, "blue") * 114), 1000));
+  $light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));

  @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
    color: $light;
--- a/resources/css/global/variables/_fonts.scss
+++ b/resources/css/global/variables/_fonts.scss
@@ -1,2 +0,0 @@
-$font: "Ubuntu", Helvetica, Arial, sans-serif;
-$blockquote: serif;
--- a/resources/css/global/variables/_spacing.scss
+++ b/resources/css/global/variables/_spacing.scss
@@ -17,13 +17,12 @@ $sectionLarge:          5.000em;
 $sectionLarger:         7.500em;
 $sectionLargest:       10.000em;

-$containerLarger:      87.000em;
 $containerLarge:       73.125em;
 $containerMedium:      60.000em;
 $containerSmall:       50.000em;
 $containerNarrow:      34.000em;

-$innerLargest:          5.000em;
+$innerLarger:           5.000em;
 $innerLarger:           3.000em;
 $innerLarge:            2.000em;
 $innerMedium:           1.500em;
@@ -31,11 +30,6 @@ $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;
--- a/resources/css/plugins/_contact-form-7.scss
+++ b/resources/css/plugins/_contact-form-7.scss
@@ -1,4 +1,4 @@
-@use "../global/variables";
+@use "../global/variables/colours";

 .wpcf7 .screen-reader-response {
  display: none;
@@ -11,11 +11,11 @@

  padding: 1em 0 0;
  margin-top: 2em;
-  border: 1px solid variables.$grey-light;
+  border: 1px solid colours.$grey-light;
  border-width: 1px 0 0;

  .knockout & {
-    border-color: rgba(variables.$white, 0.3);
+    border-color: rgba(colours.$white, 0.3);
  }
 }

--- a/resources/css/plugins/_mce.scss
+++ b/resources/css/plugins/_mce.scss
@@ -1,14 +1,14 @@
-@use "../global/variables";
+@use "../global/variables/colours";

 #mce-responses {
  .response {
    padding: 0 0 1em;
    margin: 0 0 1em;
    font-size: 0.875em;
-    border-bottom: 1px solid variables.$grey-lighter;
+    border-bottom: 1px solid colours.$grey-lighter;
  }
 }

 .knockout #mce-responses .response {
-  border-bottom-color: rgba(variables.$white, 0.3);
+  border-bottom-color: rgba(colours.$white, 0.3);
 }
--- a/resources/css/sections/_footer.scss
+++ b/resources/css/sections/_footer.scss
--- a/resources/css/sections/_header.scss
+++ b/resources/css/sections/_header.scss
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -3,10 +3,11 @@ import.meta.glob([
  '../fonts/**',
 ]);

+// import.meta.glob('../views/blocks/**/{style.scss,script.js,view.js}', { eager: true })
+
 import Header from '../views/sections/header/header.js';
 import LazyLoad from './lib/Lazy.js';
-import BadEggLightbox from './lib/BadEggLightbox';

-Header();
 LazyLoad();
-BadEggLightbox();
+Header();
+
--- a/resources/js/blocks/components/BackgroundImage.jsx
+++ b/resources/js/blocks/components/BackgroundImage.jsx
@@ -21,7 +21,6 @@ export default function BackgroundImage({
  background_position = 'center',
  background_fixed = false,
  background_opacity = 70,
-  disableLazyBG = false,
 }) {

  if (background_url) {
@@ -38,7 +37,7 @@ export default function BackgroundImage({
      style: styles,
    };

-    if(background_lazy && !disableLazyBG) {
+    if(background_lazy) {
      attributes['data-bg'] = background_url;
      attributes.style.backgroundImage = `url(${background_url_lazy})`;
      attributes.className += ' lazy-bg';
--- a/resources/js/blocks/components/BlockSettings.jsx
+++ b/resources/js/blocks/components/BlockSettings.jsx
@@ -150,38 +150,33 @@ export default function BlockSettings({ attributes, setAttributes }) {
                  slug = selected.slug;
                }

-                let colourAttributes = {
+                setAttributes( {
                  background_colour: slug,
                  background_hex: hex,
-                };
-
-                if(!slug || [0, '0', 'white', 'black'].includes(slug)) {
-                  colourAttributes.background_tint = '0';
-                }
-
-                setAttributes( colourAttributes );
+                });

              } }
            />

            { 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
-              <SelectControl
-                label={ __("Tint", "badegg") }
-                value={ background_tint }
-                options={ configOptions.tints }
-                onChange={ (value) => setAttributes({ background_tint: value }) }
-                __next40pxDefaultSize={ true }
-                __nextHasNoMarginBottom={ true }
-              />
+              <>
+                <SelectControl
+                  label={ __("Tint", "badegg") }
+                  value={ background_tint }
+                  options={ configOptions.tints }
+                  onChange={ (value) => setAttributes({ background_tint: value }) }
+                  __next40pxDefaultSize={ true }
+                  __nextHasNoMarginBottom={ true }
+                />
+                <ToggleControl
+                  label={ __('Text Contrast', 'badegg') }
+                  checked={ background_contrast }
+                  onChange={(value) => setAttributes({ background_contrast: value }) }
+                  __nextHasNoMarginBottom
+                />
+              </>
            ) : null }

-            <ToggleControl
-              label={ __('Text Contrast', 'badegg') }
-              checked={ background_contrast }
-              onChange={(value) => setAttributes({ background_contrast: value }) }
-              __nextHasNoMarginBottom
-            />
-
            { background_image != 0 && (
              <>
                <ToggleControl
--- a/resources/js/blocks/lib/classNames.js
+++ b/resources/js/blocks/lib/classNames.js
@@ -5,7 +5,7 @@ export function containerClassNames(attributes, extraClasses = [])
    'container',
  ];

-  if('container_width' in attributes && !['', '0'].includes(attributes.container_width))
+  if('container_width' in attributes)
    classNames.push(`container-${attributes.container_width}`);

  if('alignment' in attributes)
@@ -29,7 +29,7 @@ export function sectionClassNames(attributes, defaultClasses = '', extraClasses
  if('padding_bottom'in attributes && !attributes.padding_bottom)
    classNames.push('section-zero-bottom');

-  if('background_hex' in attributes && attributes.background_hex) {
+  if('background_colour' in attributes && attributes.background_colour) {
    let bg = `bg-${ attributes.background_colour }`;

    if(
--- a/resources/js/editor.js
+++ b/resources/js/editor.js
@@ -12,20 +12,9 @@ domReady(() => {
    return settings
  }

-  const coreInnerBlocks = (settings, name) => {
-    if (['core/media-text', 'core/details', 'core/quote'].includes(name)) {
-
-      settings.allowedBlocks = [
-        'core/paragraph',
-        'core/heading',
-        'core/list',
-      ];
-    }
-
-    return settings;
-  }
-
-  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/restrict-parent-blocks', restrictEditorParentBlocks );
-  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/core-inner-blocks', coreInnerBlocks );
-
+  wp.hooks.addFilter(
+      'blocks.registerBlockType',
+      'badegg/restrict-parent-blocks',
+      restrictEditorParentBlocks
+  );
 });
--- a/resources/js/lib/BadEggLightbox.js
+++ b/resources/js/lib/BadEggLightbox.js
@@ -1,81 +0,0 @@
-export default function BadEggLightbox()
-{
-  const lightboxes = document.querySelectorAll(".badegg-lightbox");
-
-  if(!lightboxes) return;
-
-  lightboxes.forEach(lightbox => {
-    const fullSize = lightbox.getAttribute('href');
-    const thumbnail = lightbox.querySelector("img");
-
-    lightbox.addEventListener("click", (e) => {
-      e.preventDefault();
-      // console.log(e);
-
-      modal(fullSize, thumbnail);
-    });
-
-  });
-}
-
-function modal(src = '', img = '')
-{
-  if(!src || !img) {
-    alert('Error: No image defined');
-    return;
-  }
-
-  const title = img.getAttribute("title") || '';
-  const alt = img.getAttribute("alt") || '';
-
-  const body = document.querySelector("body");
-
-  let template = `
-    <img id="badegg-lightbox-image" src="${src}" tabindex="0" title="${title}" alt="${alt}" />
-    <button id="badegg-lightbox-close" aria-label="close" aria-expanded="true" tabindex="0">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-        <line x2="32" y2="32"/>
-        <line x1="32" y2="32"/>
-      </svg>
-    </button>
-    <div id="badegg-lightbox-overlay"></div>
-  `;
-
-  let modal = document.createElement("div");
-
-  modal.setAttribute("id", "badegg-lightbox-modal");
-  modal.setAttribute("aria-modal", "true");
-  modal.innerHTML = template;
-
-  body.appendChild(modal);
-
-  setTimeout(() => modal.classList.add("open"), 100);
-
-  document.getElementById("badegg-lightbox-image").focus();
-
-  modalDeleteListener();
-}
-
-function modalDeleteListener()
-{
-  const modal = document.getElementById("badegg-lightbox-modal");
-
-  if(!modal) return;
-
-  const modalClose = document.getElementById("badegg-lightbox-close");
-  const modalOverlay = document.getElementById("badegg-lightbox-overlay");
-
-  modalClose.addEventListener("click", (e) => {
-    modal.remove();
-  });
-
-  modalOverlay.addEventListener("click", (e) => {
-    modal.remove();
-  });
-
-  document.addEventListener("keydown", (e) => {
-    if(e.key === 'Escape') {
-      modal.remove();
-    }
-  });
-}
--- a/resources/json/block-core-whitelist.json
+++ b/resources/json/block-core-whitelist.json
@@ -2,21 +2,25 @@
  "core/separator",
  "core/spacer",

+  "core/cover",
+  "core/file",
  "core/gallery",
  "core/image",
  "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/preformatted",
  "core/pullquote",
+  "core/quote",
+  "core/table",
  "core/verse"
 ]
--- a/resources/json/font-awesome-brands.json
+++ b/resources/json/font-awesome-brands.json
--- a/resources/json/font-awesome-regular.json
+++ b/resources/json/font-awesome-regular.json
--- a/resources/json/font-awesome-solid.json
+++ b/resources/json/font-awesome-solid.json
--- a/resources/views/blocks/article/css/_base.scss
+++ b/resources/views/blocks/article/css/_base.scss
@@ -1,20 +0,0 @@
-@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;
-  }
-}
--- a/resources/views/blocks/article/css/_details.scss
+++ b/resources/views/blocks/article/css/_details.scss
@@ -1,17 +0,0 @@
-@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;
-      }
-    }
-  }
-}
--- a/resources/views/blocks/article/css/_embed.scss
+++ b/resources/views/blocks/article/css/_embed.scss
@@ -1,10 +0,0 @@
-.wp-block-badegg-article {
-  .is-type-video {
-    iframe {
-      display: block;
-      width: 100%;
-      height: auto;
-      aspect-ratio: 16 / 9;
-    }
-  }
-}
--- a/resources/views/blocks/article/css/_gallery.scss
+++ b/resources/views/blocks/article/css/_gallery.scss
@@ -1,12 +0,0 @@
-@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))); }
-    }
-  }
-}
--- a/resources/views/blocks/article/css/_image.scss
+++ b/resources/views/blocks/article/css/_image.scss
@@ -1,52 +0,0 @@
-@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;
-      }
-    }
-  }
-}
--- a/resources/views/blocks/article/css/_media-text.scss
+++ b/resources/views/blocks/article/css/_media-text.scss
@@ -1,24 +0,0 @@
-@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; }
-    }
-  }
-}
--- a/resources/views/blocks/article/css/_quote.scss
+++ b/resources/views/blocks/article/css/_quote.scss
@@ -1,117 +0,0 @@
-@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);
-      }
-    }
-  }
-  }
-}
--- a/resources/views/blocks/article/css/_verse.scss
+++ b/resources/views/blocks/article/css/_verse.scss
@@ -1,14 +0,0 @@
-@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;
-    }
-  }
-}
--- a/resources/views/blocks/article/editor.scss
+++ b/resources/views/blocks/article/editor.scss
@@ -1,31 +0,0 @@
-@use "../../../css/global/variables/spacing";
-
-.wp-block-badegg-article {
-  position: relative;
-
-  .wp-block-pullquote {
-    padding: 0;
-    margin: spacing.$innerLarge auto;
-  }
-
-  .badegg-article-select-parent {
-    appearance: none;
-    display: block;
-    position: absolute;
-    inset: 0;
-    background: transparent;
-    border: none;
-  }
-
-  .block-editor-block-list {
-    &__layout {
-      > *:first-child {
-        margin-top: 0;
-      }
-
-      > *:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
--- a/resources/views/blocks/article/index.jsx
+++ b/resources/views/blocks/article/index.jsx
@@ -15,28 +15,18 @@ import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
 import BlockSettings from '../../../js/blocks/components/BlockSettings';

 registerBlockType(metadata.name, {
-  edit({ attributes, setAttributes, clientId }) {
+  edit({ attributes, setAttributes }) {
    const blockProps = useBlockProps();
-
-    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
+    blockProps.className = sectionClassNames(attributes, blockProps.className).join(' ');

    return (
-      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
+      <div { ...blockProps }>
        <BlockSettings
          attributes={ attributes }
          setAttributes={ setAttributes }
        />

-        <button
-          className="badegg-article-select-parent"
-          onClick={() => {
-            wp.data.dispatch('core/block-editor').selectBlock(clientId);
-          }}
-        >
-          <span className="visually-hidden">Select Block</span>
-        </button>
-
-        <div { ...blockProps }>
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
          <InnerBlocks
            allowedBlocks={ allowedBlocks }
            defaultBlock={
@@ -57,11 +47,11 @@ registerBlockType(metadata.name, {
  },
  save({ attributes }) {
    const blockProps = useBlockProps.save();
-    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
+    blockProps.className = sectionClassNames(attributes, blockProps.className, [ 'wysiwyg' ] ).join(' ');

    return (
-      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
-        <div { ...blockProps }>
+      <div { ...blockProps }>
+        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
          <InnerBlocks.Content />
        </div>

--- a/resources/views/blocks/article/style.scss
+++ b/resources/views/blocks/article/style.scss
@@ -1,8 +0,0 @@
-@use 'css/base';
-@use 'css/image';
-@use 'css/gallery';
-@use 'css/media-text';
-@use 'css/quote';
-@use 'css/embed';
-@use 'css/verse';
-@use 'css/details';
--- a/resources/views/components/socials.blade.php
+++ b/resources/views/components/socials.blade.php
@@ -1,12 +1,12 @@
-@if($socials)
-  <ul class="socials nolist">
-    @foreach($socials as $social)
-      <li>
-        <a href="{{ get_field('url', $social) }}" rel="noopener nofollow noreferrer me" target="_blank">
-          <i class="fa-brands fa-{{ get_field('fontawesome_brands', $social) }}"></i>
-          <span class="visually-hidden">{{ get_the_title($social) }}</span>
-        </a>
-      </li>
-    @endforeach
-  </ul>
-@endif
+<ul class="socials nolist">
+  @foreach($socials as $social)
+    <li>
+      <a
+        class="fa-brands fa-{{ get_field('fontawesome_brands', $social) }}"
+        href="{{ get_field('url', $social) }}"
+        rel="noopener nofollow noreferrer"
+        target="_blank"
+      ><span class="visually-hidden">{{ get_the_title($social) }}</span></a>
+    </li>
+  @endforeach
+</ul>
--- a/resources/views/partials/favicon.blade.php
+++ b/resources/views/partials/favicon.blade.php
@@ -1,6 +0,0 @@
-<link rel="icon" type="image/png" href="{{ Vite::asset('resources/images/favicon/favicon-96x96.png') }}" sizes="96x96" />
-<link rel="icon" type="image/svg+xml" href="{{ Vite::asset('resources/images/favicon/favicon.svg') }}" />
-<link rel="shortcut icon" href="{{ Vite::asset('resources/images/favicon/favicon.ico') }}" />
-<link rel="apple-touch-icon" sizes="180x180" href="{{ Vite::asset('resources/images/favicon/apple-touch-icon.png') }}" />
-<meta name="apple-mobile-web-app-title" content="{!! $siteName !!}" />
-<link rel="manifest" href="{{ Vite::asset('resources/images/favicon/site.webmanifest') }}" />
--- a/resources/views/sections/footer/footer.blade.php
+++ b/resources/views/sections/footer/footer.blade.php
@@ -1,4 +1,3 @@
 <footer class="content-info">
  @php(dynamic_sidebar('sidebar-footer'))
-  @include('components.socials')
 </footer>
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,7 +6,7 @@ import path from 'path';

 function blockAsset(file)
 {
-  const files = fg.sync(`resources/views/blocks/**/${file}`, { deep: 2 });
+  const files = fg.sync('resources/views/blocks/**/' + file);
  let list = {};

  files.forEach(file => {
@@ -31,6 +31,10 @@ export default defineConfig({
  plugins: [
    laravel({
      input: {
+        // 'resources/css/app.scss',
+        // 'resources/js/app.js',
+        // 'resources/css/editor.scss',
+        // 'resources/js/editor.js',
        'css/app': 'resources/css/app.scss',
        'js/app': 'resources/js/app.js',
        'css/editor': 'resources/css/editor.scss',