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..db370fc --- /dev/null +++ b/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; + } +} 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) { 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"; 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; + } +} 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..a7f85fc 100644 --- a/src/scss/gutenberg/_quirks.scss +++ b/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; } 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%; }