COM-65: Improve layout selection UX in createColumnsBlock

.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

packages/admin/blocks-admin/src/blocks/factories/columnsBlock/FinalFormLayoutDisplay.tsx

@@ -0,0 +1,35 @@
+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}
+            <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 #d9d9d9;
+    padding: 9px;
+    box-sizing: border-box;
+`;
+
+const StyledListItemText = styled(ListItemText)`
+    margin-top: 0;
+    margin-bottom: 0;
+`;

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";
@@ -243,12 +244,18 @@ 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
                                 />
                             </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) => {