Fix inline height flex grow problem for slate grids (#36)

kitconcept · Nov 29, 2021 · 86965a7 · 86965a7
1 parent a332601
commit 86965a7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@
 
 ### Bugfix
 
+- Fix inline height flex grow problem for slate grids @sneridagh
+
 ### Internal
 
 ## 2.4.0 (2021-11-04)

diff --git a/src/components/Grid/View.jsx b/src/components/Grid/View.jsx
@@ -23,7 +23,10 @@ const ViewGrid = ({ data, render, path }) => {
 
       <Grid stackable stretched columns={data.columns.length}>
         {data.columns.map((column) => (
-          <Grid.Column key={column.id}>
+          <Grid.Column
+            key={column.id}
+            className={`grid-block-${column['@type']}`}
+          >
             <BlockRenderer
               block={column.id}
               type={column['@type']}

diff --git a/src/theme/styles.less b/src/theme/styles.less
@@ -120,6 +120,14 @@
   }
 }
 
+// This is required to overcome the inline-flex imposed from semantic grids
+.block.__grid,
+[class$='Grid'].block {
+  .ui.stretched.grid > .column.grid-block-slate {
+    display: block !important;
+  }
+}
+
 .block-editor-__grid .block .toolbar,
 [class$='Grid'] .block .toolbar {
   top: -49px;