From 4cb104e4a62134e3fbe5d9455a0aab659c5c24f1 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Wed, 18 Oct 2023 10:58:06 +0200
Subject: [PATCH 01/15] Change title from Columns to Items

---
 .../blocks-admin/src/blocks/factories/createColumnsBlock.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
index 7a12b969aa..3754453799 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -248,7 +248,7 @@ export function createColumnsBlock<T extends BlockInterface>({
                                     fullWidth
                                 />
                             </BlocksFinalForm>
-                            <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.columns" defaultMessage="Columns" />}>
+                            <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.columns" defaultMessage="Items" />}>
                                 <AdminComponentPaper disablePadding>
                                     <StackSwitchApiContext.Consumer>
                                         {(stackApi) => {

From f96ab2977717588744444bc86a95c188c59c9e5f Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Wed, 18 Oct 2023 16:57:45 +0200
Subject: [PATCH 02/15] Add base functionality for rendering the correct layout
 preview

---
 .../columnsBlock/FinalFormLayoutDisplay.tsx   | 30 +++++++++++++++++++
 .../blocks/factories/createColumnsBlock.tsx   | 11 ++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx

diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
new file mode 100644
index 0000000000..29e6cb5ae8
--- /dev/null
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
@@ -0,0 +1,30 @@
+import { ListItemText } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import React from "react";
+import { FieldRenderProps } from "react-final-form";
+
+import { ColumnsBlockLayout } from "../createColumnsBlock";
+
+interface Props extends FieldRenderProps<ColumnsBlockLayout> {
+    layouts: ColumnsBlockLayout[];
+}
+
+export function FinalFormLayoutDisplay({ layouts }: Props): React.ReactElement {
+    return (
+        <LayoutDisplayContainer>
+            {layouts[0].preview}
+            <ListItemText primary={layouts[0].label} secondary={layouts[0].name} />
+        </LayoutDisplayContainer>
+    );
+}
+
+const LayoutDisplayContainer = styled("div")`
+    display: grid;
+    grid-template-columns: minmax(80px, 1fr) 2fr;
+    column-gap: ${({ theme }) => theme.spacing(2)};
+    align-items: center;
+    background-color: #ffffff;
+    border: 1px solid #d9d9d9;
+    padding: 0 9px;
+    box-sizing: border-box;
+`;
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
index 3754453799..7d579cd84c 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -20,6 +20,7 @@ import { createBlockSkeleton } from "../helpers/createBlockSkeleton";
 import { BlockCategory, BlockInputApi, BlockInterface, DispatchSetStateAction, PreviewContent } from "../types";
 import { resolveNewState } from "../utils";
 import { FinalFormColumnsSelect } from "./columnsBlock/FinalFormColumnsSelect";
+import { FinalFormLayoutDisplay } from "./columnsBlock/FinalFormLayoutDisplay";
 import { FinalFormLayoutSelect } from "./columnsBlock/FinalFormLayoutSelect";
 import { ListBlockItem, ListBlockState } from "./createListBlock";
 import { createUseAdminComponent as createUseListBlockAdminComponent } from "./listBlock/createUseAdminComponent";
@@ -212,6 +213,8 @@ export function createColumnsBlock<T extends BlockInterface>({
 
             const blockContext = useBlockContext();
 
+            layouts.push(layouts[0]);
+
             return (
                 <>
                     <StackSwitch initialPage="list">
@@ -243,7 +246,13 @@ export function createColumnsBlock<T extends BlockInterface>({
                                 <Field
                                     name="layout"
                                     label={<FormattedMessage id="comet.blocks.columns.layout" defaultMessage="Layout" />}
-                                    component={FinalFormLayoutSelect}
+                                    component={
+                                        layouts.filter((layout) => {
+                                            return layout.columns === state.layout.columns;
+                                        }).length <= 1
+                                            ? FinalFormLayoutDisplay
+                                            : FinalFormLayoutSelect
+                                    }
                                     layouts={groupLayoutsByColumnsApi.getLayouts(state.layout.columns)}
                                     fullWidth
                                 />

From 43d296b17b1761944c9dee1e76b2007e1cb6e69d Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Thu, 19 Oct 2023 12:20:06 +0200
Subject: [PATCH 03/15] Remove test code

---
 .../blocks-admin/src/blocks/factories/createColumnsBlock.tsx    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
index 7d579cd84c..7d1f4b98f9 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -213,8 +213,6 @@ export function createColumnsBlock<T extends BlockInterface>({
 
             const blockContext = useBlockContext();
 
-            layouts.push(layouts[0]);
-
             return (
                 <>
                     <StackSwitch initialPage="list">

From e64c5e87d00ee302ab27485413064468c705e3b0 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Wed, 8 Nov 2023 10:01:42 +0100
Subject: [PATCH 04/15] Adjust padding

---
 .../factories/columnsBlock/FinalFormLayoutDisplay.tsx    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
index 29e6cb5ae8..5b01bc0e47 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
@@ -13,7 +13,7 @@ export function FinalFormLayoutDisplay({ layouts }: Props): React.ReactElement {
     return (
         <LayoutDisplayContainer>
             {layouts[0].preview}
-            <ListItemText primary={layouts[0].label} secondary={layouts[0].name} />
+            <StyledListItemText primary={layouts[0].label} secondary={layouts[0].name} />
         </LayoutDisplayContainer>
     );
 }
@@ -25,6 +25,11 @@ const LayoutDisplayContainer = styled("div")`
     align-items: center;
     background-color: #ffffff;
     border: 1px solid #d9d9d9;
-    padding: 0 9px;
+    padding: 9px;
     box-sizing: border-box;
 `;
+
+const StyledListItemText = styled(ListItemText)`
+    margin-top: 0;
+    margin-bottom: 0;
+`;

From 37f94668dbe9ed240e33b6d2bb721c0ca02b7040 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Wed, 8 Nov 2023 10:34:37 +0100
Subject: [PATCH 05/15] Change FormattedMessage id to remove the duplicate

---
 .../blocks-admin/src/blocks/factories/createColumnsBlock.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
index 7d1f4b98f9..57d6e463f0 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -255,7 +255,7 @@ export function createColumnsBlock<T extends BlockInterface>({
                                     fullWidth
                                 />
                             </BlocksFinalForm>
-                            <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.columns" defaultMessage="Items" />}>
+                            <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.items" defaultMessage="Items" />}>
                                 <AdminComponentPaper disablePadding>
                                     <StackSwitchApiContext.Consumer>
                                         {(stackApi) => {

From c20c8176604407dafda8bc0ca61a72b0a4d0b55b Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Wed, 8 Nov 2023 10:57:07 +0100
Subject: [PATCH 06/15] Add changeset

---
 .changeset/yellow-dots-listen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/yellow-dots-listen.md

diff --git a/.changeset/yellow-dots-listen.md b/.changeset/yellow-dots-listen.md
new file mode 100644
index 0000000000..53d295d027
--- /dev/null
+++ b/.changeset/yellow-dots-listen.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Change headline from "Columns" to "Items" / Only show a select box when there are multiple layouts available

From f194cbbbe759f5fdf4efe5b13e7bb86599765a14 Mon Sep 17 00:00:00 2001
From: jennyvivid <148231586+jennyvivid@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:48:44 +0100
Subject: [PATCH 07/15] Update hexcode value to value from theme

Co-authored-by: Ricky James Smith <jamesricky@me.com>
---
 .../blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
index 5b01bc0e47..31cdd2deba 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
@@ -24,7 +24,7 @@ const LayoutDisplayContainer = styled("div")`
     column-gap: ${({ theme }) => theme.spacing(2)};
     align-items: center;
     background-color: #ffffff;
-    border: 1px solid #d9d9d9;
+    border: 1px solid ${({ theme }) => theme.palette.divider};
     padding: 9px;
     box-sizing: border-box;
 `;

From 82eb67962e7563c4d571b28560f6af566b17ef88 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Mon, 13 Nov 2023 15:53:16 +0100
Subject: [PATCH 08/15] Change changeset description to make clearer what
 changed where

---
 .changeset/yellow-dots-listen.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/yellow-dots-listen.md b/.changeset/yellow-dots-listen.md
index 53d295d027..f0688b1d30 100644
--- a/.changeset/yellow-dots-listen.md
+++ b/.changeset/yellow-dots-listen.md
@@ -2,4 +2,4 @@
 "@comet/blocks-admin": minor
 ---
 
-Change headline from "Columns" to "Items" / Only show a select box when there are multiple layouts available
+UI improvements in admin of ColumnsBlock

From 54953b2c28a34cec2aa312fe8f77633ef9c8c7d8 Mon Sep 17 00:00:00 2001
From: jennyvivid <148231586+jennyvivid@users.noreply.github.com>
Date: Mon, 13 Nov 2023 15:55:59 +0100
Subject: [PATCH 09/15] Add handling for empty layouts array

Co-authored-by: Ricky James Smith <jamesricky@me.com>
---
 .../blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
index 31cdd2deba..b19e52beac 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
@@ -9,7 +9,9 @@ interface Props extends FieldRenderProps<ColumnsBlockLayout> {
     layouts: ColumnsBlockLayout[];
 }
 
-export function FinalFormLayoutDisplay({ layouts }: Props): React.ReactElement {
+export function FinalFormLayoutDisplay({ layouts }: Props) {
+    if (layouts.length === 0) return null;
+
     return (
         <LayoutDisplayContainer>
             {layouts[0].preview}

From 3bf675d5ec8f3982787a1b57065a089dc98845e2 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Wed, 15 Nov 2023 09:53:09 +0100
Subject: [PATCH 10/15] Remove FinalFormLayoutDisplay and move logic to
 FinalFormLayoutSelect

---
 .../columnsBlock/FinalFormLayoutDisplay.tsx   | 37 -------------------
 .../columnsBlock/FinalFormLayoutSelect.tsx    | 32 +++++++++++++++-
 .../blocks/factories/createColumnsBlock.tsx   | 10 +----
 3 files changed, 33 insertions(+), 46 deletions(-)
 delete mode 100644 packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx

diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
deleted file mode 100644
index b19e52beac..0000000000
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ListItemText } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import React from "react";
-import { FieldRenderProps } from "react-final-form";
-
-import { ColumnsBlockLayout } from "../createColumnsBlock";
-
-interface Props extends FieldRenderProps<ColumnsBlockLayout> {
-    layouts: ColumnsBlockLayout[];
-}
-
-export function FinalFormLayoutDisplay({ layouts }: Props) {
-    if (layouts.length === 0) return null;
-
-    return (
-        <LayoutDisplayContainer>
-            {layouts[0].preview}
-            <StyledListItemText primary={layouts[0].label} secondary={layouts[0].name} />
-        </LayoutDisplayContainer>
-    );
-}
-
-const LayoutDisplayContainer = styled("div")`
-    display: grid;
-    grid-template-columns: minmax(80px, 1fr) 2fr;
-    column-gap: ${({ theme }) => theme.spacing(2)};
-    align-items: center;
-    background-color: #ffffff;
-    border: 1px solid ${({ theme }) => theme.palette.divider};
-    padding: 9px;
-    box-sizing: border-box;
-`;
-
-const StyledListItemText = styled(ListItemText)`
-    margin-top: 0;
-    margin-bottom: 0;
-`;
diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
index 547b5f9034..cf999c1aa3 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
@@ -21,9 +21,10 @@ interface Section {
 
 interface Props extends FieldRenderProps<ColumnsBlockLayout> {
     layouts: ColumnsBlockLayout[];
+    numberOfMatchingColumns: number;
 }
 
-export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: Props): React.ReactElement {
+export function FinalFormLayoutSelect({ input: { value, onChange }, layouts, numberOfMatchingColumns }: Props) {
     const sections = React.useMemo(() => {
         const sections: Section[] = [];
 
@@ -57,6 +58,19 @@ export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: P
         onChange(layouts.find((layout) => layout.name === event.target.value));
     };
 
+    if (numberOfMatchingColumns === 0) {
+        return null;
+    }
+
+    if (numberOfMatchingColumns === 1 && layouts.length >= 1) {
+        return (
+            <LayoutDisplayContainer>
+                {layouts[0].preview}
+                <StyledListItemText primary={layouts[0].label} secondary={layouts[0].name} />
+            </LayoutDisplayContainer>
+        );
+    }
+
     return (
         <Select value={value.name} onChange={handleChange} fullWidth>
             {sections.map((section, i) => [
@@ -112,3 +126,19 @@ const ListItemText = styled(MuiListItemText)`
     margin-top: 0;
     margin-bottom: 0;
 `;
+
+const LayoutDisplayContainer = styled("div")`
+    display: grid;
+    grid-template-columns: minmax(80px, 1fr) 2fr;
+    column-gap: ${({ theme }) => theme.spacing(2)};
+    align-items: center;
+    background-color: #ffffff;
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    padding: 9px;
+    box-sizing: border-box;
+`;
+
+const StyledListItemText = styled(ListItemText)`
+    margin-top: 0;
+    margin-bottom: 0;
+`;
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
index 57d6e463f0..f4b0c028f7 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -20,7 +20,6 @@ import { createBlockSkeleton } from "../helpers/createBlockSkeleton";
 import { BlockCategory, BlockInputApi, BlockInterface, DispatchSetStateAction, PreviewContent } from "../types";
 import { resolveNewState } from "../utils";
 import { FinalFormColumnsSelect } from "./columnsBlock/FinalFormColumnsSelect";
-import { FinalFormLayoutDisplay } from "./columnsBlock/FinalFormLayoutDisplay";
 import { FinalFormLayoutSelect } from "./columnsBlock/FinalFormLayoutSelect";
 import { ListBlockItem, ListBlockState } from "./createListBlock";
 import { createUseAdminComponent as createUseListBlockAdminComponent } from "./listBlock/createUseAdminComponent";
@@ -244,15 +243,10 @@ export function createColumnsBlock<T extends BlockInterface>({
                                 <Field
                                     name="layout"
                                     label={<FormattedMessage id="comet.blocks.columns.layout" defaultMessage="Layout" />}
-                                    component={
-                                        layouts.filter((layout) => {
-                                            return layout.columns === state.layout.columns;
-                                        }).length <= 1
-                                            ? FinalFormLayoutDisplay
-                                            : FinalFormLayoutSelect
-                                    }
+                                    component={FinalFormLayoutSelect}
                                     layouts={groupLayoutsByColumnsApi.getLayouts(state.layout.columns)}
                                     fullWidth
+                                    numberOfMatchingColumns={layouts.filter((layout) => layout.columns === state.layout.columns).length}
                                 />
                             </BlocksFinalForm>
                             <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.items" defaultMessage="Items" />}>

From aad78f8bd17772c5e3a180eeb92ce05a82039324 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Wed, 15 Nov 2023 09:55:12 +0100
Subject: [PATCH 11/15] Improve changeset description

---
 .changeset/yellow-dots-listen.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/yellow-dots-listen.md b/.changeset/yellow-dots-listen.md
index f0688b1d30..5948d4b365 100644
--- a/.changeset/yellow-dots-listen.md
+++ b/.changeset/yellow-dots-listen.md
@@ -2,4 +2,4 @@
 "@comet/blocks-admin": minor
 ---
 
-UI improvements in admin of ColumnsBlock
+Improvements to the layout selection UX in createColumnsBlock
\ No newline at end of file

From 552da7b52f2a6ec85c5dc9213f8070ca8cf5c360 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Mon, 11 Dec 2023 09:41:15 +0100
Subject: [PATCH 12/15] Remove redundant CSS

---
 .../factories/columnsBlock/FinalFormLayoutSelect.tsx       | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
index cf999c1aa3..91cc6c51f8 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
@@ -66,7 +66,7 @@ export function FinalFormLayoutSelect({ input: { value, onChange }, layouts, num
         return (
             <LayoutDisplayContainer>
                 {layouts[0].preview}
-                <StyledListItemText primary={layouts[0].label} secondary={layouts[0].name} />
+                <ListItemText primary={layouts[0].label} secondary={layouts[0].name} />
             </LayoutDisplayContainer>
         );
     }
@@ -137,8 +137,3 @@ const LayoutDisplayContainer = styled("div")`
     padding: 9px;
     box-sizing: border-box;
 `;
-
-const StyledListItemText = styled(ListItemText)`
-    margin-top: 0;
-    margin-bottom: 0;
-`;

From da0cee223ea1f041d2520d3c9e94dca63114b603 Mon Sep 17 00:00:00 2001
From: Jenny Scharinger <jennifer.scharinger@vivid-planet.com>
Date: Mon, 11 Dec 2023 11:18:21 +0100
Subject: [PATCH 13/15] Rework CSS to remove duplication / add a column layout

---
 demo/admin/src/pages/blocks/ColumnsBlock.tsx  | 14 +++++++++
 demo/api/src/pages/blocks/columns.block.ts    |  2 +-
 .../columnsBlock/FinalFormLayoutSelect.tsx    | 29 +++++++------------
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/demo/admin/src/pages/blocks/ColumnsBlock.tsx b/demo/admin/src/pages/blocks/ColumnsBlock.tsx
index c412674685..8e192f7b11 100644
--- a/demo/admin/src/pages/blocks/ColumnsBlock.tsx
+++ b/demo/admin/src/pages/blocks/ColumnsBlock.tsx
@@ -50,6 +50,20 @@ const ColumnsBlock = createColumnsBlock({
                 </ColumnsLayoutPreview>
             ),
         },
+        {
+            name: "two-columns-12-6",
+            label: "Two columns 12-6",
+            columns: 2,
+            preview: (
+                <ColumnsLayoutPreview>
+                    <ColumnsLayoutPreviewSpacing width={2} />
+                    <ColumnsLayoutPreviewContent width={12} />
+                    <ColumnsLayoutPreviewSpacing width={2} />
+                    <ColumnsLayoutPreviewContent width={6} />
+                    <ColumnsLayoutPreviewSpacing width={2} />
+                </ColumnsLayoutPreview>
+            ),
+        },
     ],
     contentBlock: ColumnsContentBlock,
 });
diff --git a/demo/api/src/pages/blocks/columns.block.ts b/demo/api/src/pages/blocks/columns.block.ts
index 3b6b1a260b..529918824e 100644
--- a/demo/api/src/pages/blocks/columns.block.ts
+++ b/demo/api/src/pages/blocks/columns.block.ts
@@ -19,7 +19,7 @@ const ColumnsContentBlock = createBlocksBlock(
 const ColumnsBlock = ColumnsBlockFactory.create(
     {
         contentBlock: ColumnsContentBlock,
-        layouts: [{ name: "one-column" }, { name: "two-columns" }],
+        layouts: [{ name: "one-column" }, { name: "two-columns" }, { name: "two-columns-12-6" }],
     },
     "Columns",
 );
diff --git a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
index 91cc6c51f8..b4e7315788 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
@@ -21,10 +21,9 @@ interface Section {
 
 interface Props extends FieldRenderProps<ColumnsBlockLayout> {
     layouts: ColumnsBlockLayout[];
-    numberOfMatchingColumns: number;
 }
 
-export function FinalFormLayoutSelect({ input: { value, onChange }, layouts, numberOfMatchingColumns }: Props) {
+export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: Props) {
     const sections = React.useMemo(() => {
         const sections: Section[] = [];
 
@@ -58,16 +57,15 @@ export function FinalFormLayoutSelect({ input: { value, onChange }, layouts, num
         onChange(layouts.find((layout) => layout.name === event.target.value));
     };
 
-    if (numberOfMatchingColumns === 0) {
-        return null;
-    }
-
-    if (numberOfMatchingColumns === 1 && layouts.length >= 1) {
+    if (layouts.length === 1) {
+        const layout = layouts[0];
         return (
-            <LayoutDisplayContainer>
-                {layouts[0].preview}
-                <ListItemText primary={layouts[0].label} secondary={layouts[0].name} />
-            </LayoutDisplayContainer>
+            <SingleLayoutPreview>
+                <MenuItemContent>
+                    {layout.preview}
+                    <ListItemText primary={layout.label} secondary={layout.name} />
+                </MenuItemContent>
+            </SingleLayoutPreview>
         );
     }
 
@@ -127,13 +125,8 @@ const ListItemText = styled(MuiListItemText)`
     margin-bottom: 0;
 `;
 
-const LayoutDisplayContainer = styled("div")`
-    display: grid;
-    grid-template-columns: minmax(80px, 1fr) 2fr;
-    column-gap: ${({ theme }) => theme.spacing(2)};
-    align-items: center;
-    background-color: #ffffff;
+const SingleLayoutPreview = styled("div")`
+    background-color: ${({ theme }) => theme.palette.background.paper};
     border: 1px solid ${({ theme }) => theme.palette.divider};
     padding: 9px;
-    box-sizing: border-box;
 `;

From 6208c700aa1d1aee6f83673492ed4941df40f8f4 Mon Sep 17 00:00:00 2001
From: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
Date: Mon, 11 Dec 2023 11:23:18 +0100
Subject: [PATCH 14/15] Improve changeset

---
 .changeset/yellow-dots-listen.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.changeset/yellow-dots-listen.md b/.changeset/yellow-dots-listen.md
index 5948d4b365..c4af0e83e4 100644
--- a/.changeset/yellow-dots-listen.md
+++ b/.changeset/yellow-dots-listen.md
@@ -2,4 +2,6 @@
 "@comet/blocks-admin": minor
 ---
 
-Improvements to the layout selection UX in createColumnsBlock
\ No newline at end of file
+Improve layout selection UX in `createColumnsBlock`
+
+Hide select when there's only one layout for a specific number of columns
\ No newline at end of file

From f1dbb9d11b6a08afe5788b5a024e242cef80a69e Mon Sep 17 00:00:00 2001
From: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
Date: Mon, 11 Dec 2023 11:23:29 +0100
Subject: [PATCH 15/15] Remove unused prop

---
 .../blocks-admin/src/blocks/factories/createColumnsBlock.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
index f4b0c028f7..11ea9f58de 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -246,7 +246,6 @@ export function createColumnsBlock<T extends BlockInterface>({
                                     component={FinalFormLayoutSelect}
                                     layouts={groupLayoutsByColumnsApi.getLayouts(state.layout.columns)}
                                     fullWidth
-                                    numberOfMatchingColumns={layouts.filter((layout) => layout.columns === state.layout.columns).length}
                                 />
                             </BlocksFinalForm>
                             <AdminComponentSection title={<FormattedMessage id="comet.blocks.columns.items" defaultMessage="Items" />}>