Product support and better rendering of columns

packages/magento-pagebuilder/ContentTypes/Block/Block.tsx

@@ -14,7 +14,7 @@ export const Block: BlockContentType['component'] = (props) => {
   const { content } = additional
 
   return (
-    <Box style={cssProps} className={cssClasses.join(' ')}>
+    <Box sx={cssProps} className={cssClasses.join(' ')}>
       {content?.map((child, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <PagebuilderRender contentItem={child} key={index} />

packages/magento-pagebuilder/ContentTypes/Column/Column.tsx

@@ -15,7 +15,15 @@ export const Column: ColumnContentType['component'] = (incoming) => {
   const [imageProps, props] = extractImageBackgroundProps(additional)
 
   const columnElement = useRef(null)
-  const { backgroundColor, children, minHeight, verticalAlignment, width, appearance } = props
+  const {
+    backgroundColor,
+    children,
+    minHeight,
+    verticalAlignment,
+    width,
+    appearance,
+    contentType,
+  } = additional
 
   // let image = desktopImage
   // if (mobileImage && matchMedia && matchMedia('(max-width: 768px)').matches) {
@@ -104,7 +112,13 @@ export const Column: ColumnContentType['component'] = (incoming) => {
   // }, [backgroundSize, image, setBgImageStyle])
 
   return (
-    <Box className={cssClasses} sx={dynamicStyles} ref={columnElement}>
+    <Box
+      data-appearance={appearance}
+      data-content-type={contentType}
+      className={cssClasses.join(' ')}
+      sx={dynamicStyles}
+      ref={columnElement}
+    >
       {children}
     </Box>
   )

packages/magento-pagebuilder/ContentTypes/ColumnGroup/ColumnGroup.tsx

@@ -1,13 +1,24 @@
 import { Box } from '@mui/material'
 import { ColumnGroupContentType } from './types'
+import { extractAdvancedProps } from '../../utils'
 
 /**
  * Page Builder ColumnGroup component.
  *
  * This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
  */
 export const ColumnGroup: ColumnGroupContentType['component'] = (props) => {
-  const { display, children } = props
+  const [cssProps, cssClasses, additional] = extractAdvancedProps(props)
+  const { children, appearance, contentType } = additional
 
-  return <Box sx={{ display: 'flex', flexWrap: { xs: 'wrap', md: 'initial' } }}>{children}</Box>
+  return (
+    <Box
+      data-appearance={appearance}
+      data-content-type={contentType}
+      className={cssClasses.join(' ')}
+      sx={cssProps}
+    >
+      {children}
+    </Box>
+  )
 }

packages/magento-pagebuilder/ContentTypes/ColumnGroup/columnGroupAggregator.ts

@@ -1,6 +1,7 @@
-import { getIsHidden } from '../../utils'
-import { ColumnGroupContentType } from './types'
+import { getAdvanced } from '../../utils'
+import type { ColumnGroupContentType } from './types'
 
 export const columnGroupAggregator: ColumnGroupContentType['configAggregator'] = (node) => ({
   display: node.style.display,
+  ...getAdvanced(node),
 })

packages/magento-pagebuilder/ContentTypes/ColumnGroup/types.ts

@@ -1,7 +1,8 @@
 import { ContentType, ContentTypeConfig } from '../../types'
+import { AdvancedProps } from '../../utils'
 
 type ColumnGroupConfig = ContentTypeConfig<'column-group'>
 
-export type ButtonItemProps = Pick<React.CSSProperties, 'display'>
+export type ColumnGroupProps = AdvancedProps & Pick<React.CSSProperties, 'display'>
 
-export type ColumnGroupContentType = ContentType<ColumnGroupConfig, ButtonItemProps>
+export type ColumnGroupContentType = ContentType<ColumnGroupConfig, ColumnGroupProps>

packages/magento-pagebuilder/ContentTypes/ColumnLine/ColumnLine.tsx

@@ -0,0 +1,24 @@
+import { Box } from '@mui/material'
+import { extractAdvancedProps } from '../../utils'
+import { ColumnLineContentType } from './types'
+
+/**
+ * Page Builder ColumnGroup component.
+ *
+ * This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
+ */
+export const ColumnLine: ColumnLineContentType['component'] = (props) => {
+  const [cssProps, cssClasses, additional] = extractAdvancedProps(props)
+  const { children, appearance, contentType, display, width, sx } = additional
+
+  return (
+    <Box
+      data-appearance={appearance}
+      data-content-type={contentType}
+      className={cssClasses.join(' ')}
+      sx={[...(Array.isArray(sx) ? sx : [sx]), cssProps, { display, width }]}
+    >
+      {children}
+    </Box>
+  )
+}

packages/magento-pagebuilder/ContentTypes/ColumnLine/columnLineAggregator.ts

@@ -0,0 +1,8 @@
+import { getAdvanced } from '../../utils'
+import type { ColumnLineContentType } from './types'
+
+export const columnLineAggregator: ColumnLineContentType['configAggregator'] = (node) => ({
+  display: node.style.display,
+  width: node.style.width,
+  ...getAdvanced(node),
+})

packages/magento-pagebuilder/ContentTypes/ColumnLine/types.ts

@@ -0,0 +1,8 @@
+import { ContentType, ContentTypeConfig } from '../../types'
+import { AdvancedProps } from '../../utils'
+
+type ColumnLineConfig = ContentTypeConfig<'column-group'>
+
+export type ColumnLineProps = AdvancedProps & Pick<React.CSSProperties, 'display' | 'width'>
+
+export type ColumnLineContentType = ContentType<ColumnLineConfig, ColumnLineProps>

packages/magento-pagebuilder/ContentTypes/Products/Products.tsx

@@ -0,0 +1,26 @@
+import { ProductScroller } from '@graphcommerce/magento-product'
+import { Container } from '@mui/material'
+import {
+  ProductListItems,
+  productListRenderer,
+} from '../../../../examples/magento-graphcms/components'
+import { extractAdvancedProps } from '../../utils'
+import { ProductsContentType, ProductsProps } from './types'
+
+export const Products: ProductsContentType['component'] = (props) => {
+  const [cssProps, cssClasses, additional] = extractAdvancedProps(props)
+  const { appearance, products } = additional
+
+  if (appearance === 'grid') {
+    return (
+      <Container>
+        <ProductListItems items={products} size='small' titleComponent='h3' title={''} />
+      </Container>
+    )
+  }
+  return (
+    <Container>
+      <ProductScroller items={products} productListRenderer={productListRenderer} />
+    </Container>
+  )
+}