release: fixes

- Fixed issue of HTML code appearing on the front-end by allowing partial HTML tag rendering for Multiple Choice Label
- Fix fatal crash in Block Conditions when rendering condition is set to `false` 
- Fixed issue with multiple instances of Pattern Upsell appearing on the same page
- Updated internal dependencies

Author: vytisbulkevicius

composer.lock

@@ -26,7 +26,7 @@ class Block_Conditions {
 	 */
 	public function init() {
 		if ( get_option( 'themeisle_blocks_settings_block_conditions', true ) ) {
-			add_action( 'render_block', array( $this, 'render_blocks' ), 999, 2 );
+			add_filter( 'render_block', array( $this, 'render_blocks' ), 999, 2 );
 			add_action( 'wp_loaded', array( $this, 'add_attributes_to_blocks' ), 999 );
 		}
 	}
@@ -36,6 +36,8 @@ public function init() {
 	 *
 	 * @param string $block_content Content of block.
 	 * @param array  $block Block Attributes.
+	 * 
+	 * @return string
 	 *
 	 * @since   1.7.0
 	 * @access  public
@@ -46,12 +48,12 @@ public function render_blocks( $block_content, $block ) {
 			$display = $this->evaluate_condition_collection( $block['attrs']['otterConditions'] );
 
 			if ( false === $display ) {
-				return;
+				return '';
 			}
 
 			$enhanced_content = $this->should_add_hide_css_class( $this->get_hide_css_condition( $block['attrs']['otterConditions'] ), $block_content );
 
-			if ( false !== $enhanced_content ) {
+			if ( false !== $enhanced_content && is_string( $enhanced_content ) ) {
 				return $enhanced_content;
 			}
 		}

inc/plugins/class-block-conditions.php

@@ -89,7 +89,28 @@ public function render_field( $type, $label, $value, $name, $id, $checked = fals
 		$output = '<div class="o-form-multiple-choice-field">';
 
 		$output .= '<input type="' . esc_attr( $type ) . '" name="' . esc_attr( $name ) . '" id="' . esc_attr( $id ) . '" value="' . esc_attr( $value ) . '" ' . ( $is_required ? 'required' : '' ) . ( $checked ? ' checked' : '' ) . ' />';
-		$output .= '<label for="' . esc_attr( $id ) . '" class="o-form-choice-label">' . esc_html( $label ) . '</label>';
+		
+		$allowed_tags = array(
+			'a'      => array(
+				'href'   => true,
+				'target' => true,
+			),
+			'img'    => array(
+				'src'    => true,
+				'alt'    => true,
+				'width'  => true,
+				'height' => true,
+			),
+			'span'   => array(),
+			'em'     => array(),
+			'strong' => array(),
+			'i'      => array(),
+			'b'      => array(),
+		);
+		
+		$label = wp_kses( $label, $allowed_tags );
+
+		$output .= '<label for="' . esc_attr( $id ) . '" class="o-form-choice-label">' . $label . '</label>';
 
 		$output .= '</div>';
 

inc/render/class-form-multiple-choice.php

@@ -30,9 +30,9 @@ const MONTH_IN_MS = 60 * 60 * 1000 * 24 * 30;
 const edit = props => {
 	const { removeBlock } = useDispatch( 'core/block-editor' );
 
-	const isEditor = null !== document.querySelector( `#o-upsell-${ props.clientId }` );
-
 	useEffect( () => {
+		const isEditor = Boolean( document.querySelector( `#o-upsell-${ props.clientId }` ) );
+
 		if ( isEditor && undefined === window.themeisleGutenberg.hasPatternUpsell ) {
 			window.themeisleGutenberg.hasPatternUpsell = props.clientId;
 		}
@@ -50,7 +50,7 @@ const edit = props => {
 				removeBlock( props.clientId );
 			}
 		}
-	}, [ isEditor ]);
+	}, []);
 
 	return (
 		<div

src/blocks/plugins/upsell-block/index.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+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' );
+		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.
+		 */
+		await tryLoginIn( page, 'admin', 'password' );
+	});
+
+	test( 'check logged out users', async({ editor, page, admin, requestUtils }) => {
+		await editor.insertBlock({
+			name: 'core/image',
+			attributes: {
+				url: 'https://mllj2j8xvfl0.i.optimole.com/cb:jC7e.37109/w:794/h:397/q:mauto/dpr:2.0/f:best/https://themeisle.com/blog/wp-content/uploads/2021/01/How-to-Change-Font-in-WordPress-Theme.png',
+				otterConditions: [
+					[
+						{
+							type: 'loggedInUser'
+						}
+					]
+				]
+			}
+		});
+
+		const postId = await editor.publishPost();
+
+		// 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.
+		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/block-conditions.spec.js

@@ -68,3 +68,10 @@ export function deleteFile( filePath ) {
 		unlinkSync( filePath );
 	}
 }
+
+export async function tryLoginIn( page, username, password ) {
+	await page.goto( '/wp-login.php' );
+	await page.fill( 'input[name="log"]', username );
+	await page.fill( 'input[name="pwd"]', password );
+	await page.click( 'input[name="wp-submit"]' );
+}

src/blocks/test/e2e/utils.js

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Test Multiple Choice Field Block.
+ *
+ * @package otter-blocks
+ */
+
+use ThemeIsle\GutenbergBlocks\Render\Form_Multiple_Choice_Block;
+
+/**
+ * Class Test Multiple Choices Block
+ */
+class Test_Multiple_Choices_Block extends WP_UnitTestCase {
+
+    public function test_label_sanitization_render() {
+        $block_render = new Form_Multiple_Choice_Block();
+
+        $expected  = '<div class="o-form-multiple-choice-field">';
+        $expected .= '<input type="checkbox" name="otter-blocks" id="otter-blocks" value="otter-blocks"  />';
+        $expected .= '<label for="otter-blocks" class="o-form-choice-label">Option with <a href="www.example.com">link</a></label>';
+        $expected .= '</div>';
+
+        $output = $block_render->render_field( 'checkbox', 'Option with <a href="www.example.com">link</a>', 'otter-blocks', 'otter-blocks', 'otter-blocks' );
+
+        $this->assertEquals( $expected, $output );
+
+        $malicious_label = 'Option with <a href="www.example.com">link</a><script></script>';
+        $output = $block_render->render_field( 'checkbox', $malicious_label, 'otter-blocks', 'otter-blocks', 'otter-blocks' );
+
+        $this->assertEquals( $expected, $output );
+
+        $malicious_label = 'Option with <a href="www.example.com" onclick="alert(123)">link</a>';
+        $output = $block_render->render_field( 'checkbox', $malicious_label, 'otter-blocks', 'otter-blocks', 'otter-blocks' );
+
+        $this->assertEquals( $expected, $output );
+    }
+}