From b6669adc9298587db69455903b9a6ce98da89633 Mon Sep 17 00:00:00 2001 From: Madhu Dollu Date: Thu, 17 Nov 2022 17:56:42 +0530 Subject: [PATCH] cleanup buttons css (#6714) * removed typography styles for buttons * removed typography styles for buttons * remove more styles * kept the mixins, but removed the includes * remove padding include from button styles * lint * Bump min version for Blockbase to 6.1 * rebuild ponyfill after rebase * Update theme.json schema version * Update file button hover status Co-authored-by: MaggieCabrera Co-authored-by: Sarah Norris --- blockbase/assets/ponyfill.css | 46 ++--------------------- blockbase/readme.txt | 4 +- blockbase/sass/blocks/_button-mixins.scss | 18 ++++++--- blockbase/sass/blocks/_file.scss | 4 +- blockbase/sass/blocks/_search.scss | 17 ++++++--- blockbase/style.css | 4 +- blockbase/theme.json | 11 ++++++ 7 files changed, 43 insertions(+), 61 deletions(-) diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css index 1bae1ea40..304497bb1 100644 --- a/blockbase/assets/ponyfill.css +++ b/blockbase/assets/ponyfill.css @@ -622,28 +622,6 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current { padding: var(--wp--custom--form--padding); border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color); } -.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button, -.wp-block-search .wp-block-search__button { - 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)); - font-weight: var(--wp--custom--button--typography--font-weight); - font-family: inherit; - font-size: var(--wp--custom--button--typography--font-size); - line-height: var(--wp--custom--button--typography--line-height); - text-decoration: none; - opacity: 1; - color: var(--wp--custom--button--color--text); - background-color: var(--wp--custom--button--color--background); - border-color: currentColor; - border-radius: var(--wp--custom--button--border--radius); -} -.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button svg, -.wp-block-search .wp-block-search__button svg { - fill: var(--wp--custom--button--color--text); -} .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):hover, .wp-block-search .wp-block-search__button:not(.has-background):not(.has-text-color):focus, @@ -654,7 +632,7 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current { opacity: 1; color: var(--wp--custom--button--color--text); background-color: var(--wp--custom--button--color--background); - border-color: currentColor; + border-color: currentcolor; border-color: var(--wp--custom--button--border--color); } .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:not(.has-background):not(.has-text-color).has-focus svg, @@ -672,7 +650,7 @@ div.wp-block-query-pagination .wp-block-query-pagination-numbers .current { opacity: 0.66; } .wp-block-search.is-style-small-search { - --wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small)); + --wp--custom--button--typography--font-size: calc(0.8 * var(--wp--preset--font-size--small)); } .wp-block-search.is-style-small-search .wp-block-search__input { padding: calc(0.5 * var(--wp--custom--form--padding)); @@ -697,26 +675,8 @@ p.wp-block-site-tagline { } .wp-block-file .wp-block-file__button { - 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)); - font-weight: var(--wp--custom--button--typography--font-weight); - font-family: inherit; - font-size: var(--wp--custom--button--typography--font-size); - line-height: var(--wp--custom--button--typography--line-height); - text-decoration: none; - opacity: 1; - color: var(--wp--custom--button--color--text); - background-color: var(--wp--custom--button--color--background); - border-color: currentColor; - border-radius: var(--wp--custom--button--border--radius); display: inline-block; } -.wp-block-file .wp-block-file__button svg { - fill: var(--wp--custom--button--color--text); -} .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus, .wp-block-file .wp-block-file__button: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); @@ -724,7 +684,7 @@ p.wp-block-site-tagline { opacity: 1; color: var(--wp--custom--button--color--text); background-color: var(--wp--custom--button--color--background); - border-color: currentColor; + border-color: currentcolor; border-color: var(--wp--custom--button--border--color); } .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):hover svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color):focus svg, .wp-block-file .wp-block-file__button:not(.has-background):not(.has-text-color).has-focus svg { diff --git a/blockbase/readme.txt b/blockbase/readme.txt index 852e2455c..3fc990381 100644 --- a/blockbase/readme.txt +++ b/blockbase/readme.txt @@ -1,7 +1,7 @@ === Blockbase === Contributors: Automattic -Requires at least: 5.7 -Tested up to: 5.7.2 +Requires at least: 6.1 +Tested up to: 6.1 Requires PHP: 5.6.2 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html diff --git a/blockbase/sass/blocks/_button-mixins.scss b/blockbase/sass/blocks/_button-mixins.scss index 152e1b54a..ccee1656a 100644 --- a/blockbase/sass/blocks/_button-mixins.scss +++ b/blockbase/sass/blocks/_button-mixins.scss @@ -1,6 +1,8 @@ // NOTE: These remain for the styling of buttons that are NOT blocks and is used elsewhere. This can be removed when those no longer exist. // See https://github.com/WordPress/gutenberg/issues/29167 +// We are keeping the mixin in case it's used by any child themes, but this isn't used by Blockbase any more @mixin button-main-styles { + @include button-padding-styles; @include button-typography-styles; @include button-color-styles; @@ -11,7 +13,8 @@ opacity: 1; color: var(--wp--custom--button--color--text); background-color: var(--wp--custom--button--color--background); - border-color: currentColor; + border-color: currentcolor; + svg { fill: var(--wp--custom--button--color--text); } @@ -21,10 +24,10 @@ //standard and outline buttons are equal. @mixin button-padding-styles { 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) ); + 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)); } @mixin button-typography-styles { @@ -52,6 +55,7 @@ @mixin button-hover-styles { //The following changes should ONLY be changed if the user has NOT set a custom color &:not(.has-background):not(.has-text-color) { + &:hover, &:focus, &.has-focus { @@ -59,6 +63,7 @@ --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); + @include button-color-styles; border-color: var(--wp--custom--button--border--color); } @@ -67,11 +72,12 @@ //Mixins for the alternative outline style @mixin button-outline-hover-styles { + &:hover, &:focus, &.has-focus { border-style: var(--wp--custom--button--border--style); - border-color: currentColor; + 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); diff --git a/blockbase/sass/blocks/_file.scss b/blockbase/sass/blocks/_file.scss index 8bf636ce2..00f9550b3 100644 --- a/blockbase/sass/blocks/_file.scss +++ b/blockbase/sass/blocks/_file.scss @@ -1,8 +1,8 @@ -@import 'button-mixins'; +@import "button-mixins"; // TODO: Remove when https://github.com/WordPress/gutenberg/issues/27760 is fixed. .wp-block-file .wp-block-file__button { - @include button-main-styles; + @include button-hover-styles; display: inline-block; } diff --git a/blockbase/sass/blocks/_search.scss b/blockbase/sass/blocks/_search.scss index ac299fb4b..ccc7991d2 100644 --- a/blockbase/sass/blocks/_search.scss +++ b/blockbase/sass/blocks/_search.scss @@ -1,12 +1,14 @@ -@import 'button-mixins'; +@import "button-mixins"; .wp-block-search { &.wp-block-search__button-inside { - .wp-block-search__inside-wrapper{ + + .wp-block-search__inside-wrapper { padding: var(--wp--custom--form--border--width); border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color); border-radius: var(--wp--custom--form--border--radius); + .wp-block-search__input { padding: 0 var(--wp--custom--form--padding); } @@ -20,14 +22,16 @@ &.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button, .wp-block-search__button { - @include button-main-styles; + @include button-hover-styles; + &.has-icon { line-height: 0; } } .wp-block-search__input { + &::placeholder { color: var(--wp--custom--form--color--text); opacity: 0.66; @@ -35,10 +39,11 @@ } /* Block Styles */ - &.is-style-small-search{ - --wp--custom--button--typography--font-size: calc( 0.8 * var(--wp--preset--font-size--small)); + &.is-style-small-search { + --wp--custom--button--typography--font-size: calc(0.8 * var(--wp--preset--font-size--small)); + .wp-block-search__input { - padding: calc( 0.5 * var(--wp--custom--form--padding) ); + padding: calc(0.5 * var(--wp--custom--form--padding)); } } } diff --git a/blockbase/style.css b/blockbase/style.css index b348985d3..06b9ef8df 100644 --- a/blockbase/style.css +++ b/blockbase/style.css @@ -4,8 +4,8 @@ Theme URI: https://wordpress.com/theme/blockbase Author: Automattic Author URI: https://automattic.com/ Description: Blockbase is a simple theme that supports full-site editing. It comes with a set of minimal templates and design settings that can be manipulated through Global Styles. Use it to build something beautiful. -Requires at least: 5.8 -Tested up to: 5.9 +Requires at least: 6.1 +Tested up to: 6.1 Requires PHP: 5.7 Version: 3.0.8 License: GNU General Public License v2 or later diff --git a/blockbase/theme.json b/blockbase/theme.json index 3d4a5e546..5010804c7 100644 --- a/blockbase/theme.json +++ b/blockbase/theme.json @@ -640,6 +640,17 @@ "lineHeight": "var(--wp--custom--post-comment--typography--line-height)" } }, + "core/file": { + "elements": { + "button": { + ":hover": { + "typography": { + "textDecoration": "none" + } + } + } + } + }, "core/gallery": { "spacing": { "margin": {