Interactivity API: Allow "default" suffix values (#65815)

Fix an issue where "default" could not be used as "suffix" values in Interactivity API directives, for example in a directive like: data-wp-class--default="…" --- Co-authored-by: sirreal <[email protected]> Co-authored-by: michalczaplinski <[email protected]> Co-authored-by: gziolo <[email protected]>
WordPress · Oct 8, 2024 · 3ee7c74 · 3ee7c74
1 parent 43468fe
commit 3ee7c74
Show file tree

Hide file tree

Showing 13 changed files with 202 additions and 162 deletions.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php b/packages/e2e-tests/plugins/interactive-blocks/directive-class/render.php
@@ -59,17 +59,17 @@ class="foo bar baz"
 		data-testid="can toggle class when class attribute is missing"
 	></div>
 
-	<div data-wp-context='{ "falseValue": false }'>
+	<div data-wp-context='{ "value": false }'>
 		<div
 			class="foo"
-			data-wp-class--foo="context.falseValue"
+			data-wp-class--foo="context.value"
 			data-testid="can use context values"
 		></div>
 		<button
-			data-wp-on--click="actions.toggleContextFalseValue"
+			data-wp-on--click="actions.toggleContextValue"
 			data-testid="toggle context false value"
 		>
-			Toggle context falseValue
+			Toggle context value
 		</button>
 	</div>
 
@@ -83,4 +83,16 @@ class="foo"
 		data-testid="can use classes with several dashes"
 	></div>
 
+	<div data-wp-context='{ "value": false }'>
+		<div
+			data-wp-class--default="context.value"
+			data-testid="class name default"
+		></div>
+		<button
+			data-wp-on--click="actions.toggleContextValue"
+			data-testid="toggle class name default"
+		>
+			Toggle context val
+		</button>
+	</div>
 </div>
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-class/view.js
@@ -15,9 +15,9 @@ const { state } = store( 'directive-class', {
 		toggleFalseValue: () => {
 			state.falseValue = ! state.falseValue;
 		},
-		toggleContextFalseValue: () => {
+		toggleContextValue: () => {
 			const context = getContext();
-			context.falseValue = ! context.falseValue;
+			context.value = ! context.value;
 		},
 	},
 } );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-init/view.js
@@ -12,7 +12,7 @@ const { directive } = privateApis(
 directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
-		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
 		if ( ! evaluate( entry ) ) {
 			return null;
 		}

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js
@@ -12,7 +12,7 @@ const { directive } = privateApis(
 directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
-		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
 		if ( ! evaluate( entry ) ) {
 			return null;
 		}

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js
@@ -12,7 +12,7 @@ const { directive } = privateApis(
 directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
-		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
 		if ( ! evaluate( entry ) ) {
 			return null;
 		}

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-run/view.js
@@ -21,9 +21,7 @@ directive(
 		element,
 		evaluate,
 	} ) => {
-		const entry = showChildren.find(
-			( { suffix } ) => suffix === 'default'
-		);
+		const entry = showChildren.find( ( { suffix } ) => suffix === null );
 		return evaluate( entry )
 			? element
 			: cloneElement( element, { children: null } );

diff --git a/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js b/packages/e2e-tests/plugins/interactive-blocks/directive-watch/view.js
@@ -12,7 +12,7 @@ const { directive } = privateApis(
 directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
-		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
 		if ( ! evaluate( entry ) ) {
 			return null;
 		}

diff --git a/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js b/packages/e2e-tests/plugins/interactive-blocks/tovdom-islands/view.js
@@ -12,7 +12,7 @@ const { directive, h } = privateApis(
 directive(
 	'show-mock',
 	( { directives: { 'show-mock': showMock }, element, evaluate } ) => {
-		const entry = showMock.find( ( { suffix } ) => suffix === 'default' );
+		const entry = showMock.find( ( { suffix } ) => suffix === null );
 
 		if ( ! evaluate( entry ) ) {
 			element.props.children = h(

diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Bug Fixes
 
+-   Fix an issue where "default" could not be used as a directive suffix ([#65815](https://github.com/WordPress/gutenberg/pull/65815)).
 -   Correctly handle lazily added, deeply nested properties with `deepMerge()` ([#65465](https://github.com/WordPress/gutenberg/pull/65465)).
 
 ## 6.8.0 (2024-09-19)