acf stylised icon select for solid and regular sets

* 👷 Update workflow to not depend on package lock file

app/ACF/Dynamic.php

@@ -108,9 +108,7 @@ class Dynamic
             '0' => '<i class="fa-solid"></i> <span>Please select an icon</span>',
         ];
 
-        foreach($icons as $slug => $props):
-            if(in_array($slug, range(0,9))) continue;
-
+        foreach($icons as $slug):
             $choices[$slug] = '<i class="fa-'.$set.' fa-'.$slug.'" style="color: #2271b1;"></i> <span>' . (ucwords(str_replace('-', ' ', $slug))) . '</span>';
         endforeach;
 
@@ -137,6 +135,8 @@ 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.

app/Admin/Enqueue.php

@@ -13,9 +13,9 @@ class Enqueue
     {
         wp_enqueue_style(
             'fontawesome',
-            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css',
             false,
-            '6.5.2',
+            '7.0.1',
             'all'
         );
     }

app/Admin/Integrations.php

@@ -7,6 +7,7 @@ class Integrations
     public function __construct()
     {
         add_action( 'wp_head',  [$this, 'FathomAnalytics']);
+        add_action( 'wp_footer',  [$this, 'FontAwesomeKit'], 100);
     }
 
     public function FathomAnalytics()
@@ -21,4 +22,17 @@ 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;
+    }
 }

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):

app/blocks.php

@@ -268,6 +268,8 @@ function core_details_modified($content, $block)
 
 function core_image_modified($content, $block)
 {
+    if(!$content) return '';
+
     $dom = new \DomDocument();
     $dom->strictErrorChecking = false;
     @$dom->loadHTML($content);
@@ -280,6 +282,7 @@ function core_image_modified($content, $block)
     // 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
@@ -303,6 +306,11 @@ function core_image_modified($content, $block)
         $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();
 
@@ -317,5 +325,4 @@ function core_image_modified($content, $block)
     }
 
     return $dom->saveHTML($figures[0]);
-
 }

app/setup.php

@@ -164,9 +164,14 @@ 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]);

resources/acf/group_options_global_settings.json

@@ -17,7 +17,8 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0
+            "endpoint": 0,
+            "selected": 0
         },
         {
             "key": "field_67658e49aba4f",
@@ -58,7 +59,10 @@
                     "default_value": "",
                     "enable_opacity": 0,
                     "return_format": "string",
-                    "parent_repeater": "field_67658e49aba4f"
+                    "parent_repeater": "field_67658e49aba4f",
+                    "custom_palette_source": "",
+                    "palette_colors": "",
+                    "show_color_wheel": true
                 },
                 {
                     "key": "field_67658fba41889",
@@ -167,6 +171,7 @@
                         "id": ""
                     },
                     "layout": "block",
+                    "parent_repeater": "field_67658e49aba4f",
                     "sub_fields": [
                         {
                             "key": "field_676590414188c",
@@ -184,7 +189,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_676590684188d",
@@ -202,7 +210,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_6765907f4188e",
@@ -220,7 +231,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_676590924188f",
@@ -238,7 +252,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_6765909941890",
@@ -256,7 +273,10 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         },
                         {
                             "key": "field_6765909f41891",
@@ -274,10 +294,12 @@
                             },
                             "default_value": "",
                             "enable_opacity": 0,
-                            "return_format": "string"
+                            "return_format": "string",
+                            "custom_palette_source": "",
+                            "palette_colors": "",
+                            "show_color_wheel": true
                         }
-                    ],
-                    "parent_repeater": "field_67658e49aba4f"
+                    ]
                 }
             ]
         },
@@ -296,7 +318,8 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0
+            "endpoint": 0,
+            "selected": 0
         },
         {
             "key": "field_67659cb08081e",
@@ -372,7 +395,8 @@
                 "id": ""
             },
             "placement": "top",
-            "endpoint": 0
+            "endpoint": 0,
+            "selected": 0
         },
         {
             "key": "field_676594615ead2",
@@ -393,6 +417,27 @@
             "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": [
@@ -413,5 +458,6 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1734712625
+    "display_title": "",
+    "modified": 1770736471
 }

resources/css/app.scss

@@ -1,25 +1,25 @@
 // Global Variables, Mixins, and Framework
-@use "global/variables";
-@use "global/mixins";
-@use "global/fonts";
-@use "global/typography";
-@use "global/framework";
+@forward "global/variables";
+@forward "global/mixins";
+@forward "global/fonts";
+@forward "global/typography";
+@forward "global/framework";
 
 // Third Party Plugins
-@use "plugins/contact-form-7";
-@use "plugins/mce";
+@forward "plugins/contact-form-7";
+@forward "plugins/mce";
 
 // Components
-@use "components/block";
-@use "components/forms";
-@use "components/button";
-@use "components/card";
-@use "components/BadEggLightbox";
+@forward "components/block";
+@forward "components/forms";
+@forward "components/button";
+@forward "components/card";
+@forward "components/BadEggLightbox";
 
 // Sections
-@use "sections/header";
-@use "sections/footer";
+@forward "../views/sections/header/header";
+@forward "../views/sections/footer/footer";
 
 // Page Styles
-@use "views/page";
+@forward "views/page";
 

resources/css/editor.scss

@@ -1,5 +1,5 @@
 @use "app";
-@use "global/variables/colours";
+@use "global/variables";
 
 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 colours.$wpblue;
+    outline: 2px solid variables.$wpblue;
     position: absolute;
     inset: 0;
   }
