Blockbase: move button padding styles from ponyfill to theme.json

Automattic · Apr 21, 2022 · a6178d7 · a6178d7
1 parent 70ee5b1
commit a6178d7
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css
diff --git a/blockbase/package-lock.json b/blockbase/package-lock.json
diff --git a/blockbase/sass/blocks/_button.scss b/blockbase/sass/blocks/_button.scss
@@ -1,24 +1,29 @@
-@import 'button-mixins';
+@import "button-mixins";
+
 /**
  * Button
  */
 
 /**
  * Block Options
  */
- .wp-block-button, .wp-block-button__link {
+.wp-block-button,
+.wp-block-button__link {
+
 	&.wp-block-button__link,
 	.wp-block-button__link {
+
 		@include button-hover-styles;
-		@include button-padding-styles;
 		text-decoration: none;
-		font-weight: var(--wp--custom--button--typography--font-weight);
 	}
+
 	&.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;
@@ -30,6 +35,7 @@
 // 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;
 	}

diff --git a/blockbase/theme.json b/blockbase/theme.json
@@ -401,7 +401,8 @@
 		"blocks": {
 			"core/button": {
 				"border": {
-					"radius": "var(--wp--custom--button--border--radius)"
+					"radius": "var(--wp--custom--button--border--radius)",
+					"width": "0"
 				},
 				"color": {
 					"background": "var(--wp--custom--button--color--background)",
@@ -412,6 +413,14 @@
 					"fontSize": "var(--wp--custom--button--typography--font-size)",
 					"fontWeight": "var(--wp--custom--button--typography--font-weight)",
 					"lineHeight": "var(--wp--custom--button--typography--line-height)"
+				},
+				"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) )"
+					}
 				}
 			},
 			"core/code": {