release: fixes

- Fixed Button Group block - Appearance, Letter case, and Line height options are now working
- Fixed issue where some characters were not supported in the category of the posts block
- Fixed typo on the default label of the consent checkbox

inc/class-registration.php

@@ -271,7 +271,7 @@ public function enqueue_block_editor_assets() {
 					[
 						'public'              => true,
 						'exclude_from_search' => false,
-					] 
+					]
 				),
 				'rootUrl'                 => get_site_url(),
 				'restRoot'                => get_rest_url( null, 'otter/v1' ),
@@ -532,7 +532,7 @@ function() {
 						'invalid-email'        => __( 'The email address is invalid!', 'otter-blocks' ),
 						'already-registered'   => __( 'The email was already registered!', 'otter-blocks' ),
 						'try-again'            => __( 'Error. Something is wrong with the server! Try again later.', 'otter-blocks' ),
-						'privacy'              => __( 'I have read and agreed the privacy statement.', 'otter-blocks' ),
+						'privacy'              => __( 'I have read and agree to the privacy statement.', 'otter-blocks' ),
 						'too-many-files'       => __( 'Too many files loaded. Maximum is: ', 'otter-blocks' ),
 						'big-file'             => __( 'File size is to big. The limit is: ', 'otter-blocks' ),
 						'invalid-file'         => __( 'Invalid files type. The submitted files could not be processed.', 'otter-blocks' ),

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/blocks/form/edit.js

@@ -1013,7 +1013,7 @@ const Edit = ({
 									<div className="otter-form-consent">
 										<input id="o-consent" name="o-consent" type="checkbox" />
 										<label htmlFor="o-consent">
-											{ __( 'I have read and agreed the privacy statement.', 'otter-blocks' ) }
+											{ __( 'I have read and agree to the privacy statement.', 'otter-blocks' ) }
 										</label>
 									</div>
 								) }

src/blocks/blocks/posts/components/layout/index.js

@@ -104,7 +104,7 @@ const Layout = ({
 
 export const PostsCategory = ({ attributes, element, category, categoriesList }) => {
 	if ( undefined !== category && ( attributes.displayCategory && categoriesList ) ) {
-		return <span key={ element } className="o-posts-grid-post-category">{ category.name }</span>;
+		return <span key={ element } className="o-posts-grid-post-category">{ unescapeHTML( category.name ) }</span>;
 	}
 	return '';
 };

src/blocks/frontend/form/index.js

@@ -535,7 +535,7 @@ const renderConsentCheckbox = ( form ) => {
 	input.id = 'o-consent';
 
 	const label = document.createElement( 'label' );
-	label.innerHTML = window?.themeisleGutenbergForm?.messages?.privacy || 'I have read and agreed the privacy statement.';
+	label.innerHTML = window?.themeisleGutenbergForm?.messages?.privacy || 'I have read and agree to the privacy statement.';
 	label.htmlFor = 'o-consent';
 
 	inputContainer.appendChild( input );

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' });
 }