From 5e4e7fa9a7b1bb80b53648592717b54391c9585e Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Thu, 21 Apr 2022 13:22:12 +0530 Subject: [PATCH 1/7] Blockbase: move button padding styles from ponyfill to theme.json --- blockbase/assets/ponyfill.css | 6 ------ blockbase/package-lock.json | 2 +- blockbase/sass/blocks/_button.scss | 14 ++++++++++---- blockbase/theme.json | 11 ++++++++++- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index 4d05f7e9d3..fbf25c934d 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -352,13 +352,7 @@ input[type=checkbox] + label { .wp-block-button.wp-block-button__link, .wp-block-button .wp-block-button__link, .wp-block-button__link.wp-block-button__link, .wp-block-button__link .wp-block-button__link { - border-width: 0; - padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width)); - padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width)); - padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width)); - padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width)); text-decoration: none; - font-weight: var(--wp--custom--button--typography--font-weight); } .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, diff --git a/blockbase/package-lock.json b/blockbase/package-lock.json index 14232520b3..abeef523ac 100644 --- a/blockbase/package-lock.json +++ b/blockbase/package-lock.json @@ -1,6 +1,6 @@ { "name": "blockbase", - "version": "2.0.28", + "version": "2.0.33", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/blockbase/sass/blocks/_button.scss b/blockbase/sass/blocks/_button.scss index ac44e46002..89c30277cb 100644 --- a/blockbase/sass/blocks/_button.scss +++ b/blockbase/sass/blocks/_button.scss @@ -1,4 +1,5 @@ -@import 'button-mixins'; +@import "button-mixins"; + /** * Button */ @@ -6,19 +7,23 @@ /** * Block Options */ - .wp-block-button, .wp-block-button__link { +.wp-block-button, +.wp-block-button__link { + &.wp-block-button__link, .wp-block-button__link { + @include button-hover-styles; - @include button-padding-styles; text-decoration: none; - font-weight: var(--wp--custom--button--typography--font-weight); } + &.is-style-outline { + &.wp-block-button__link, .wp-block-button__link { --wp--custom--button--color--text: var(--wp--custom--button--border--color); --wp--custom--button--color--background: transparent; + @include button-border-styles; @include button-hover-styles; @include button-color-styles; @@ -30,6 +35,7 @@ // a button block OUTSIDE of the context of the button collection block (grrrrrrrrr) // then there are undesired margins to be dealt with somehow. .wp-block-buttons { + .wp-block-button:last-child { margin-bottom: 0; } diff --git a/blockbase/theme.json b/blockbase/theme.json index 520fe57566..4a9f2e73ba 100644 --- a/blockbase/theme.json +++ b/blockbase/theme.json @@ -401,7 +401,8 @@ "blocks": { "core/button": { "border": { - "radius": "var(--wp--custom--button--border--radius)" + "radius": "var(--wp--custom--button--border--radius)", + "width": "0" }, "color": { "background": "var(--wp--custom--button--color--background)", @@ -412,6 +413,14 @@ "fontSize": "var(--wp--custom--button--typography--font-size)", "fontWeight": "var(--wp--custom--button--typography--font-weight)", "lineHeight": "var(--wp--custom--button--typography--line-height)" + }, + "spacing": { + "padding": { + "top": "calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) )", + "bottom": "calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) )", + "left": "calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) )", + "right": "calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) )" + } } }, "core/code": { From f9ff75fbe7f616bb172b992b98ac4022816d2688 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Mon, 25 Apr 2022 14:43:52 +0530 Subject: [PATCH 2/7] Blockbase: update button styles --- blockbase/assets/ponyfill.css | 125 ++++++------------ blockbase/functions.php | 2 +- blockbase/sass/_style.scss | 51 +++++++ blockbase/sass/blocks/_button.scss | 43 +----- .../sass/blocks/_buttons-outline-style.scss | 40 ++---- blockbase/sass/ponyfill.scss | 2 + blockbase/theme.json | 30 ++++- 7 files changed, 128 insertions(+), 165 deletions(-) create mode 100644 blockbase/sass/_style.scss diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index fbf25c934d..1aa1086889 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -343,93 +343,6 @@ input[type=checkbox] + label { line-height: 1em; } -/** - * Button - */ -/** - * Block Options - */ -.wp-block-button.wp-block-button__link, -.wp-block-button .wp-block-button__link, .wp-block-button__link.wp-block-button__link, -.wp-block-button__link .wp-block-button__link { - text-decoration: none; -} -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text); - --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background); - --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color); - opacity: 1; - color: var(--wp--custom--button--color--text); - background-color: var(--wp--custom--button--color--background); - border-color: currentColor; - border-color: var(--wp--custom--button--border--color); -} -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button__link.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, -.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, -.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, -.wp-block-button__link .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg { - fill: var(--wp--custom--button--color--text); -} -.wp-block-button.is-style-outline.wp-block-button__link, -.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline.wp-block-button__link, -.wp-block-button__link.is-style-outline .wp-block-button__link { - --wp--custom--button--color--text: var(--wp--custom--button--border--color); - --wp--custom--button--color--background: transparent; - border-style: var(--wp--custom--button--border--style); - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); - opacity: 1; - color: var(--wp--custom--button--color--text); - background-color: var(--wp--custom--button--color--background); - border-color: currentColor; -} -.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - --wp--custom--button--color--text: var(--wp--custom--button--hover--color--text); - --wp--custom--button--color--background: var(--wp--custom--button--hover--color--background); - --wp--custom--button--border--color: var(--wp--custom--button--hover--border--color); - opacity: 1; - color: var(--wp--custom--button--color--text); - background-color: var(--wp--custom--button--color--background); - border-color: currentColor; - border-color: var(--wp--custom--button--border--color); -} -.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, .wp-block-button__link.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg, -.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover svg, -.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus svg, -.wp-block-button__link.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus svg { - fill: var(--wp--custom--button--color--text); -} -.wp-block-button.is-style-outline.wp-block-button__link svg, -.wp-block-button.is-style-outline .wp-block-button__link svg, .wp-block-button__link.is-style-outline.wp-block-button__link svg, -.wp-block-button__link.is-style-outline .wp-block-button__link svg { - fill: var(--wp--custom--button--color--text); -} - -.wp-block-buttons .wp-block-button:last-child { - margin-bottom: 0; -} - .wp-block-calendar table caption { color: var(--wp--custom--color--primary); } @@ -1032,4 +945,42 @@ p.wp-block-site-tagline { mask-image: url(svg/post-tag.svg); } +/* + * This is a refactored style sheet + * Currently it is being loaded within ponyfill + * As ponyfill gets refactored, add the necessary styles here. + */ +/* + * Button hover styles. + * Necessary until the following issue is resolved in Gutenberg: + * https://github.com/WordPress/gutenberg/issues/27075 + */ +:is(.wp-block-search__button, +.wp-block-button__link):is(:hover, +:active, +:focus) { + text-decoration: none; + cursor: pointer; + color: var(--wp--custom--button--hover--color--text); + background-color: var(--wp--custom--button--hover--color--background); + border-color: var(--wp--custom--button--hover--border--color); +} + +:is(.wp-block-search__button, +.wp-block-button__link):focus { + outline: 1.5px dotted var(--wp--preset--color--foreground); + outline-offset: 3px; +} + +:is(.is-style-outline.wp-block-button, +.is-style-outline.wp-block-button__link) { + color: var(--wp--custom--button--outline--color--text, var(--wp--custom--button--border--color)); +} + +:is(.is-style-outline > .wp-block-button__link, +.is-style-outline.wp-block-button__link):not(.has-background):hover { + color: var(--wp--custom--button--outline--hover--color--text, var(--wp--custom--button--color--text)); + background-color: var(--wp--custom--button--outline--hover--color--background, var(--wp--custom--button--color--background)); +} + /*# sourceMappingURL=ponyfill.css.map */ \ No newline at end of file diff --git a/blockbase/functions.php b/blockbase/functions.php index 25ed464d74..18a448cc50 100644 --- a/blockbase/functions.php +++ b/blockbase/functions.php @@ -23,7 +23,7 @@ function blockbase_support() { // Enqueue editor styles. add_editor_style( array( - '/assets/ponyfill.css', + '/assets/ponyfill.css' ) ); diff --git a/blockbase/sass/_style.scss b/blockbase/sass/_style.scss new file mode 100644 index 0000000000..05a5f51608 --- /dev/null +++ b/blockbase/sass/_style.scss @@ -0,0 +1,51 @@ +/* + * This is a refactored style sheet + * Currently it is being loaded within ponyfill + * As ponyfill gets refactored, add the necessary styles here. + */ + +/* + * Button hover styles. + * Necessary until the following issue is resolved in Gutenberg: + * https://github.com/WordPress/gutenberg/issues/27075 + */ + + :is( + .wp-block-search__button, + .wp-block-button__link +):is( + :hover, + :active, + :focus +) { + text-decoration: none; + cursor: pointer; + color: var(--wp--custom--button--hover--color--text); + background-color: var(--wp--custom--button--hover--color--background); + border-color: var(--wp--custom--button--hover--border--color); +} + +:is( + .wp-block-search__button, + .wp-block-button__link +):focus { + outline: 1.5px dotted var(--wp--preset--color--foreground); + outline-offset: 3px; +} + +:is( + .is-style-outline.wp-block-button, + .is-style-outline.wp-block-button__link +) { + color: var(--wp--custom--button--outline--color--text, var(--wp--custom--button--border--color) ); +} + +:is( + .is-style-outline>.wp-block-button__link, + .is-style-outline.wp-block-button__link +):not(.has-background):hover { + color: var(--wp--custom--button--outline--hover--color--text, var(--wp--custom--button--color--text)); + background-color: var(--wp--custom--button--outline--hover--color--background, var(--wp--custom--button--color--background)); +} + + diff --git a/blockbase/sass/blocks/_button.scss b/blockbase/sass/blocks/_button.scss index 89c30277cb..8ccf15675e 100644 --- a/blockbase/sass/blocks/_button.scss +++ b/blockbase/sass/blocks/_button.scss @@ -1,42 +1 @@ -@import "button-mixins"; - -/** - * Button - */ - -/** - * Block Options - */ -.wp-block-button, -.wp-block-button__link { - - &.wp-block-button__link, - .wp-block-button__link { - - @include button-hover-styles; - text-decoration: none; - } - - &.is-style-outline { - - &.wp-block-button__link, - .wp-block-button__link { - --wp--custom--button--color--text: var(--wp--custom--button--border--color); - --wp--custom--button--color--background: transparent; - - @include button-border-styles; - @include button-hover-styles; - @include button-color-styles; - } - } -} - -// TODO: I'm not sure what the end goal should be here, but since we are unable to use -// a button block OUTSIDE of the context of the button collection block (grrrrrrrrr) -// then there are undesired margins to be dealt with somehow. -.wp-block-buttons { - - .wp-block-button:last-child { - margin-bottom: 0; - } -} +// Leaving the file to avoid import issues diff --git a/blockbase/sass/blocks/_buttons-outline-style.scss b/blockbase/sass/blocks/_buttons-outline-style.scss index 93a8ec2001..da7bcd7cdf 100644 --- a/blockbase/sass/blocks/_buttons-outline-style.scss +++ b/blockbase/sass/blocks/_buttons-outline-style.scss @@ -1,35 +1,15 @@ -@import 'button-mixins'; -.wp-block-button { - &.wp-block-button__link, - .wp-block-button__link { - &:not(.has-background):not(.has-text-color) { - @include button-outline-hover-styles; - } - } -} +@import "button-mixins"; + .wp-block-file .wp-block-file__button { - @include button-outline-hover-styles; -} -.wp-block-search { - &.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button, - .wp-block-search__button { - @include button-outline-hover-styles; - } + @include button-outline-hover-styles; } -//NOTE: Double-classed to raise specificity above parent theme's outline hover styles -//as an alternative to !important. Only needed for the editor. -.wp-block-button.wp-block-button.is-style-outline { - &.wp-block-button__link, - .wp-block-button__link { - &:not(.has-background):not(.has-text-color) { - &:hover, - &:focus, - &.has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); - } - } - } +.wp-block-search { + + &.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button, + .wp-block-search__button { + + @include button-outline-hover-styles; + } } diff --git a/blockbase/sass/ponyfill.scss b/blockbase/sass/ponyfill.scss index 3e1863a2e3..46b340961f 100644 --- a/blockbase/sass/ponyfill.scss +++ b/blockbase/sass/ponyfill.scss @@ -29,3 +29,5 @@ @import "blocks/table"; @import "blocks/video"; @import "post/meta"; + +@import "style"; diff --git a/blockbase/theme.json b/blockbase/theme.json index 4a9f2e73ba..3bfdd94dbc 100644 --- a/blockbase/theme.json +++ b/blockbase/theme.json @@ -128,6 +128,24 @@ "fontSize": "var(--wp--custom--font-sizes--normal)", "fontWeight": "normal", "lineHeight": 2 + }, + "outline":{ + "color": { + "text": "var(--wp--custom--color--primary)", + "background": "var(--wp--custom--color--background)" + }, + "border": { + "color": "var(--wp--custom--color--primary)" + }, + "hover": { + "color": { + "text": "var(--wp--custom--color--background)", + "background": "var(--wp--custom--color--secondary)" + }, + "border": { + "color": "var(--wp--custom--color--primary)" + } + } } }, "color": { @@ -402,7 +420,9 @@ "core/button": { "border": { "radius": "var(--wp--custom--button--border--radius)", - "width": "0" + "color": "var(--wp--custom--button--border--color)", + "style": "solid", + "width": "var(--wp--custom--button--border--width)" }, "color": { "background": "var(--wp--custom--button--color--background)", @@ -416,10 +436,10 @@ }, "spacing": { "padding": { - "top": "calc( var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width) )", - "bottom": "calc( var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width) )", - "left": "calc( var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width) )", - "right": "calc( var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width) )" + "top": "var(--wp--custom--button--spacing--padding--top)", + "bottom": "var(--wp--custom--button--spacing--padding--bottom)", + "left": "var(--wp--custom--button--spacing--padding--left)", + "right": "var(--wp--custom--button--spacing--padding--right)" } } }, From 5419c851dafd6d881730ebfe43e9293264514712 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Mon, 25 Apr 2022 16:51:14 +0530 Subject: [PATCH 3/7] Quadrat: compile theme after blockbase theme changes --- quadrat/assets/theme.css | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css index 3c33c9b9f7..d878b4eefd 100644 --- a/quadrat/assets/theme.css +++ b/quadrat/assets/theme.css @@ -205,19 +205,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { transform: rotate(16deg) translate(-110px, 40px); } -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -241,14 +228,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } From 04b7517c9c3b99900efff28d5887d6d439436b07 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Wed, 13 Jul 2022 13:30:09 -0400 Subject: [PATCH 4/7] Added little utility to build all Blockbase children (that have a build step) --- theme-batch-utils.sh | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/theme-batch-utils.sh b/theme-batch-utils.sh index 6f3156b16d..6c045aedc7 100755 --- a/theme-batch-utils.sh +++ b/theme-batch-utils.sh @@ -107,6 +107,14 @@ build-org-zip() { echo } +build-blockbase-child() { + THEME=${1//\/} + if grep -q "Template: blockbase" ./style.css; then + echo "building" $THEME; + npm run build + fi +} + command=$1 echo @@ -157,6 +165,9 @@ for theme in */ ; do "build-org-zip-all") build-org-zip ${theme} ;; + "build-blockbase-children") + build-blockbase-child ${theme} + ;; "version-bump") version-bump ${theme} ;; From 0a80ee57807adcc739ca0ec2ca37506470499005 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Wed, 13 Jul 2022 13:30:25 -0400 Subject: [PATCH 5/7] Built all blockbase children (and variations) with the button CSS changes --- geologist-blue/assets/theme.css | 21 --------------------- geologist-cream/assets/theme.css | 21 --------------------- geologist-slate/assets/theme.css | 21 --------------------- geologist-yellow/assets/theme.css | 21 --------------------- geologist/assets/theme.css | 21 --------------------- quadrat-black/assets/theme.css | 21 --------------------- quadrat-green/assets/theme.css | 21 --------------------- quadrat-red/assets/theme.css | 21 --------------------- quadrat-white/assets/theme.css | 21 --------------------- quadrat-yellow/assets/theme.css | 21 --------------------- videomaker-white/assets/theme.css | 25 ++----------------------- videomaker/assets/theme.css | 25 ++----------------------- zoologist/assets/theme.css | 21 --------------------- 13 files changed, 4 insertions(+), 277 deletions(-) diff --git a/geologist-blue/assets/theme.css b/geologist-blue/assets/theme.css index 3f37fe2ad3..07f403700a 100644 --- a/geologist-blue/assets/theme.css +++ b/geologist-blue/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,14 +58,6 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/geologist-cream/assets/theme.css b/geologist-cream/assets/theme.css index 3f37fe2ad3..07f403700a 100644 --- a/geologist-cream/assets/theme.css +++ b/geologist-cream/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,14 +58,6 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/geologist-slate/assets/theme.css b/geologist-slate/assets/theme.css index 3f37fe2ad3..07f403700a 100644 --- a/geologist-slate/assets/theme.css +++ b/geologist-slate/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,14 +58,6 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/geologist-yellow/assets/theme.css b/geologist-yellow/assets/theme.css index 3f37fe2ad3..07f403700a 100644 --- a/geologist-yellow/assets/theme.css +++ b/geologist-yellow/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,14 +58,6 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/geologist/assets/theme.css b/geologist/assets/theme.css index 3f37fe2ad3..07f403700a 100644 --- a/geologist/assets/theme.css +++ b/geologist/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,14 +58,6 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/quadrat-black/assets/theme.css b/quadrat-black/assets/theme.css index 3c33c9b9f7..d878b4eefd 100644 --- a/quadrat-black/assets/theme.css +++ b/quadrat-black/assets/theme.css @@ -205,19 +205,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { transform: rotate(16deg) translate(-110px, 40px); } -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -241,14 +228,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/quadrat-green/assets/theme.css b/quadrat-green/assets/theme.css index 3c33c9b9f7..d878b4eefd 100644 --- a/quadrat-green/assets/theme.css +++ b/quadrat-green/assets/theme.css @@ -205,19 +205,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { transform: rotate(16deg) translate(-110px, 40px); } -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -241,14 +228,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/quadrat-red/assets/theme.css b/quadrat-red/assets/theme.css index 3c33c9b9f7..d878b4eefd 100644 --- a/quadrat-red/assets/theme.css +++ b/quadrat-red/assets/theme.css @@ -205,19 +205,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { transform: rotate(16deg) translate(-110px, 40px); } -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -241,14 +228,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/quadrat-white/assets/theme.css b/quadrat-white/assets/theme.css index 3c33c9b9f7..d878b4eefd 100644 --- a/quadrat-white/assets/theme.css +++ b/quadrat-white/assets/theme.css @@ -205,19 +205,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { transform: rotate(16deg) translate(-110px, 40px); } -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -241,14 +228,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/quadrat-yellow/assets/theme.css b/quadrat-yellow/assets/theme.css index 3c33c9b9f7..d878b4eefd 100644 --- a/quadrat-yellow/assets/theme.css +++ b/quadrat-yellow/assets/theme.css @@ -205,19 +205,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { transform: rotate(16deg) translate(-110px, 40px); } -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -241,14 +228,6 @@ div.horizontal-query-pattern figure.wp-block-post-featured-image img { padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } diff --git a/videomaker-white/assets/theme.css b/videomaker-white/assets/theme.css index 516722fbb0..41cbf10ea0 100644 --- a/videomaker-white/assets/theme.css +++ b/videomaker-white/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,16 +58,8 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - @font-face { - font-family: "Inter"; + font-family: Inter; font-weight: 100 900; font-display: swap; font-style: normal; @@ -88,7 +67,7 @@ src: url("./fonts/Inter-roman_var.woff2") format("woff2"); } @font-face { - font-family: "Inter"; + font-family: Inter; font-weight: 100 900; font-display: swap; font-style: italic; diff --git a/videomaker/assets/theme.css b/videomaker/assets/theme.css index 516722fbb0..41cbf10ea0 100644 --- a/videomaker/assets/theme.css +++ b/videomaker/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,16 +58,8 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - @font-face { - font-family: "Inter"; + font-family: Inter; font-weight: 100 900; font-display: swap; font-style: normal; @@ -88,7 +67,7 @@ src: url("./fonts/Inter-roman_var.woff2") format("woff2"); } @font-face { - font-family: "Inter"; + font-family: Inter; font-weight: 100 900; font-display: swap; font-style: italic; diff --git a/zoologist/assets/theme.css b/zoologist/assets/theme.css index 3f37fe2ad3..07f403700a 100644 --- a/zoologist/assets/theme.css +++ b/zoologist/assets/theme.css @@ -35,19 +35,6 @@ /** * Reset the WP Admin page styles for Gutenberg-like pages. */ -.wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - border-style: var(--wp--custom--button--border--style); - border-color: currentColor; - border-width: var(--wp--custom--button--border--width); - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); - padding-right: var(--wp--custom--button--spacing--padding--right); -} - .wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus { border-style: var(--wp--custom--button--border--style); border-color: currentColor; @@ -71,14 +58,6 @@ padding-right: var(--wp--custom--button--spacing--padding--right); } -.wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus, -.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color).has-focus { - color: var(--wp--custom--button--color--background); - background-color: var(--wp--custom--button--color--text); -} - ul ul { list-style-type: disc; } From 81798a6fb1c2b1c9233d8bce1116197c420798c6 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Thu, 14 Jul 2022 09:05:43 -0400 Subject: [PATCH 6/7] Changes to meraki button configuration so that it would match changes to Blockbase buttons --- blockbase/theme.json | 2 +- meraki/theme.json | 30 ++++++++++++++++++++---------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/blockbase/theme.json b/blockbase/theme.json index 3bfdd94dbc..59fbd784b5 100644 --- a/blockbase/theme.json +++ b/blockbase/theme.json @@ -421,7 +421,7 @@ "border": { "radius": "var(--wp--custom--button--border--radius)", "color": "var(--wp--custom--button--border--color)", - "style": "solid", + "style": "var(--wp--custom--button--border--style)", "width": "var(--wp--custom--button--border--width)" }, "color": { diff --git a/meraki/theme.json b/meraki/theme.json index 80f5b85da6..c5b840e0d6 100644 --- a/meraki/theme.json +++ b/meraki/theme.json @@ -42,11 +42,30 @@ } }, "button": { + "color": { + "background": "var(--wp--preset--color--foreground)", + "text": "var(--wp--preset--color--background)" + }, + "border": { + "radius": "50px", + "color": "var(--wp--preset--color--foreground)" + }, + "typography": { + "fontSize": "var(--wp--preset--font-size--tiny)", + "lineHeight": "1.2" + }, "hover": { "color": { "text": "var(--wp--custom--color--background)", "background": "var(--wp--custom--color--primary)" } + }, + "outline": { + "hover": { + "color": { + "background": "var(--wp--custom--color--primary)" + } + } } } }, @@ -124,18 +143,9 @@ "styles": { "blocks": { "core/button": { - "border": { - "radius": "50" - }, - "color": { - "background": "var(--wp--preset--color--foreground)", - "text": "var(--wp--preset--color--background)" - }, "typography": { "letterSpacing": "0.05em", - "fontSize": "var(--wp--preset--font-size--tiny)", - "textTransform": "uppercase", - "lineHeight": "1.2" + "textTransform": "uppercase" } }, "core/navigation-link": { From 57410dea52ddaf66d57582b66668ac039d09f5e6 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Mon, 18 Jul 2022 16:47:30 -0400 Subject: [PATCH 7/7] Removing borders from buttons with user-supplied background colors --- blockbase/assets/ponyfill.css | 4 ++++ blockbase/sass/blocks/_button.scss | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index 1aa1086889..8a45c3dc87 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -343,6 +343,10 @@ input[type=checkbox] + label { line-height: 1em; } +.wp-block-button:not(.is-style-outline) > a.has-background { + border-style: none; +} + .wp-block-calendar table caption { color: var(--wp--custom--color--primary); } diff --git a/blockbase/sass/blocks/_button.scss b/blockbase/sass/blocks/_button.scss index 8ccf15675e..043661fe24 100644 --- a/blockbase/sass/blocks/_button.scss +++ b/blockbase/sass/blocks/_button.scss @@ -1 +1,3 @@ -// Leaving the file to avoid import issues +.wp-block-button:not(.is-style-outline) > a.has-background { + border-style: none; +}