Skip to content

Commit

Permalink
Blockbase: update button styles
Browse files Browse the repository at this point in the history
  • Loading branch information
madhusudhand committed Apr 25, 2022
1 parent a6178d7 commit 37427bf
Show file tree
Hide file tree
Showing 6 changed files with 86 additions and 159 deletions.
81 changes: 0 additions & 81 deletions blockbase/assets/ponyfill.css

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

4 changes: 3 additions & 1 deletion blockbase/functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function blockbase_support() {
add_editor_style(
array(
'/assets/ponyfill.css',
'/style.css'
)
);

Expand Down Expand Up @@ -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' );
Expand Down
43 changes: 1 addition & 42 deletions blockbase/sass/blocks/_button.scss
Original file line number Diff line number Diff line change
@@ -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
40 changes: 10 additions & 30 deletions blockbase/sass/blocks/_buttons-outline-style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
47 changes: 47 additions & 0 deletions blockbase/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}


30 changes: 25 additions & 5 deletions blockbase/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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)",
Expand All @@ -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)"
}
}
},
Expand Down

0 comments on commit 37427bf

Please sign in to comment.