Button/s: Add typography supports to button blocks (#43934)

Author: aaronrobertshaw

docs/reference-guides/core-blocks.md

@@ -50,7 +50,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu
 
 -	**Name:** core/button
 -	**Category:** design
--	**Supports:** align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize), ~~alignWide~~, ~~reusable~~
+-	**Supports:** align, anchor, color (background, gradients, text), spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~reusable~~
 -	**Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, text, textColor, title, url, width
 
 ## Buttons
@@ -59,7 +59,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
 
 -	**Name:** core/buttons
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, spacing (blockGap, margin)
+-	**Supports:** align (full, wide), anchor, spacing (blockGap, margin), typography (fontSize, lineHeight)
 -	**Attributes:** 
 
 ## Calendar

packages/block-library/src/button/block.json

@@ -68,8 +68,13 @@
 		},
 		"typography": {
 			"fontSize": true,
+			"lineHeight": true,
 			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

packages/block-library/src/button/editor.scss

@@ -75,3 +75,7 @@
 div[data-type="core/button"] {
 	display: table;
 }
+
+.editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
+	text-decoration: inherit;
+}

packages/block-library/src/button/style.scss

@@ -34,6 +34,10 @@ $blocks-block__margin: 0.5em;
 	padding: calc(0.667em + 2px) calc(1.333em + 2px);
 }
 
+.wp-block-button[style*="text-decoration"] .wp-block-button__link {
+	text-decoration: inherit;
+}
+
 // Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
 	&.has-custom-width {

packages/block-library/src/buttons/block.json

@@ -18,6 +18,19 @@
 				"blockGap": true
 			}
 		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
 		"__experimentalLayout": {
 			"allowSwitching": false,
 			"allowInheriting": false,

packages/block-library/src/buttons/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -30,8 +35,13 @@ const DEFAULT_BLOCK = {
 	],
 };
 
-function ButtonsEdit( { attributes: { layout = {} } } ) {
-	const blockProps = useBlockProps();
+function ButtonsEdit( { attributes, className } ) {
+	const { fontSize, layout = {}, style } = attributes;
+	const blockProps = useBlockProps( {
+		className: classnames( className, {
+			'has-custom-font-size': fontSize || style?.typography?.fontSize,
+		} ),
+	} );
 	const preferredStyle = useSelect( ( select ) => {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()

packages/block-library/src/buttons/editor.scss

@@ -54,6 +54,12 @@ $blocks-block__margin: 0.5em;
 			margin-bottom: 0;
 		}
 	}
+
+	.editor-styles-wrapper &.has-custom-font-size {
+		.wp-block-button__link {
+			font-size: inherit;
+		}
+	}
 }
 
 .wp-block[data-align="center"] > .wp-block-buttons {

packages/block-library/src/buttons/save.js

@@ -1,9 +1,20 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save() {
-	const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() );
+export default function save( { attributes, className } ) {
+	const { fontSize, style } = attributes;
+	const blockProps = useBlockProps.save( {
+		className: classnames( className, {
+			'has-custom-font-size': fontSize || style?.typography?.fontSize,
+		} ),
+	} );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <div { ...innerBlocksProps } />;
 }

packages/block-library/src/buttons/style.scss

@@ -69,6 +69,19 @@ $blocks-block__margin: 0.5em;
 		margin-right: auto;
 		width: 100%;
 	}
+
+	&[style*="text-decoration"] {
+		.wp-block-button,
+		.wp-block-button__link {
+			text-decoration: inherit;
+		}
+	}
+
+	&.has-custom-font-size {
+		.wp-block-button__link {
+			font-size: inherit;
+		}
+	}
 }
 
 // Legacy buttons that did not come in a wrapping container.