From df13b92df8fe4cc7969df138318e2b6eee266ef3 Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Thu, 24 Oct 2024 20:37:00 -0700 Subject: [PATCH] Keep comment out of output styles --- .../src/components/style-book/constants.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 1ba1bf5e3dffa9..6aa280c937d42d 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/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;