diff --git a/dotcom-rendering/docs/contracts/001-commercial-selectors.md b/dotcom-rendering/docs/contracts/001-commercial-selectors.md index ca221e03321..06b1a105e13 100644 --- a/dotcom-rendering/docs/contracts/001-commercial-selectors.md +++ b/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. diff --git a/dotcom-rendering/index.d.ts b/dotcom-rendering/index.d.ts index c52794472a5..0097a27b696 100644 --- a/dotcom-rendering/index.d.ts +++ b/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; } } diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.island.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.island.tsx index 319856c95fb..3c584528adb 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.island.tsx +++ b/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);