BUGFIX: Neos.NodeTypes.ColumnLayouts prototypes are now a ContentComp…

…onent

The NodeType fusion renderer is now pure fusion, the behavior including attributes is kept.

Relates: neos#4537
Relates: neos#4705

Neos.NodeTypes.ColumnLayouts/Resources/Private/Fusion/Root.fusion

@@ -1,23 +1,39 @@
 # Basic implementation of a flexible MultiColumn element, not exposed directly but inherited by all specific MultiColumn content elements
-prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) < prototype(Neos.Neos:Content) {
-    templatePath = 'resource://Neos.NodeTypes.ColumnLayouts/Private/Templates/NodeTypes/MultiColumn.html'
-    layout = ${q(node).property('layout')}
-    attributes.class = ${'container columns-' + q(node).property('layout')}
-    columns = Neos.Fusion:Loop {
-        @context.columnLayout = ${q(node).property('layout')}
-        items = ${q(node).children('[instanceof Neos.Neos:ContentCollection]')}
-        itemRenderer = Neos.NodeTypes.ColumnLayouts:MultiColumnItem
-        itemName = 'node'
-        iterationName = 'columnIteration'
-    }
+prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) < prototype(Neos.Neos:ContentComponent) {
+  layout = ${q(node).property('layout')}
+
+  attributes = Neos.Fusion:DataStructure
+  attributes.class = ${'container columns-' + q(node).property('layout')}
+  # The following is used to automatically append a class attribute that reflects the underlying node type of a Fusion object,
+  # for example "neos-nodetypes-form", "neos-nodetypes-headline", "neos-nodetypes-html", "neos-nodetypes-image", "neos-nodetypes-menu" and "neos-nodetypes-text"
+  # You can disable the following line with:
+  # prototype(Neos.NodeTypes.ColumnLayouts:MultiColumn) {
+  #   [email protected] >
+  # }
+  # in your site's Fusion if you don't need that behavior.
+  [email protected] = ${Array.push(value, String.toLowerCase(String.pregReplace(node.nodeTypeName.value, '/[[:^alnum:]]/', '-')))}
+
+  columns = Neos.Fusion:Loop {
+    @context.columnLayout = ${q(node).property('layout')}
+    items = ${q(node).children('[instanceof Neos.Neos:ContentCollection]')}
+    itemRenderer = Neos.NodeTypes.ColumnLayouts:MultiColumnItem
+    itemName = 'node'
+    iterationName = 'columnIteration'
+  }
+
+  renderer = afx`
+    <div {...props.attributes}>
+      {props.columns}
+    </div>
+  `
 }
 
 # Abstract render definition for a single content column in a multi column element
 prototype(Neos.NodeTypes.ColumnLayouts:MultiColumnItem) < prototype(Neos.Neos:ContentCollection) {
-    nodePath = '.'
-    attributes = Neos.Fusion:DataStructure {
-        class = 'column'
-    }
+  nodePath = '.'
+  attributes = Neos.Fusion:DataStructure {
+    class = 'column'
+  }
 }
 
 # Two Column Fusion Object
@@ -27,8 +43,8 @@ prototype(Neos.NodeTypes.ColumnLayouts:TwoColumn) < prototype(Neos.NodeTypes.Col
 prototype(Neos.NodeTypes.ColumnLayouts:TwoColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
     </div>
   `
 }
@@ -40,9 +56,9 @@ prototype(Neos.NodeTypes.ColumnLayouts:ThreeColumn) < prototype(Neos.NodeTypes.C
 prototype(Neos.NodeTypes.ColumnLayouts:ThreeColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)}/></div>
     </div>
   `
 }
@@ -54,10 +70,10 @@ prototype(Neos.NodeTypes.ColumnLayouts:FourColumn) < prototype(Neos.NodeTypes.Co
 prototype(Neos.NodeTypes.ColumnLayouts:FourColumn.RawContentMode) < prototype(Neos.Neos:ContentComponent) {
   renderer = afx`
     <div style="display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 16px;">
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)} /></div>
-      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column3').get(0)} /></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column0').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column1').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column2').get(0)}/></div>
+      <div><Neos.Neos:RawContent.Node @context.node={q(node).children('column3').get(0)}/></div>
     </div>
   `
 }