Add fullwidth page option

packages/gitbook/src/components/DocumentView/Blocks.tsx

@@ -47,6 +47,23 @@ type UnwrappedBlocksProps<TBlock extends DocumentBlock> = DocumentContextProps &
     isOffscreen?: boolean;
 };
 
+/* Blocks that can be full width are automatically expanded on full-width pages.
+ * Ideally we'd rely on the block type to determine if it can be full width, but
+ * the block's `fullWidth` property does not differentiate between `undefined` and `false`.
+ * So instead we hardcode a list of blocks that can be full width. */
+const FULL_WIDTH_BLOCKS = [
+    'table',
+    'tabs',
+    'integration',
+    'openapi',
+    'images',
+    'embed',
+    'columns',
+    'code',
+    'content-ref',
+    'hint',
+];
+
 /**
  * Renders a list of blocks without a wrapper element.
  */
@@ -72,6 +89,7 @@ export function UnwrappedBlocks<TBlock extends DocumentBlock>(props: UnwrappedBl
                     node.data && 'fullWidth' in node.data && node.data.fullWidth
                         ? 'max-w-screen-2xl'
                         : 'page-full-width:ml-0 max-w-3xl',
+                    FULL_WIDTH_BLOCKS.includes(node.type) && 'page-full-width:max-w-screen-2xl',
                     blockStyle,
                 ]}
                 isEstimatedOffscreen={isOffscreen}

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -28,7 +28,7 @@ export function PageBody(props: {
     const { customization } = context;
 
     const contentFullWidth = document ? hasFullWidthBlock(document) : false;
-    const pageFullWidth = page.id === 'wtthNFMqmEQmnt5LKR0q';
+    const pageFullWidth = page.layout.width === 'wide';
     const asFullWidth = pageFullWidth || contentFullWidth;
     const language = getSpaceLanguage(customization);
     const updatedAt = page.updatedAt ?? page.createdAt;

packages/gitbook/src/components/PageBody/PageBodyBlankslate.tsx

@@ -68,11 +68,13 @@ export async function PageBodyBlankslate(props: {
             className={tcls(
                 'grid',
                 'max-w-3xl',
+                'page-full-width:max-w-screen-2xl',
                 'w-full',
                 'mx-auto',
                 'gap-4',
                 'grid-cols-1',
-                'sm:grid-cols-2'
+                'sm:grid-cols-2',
+                'page-full-width:md:grid-cols-3'
             )}
         >
             {pageElements}