TYPO3 gridelements: appearance layout not showing correctly

Question

I am using TYPO3 10.4 and Gridelements with Dataprocessing. Everything is working fine, except the appearance / layout option for content elements I place in the Gridcontainer.

I have defined a TCEFORM.tt_content Layout which I then give a custom class in my Typoscript:

tt_content.stdWrap.outerWrap {
  cObject = CASE
  cObject {
    key.field = layout

    default = TEXT
    default.value = |

    1 = TEXT
    1.value = <div class="customClass">|</div>
  }
}

As long as I use appearance Layout outside a gridelements container it works fine a "customClass" is wrapped around the element.

As soon as I try to use it inside a gridelement, the additional wrapper is not rendered. How do I get the stdWrap passed through in Gridelements?

My gridelements configuration is

tt_content.gridelements_pi1 {
  templateRootPaths {
      15 = path/to/templates/gridelements/
  }

  dataProcessing {
    10 {
      default {
        options {
            resolveFlexFormData = 1
              resolveChildFlexFormData = 0
          }
      }
    }
  }
}

and the template file:

<div class="column2 frame-layout-{data.layout} {f:if(condition: data.space_before_class, then: ' frame-space-before-{data.space_before_class}')}{f:if(condition: data.space_after_class, then: ' frame-space-after-{data.space_after_class}')}" id="c{data.uid}">
    <f:if condition="{children}">
        <f:for each="{children.1}" as="column" key="columnNumber">
            <div id="c{data.uid}-{columnNumber}" class="grid-column grid-column-{columnNumber} col-lg-6">
                <f:for each="{column}" as="child">
                    <f:render partial="Child"
                        arguments="{data: child.data, children: child.children, options: options, settings: settings}" />
                </f:for>
            </div>
        </f:for>
    </f:if>
</div>

EDIT: I found a working way with conditions in the template files: <f:if condition="{child.data.layout} == 1"> and depending on that wrap the div with my customClass around the children. But that seems kinda messy and complicated.

Answer 1

You should put that "wrap" into a Fluid layout file and then fetch the rest of the content from the Fluid template file using sections and a layout switch.

This way you put the layout information into the file it's supposed and expected to be.

To switch between different layouts you can then use a dynamic call within the template file instead of a switch viewhelper:

<f:layout name="Layout{layout}" />

This way you keep the code lean and layout and content rendering separated, which comes close to the principle of TypoScript "wraps".