Merge pull request #2233 from Codeinwp/fix/button-group-font

Fix Buton Group Font settings

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

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>

src/blocks/test/e2e/blocks/block-conditions.spec.js

@@ -5,20 +5,21 @@ import { test, expect } from '@wordpress/e2e-test-utils-playwright';
 import { tryLoginIn } from '../utils';
 
 test.describe( 'Block Conditions', () => {
-	test.beforeEach( async({ admin, requestUtils, page }) => {
-		await tryLoginIn( page, 'admin', 'password' );
+	test.beforeEach( async({ admin, page }) => {
+		await tryLoginIn( page );
 		await admin.createNewPost();
 	});
 
 	test.afterEach( async({ page }) => {
 
 		/**
-		 * Because some conditions require an user to be logged in, we need to log in the user after each test so that we do not break the next test.
+		 * Because some conditions require a user to be logged in,
+		 * we need to log in the user after each test so that we do not break the next test.
 		 */
-		await tryLoginIn( page, 'admin', 'password' );
+		await tryLoginIn( page );
 	});
 
-	test( 'check logged out users', async({ editor, page, admin, requestUtils }) => {
+	test( 'check logged out users', async({ editor, page }) => {
 		await editor.insertBlock({
 			name: 'core/image',
 			attributes: {
@@ -35,14 +36,15 @@ test.describe( 'Block Conditions', () => {
 
 		const postId = await editor.publishPost();
 
-		// Check the block for logged in users.
+		// Check the block for logged-in users.
 		await page.goto( `/?p=${postId}` );
 		await expect( page.locator( '#wp--skip-link--target img' ) ).toBeVisible();
 
-		// Check the block for logged out users.
+		// // Check the block for logged out users.
 		await page.getByRole( 'menuitem', { name: 'Howdy, admin' }).hover();
 		await page.waitForTimeout( 200 );
 		await page.getByRole( 'menuitem', { name: 'Log Out' }).click();
+
 		await page.goto( `/?p=${postId}` );
 		await expect( page.locator( '#wp--skip-link--target img' ) ).toBeHidden();
 	});

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, page }) => {
+		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.
+	});
+});

src/blocks/test/e2e/utils.js

@@ -69,9 +69,14 @@ export function deleteFile( filePath ) {
 	}
 }
 
-export async function tryLoginIn( page, username, password ) {
+export async function tryLoginIn( page, username = 'admin', password = 'password' ) {
 	await page.goto( '/wp-login.php' );
 	await page.fill( 'input[name="log"]', username );
 	await page.fill( 'input[name="pwd"]', password );
+	await page.check( 'input[name="rememberme"]' );
 	await page.click( 'input[name="wp-submit"]' );
+
+	// Save the context since tests are isolated.
+	// So we need to save the auth state to keep the user logged in so that they can be used in the next test.
+	await page.context().storageState({ path: 'artifacts/storage-states/admin.json' });
 }