Interactivity API: Allow multiple event handlers for the same type wi…

…th `data-wp-on-document` and `data-wp-on-window`. (#61009)

* Allow multiple handlers

* Add test in window events

* Move to only one pass

* Fix event deletion

* Add changelog and rename var

Co-authored-by: cbravobernal <[email protected]>
Co-authored-by: sirreal <[email protected]>
Co-authored-by: DAreRodz <[email protected]>

packages/e2e-tests/plugins/interactive-blocks/directive-on-document/render.php

@@ -24,4 +24,8 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
+	<div data-wp-on-document--keydown="actions.keydownHandler" data-wp-on-document--keydown--second="actions.keydownSecondHandler">
+		<p data-wp-text="state.keydownHandler" data-testid="keydownHandler">no</p>
+		<p data-wp-text="state.keydownSecondHandler" data-testid="keydownSecondHandler">no</p>
+	</div>
 </div>

packages/e2e-tests/plugins/interactive-blocks/directive-on-document/view.js

@@ -25,6 +25,8 @@ const { state } = store( 'directive-on-document', {
 		counter: 0,
 		isVisible: true,
 		isEventAttached: 'no',
+		keydownHandler: 'no',
+		keydownSecondHandler: 'no',
 	},
 	callbacks: {
 		keydownHandler() {
@@ -39,5 +41,11 @@ const { state } = store( 'directive-on-document', {
 			state.isEventAttached = 'no';
 			state.isVisible = ! state.isVisible;
 		},
+		keydownHandler: () => {
+			state.keydownHandler = 'yes';
+		},
+		keydownSecondHandler: () => {
+			state.keydownSecondHandler = 'yes';
+		}
 	}
 } );

packages/e2e-tests/plugins/interactive-blocks/directive-on-window/render.php

@@ -21,4 +21,8 @@
 			<p data-wp-text="state.counter" data-testid="counter">0</p>
 		</div>
 	</div>
+	<div data-wp-on-window--resize="actions.resizeHandler" data-wp-on-window--resize--second="actions.resizeSecondHandler">
+		<p data-wp-text="state.resizeHandler" data-testid="resizeHandler">no</p>
+		<p data-wp-text="state.resizeSecondHandler" data-testid="resizeSecondHandler">no</p>
+	</div>
 </div>

packages/e2e-tests/plugins/interactive-blocks/directive-on-window/view.js

@@ -25,6 +25,8 @@ const { state } = store( 'directive-on-window', {
 		counter: 0,
 		isVisible: true,
 		isEventAttached: 'no',
+		resizeHandler: 'no',
+		resizeSecondHandler: 'no',
 	},
 	callbacks: {
 		resizeHandler() {
@@ -39,5 +41,11 @@ const { state } = store( 'directive-on-window', {
 			state.isEventAttached = 'no';
 			state.isVisible = ! state.isVisible;
 		},
+		resizeHandler: () => {
+			state.resizeHandler = 'yes';
+		},
+		resizeSecondHandler: () => {
+			state.resizeSecondHandler = 'yes';
+		}
 	}
 } );

packages/interactivity/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+-	Allow multiple event handlers for the same type with `data-wp-on-document` and `data-wp-on-window`. ([#61009](https://github.com/WordPress/gutenberg/pull/61009))
+
 ## 5.6.0 (2024-05-02)
 
 ## 5.5.0 (2024-04-19)

packages/interactivity/src/directives.js

@@ -205,21 +205,21 @@ const cssStringToObject = ( val ) => {
  * @param {string} type 'window' or 'document'
  * @return {void}
  */
-const getGlobalEventDirective =
-	( type ) =>
-	( { directives, evaluate } ) => {
+const getGlobalEventDirective = ( type ) => {
+	return ( { directives, evaluate } ) => {
 		directives[ `on-${ type }` ]
 			.filter( ( { suffix } ) => suffix !== 'default' )
 			.forEach( ( entry ) => {
+				const eventName = entry.suffix.split( '--', 1 )[ 0 ];
 				useInit( () => {
 					const cb = ( event ) => evaluate( entry, event );
 					const globalVar = type === 'window' ? window : document;
-					globalVar.addEventListener( entry.suffix, cb );
-					return () =>
-						globalVar.removeEventListener( entry.suffix, cb );
+					globalVar.addEventListener( eventName, cb );
+					return () => globalVar.removeEventListener( eventName, cb );
 				}, [] );
 			} );
 	};
+};
 
 export default () => {
 	// data-wp-context

test/e2e/specs/interactivity/directive-on-document.spec.ts

@@ -65,4 +65,25 @@ test.describe( 'data-wp-on-document', () => {
 		await page.keyboard.press( 'ArrowDown' );
 		await expect( counter ).toHaveText( '2' );
 	} );
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const keydownHandler = page.getByTestId( 'keydownHandler' );
+		const keydownSecondHandler = page.getByTestId( 'keydownSecondHandler' );
+
+		// Initial value.
+		await expect( keydownHandler ).toHaveText( 'no' );
+		await expect( keydownSecondHandler ).toHaveText( 'no' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.keyboard.press( 'ArrowDown' );
+		await expect( keydownHandler ).toHaveText( 'yes' );
+		await expect( keydownSecondHandler ).toHaveText( 'yes' );
+	} );
 } );

test/e2e/specs/interactivity/directive-on-window.spec.ts

@@ -65,4 +65,25 @@ test.describe( 'data-wp-on-window', () => {
 		await page.setViewportSize( { width: 200, height: 600 } );
 		await expect( counter ).toHaveText( '2' );
 	} );
+	test( 'should work with multiple event handlers on the same event type', async ( {
+		page,
+	} ) => {
+		const resizeHandler = page.getByTestId( 'resizeHandler' );
+		const resizeSecondHandler = page.getByTestId( 'resizeSecondHandler' );
+
+		// Initial value.
+		await expect( resizeHandler ).toHaveText( 'no' );
+		await expect( resizeSecondHandler ).toHaveText( 'no' );
+
+		// Make sure the event listener is attached.
+		await page
+			.getByTestId( 'isEventAttached' )
+			.filter( { hasText: 'yes' } )
+			.waitFor();
+
+		// This keyboard press should increase the counter.
+		await page.setViewportSize( { width: 600, height: 600 } );
+		await expect( resizeHandler ).toHaveText( 'yes' );
+		await expect( resizeSecondHandler ).toHaveText( 'yes' );
+	} );
 } );