Button block: Add Typography support (#30394)

* Button block: Add support for font size * Use block style for has-custom-font-size class * Add has-custom-font-size class to save
WordPress · Apr 7, 2021 · 6604dd3 · 6604dd3
1 parent e917cdb
commit 6604dd3
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 0 deletions.
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -65,7 +65,9 @@
 			"__experimentalSkipSerialization": true,
 			"gradients": true
 		},
+		"fontSize": true,
 		"reusable": false,
+		"__experimentalFontFamily": true,
 		"__experimentalSelector": ".wp-block-button__link"
 	},
 	"editorStyle": "wp-block-button-editor",

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -241,6 +241,7 @@ function ButtonEdit( props ) {
 				{ ...blockProps }
 				className={ classnames( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+					[ `has-custom-font-size` ]: blockProps.style.fontSize,
 				} ) }
 			>
 				<RichText

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -16,8 +16,10 @@ import getColorAndStyleProps from './color-props';
 export default function save( { attributes, className } ) {
 	const {
 		borderRadius,
+		fontSize,
 		linkTarget,
 		rel,
+		style,
 		text,
 		title,
 		url,
@@ -47,6 +49,7 @@ export default function save( { attributes, className } ) {
 
 	const wrapperClasses = classnames( className, {
 		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );
 
 	return (

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
@@ -43,6 +43,12 @@ $blocks-block__margin: 0.5em;
 		}
 	}
 
+	&.has-custom-font-size {
+		.wp-block-button__link {
+			font-size: inherit;
+		}
+	}
+
 	&.wp-block-button__width-25 {
 		width: calc(25% - #{ $blocks-block__margin });
 	}