release: fixes

- fixes experimental blocks interactivity state management

Author: abaicus

inc/plugins/class-atomic-wind-blocks.php

@@ -751,9 +751,12 @@ public function render_state_attrs( $block_content, $block ) {
 
 		$has_state = false;
 
-		$show_if = isset( $block['attrs']['showIf'] ) ? $block['attrs']['showIf'] : '';
-		$hide_if = isset( $block['attrs']['hideIf'] ) ? $block['attrs']['hideIf'] : '';
-		$trigger = isset( $block['attrs']['stateTrigger'] ) ? $block['attrs']['stateTrigger'] : '';
+		$show_if       = isset( $block['attrs']['showIf'] ) ? $block['attrs']['showIf'] : '';
+		$hide_if       = isset( $block['attrs']['hideIf'] ) ? $block['attrs']['hideIf'] : '';
+		$trigger       = isset( $block['attrs']['stateTrigger'] ) ? $block['attrs']['stateTrigger'] : '';
+		$state_action  = isset( $block['attrs']['stateAction'] ) ? $block['attrs']['stateAction'] : 'toggle';
+		$state_value   = isset( $block['attrs']['stateValue'] ) ? $block['attrs']['stateValue'] : '';
+		$state_default = ! empty( $block['attrs']['stateDefault'] );
 
 		if ( $show_if || $hide_if || $trigger ) {
 			$has_state = true;
@@ -772,12 +775,24 @@ public function render_state_attrs( $block_content, $block ) {
 		if ( $hide_if ) {
 			$attrs .= ' data-hide-if="' . esc_attr( $hide_if ) . '"';
 		}
+		if ( $trigger ) {
+			$attrs .= ' data-state-trigger="' . esc_attr( $trigger ) . '"';
+			$attrs .= ' data-state-action="' . esc_attr( $state_action ) . '"';
 
-		if ( ! $attrs || false !== strpos( $block_content, 'data-show-if' ) || false !== strpos( $block_content, 'data-hide-if' ) ) {
+			if ( 'set' === $state_action && $state_value ) {
+				$attrs .= ' data-state-value="' . esc_attr( $state_value ) . '"';
+			}
+
+			if ( $state_default ) {
+				$attrs .= ' data-state-default';
+			}
+		}
+
+		if ( ! $attrs || false !== strpos( $block_content, 'data-show-if' ) || false !== strpos( $block_content, 'data-hide-if' ) || false !== strpos( $block_content, 'data-state-trigger' ) ) {
 			return $block_content;
 		}
 
-		return preg_replace( '/^(<[a-zA-Z][a-zA-Z0-9]*)\b/', '$1' . $attrs, $block_content, 1 );
+		return preg_replace( '/^(\s*<[a-zA-Z][a-zA-Z0-9]*)\b/', '$1' . $attrs, $block_content, 1 );
 	}
 
 	/**

src/atomic-wind/states/index.js

@@ -216,7 +216,7 @@ addFilter(
 	'blocks.getSaveContent.extraProps',
 	'atomic-wind/state-save-props',
 	( extraProps, blockType, attributes ) => {
-		if ( blockType.category !== 'otter-blocks' ) {
+		if ( blockType.category !== 'atomic-wind' ) {
 			return extraProps;
 		}
 

tests/test-atomic-wind-blocks.php

@@ -243,12 +243,92 @@ public function test_state_injects_both_show_and_hide() {
 		$this->assertStringContainsString( 'data-hide-if="disabled"', $result );
 	}
 
-	public function test_state_trigger_only_does_not_inject_visibility_attrs() {
+	public function test_state_trigger_injects_trigger_attrs_not_visibility() {
 		$block   = $this->make_block( 'atomic-wind/text', array( 'stateTrigger' => 'tabs' ) );
 		$content = '<p class="wp-block">Trigger</p>';
 
 		$result = $this->instance->render_state_attrs( $content, $block );
 
+		$this->assertStringContainsString( 'data-state-trigger="tabs"', $result );
+		$this->assertStringContainsString( 'data-state-action="toggle"', $result );
+		$this->assertStringNotContainsString( 'data-show-if', $result );
+		$this->assertStringNotContainsString( 'data-hide-if', $result );
+	}
+
+	public function test_state_trigger_set_action_injects_value() {
+		$block   = $this->make_block( 'atomic-wind/link', array(
+			'stateTrigger' => 'season',
+			'stateAction'  => 'set',
+			'stateValue'   => 'spring',
+		) );
+		$content = '<a class="wp-block">Spring</a>';
+
+		$result = $this->instance->render_state_attrs( $content, $block );
+
+		$this->assertStringContainsString( 'data-state-trigger="season"', $result );
+		$this->assertStringContainsString( 'data-state-action="set"', $result );
+		$this->assertStringContainsString( 'data-state-value="spring"', $result );
+	}
+
+	public function test_state_trigger_toggle_omits_value() {
+		$block   = $this->make_block( 'atomic-wind/text', array(
+			'stateTrigger' => 'panel',
+			'stateAction'  => 'toggle',
+		) );
+		$content = '<p class="wp-block">Toggle</p>';
+
+		$result = $this->instance->render_state_attrs( $content, $block );
+
+		$this->assertStringContainsString( 'data-state-action="toggle"', $result );
+		$this->assertStringNotContainsString( 'data-state-value', $result );
+	}
+
+	public function test_state_trigger_default_attr() {
+		$block   = $this->make_block( 'atomic-wind/link', array(
+			'stateTrigger' => 'season',
+			'stateAction'  => 'set',
+			'stateValue'   => 'all',
+			'stateDefault' => true,
+		) );
+		$content = '<a class="wp-block">All</a>';
+
+		$result = $this->instance->render_state_attrs( $content, $block );
+
+		$this->assertStringContainsString( 'data-state-default', $result );
+	}
+
+	public function test_state_handles_leading_whitespace() {
+		$block   = $this->make_block( 'atomic-wind/box', array( 'showIf' => 'active' ) );
+		$content = "\n<div class=\"wp-block\">Content</div>";
+
+		$result = $this->instance->render_state_attrs( $content, $block );
+
+		$this->assertStringContainsString( 'data-show-if="active"', $result );
+	}
+
+	public function test_state_trigger_value_escapes_xss() {
+		$block   = $this->make_block( 'atomic-wind/link', array(
+			'stateTrigger' => 'x',
+			'stateAction'  => 'set',
+			'stateValue'   => '"><script>alert(1)</script>',
+		) );
+		$content = '<a class="wp-block">Link</a>';
+
+		$result = $this->instance->render_state_attrs( $content, $block );
+
+		$this->assertStringNotContainsString( '<script>', $result );
+	}
+
+	public function test_state_skips_trigger_when_already_present() {
+		$block   = $this->make_block( 'atomic-wind/link', array(
+			'stateTrigger' => 'tabs',
+			'stateAction'  => 'set',
+			'stateValue'   => 'one',
+		) );
+		$content = '<a data-state-trigger="tabs" data-state-action="set" data-state-value="one" class="wp-block">Tab</a>';
+
+		$result = $this->instance->render_state_attrs( $content, $block );
+
 		$this->assertSame( $content, $result );
 	}