Allow merchandising slots to be full-width (#14936)

Author: Jakeii

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -13,6 +13,7 @@ import { Hide } from '@guardian/source/react-components';
 import type { FEArticle } from '../frontend/feArticle';
 import { labelBoxStyles, labelHeight, labelStyles } from '../lib/adStyles';
 import { ArticleDisplay } from '../lib/articleFormat';
+import { center as layoutCenterStyles } from '../lib/center';
 import { getZIndex } from '../lib/getZIndex';
 import { LABS_HEADER_HEIGHT } from '../lib/labs-constants';
 import { palette as schemedPalette } from '../palette';
@@ -166,6 +167,16 @@ const merchandisingAdContainerStyles = css`
 	}
 `;
 
+const allowFullWidthAdContainerStyles = css`
+	&.ad-slot--full-width {
+		width: 100%;
+		max-width: 100%;
+		.ad-slot {
+			max-width: 100%;
+		}
+	}
+`;
+
 const merchandisingAdStyles = css`
 	position: relative;
 	min-height: ${getMinHeight(adSizes.billboard.height, space[3])}px;
@@ -259,13 +270,6 @@ const frontsBannerAdContainerStyles = css`
 
 	/* Native templates require a width (or min-width) to be explicitly set */
 	width: ${breakpoints['wide']}px;
-	/* This is similar to fluid ads, except this class is applied using messenger */
-	&.ad-slot--full-width {
-		width: 100%;
-		.ad-slot {
-			max-width: 100%;
-		}
-	}
 `;
 
 const frontsBannerCollapseStyles = css`
@@ -673,7 +677,13 @@ export const AdSlot = ({
 		}
 		case 'merchandising-high': {
 			return (
-				<AdSlotWrapper css={merchandisingAdContainerStyles}>
+				<AdSlotWrapper
+					css={[
+						merchandisingAdContainerStyles,
+						layoutCenterStyles,
+						allowFullWidthAdContainerStyles,
+					]}
+				>
 					<div
 						id="dfp-ad--merchandising-high"
 						className={[
@@ -693,7 +703,13 @@ export const AdSlot = ({
 		}
 		case 'merchandising': {
 			return (
-				<AdSlotWrapper css={merchandisingAdContainerStyles}>
+				<AdSlotWrapper
+					css={[
+						merchandisingAdContainerStyles,
+						layoutCenterStyles,
+						allowFullWidthAdContainerStyles,
+					]}
+				>
 					<div
 						id="dfp-ad--merchandising"
 						className={[
@@ -720,6 +736,7 @@ export const AdSlot = ({
 					<AdSlotWrapper
 						css={[
 							frontsBannerAdContainerStyles,
+							allowFullWidthAdContainerStyles,
 							hasPageskin && frontsBannerCollapseStyles,
 						]}
 					>

dotcom-rendering/src/components/FrontsAdSlots.tsx

@@ -67,6 +67,7 @@ export const MerchandisingSlot = ({
 				padSides={false}
 				showTopBorder={false}
 				showSideBorders={false}
+				shouldCenter={false}
 				backgroundColour={themePalette('--article-section-background')}
 				element="aside"
 			>