From 4bfaa9bb8e386460ae7931aecbd6d631cb11d378 Mon Sep 17 00:00:00 2001
From: jennyvivid <148231586+jennyvivid@users.noreply.github.com>
Date: Mon, 11 Dec 2023 13:00:48 +0100
Subject: [PATCH] Improve layout selection UX in `createColumnsBlock` (#1384)

Hide select when there's only one layout for a specific number of
columns.

---------

Co-authored-by: Ricky James Smith <jamesricky@me.com>
Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
---
 .changeset/yellow-dots-listen.md              |  7 +++++++
 demo/admin/src/pages/blocks/ColumnsBlock.tsx  | 14 +++++++++++++
 demo/api/src/pages/blocks/columns.block.ts    |  2 +-
 .../columnsBlock/FinalFormLayoutSelect.tsx    | 20 ++++++++++++++++++-
 .../blocks/factories/createColumnsBlock.tsx   |  2 +-
 5 files changed, 42 insertions(+), 3 deletions(-)
 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..c4af0e83e4
--- /dev/null
+++ b/.changeset/yellow-dots-listen.md
@@ -0,0 +1,7 @@
+---
+"@comet/blocks-admin": minor
+---
+
+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
diff --git a/demo/admin/src/pages/blocks/ColumnsBlock.tsx b/demo/admin/src/pages/blocks/ColumnsBlock.tsx
index b26d82c619..718655fe50 100644
--- a/demo/admin/src/pages/blocks/ColumnsBlock.tsx
+++ b/demo/admin/src/pages/blocks/ColumnsBlock.tsx
@@ -49,6 +49,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 547b5f9034..b4e7315788 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutSelect.tsx
@@ -23,7 +23,7 @@ interface Props extends FieldRenderProps<ColumnsBlockLayout> {
     layouts: ColumnsBlockLayout[];
 }
 
-export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: Props): React.ReactElement {
+export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: Props) {
     const sections = React.useMemo(() => {
         const sections: Section[] = [];
 
@@ -57,6 +57,18 @@ export function FinalFormLayoutSelect({ input: { value, onChange }, layouts }: P
         onChange(layouts.find((layout) => layout.name === event.target.value));
     };
 
+    if (layouts.length === 1) {
+        const layout = layouts[0];
+        return (
+            <SingleLayoutPreview>
+                <MenuItemContent>
+                    {layout.preview}
+                    <ListItemText primary={layout.label} secondary={layout.name} />
+                </MenuItemContent>
+            </SingleLayoutPreview>
+        );
+    }
+
     return (
         <Select value={value.name} onChange={handleChange} fullWidth>
             {sections.map((section, i) => [
@@ -112,3 +124,9 @@ const ListItemText = styled(MuiListItemText)`
     margin-top: 0;
     margin-bottom: 0;
 `;
+
+const SingleLayoutPreview = styled("div")`
+    background-color: ${({ theme }) => theme.palette.background.paper};
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    padding: 9px;
+`;
diff --git a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
index b08f66d0f7..008f2cf072 100644
--- a/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
+++ b/packages/admin/blocks-admin/src/blocks/factories/createColumnsBlock.tsx
@@ -267,7 +267,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.items" defaultMessage="Items" />}>
                                 <AdminComponentPaper disablePadding>
                                     <StackSwitchApiContext.Consumer>
                                         {(stackApi) => {