From 8e6262b7bab544169dd4432550f51db0fa62d4dd Mon Sep 17 00:00:00 2001 From: Dan Northern Date: Mon, 7 Jul 2025 19:51:57 -0400 Subject: [PATCH 1/6] Add color pairs. --- package.json | 1 + src/scss/base/_colors.scss | 47 ++++++++++++++++++++++++++++++++++++++ src/scss/base/index.scss | 1 + 3 files changed, 49 insertions(+) create mode 100644 src/scss/base/_colors.scss diff --git a/package.json b/package.json index de7d52b..576b640 100644 --- a/package.json +++ b/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", diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss new file mode 100644 index 0000000..2579a52 --- /dev/null +++ b/src/scss/base/_colors.scss @@ -0,0 +1,47 @@ +/* +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); +} + +/* Contrast Background */ +.has-contrast-background-color { + color: var(--wp--preset--color--base); +} + +/* Primary Background */ +.has-primary-background-color { + color: var(--wp--preset--color--primary-contrast); +} + +/* Secondary Background */ +.has-secondary-background-color { + color: var(--wp--preset--color--secondary-contrast); +} + +/* Tertiary Background */ +.has-tertiary-background-color { + color: var(--wp--preset--color--tertiary-contrast); +} + +/* Neutral One Background */ +.has-neutral-1-background-color { + color: var(--wp--preset--color--neutral-1-contrast); +} + +/* Neutral Two Background */ +.has-neutral-2-background-color { + color: var(--wp--preset--color--neutral-2-contrast); +} + +/* Neutral Three Background */ +.has-neutral-3-background-color { + color: var(--wp--preset--color--neutral-3-contrast); +} diff --git a/src/scss/base/index.scss b/src/scss/base/index.scss index 33e6c14..de2b7a7 100644 --- a/src/scss/base/index.scss +++ b/src/scss/base/index.scss @@ -2,3 +2,4 @@ @forward "./reset"; @forward "./utilities"; @forward "./images"; +@forward "./colors"; From 4c1d4f6f0d50005900cffa7e7e557f918d594aa3 Mon Sep 17 00:00:00 2001 From: Dan Northern Date: Tue, 8 Jul 2025 01:23:37 -0400 Subject: [PATCH 2/6] Add basic buton reset. --- src/scss/base/_reset.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss index ec28da0..4ca3c26 100644 --- a/src/scss/base/_reset.scss +++ b/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) { From b58dacfa93785cd55a846d1c91cef38a6740270b Mon Sep 17 00:00:00 2001 From: Dan Northern Date: Thu, 10 Jul 2025 02:57:25 -0400 Subject: [PATCH 3/6] Small update to buttons. --- src/scss/components/_buttons.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index 035b2b1..51b8745 100644 --- a/src/scss/components/_buttons.scss +++ b/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; + } +} From e3f9d96a60be65f6464827ff61e1e11cc2efbd69 Mon Sep 17 00:00:00 2001 From: Dan Northern Date: Sat, 19 Jul 2025 17:14:19 -0400 Subject: [PATCH 4/6] Fix some Gutenberg quirks. --- src/scss/base/_colors.scss | 32 +++++++++++++++++++++++++++ src/scss/components/_pagintation.scss | 0 src/scss/components/index.scss | 1 + src/scss/gutenberg/_quirks.scss | 20 +++++++++++++++++ src/scss/layout/_columns.scss | 5 +---- 5 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 src/scss/components/_pagintation.scss diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss index 2579a52..db370fc 100644 --- a/src/scss/base/_colors.scss +++ b/src/scss/base/_colors.scss @@ -9,39 +9,71 @@ 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; + } } diff --git a/src/scss/components/_pagintation.scss b/src/scss/components/_pagintation.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/scss/components/index.scss b/src/scss/components/index.scss index e49f4e2..6adf7fb 100644 --- a/src/scss/components/index.scss +++ b/src/scss/components/index.scss @@ -1,2 +1,3 @@ @forward "./buttons"; @forward "./slider"; +@forward "./pagintation"; diff --git a/src/scss/gutenberg/_quirks.scss b/src/scss/gutenberg/_quirks.scss index d5c4675..3335d6b 100644 --- a/src/scss/gutenberg/_quirks.scss +++ b/src/scss/gutenberg/_quirks.scss @@ -13,7 +13,27 @@ display: contents; } +// Allow sticky to work with entry-content +.wp-block-post-content { + display: contents; +} + /* post tmeplate columns don't span full width */ .wp-block-post-template { 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 two align-full blocks */ +.alignfull + .alignfull { + margin-block-start: 0; +} diff --git a/src/scss/layout/_columns.scss b/src/scss/layout/_columns.scss index c244010..2a17152 100644 --- a/src/scss/layout/_columns.scss +++ b/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%; } From 5afb645816215bdf13b02beda78305cd3cce1103 Mon Sep 17 00:00:00 2001 From: Dan Northern Date: Sun, 20 Jul 2025 16:33:10 -0400 Subject: [PATCH 5/6] Update gutenberg quirks. --- src/scss/gutenberg/_quirks.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/scss/gutenberg/_quirks.scss b/src/scss/gutenberg/_quirks.scss index 3335d6b..c80d619 100644 --- a/src/scss/gutenberg/_quirks.scss +++ b/src/scss/gutenberg/_quirks.scss @@ -13,9 +13,10 @@ display: contents; } -// Allow sticky to work with entry-content +// 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; + display: contents !important; } /* post tmeplate columns don't span full width */ @@ -33,7 +34,11 @@ } } -/* Remove padding on two align-full blocks */ -.alignfull + .alignfull { +/* Remove padding on align-full blocks */ +:root + :where(.editor-styles-wrapper) + :where(.is-layout-constrained) + > .alignfull, +.alignfull { margin-block-start: 0; } From 0e976b6af1f210898eba6ec8353e0fb9085469ce Mon Sep 17 00:00:00 2001 From: Dan Northern Date: Sun, 20 Jul 2025 21:14:01 -0400 Subject: [PATCH 6/6] Small edit to gutenberg quirks. --- src/scss/gutenberg/_quirks.scss | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/scss/gutenberg/_quirks.scss b/src/scss/gutenberg/_quirks.scss index c80d619..a7f85fc 100644 --- a/src/scss/gutenberg/_quirks.scss +++ b/src/scss/gutenberg/_quirks.scss @@ -10,35 +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; + //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); - } - } + .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, + :where(.editor-styles-wrapper) + :where(.is-layout-constrained) + > .alignfull, .alignfull { - margin-block-start: 0; + margin-block-start: 0; }