From 37427bf7b3e37edcb3b15aad851a27dc994bf259 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Mon, 25 Apr 2022 14:43:52 +0530 Subject: [PATCH] Blockbase: update button styles --- blockbase/assets/ponyfill.css | 81 ------------------- blockbase/functions.php | 4 +- blockbase/sass/blocks/_button.scss | 43 +--------- .../sass/blocks/_buttons-outline-style.scss | 40 +++------ blockbase/style.css | 47 +++++++++++ blockbase/theme.json | 30 +++++-- 6 files changed, 86 insertions(+), 159 deletions(-) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index dd682af9c8..3463a50477 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -349,87 +349,6 @@ input[type=checkbox] + label { /** * 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); } diff --git a/blockbase/functions.php b/blockbase/functions.php index 12c7a2d64a..54a068bee9 100644 --- a/blockbase/functions.php +++ b/blockbase/functions.php @@ -27,6 +27,7 @@ function blockbase_support() { add_editor_style( array( '/assets/ponyfill.css', + '/style.css' ) ); @@ -90,10 +91,11 @@ function blockbase_scripts() { // Enqueue Google fonts wp_enqueue_style( 'blockbase-fonts', blockbase_fonts_url(), array(), null ); wp_enqueue_style( 'blockbase-ponyfill', get_template_directory_uri() . '/assets/ponyfill.css', array(), wp_get_theme()->get( 'Version' ) ); + wp_enqueue_style( 'blockbase-styles', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) ); // Add the child theme CSS if it exists. if ( file_exists( get_stylesheet_directory() . '/assets/theme.css' ) ) { - wp_enqueue_style( 'blockbase-child-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array('blockbase-ponyfill'), wp_get_theme()->get( 'Version' ) ); + wp_enqueue_style( 'blockbase-child-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array('blockbase-ponyfill', 'blockbase-styles'), wp_get_theme()->get( 'Version' ) ); } } add_action( 'wp_enqueue_scripts', 'blockbase_scripts' ); 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/style.css b/blockbase/style.css index 2d12fef4a9..07fc1e453a 100644 --- a/blockbase/style.css +++ b/blockbase/style.css @@ -27,3 +27,50 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. */ + + +/* + * 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/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)" } } },