v0.2.0 - Design Editor: templates, patterns, header/footer variations

Full Design Editor compatibility with custom block categories, page templates,
header/footer variations, and navigation styles. Both FSE (admin) and Twig
(frontend) sides kept in sync.

Co-Authored-By: Claude <noreply@anthropic.com>

src/scss/_custom.scss

@@ -25,6 +25,24 @@
     }
 }
 
+// Transparent header variant
+.header-transparent {
+    position: absolute;
+    width: 100%;
+    z-index: $zindex-fixed;
+
+    .navbar {
+        background: transparent !important;
+    }
+}
+
+// Offcanvas navigation dark mode compatibility
+[data-bs-theme="dark"] {
+    .offcanvas {
+        --bs-offcanvas-bg: var(--bs-body-bg);
+    }
+}
+
 // Dark mode overrides for block styles with hardcoded colors
 [data-bs-theme="dark"] {
     .is-style-alert-info {

src/scss/_editor-overrides.scss

@@ -0,0 +1,29 @@
+// Editor-specific overrides
+// Adjustments for the block editor iframe to match frontend appearance
+
+.editor-styles-wrapper {
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    line-height: 1.5;
+
+    a {
+        text-decoration-thickness: 1px !important;
+        text-underline-offset: 0.1em;
+    }
+
+    // Alignment overrides matching Bootstrap container widths
+    .alignfull {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .alignwide {
+        max-width: 1140px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    // Block gap matching theme.json blockGap
+    > * + * {
+        margin-block-start: 1.5rem;
+    }
+}

src/scss/editor-style.scss

@@ -1,23 +1,22 @@
 /*!
  * WP Bootstrap Theme - Editor Styles
+ * Imports full Bootstrap so WYSIWYG matches the frontend.
  */
 
-// Import Bootstrap functions and variables for consistency
+// 1. Import Bootstrap functions first (needed for variable manipulation)
 @import "bootstrap/scss/functions";
+
+// 2. Override Bootstrap variables BEFORE they're set
 @import "variables";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/root";
 
-// Editor-specific adjustments
-.editor-styles-wrapper {
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-    line-height: 1.5;
+// 3. Import all of Bootstrap
+@import "bootstrap/scss/bootstrap";
 
-    a {
-        text-decoration-thickness: 1px !important;
-        text-underline-offset: 0.1em;
-    }
-}
+// 4. WordPress block compatibility
+@import "wordpress";
+
+// 5. Custom styles (dark mode overrides, block styles, etc.)
+@import "custom";
+
+// 6. Editor-specific overrides
+@import "editor-overrides";