From 6604dd34d877ad8fb6c3b21211384e6555d07e99 Mon Sep 17 00:00:00 2001
From: Luke Carbis <luke@carb.is>
Date: Thu, 8 Apr 2021 01:09:54 +1000
Subject: [PATCH] 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
---
 packages/block-library/src/button/block.json | 2 ++
 packages/block-library/src/button/edit.js    | 1 +
 packages/block-library/src/button/save.js    | 3 +++
 packages/block-library/src/button/style.scss | 6 ++++++
 4 files changed, 12 insertions(+)

diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index 9b33ee27d6c418..01097b424462fa 100644
--- 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
index b0fcc297d6b9ed..714554e2ffdc96 100644
--- 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
index 8a224cbc841121..9bb0435eb1eda9 100644
--- 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
index ba2a7c98bcf982..2e0c50205a1cb7 100644
--- 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 });
 	}