@@ -36,7 +36,7 @@ html :where(.wp-block) {
 }
 
 .editor-styles-wrapper {
-  background: colours.$grey-lightest;
+  background: variables.$grey-lightest;
 
   .block-list-appender {
     width: 350px;

resources/css/global/_framework.scss

@@ -1,4 +1,4 @@
-@use "framework/breakpoints";
-@use "framework/normalise";
-@use "framework/colours";
-@use "framework/spacing";
+@forward "framework/breakpoints";
+@forward "framework/normalise";
+@forward "framework/colours";
+@forward "framework/spacing";

resources/css/global/_mixins.scss

@@ -1,4 +1,4 @@
-@use "mixins/linear-gradient";
-@use "mixins/text-contrast";
-@use "mixins/generate-colour-classes";
-@use "mixins/generate-button-classes";
+@forward "mixins/linear-gradient";
+@forward "mixins/text-contrast";
+@forward "mixins/generate-colour-classes";
+@forward "mixins/generate-button-classes";

resources/css/global/_typography.scss

@@ -1,7 +1,4 @@
-@use "variables/fonts";
-@use "variables/breakpoints";
-@use "variables/colours";
-@use "variables/spacing";
+@use "variables";
 
 .wysiwyg {
   > *:first-child {
@@ -19,9 +16,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: colours.$primary;
+  color: variables.$primary;
   font-weight: 700;
-  font-family: fonts.$font;
+  font-family: variables.$font;
   line-height: 1.1em;
   margin: 1.5em 0 0.25em;
   padding: 0;
@@ -32,7 +29,7 @@ h6 {
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
     }
   }
 }
@@ -48,7 +45,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }
 
-@media (min-width: breakpoints.$screen-sm) {
+@media (min-width: variables.$screen-sm) {
   h1 { font-size: 2.5em; }
   h2 { font-size: 2em; }
   h3 { font-size: 1.5em; }
@@ -63,8 +60,8 @@ p,
 li,
 td,
 label {
-  color: colours.$grey-darker;
-  font-family: fonts.$font;
+  color: variables.$grey-darker;
+  font-family: variables.$font;
   font-weight: 400;
   line-height: 1.5em;
   margin: 0 0 0.8em;
@@ -72,30 +69,30 @@ label {
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
     }
   }
 }
 
 a {
-  color: colours.$primary;
+  color: variables.$primary;
   text-decoration: none;
   outline: none;
   transition: all 300ms ease;
 
   &:hover,
   &:focus {
-    color: colours.$primary-dark;
+    color: variables.$primary-dark;
     text-decoration: none;
   }
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
 
       &:hover,
       &:focus {
-        color: colours.$primary-light;
+        color: variables.$primary-light;
       }
     }
   }
@@ -113,7 +110,6 @@ ul,
 ol {
   margin: 0 0 0.7em;
   padding: 0 0 0 1.2em;
-  text-align: left;
 }
 
 .nolist {
@@ -131,12 +127,12 @@ ol {
 hr {
   margin: 2em auto;
   height: 0;
-  border: 0 solid colours.$grey-light;
-  border-width: spacing.$borderThin 0 0;
+  border: 0 solid variables.$grey-light;
+  border-width: variables.$borderThin 0 0;
 
   @media screen {
     .knockout & {
-      border-color: colours.$white;
+      border-color: variables.$white;
     }
   }
 }

resources/css/global/_variables.scss

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

resources/css/global/framework/_breakpoints.scss

@@ -1,6 +1,6 @@
-@use "../variables/breakpoints";
+@use "../variables";
 
-@each $label, $value in breakpoints.$breakpoints {
+@each $label, $value in variables.$breakpoints {
   .min-#{$label} {
     @media (min-width: $value) {
       display: none;

resources/css/global/framework/_colours.scss

@@ -1,13 +1,12 @@
-@use "../mixins/generate-button-classes";
-@use "../mixins/generate-colour-classes";
-@use "../variables/colours";
+@use "../mixins";
+@use "../variables";
 
 ::selection {
-  color: colours.$white;
-  background: colours.$primary;
+  color: variables.$white;
+  background: variables.$primary;
 }
 
-@each $color, $hex in colours.$colors {
-  @include generate-colour-classes.generate_colour_classes($color, $hex);
-  @include generate-button-classes.generate_button_colors($color, $hex);
+@each $color, $hex in variables.$colors {
+  @include mixins.generate_colour_classes($color, $hex);
+  @include mixins.generate_button_colors($color, $hex);
 }

resources/css/global/framework/_normalise.scss

@@ -1,4 +1,4 @@
-@use "../variables/colours";
+@use "../variables";
 
 * {
   box-sizing: border-box;
@@ -13,7 +13,7 @@ body,
 html {
   margin: 0;
   padding: 0;
-  background: colours.$white;
+  background: variables.$white;
 }
 
 .visually-hidden {

resources/css/global/framework/_spacing.scss

@@ -1,26 +1,25 @@
-@use "../variables/colours";
-@use "../variables/spacing";
+@use "../variables";
 
 .brand {
   display: block;
-  width: spacing.$brandWidth;
-  height: spacing.$brandHeight;
+  width: variables.$brandWidth;
+  height: variables.$brandHeight;
 
   svg,
   img {
     display: block;
-    width: spacing.$brandWidth;
-    height: spacing.$brandHeight;
+    width: variables.$brandWidth;
+    height: variables.$brandHeight;
   }
 
   .knockout & {
     @media screen {
       .fill-primary {
-        fill: colours.$white;
+        fill: variables.$white;
       }
 
       .fill-grey {
-        fill: rgba(colours.$white, 0.8);
+        fill: rgba(variables.$white, 0.8);
       }
     }
   }
@@ -32,46 +31,90 @@ figure {
 }
 
 .container {
-  width: calc(100% - spacing.$innerMedium * 2);
+  width: calc(100% - variables.$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; }
-  &-large { max-width: spacing.$containerLarge; }
-  &-medium { max-width: spacing.$containerMedium; }
-  &-small { max-width: spacing.$containerSmall; }
-  &-narrow { max-width: spacing.$containerNarrow; }
+  &-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; }
 }
 
 .section {
-  padding: spacing.$sectionMedium 0;
+  padding: variables.$sectionMedium 0;
 
-  &-small { padding: spacing.$sectionSmall 0; }
-  &-medium { padding: spacing.$sectionMedium 0; }
-  &-large { padding: spacing.$sectionLarge 0; }
+  &-small {  padding: variables.$sectionSmall  unset; }
+  &-medium { padding: variables.$sectionMedium unset; }
+  &-large {  padding: variables.$sectionLarge  unset; }
 
-  &-zero-top { padding-top: 0; }
-  &-zero-bottom { padding-bottom: 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; }
 }
 
 .inner {
-  padding: spacing.$innerMedium;
+  padding: variables.$innerMedium;
 
-  &-small { padding: spacing.$innerSmall; }
-  &-large { padding: spacing.$innerLarge; }
+  &-largest {  padding: variables.$innerLargest;  }
+  &-larger {   padding: variables.$innerLarger;   }
+  &-large {    padding: variables.$innerLarge;    }
+  &-small {    padding: variables.$innerSmall;    }
+  &-smaller {  padding: variables.$innerSmaller;  }
+  &-smallest { padding: variables.$innerSmallest; }
 
-  &-zero-x {
-    padding-left: 0;
-    padding-right: 0;
+  @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-y {
-    padding-top: 0;
-    padding-top: 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-x { padding-left: unset; padding-right: unset; }
+  &-zero-y { padding-top:  unset; padding-top:   unset; }
 }
 
 .rounded {
-  border-radius: spacing.$borderRadius;
+  border-radius: variables.$borderRadius;
 
   &-top {
     border-bottom-right-radius: 0;
@@ -86,12 +129,12 @@ figure {
 
 .border {
   border-style: solid;
-  border-width: spacing.$borderWidth;
+  border-width: variables.$borderWidth;
 
   &-thin { border-width: 0.0625em; }
-  &-regular { border-width: spacing.$borderWidth; }
-  &-thick { border-width: spacing.$borderThick; }
-  &-thicker { border-width: spacing.$borderThicker; }
+  &-regular { border-width: variables.$borderWidth; }
+  &-thick { border-width: variables.$borderThick; }
+  &-thicker { border-width: variables.$borderThicker; }
 
   &-top {
     border-right-width: 0;

resources/css/global/mixins/_generate-button-classes.scss

@@ -1,4 +1,4 @@
-@use "../variables/colours";
+@use "../variables";
 
 @use "sass:color";
 
@@ -12,13 +12,13 @@
 
   @each $button in $buttons {
     #{$button}.#{$name} {
-      color: colours.$white;
+      color: variables.$white;
       background: $hex;
       border-color: $hex;
 
       &:hover,
       &:focus {
-        color: colours.$white;
+        color: variables.$white;
         background: color.adjust($hex, $lightness: 10%);
         border-color: color.adjust($hex, $lightness: 10%);
       }

resources/css/global/mixins/_generate-colour-classes.scss

@@ -1,4 +1,5 @@
 @use "text-contrast";
+@use "../variables";
 
 @use "sass:color";
 
@@ -22,6 +23,16 @@
       ::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);
+        }
       }
     }
   }

resources/css/global/mixins/_text-contrast.scss

@@ -1,11 +1,11 @@
-@use "../variables/colours";
-
 @use "sass:color";
 @use "sass:math";
 
-@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
+@use "../variables";
+
+@mixin text-contrast($n, $dark: variables.$black, $light: variables.$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(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "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));
 
   @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
     color: $light;

resources/css/global/variables/_spacing.scss

@@ -17,12 +17,13 @@ $sectionLarge:          5.000em;
 $sectionLarger:         7.500em;
 $sectionLargest:       10.000em;
 
+$containerLarger:      87.000em;
 $containerLarge:       73.125em;
 $containerMedium:      60.000em;
 $containerSmall:       50.000em;
 $containerNarrow:      34.000em;
 
-$innerLarger:           5.000em;
+$innerLargest:          5.000em;
 $innerLarger:           3.000em;
 $innerLarge:            2.000em;
 $innerMedium:           1.500em;

resources/css/plugins/_contact-form-7.scss

@@ -1,4 +1,4 @@
-@use "../global/variables/colours";
+@use "../global/variables";
 
 .wpcf7 .screen-reader-response {
   display: none;
@@ -11,11 +11,11 @@
 
   padding: 1em 0 0;
   margin-top: 2em;
-  border: 1px solid colours.$grey-light;
+  border: 1px solid variables.$grey-light;
   border-width: 1px 0 0;
 
   .knockout & {
-    border-color: rgba(colours.$white, 0.3);
+    border-color: rgba(variables.$white, 0.3);
   }
 }
 

resources/css/plugins/_mce.scss

@@ -1,14 +1,14 @@
-@use "../global/variables/colours";
+@use "../global/variables";
 
 #mce-responses {
   .response {
     padding: 0 0 1em;
     margin: 0 0 1em;
     font-size: 0.875em;
-    border-bottom: 1px solid colours.$grey-lighter;
+    border-bottom: 1px solid variables.$grey-lighter;
   }
 }
 
 .knockout #mce-responses .response {
-  border-bottom-color: rgba(colours.$white, 0.3);
+  border-bottom-color: rgba(variables.$white, 0.3);
 }

resources/js/blocks/lib/classNames.js

@@ -5,7 +5,7 @@ export function containerClassNames(attributes, extraClasses = [])
     'container',
   ];
 
-  if('container_width' in attributes)
+  if('container_width' in attributes && !['', '0'].includes(attributes.container_width))
     classNames.push(`container-${attributes.container_width}`);
 
   if('alignment' in attributes)

resources/views/blocks/article/editor.scss

@@ -1,8 +1,31 @@
 @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;
+      }
+    }
+  }
 }

resources/views/blocks/article/index.jsx

@@ -15,18 +15,28 @@ import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
 import BlockSettings from '../../../js/blocks/components/BlockSettings';
 
 registerBlockType(metadata.name, {
-  edit({ attributes, setAttributes }) {
+  edit({ attributes, setAttributes, clientId }) {
     const blockProps = useBlockProps();
-    blockProps.className = sectionClassNames(attributes, blockProps.className).join(' ');
+
+    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
 
     return (
-      <div { ...blockProps }>
+      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
         <BlockSettings
           attributes={ attributes }
           setAttributes={ setAttributes }
         />
 
-        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
+        <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 }>
           <InnerBlocks
             allowedBlocks={ allowedBlocks }
             defaultBlock={
@@ -47,11 +57,11 @@ registerBlockType(metadata.name, {
   },
   save({ attributes }) {
     const blockProps = useBlockProps.save();
-    blockProps.className = sectionClassNames(attributes, blockProps.className ).join(' ');
+    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
 
     return (
-      <div { ...blockProps }>
-        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
+      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
+        <div { ...blockProps }>
           <InnerBlocks.Content />
         </div>
 

resources/views/components/socials.blade.php

@@ -1,12 +1,12 @@
-<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>
+@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

resources/views/partials/favicon.blade.php

@@ -0,0 +1,6 @@
+<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') }}" />

resources/views/sections/footer/footer.blade.php

@@ -1,3 +1,4 @@
 <footer class="content-info">
   @php(dynamic_sidebar('sidebar-footer'))
+  @include('components.socials')
 </footer>