Merge branch 'main' into mob/inline-product-card

Author: charleycampbell

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -881,10 +881,14 @@
                 "_type": {
                     "type": "string",
                     "const": "model.dotcomrendering.pageElements.AdPlaceholderBlockElement"
+                },
+                "adPosition": {
+                    "type": "number"
                 }
             },
             "required": [
-                "_type"
+                "_type",
+                "adPosition"
             ]
         },
         "AudioAtomBlockElement": {

dotcom-rendering/src/layouts/GalleryLayout.tsx

@@ -237,7 +237,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 					const isImage =
 						element._type ===
 						'model.dotcomrendering.pageElements.ImageBlockElement';
-					const shouldShowAds =
+					const isAdPlaceholder =
 						element._type ===
 						'model.dotcomrendering.pageElements.AdPlaceholderBlockElement';
 					return (
@@ -251,7 +251,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 									renderingTarget={props.renderingTarget}
 								/>
 							)}
-							{shouldShowAds && renderAds && (
+							{isAdPlaceholder && renderAds && (
 								<>
 									{isWeb && (
 										<div css={galleryItemAdvertStyles}>
@@ -263,13 +263,17 @@ export const GalleryLayout = (props: WebProps | AppProps) => {
 												<Hide until="tablet">
 													<DesktopAdSlot
 														renderAds={renderAds}
-														adSlotIndex={index}
+														adSlotIndex={
+															element.adPosition
+														}
 													/>
 												</Hide>
 												<Hide from="tablet">
 													<MobileAdSlot
 														renderAds={renderAds}
-														adSlotIndex={index}
+														adSlotIndex={
+															element.adPosition
+														}
 													/>
 												</Hide>
 											</div>

dotcom-rendering/src/lib/adStyles.ts

@@ -71,6 +71,9 @@ const adSlotStyles = css`
 			/* iframes are inline by default, so we need to set them to block to avoid the same whitespace quirk mentioned in the above comment */
 			iframe {
 				display: block;
+				/* Centre the content within this element */
+				margin-left: auto;
+				margin-right: auto;
 			}
 		}
 

dotcom-rendering/src/model/block-schema.json

@@ -370,10 +370,14 @@
                 "_type": {
                     "type": "string",
                     "const": "model.dotcomrendering.pageElements.AdPlaceholderBlockElement"
+                },
+                "adPosition": {
+                    "type": "number"
                 }
             },
             "required": [
-                "_type"
+                "_type",
+                "adPosition"
             ]
         },
         "AudioAtomBlockElement": {