beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cleanup buttons css (#6714)

Browse source 
* 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 <maggie.cabrera@automattic.com>
Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
This commit is contained in:
Madhu Dollu 2022-11-17 17:56:42 +05:30 committed by GitHub
parent 8f67c6274f
commit b6669adc92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 43 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
blockbase/assets/ponyfill.css
View file

@ -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 {

4
blockbase/readme.txt
View file

@ -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

18
blockbase/sass/blocks/_button-mixins.scss
View file

@ -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);

4
blockbase/sass/blocks/_file.scss
View file

@ -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;
}

17
blockbase/sass/blocks/_search.scss
View file

@ -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));
}
}
}

4
blockbase/style.css
View file

@ -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

11
blockbase/theme.json
View file

@ -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": {