🧱 Simplify Blocks (remove grid-system) (#548)

jupyter-book · Mar 4, 2025 · 6cd2bbe · 6cd2bbe
1 parent e32fdac
commit 6cd2bbe
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 70 deletions.
diff --git a/.changeset/smart-drinks-explain.md b/.changeset/smart-drinks-explain.md
@@ -0,0 +1,6 @@
+---
+'myst-to-react': patch
+'@myst-theme/jupyter': patch
+---
+
+Simplify blocks
diff --git a/packages/jupyter/src/block.tsx b/packages/jupyter/src/block.tsx
@@ -7,45 +7,30 @@ import {
   NotebookRunCell,
   NotebookRunCellSpinnerOnly,
 } from './controls/index.js';
-import { useGridSystemProvider, usePageKind } from '@myst-theme/providers';
-import type { NodeRenderers, NodeRenderer } from '@myst-theme/providers';
+import { usePageKind } from '@myst-theme/providers';
+import type { NodeRenderers } from '@myst-theme/providers';
 
-export function NotebookBlock({
-  id,
-  node,
-  className,
-}: {
-  id: string;
-  node: GenericParent;
-  className?: string;
-}) {
+export function NotebookBlock({ node, className }: { node: GenericParent; className?: string }) {
   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-'));
   const block = (
     <div
-      key={`block-${id}`}
-      id={id}
-      className={classNames('relative group/block', className, dataClassName, {
-        [subGrid]: !noSubGrid,
+      id={node.key}
+      className={classNames('relative group/block', className, node.class, {
+        [node.data?.class]: typeof node.data?.class === 'string',
         hidden: node.visibility === 'remove',
       })}
     >
       {pageKind === SourceFileKind.Notebook && node.kind === 'notebook-code' && (
         <>
           <div className="flex sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:hidden">
             <div className="absolute top-0 -right-[28px] flex md:flex-col">
-              <NotebookRunCellSpinnerOnly id={id} />
+              <NotebookRunCellSpinnerOnly id={node.key} />
             </div>
           </div>
           <div className="hidden sticky top-[80px] z-10 opacity-70 group-hover/block:opacity-100 group-hover/block:flex">
             <div className="absolute top-0 -right-[28px] flex md:flex-col">
-              <NotebookRunCell id={id} />
-              <NotebookClearCell id={id} />
+              <NotebookRunCell id={node.key} />
+              <NotebookClearCell id={node.key} />
             </div>
           </div>
         </>
@@ -59,17 +44,6 @@ export function NotebookBlock({
   return block;
 }
 
-export const NotebookBlockRenderer: NodeRenderer = ({ node, className }) => {
-  return (
-    <NotebookBlock
-      key={node.key}
-      id={node.key}
-      node={node}
-      className={classNames(node.class, className)}
-    />
-  );
-};
-
 /**
  * The logic for the selector is complex:
  *
@@ -83,6 +57,6 @@ export const NotebookBlockRenderer: NodeRenderer = ({ node, className }) => {
  */
 export const NOTEBOOK_BLOCK_RENDERERS: NodeRenderers = {
   block: {
-    'block[kind=notebook-code],block[kind=notebook-content]': NotebookBlockRenderer,
+    'block[kind=notebook-code],block[kind=notebook-content]': NotebookBlock,
   },
 };
diff --git a/packages/myst-to-react/src/block.tsx b/packages/myst-to-react/src/block.tsx
@@ -2,50 +2,32 @@ 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 type { NodeRenderer } from '@myst-theme/providers';
 
-export function Block({
-  id,
-  node,
-  className,
-}: {
-  id: string;
-  node: GenericParent;
-  className?: string;
-}) {
-  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-'));
-  const block = (
-    <div
-      key={`block-${id}`}
-      id={id}
-      className={classNames('relative group/block', className, dataClassName, {
-        [subGrid]: !noSubGrid,
-        hidden: node.visibility === 'remove',
-      })}
-    >
+export function Block({ node, className }: { node: GenericParent; className?: string }) {
+  const cn = classNames(className, node.class, {
+    [node.data?.class]: typeof node.data?.class === 'string',
+  });
+  if (node.visibility === 'remove') return null;
+  // Only wrap this in a block if the block has a class name or an identifier
+  // Otherwise pass through the contents as is.
+  // This allows children (e.g. margin) access to the grid-system
+  const block =
+    cn || node.identifier ? (
+      <div id={node.identifier} className={cn}>
+        <MyST ast={node.children} />
+      </div>
+    ) : (
       <MyST ast={node.children} />
-    </div>
-  );
+    );
   if (node.visibility === 'hide') {
     return <Details title="Block">{block}</Details>;
   }
   return block;
 }
 
-export const BlockRenderer: NodeRenderer = ({ node, className }) => {
-  return (
-    <Block key={node.key} id={node.key} node={node} className={classNames(node.class, className)} />
-  );
-};
-
 const BLOCK_RENDERERS: Record<string, NodeRenderer> = {
-  block: BlockRenderer,
+  block: Block,
 };
 
 export default BLOCK_RENDERERS;