Button Block: Set proper typography for inner elements (WordPress#68023)

Fixes WordPress#64662. The current typography does not work correctly with the given Core Button block styles. This fix forces inner elements to inherit the styles with the exception of `writingMode` which is set on the block wrapper. Co-authored-by: shimotmk <[email protected]> Co-authored-by: ramonjd <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: talldan <[email protected]>
himanshupathak95 · Dec 31, 2024 · e5dca54 · e5dca54
1 parent 3c716cf
commit e5dca54
Show file tree

Hide file tree

Showing 10 changed files with 404 additions and 5 deletions.
diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
@@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';
 export { useEditorWrapperStyles } from './use-editor-wrapper-styles';
+export { getTypographyClassesAndStyles } from './use-typography-props';
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
@@ -85,6 +85,16 @@
 			}
 		},
 		"typography": {
+			"__experimentalSkipSerialization": [
+				"fontSize",
+				"lineHeight",
+				"fontFamily",
+				"fontWeight",
+				"fontStyle",
+				"textTransform",
+				"textDecoration",
+				"letterSpacing"
+			],
 			"fontSize": true,
 			"lineHeight": true,
 			"__experimentalFontFamily": true,
@@ -122,7 +132,6 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button .wp-block-button__link",
 		"interactivity": {
 			"clientNavigation": true
 		}
@@ -132,5 +141,11 @@
 		{ "name": "outline", "label": "Outline" }
 	],
 	"editorStyle": "wp-block-button-editor",
-	"style": "wp-block-button"
+	"style": "wp-block-button",
+	"selectors": {
+		"root": ".wp-block-button .wp-block-button__link",
+		"typography": {
+			"writingMode": ".wp-block-button"
+		}
+	}
 }
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
@@ -14,6 +14,8 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 
@@ -132,6 +134,192 @@ const blockAttributes = {
 	},
 };
 
+const v12 = {
+	attributes: {
+		tagName: {
+			type: 'string',
+			enum: [ 'a', 'button' ],
+			default: 'a',
+		},
+		type: {
+			type: 'string',
+			default: 'button',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a,button',
+			attribute: 'title',
+			role: 'content',
+		},
+		text: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'a,button',
+			role: 'content',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+			role: 'content',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalWritingMode: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		shadow: {
+			__experimentalSkipSerialization: true,
+		},
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-button__link',
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	save( { attributes, className } ) {
+		const {
+			tagName,
+			type,
+			textAlign,
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		const TagName = tagName || 'a';
+		const isButtonTag = 'button' === TagName;
+		const buttonType = type || 'button';
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const shadowProps = getShadowClassesAndStyles( attributes );
+		const buttonClasses = clsx(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			{
+				[ `has-text-align-${ textAlign }` ]: textAlign,
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+			},
+			__experimentalGetElementClassName( 'button' )
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+			...shadowProps.style,
+		};
+
+		// The use of a `title` attribute here is soft-deprecated, but still applied
+		// if it had already been assigned, for the sake of backward-compatibility.
+		// A title will no longer be assigned for new or updated button block links.
+
+		const wrapperClasses = clsx( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName={ TagName }
+					type={ isButtonTag ? buttonType : null }
+					className={ buttonClasses }
+					href={ isButtonTag ? null : url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ isButtonTag ? null : linkTarget }
+					rel={ isButtonTag ? null : rel }
+				/>
+			</div>
+		);
+	},
+};
+
 const v11 = {
 	attributes: {
 		url: {
@@ -399,6 +587,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v12,
 	v11,
 	v10,
 	{

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -39,6 +39,8 @@ import {
 	__experimentalGetElementClassName,
 	store as blockEditorStore,
 	useBlockEditingMode,
+	getTypographyClassesAndStyles as useTypographyProps,
+	useSettings,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -266,14 +268,26 @@ function ButtonEdit( props ) {
 		[ context, isSelected, metadata?.bindings?.url ]
 	);
 
+	const [ fluidTypographySettings, layout ] = useSettings(
+		'typography.fluid',
+		'layout'
+	);
+	const typographyProps = useTypographyProps( attributes, {
+		typography: {
+			fluid: fluidTypographySettings,
+		},
+		layout: {
+			wideSize: layout?.wideSize,
+		},
+	} );
+
 	return (
 		<>
 			<div
 				{ ...blockProps }
 				className={ clsx( blockProps.className, {
 					[ `has-custom-width wp-block-button__width-${ width }` ]:
 						width,
-					[ `has-custom-font-size` ]: blockProps.style.fontSize,
 				} ) }
 			>
 				<RichText
@@ -292,11 +306,14 @@ function ButtonEdit( props ) {
 						'wp-block-button__link',
 						colorProps.className,
 						borderProps.className,
+						typographyProps.className,
 						{
 							[ `has-text-align-${ textAlign }` ]: textAlign,
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
+							[ `has-custom-font-size` ]:
+								blockProps.style.fontSize,
 						},
 						__experimentalGetElementClassName( 'button' )
 					) }
@@ -305,6 +322,8 @@ function ButtonEdit( props ) {
 						...colorProps.style,
 						...spacingProps.style,
 						...shadowProps.style,
+						...typographyProps.style,
+						writingMode: undefined,
 					} }
 					onReplace={ onReplace }
 					onMerge={ mergeBlocks }

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -14,6 +14,7 @@ import {
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	__experimentalGetElementClassName,
+	getTypographyClassesAndStyles,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -38,15 +39,18 @@ export default function save( { attributes, className } ) {
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
+	const typographyProps = getTypographyClassesAndStyles( attributes );
 	const buttonClasses = clsx(
 		'wp-block-button__link',
 		colorProps.className,
 		borderProps.className,
+		typographyProps.className,
 		{
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 		},
 		__experimentalGetElementClassName( 'button' )
 	);
@@ -55,6 +59,8 @@ export default function save( { attributes, className } ) {
 		...colorProps.style,
 		...spacingProps.style,
 		...shadowProps.style,
+		...typographyProps.style,
+		writingMode: undefined,
 	};
 
 	// The use of a `title` attribute here is soft-deprecated, but still applied
@@ -63,7 +69,6 @@ export default function save( { attributes, className } ) {
 
 	const wrapperClasses = clsx( className, {
 		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
-		[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
 	} );
 
 	return (

diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"fontFamily":"cambria-georgia"} -->
-<div class="wp-block-button has-cambria-georgia-font-family"><a class="wp-block-button__link wp-element-button">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link has-cambria-georgia-font-family wp-element-button">My button</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.html
@@ -0,0 +1,15 @@
+<!-- wp:button {"fontSize":"xx-large"} -->
+<div class="wp-block-button has-custom-font-size has-xx-large-font-size"><a class="wp-block-button__link wp-element-button">My button 1</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"style":{"typography":{"fontStyle":"normal","fontWeight":"800"}}} -->
+<div class="wp-block-button" style="font-style:normal;font-weight:800"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"style":{"typography":{"letterSpacing":"39px"}}} -->
+<div class="wp-block-button" style="letter-spacing:39px"><a class="wp-block-button__link wp-element-button">My button 3</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"tagName":"button","style":{"typography":{"letterSpacing":"39px"}}} -->
+<div class="wp-block-button" style="letter-spacing:39px"><button type="button" class="wp-block-button__link wp-element-button">My button 4</button></div>
+<!-- /wp:button -->