Add new spacefinder data attribute to allow disabling spacefinder

dotcom-rendering/docs/contracts/001-commercial-selectors.md

@@ -13,6 +13,7 @@ Furthermore, within the article body, we add the following attributes to certain
 
 - `data-spacefinder-role` which denotes the role of figures (e.g. rich-links). We add this to elements belonging to `Figure` and `InteractiveBlockComponent` components.
 - `data-spacefinder-type` the underlying element `_type`
+- `data-spacefinder-disabled` will disable Spacefinder for the article if added to the `article-body-commercial-selector` class
 
 These are elements spacefinder needs to know about when positioning adverts.
 

dotcom-rendering/index.d.ts

@@ -110,6 +110,19 @@ declare namespace JSX {
 		 * that it will use to find positions for ads.
 		 */
 		'data-spacefinder-type'?: import('./src/types/content').FEElement['_type'];
+
+		/**
+		 * Spacefinder Disabled
+		 *
+		 * [Spacefinder](https://github.com/guardian/commercial/blob/7866c914573cb6352b4076683b7906b87a70da72/docs/spacefinder/readme.md)
+		 * is a part of the commercial bundle that is used to find positions
+		 * for ad slots within articles.
+		 *
+		 * This attribute allows Spacefinder to be turned off for an article if it is added
+		 * to the article body root element. This is only intended for use with certain Interactive
+		 * articles which are not compatible with Spacefinder
+		 */
+		'data-spacefinder-disabled'?: string;
 	}
 }
 

dotcom-rendering/src/components/InteractiveBlockComponent.island.tsx

@@ -377,6 +377,11 @@ export const InteractiveBlockComponent = ({
 		const requiresDarkMode =
 			darkModeAvailable && prefersDarkScheme ? true : false;
 
+		// Manually disable spacefinder for testing!
+		window.document
+			.querySelector('.article-body-commercial-selector')
+			?.setAttribute('data-spacefinder-disabled', 'true');
+
 		if (url && scriptUrlIsBoot && placeholderLinkRef.current) {
 			// Prepare for graphic url dynamic updates
 			const graphicUrl = new URL(url);