Style Book: fix comment output in styles (WordPress#66439)

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

packages/edit-site/src/components/style-book/constants.ts

@@ -143,6 +143,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 	},
 ];
 
+// Forming a "block formatting context" to prevent margin collapsing.
+// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+const ROOT_CONTAINER = `
+	.is-root-container {
+		display: flow-root;
+	}
+`;
 // The content area of the Style Book is rendered within an iframe so that global styles
 // are applied to elements within the entire content area. To support elements that are
 // not part of the block previews, such as headings and layout for the block previews,
@@ -151,17 +158,13 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 // applied to the `button` element, targeted via `.edit-site-style-book__example`.
 // This is to ensure that browser default styles for buttons are not applied to the previews.
 export const STYLE_BOOK_IFRAME_STYLES = `
-	// Forming a "block formatting context" to prevent margin collapsing.
-	// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-	.is-root-container {
-		display: flow-root;
-	}
-
 	body {
 		position: relative;
 		padding: 32px !important;
 	}
 
+	${ ROOT_CONTAINER }
+
 	.edit-site-style-book__examples {
 		max-width: 1200px;
 		margin: 0 auto;