Dev

package.json

@@ -20,6 +20,7 @@
         "./base/reset": "./src/scss/base/_reset.scss",
         "./base/accessibility": "./src/scss/base/_accessibility.scss",
         "./base/images": "./src/scss/base/_images.scss",
+        "./base/colors": "./src/scss/base/_colors.scss",
         "./components": "./src/scss/components/index.scss",
         "./components/buttons": "./src/scss/components/_buttons.scss",
         "./components/slider": "./src/scss/components/_slider.scss",

src/scss/base/_colors.scss

@@ -0,0 +1,79 @@
+/*
+Colors
+
+Set up color/contrast pairs.
+Now we can use only one color for the background
+and the text will be the contrast color.
+****************************************************/
+
+/* Base Background */
+.has-base-background-color {
+    color: var(--wp--preset--color--contrast);
+
+    a {
+        color: inherit;
+    }
+}
+
+/* Contrast Background */
+.has-contrast-background-color {
+    color: var(--wp--preset--color--base);
+
+    a {
+        color: inherit;
+    }
+}
+
+/* Primary Background */
+.has-primary-background-color {
+    color: var(--wp--preset--color--primary-contrast);
+
+    a {
+        color: inherit;
+    }
+}
+
+/* Secondary Background */
+.has-secondary-background-color {
+    color: var(--wp--preset--color--secondary-contrast);
+
+    a {
+        color: inherit;
+    }
+}
+
+/* Tertiary Background */
+.has-tertiary-background-color {
+    color: var(--wp--preset--color--tertiary-contrast);
+
+    a {
+        color: inherit;
+    }
+}
+
+/* Neutral One Background */
+.has-neutral-1-background-color {
+    color: var(--wp--preset--color--neutral-1-contrast);
+
+    a {
+        color: inherit;
+    }
+}
+
+/* Neutral Two Background */
+.has-neutral-2-background-color {
+    color: var(--wp--preset--color--neutral-2-contrast);
+
+    a {
+        color: inherit;
+    }
+}
+
+/* Neutral Three Background */
+.has-neutral-3-background-color {
+    color: var(--wp--preset--color--neutral-3-contrast);
+
+    a {
+        color: inherit;
+    }
+}

src/scss/base/_reset.scss

@@ -91,6 +91,16 @@ select {
     font: inherit;
 }
 
+button {
+    background: none;
+    color: inherit;
+    border: none;
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+    padding: 0;
+}
+
 /* Links
 ----------------------------------------------------------------*/
 :has(:target) {

src/scss/base/index.scss

@@ -2,3 +2,4 @@
 @forward "./reset";
 @forward "./utilities";
 @forward "./images";
+@forward "./colors";

src/scss/components/_buttons.scss

@@ -1,4 +1,4 @@
-.wp-block-wp-block-polaris-buttons {
+.wp-block-polaris-buttons {
     display: flex;
     align-items: center;
     gap: var(--wp--preset--spacing--40, 1rem);
@@ -101,3 +101,14 @@
         }
     }
 }
+
+/* If no link, remove hover, focus, and pointer events - @todo - test this */
+span.wp-block-polaris-button {
+    pointer-events: none !important;
+    &:hover {
+        all: unset;
+    }
+    &:focus {
+        all: unset;
+    }
+}

src/scss/components/index.scss

@@ -1,2 +1,3 @@
 @forward "./buttons";
 @forward "./slider";
+@forward "./pagintation";

src/scss/gutenberg/_quirks.scss

@@ -10,10 +10,35 @@
 
 // Allow sticky to work with template parts
 .wp-block-template-part {
-    display: contents;
+	display: contents;
+}
+
+// Allow post content to break out of its container for alignfull blocks
+// Need !important to override WordPress inline styles
+.wp-block-post-content {
+	//display: contents !important;
 }
 
 /* post tmeplate columns don't span full width */
 .wp-block-post-template {
-    width: 100%;
+	width: 100%;
+}
+
+/* Alignull within template parts within entry-contnet */
+.has-global-padding {
+	.wp-block-template-part {
+		.alignfull {
+			margin-left: calc(var(--wp--style--root--padding-left) * -1);
+			margin-right: calc(var(--wp--style--root--padding-right) * -1);
+		}
+	}
+}
+
+/* Remove padding on align-full blocks */
+:root
+	:where(.editor-styles-wrapper)
+	:where(.is-layout-constrained)
+	> .alignfull,
+.alignfull {
+	margin-block-start: 0;
 }

src/scss/layout/_columns.scss

@@ -16,8 +16,6 @@
 
     .wp-block-polaris-column {
         min-width: 4rem;
-        overflow-wrap: break-word;
-        word-break: break-word;
         width: 100%;
         flex-direction: column;
         display: flex;
@@ -26,8 +24,7 @@
         margin-block-start: 0;
 
         /* Needed for gutenberg - mainly wp-group blocks */
-        .wp-block-group,
-        & > * {
+        .wp-block-group {
             width: 100%;
         }