fix: button group font settings

Codeinwp · Jun 19, 2024 · 5fabe98 · 5fabe98
1 parent 4232d04
commit 5fabe98
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/inc/css/blocks/class-button-group-css.php b/inc/css/blocks/class-button-group-css.php
@@ -157,7 +157,7 @@ public function render_css( $block ) {
 						'property' => 'line-height',
 						'value'    => 'lineHeight',
 						'format'   => function( $value, $attrs ) {
-							return is_numeric( $value ) ? $value . 'px' : $value;
+							return ! is_string( $value ) && is_numeric( $value ) ? $value . 'px' : $value;
 						},
 						'hasSync'  => 'gr-btn-font-height',
 					),
@@ -188,7 +188,7 @@ public function render_css( $block ) {
 
 	/**
 	 * Generate Button Group Global CSS
-	 * 
+	 *
 	 * @return string|void
 	 * @since 2.2.3
 	 * @access public

diff --git a/src/blocks/blocks/button-group/group/inspector.js b/src/blocks/blocks/button-group/group/inspector.js
@@ -412,11 +412,11 @@ const Inspector = ({
 										},
 										{
 											label: __( 'Appearance', 'otter-blocks' ),
-											value: 'fontVariant'
+											value: 'fontStyle'
 										},
 										{
 											label: __( 'Letter Case', 'otter-blocks' ),
-											value: 'fontStyle'
+											value: 'textTransform'
 										},
 										{
 											label: __( 'Line Height', 'otter-blocks' ),
@@ -438,26 +438,26 @@ const Inspector = ({
 										fontSize: attributes.fontSize,
 										fontFamily: attributes.fontFamily,
 										lineHeight: attributes.lineHeight,
-										appearance: attributes.fontVariant,
-										letterCase: attributes.fontStyle
+										appearance: attributes.fontStyle,
+										letterCase: attributes.textTransform
 									}}
 
 									onChange={ values => {
 										setAttributes({
 											fontSize: values.fontSize,
 											fontFamily: values.fontFamily,
 											lineHeight: values.lineHeight,
-											fontVariant: values.appearance,
-											fontStyle: values.letterCase
+											fontStyle: values.appearance,
+											textTransform: values.letterCase
 										});
 									} }
 
 									showAsDisable={{
 										fontSize: attributes.isSynced?.includes( 'fontSize' ),
 										fontFamily: attributes.isSynced?.includes( 'fontFamily' ),
-										appearance: attributes.isSynced?.includes( 'fontVariant' ),
+										appearance: attributes.isSynced?.includes( 'fontStyle' ),
 										lineHeight: attributes.isSynced?.includes( 'lineHeight' ),
-										letterCase: attributes.isSynced?.includes( 'fontStyle' )
+										letterCase: attributes.isSynced?.includes( 'textTransform' )
 									}}
 								/>
 							</PanelBody>

diff --git a/src/blocks/test/e2e/blocks/button-group.spec.js b/src/blocks/test/e2e/blocks/button-group.spec.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Button Group', () => {
+	test.beforeEach( async({ admin }) => {
+		await admin.createNewPost();
+	});
+
+	test( 'check font settings', async({ editor, page }) => {
+		const attributes = {
+			fontSize: '28px',
+			fontFamily: 'Abel',
+			textTransform: 'lowercase',
+			fontStyle: 'italic',
+			lineHeight: '2.5'
+		};
+
+		await editor.insertBlock({
+			name: 'themeisle-blocks/button-group',
+			attributes,
+			innerBlocks: [
+				{
+					name: 'themeisle-blocks/button',
+					attributes: {
+						text: 'Button 1'
+					}
+				}
+			]
+		});
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${postId}` );
+
+		// Check CSS font properties
+		const btn = page.locator( 'a' ).filter({ hasText: 'Button 1' });
+		await expect( btn ).toHaveCSS( 'font-size', attributes.fontSize );
+		await expect( btn ).toHaveCSS( 'font-family', attributes.fontFamily );
+		await expect( btn ).toHaveCSS( 'text-transform', attributes.textTransform );
+		await expect( btn ).toHaveCSS( 'font-style', attributes.fontStyle );
+		await expect( btn ).toHaveCSS( 'line-height', `${parseInt( attributes.fontSize ) * parseFloat( attributes.lineHeight )}px` ); // Playwright use computed line-height based on font-size.
+	});
+});