Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try/cleanup buttons css #6714

Merged
merged 10 commits into from
Nov 17, 2022
Merged

Try/cleanup buttons css #6714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7715a4d
removed typography styles for buttons
MaggieCabrera May 26, 2022
8055866
removed typography styles for buttons
MaggieCabrera May 26, 2022
60eb1a4
remove more styles
MaggieCabrera May 26, 2022
c872c92
kept the mixins, but removed the includes
MaggieCabrera May 26, 2022
67504b5
remove padding include from button styles
MaggieCabrera May 26, 2022
0edd6cd
lint
MaggieCabrera May 26, 2022
511e29d
Bump min version for Blockbase to 6.1
mikachan Nov 3, 2022
87a0be4
rebuild ponyfill after rebase
madhusudhand Nov 7, 2022
38131e0
Update theme.json schema version
mikachan Nov 16, 2022
1d6b08f
Update file button hover status
mikachan Nov 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 3 additions & 43 deletions blockbase/assets/ponyfill.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions blockbase/readme.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
18 changes: 12 additions & 6 deletions blockbase/sass/blocks/_button-mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}
Expand All @@ -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 {
Expand Down Expand Up @@ -52,13 +55,15 @@
@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 {
//change the color variables to the hover equivalent
--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);
}
Expand All @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions blockbase/sass/blocks/_file.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 11 additions & 6 deletions blockbase/sass/blocks/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
Expand All @@ -20,25 +22,28 @@

&.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;
}
}

/* 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 changes: 2 additions & 2 deletions blockbase/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.7
License: GNU General Public License v2 or later
Expand Down
16 changes: 13 additions & 3 deletions blockbase/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"$schema": "https://json.schemastore.org/theme-v1.json",
"version": 1,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"templateParts": [
{
"name": "header-centered",
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -672,7 +683,6 @@
},
"core/post-date": {
"color": {
"link": "var(--wp--custom--color--foreground)",
"text": "var(--wp--custom--color--foreground)"
},
"typography": {
Expand Down