🪜 Use BlockDepth provider to scope grid layout to top-level blocks

packages/jupyter/src/block.tsx

@@ -7,7 +7,12 @@ import {
   NotebookRunCell,
   NotebookRunCellSpinnerOnly,
 } from './controls/index.js';
-import { useGridSystemProvider, usePageKind } from '@myst-theme/providers';
+import {
+  useBlockDepth,
+  BlockDepthProvider,
+  useGridSystemProvider,
+  usePageKind,
+} from '@myst-theme/providers';
 import type { NodeRenderers, NodeRenderer } from '@myst-theme/providers';
 
 export function NotebookBlock({
@@ -19,13 +24,16 @@ export function NotebookBlock({
   node: GenericParent;
   className?: string;
 }) {
+  const depth = useBlockDepth();
   const pageKind = usePageKind();
   const grid = useGridSystemProvider();
   const subGrid = node.visibility === 'hide' ? '' : `${grid} subgrid-gap col-screen`;
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =
-    (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
+    depth > 0 ||
+    (dataClassName && dataClassName.includes('col-')) ||
+    (className && className.includes('col-'));
   const block = (
     <div
       key={`block-${id}`}
@@ -50,7 +58,9 @@ export function NotebookBlock({
           </div>
         </>
       )}
-      <MyST ast={node.children} />
+      <BlockDepthProvider depth={depth + 1}>
+        <MyST ast={node.children} />
+      </BlockDepthProvider>
     </div>
   );
   if (node.visibility === 'hide') {

packages/myst-to-react/src/block.tsx

@@ -2,7 +2,7 @@ import { Details } from './dropdown.js';
 import { MyST } from './MyST.js';
 import type { GenericParent } from 'myst-common';
 import classNames from 'classnames';
-import { useGridSystemProvider } from '@myst-theme/providers';
+import { useBlockDepth, useGridSystemProvider, BlockDepthProvider } from '@myst-theme/providers';
 import type { NodeRenderer } from '@myst-theme/providers';
 
 export function Block({
@@ -14,12 +14,15 @@ export function Block({
   node: GenericParent;
   className?: string;
 }) {
+  const depth = useBlockDepth();
   const grid = useGridSystemProvider();
   const subGrid = node.visibility === 'hide' ? '' : `${grid} subgrid-gap col-screen`;
   const dataClassName = typeof node.data?.class === 'string' ? node.data?.class : undefined;
   // Hide the subgrid if either the dataClass or the className exists and includes `col-`
   const noSubGrid =
-    (dataClassName && dataClassName.includes('col-')) || (className && className.includes('col-'));
+    depth > 0 ||
+    (dataClassName && dataClassName.includes('col-')) ||
+    (className && className.includes('col-'));
   const block = (
     <div
       key={`block-${id}`}
@@ -29,7 +32,9 @@ export function Block({
         hidden: node.visibility === 'remove',
       })}
     >
-      <MyST ast={node.children} />
+      <BlockDepthProvider depth={depth + 1}>
+        <MyST ast={node.children} />
+      </BlockDepthProvider>
     </div>
   );
   if (node.visibility === 'hide') {

packages/providers/src/block.tsx

@@ -0,0 +1,22 @@
+import React, { createContext, useContext } from 'react';
+
+type BlockDepth = {
+  depth: number;
+};
+const BlockDepthContext = createContext<BlockDepth | undefined>(undefined);
+
+export function BlockDepthProvider({
+  children,
+  depth,
+}: {
+  children: React.ReactNode;
+  depth: number;
+}) {
+  return <BlockDepthContext.Provider value={{ depth }}>{children}</BlockDepthContext.Provider>;
+}
+
+export function useBlockDepth(): number {
+  const context = useContext(BlockDepthContext);
+  const { depth } = context ?? { depth: 0 };
+  return depth;
+}

packages/providers/src/index.tsx

@@ -10,3 +10,4 @@ export * from './tabs.js';
 export * from './xref.js';
 export * from './renderers.js';
 export * from './project.js';
+export * from './block.js';