Adding a Custom Layout

For adding new a layout type, follow these steps:

1. Create a template view file: templates/headless/custom.html.twig

{# array states #}
<h5>** Custom Layout **</h5>
<div>
    {% for state in states %}
        {% for editable in state.items %}
            {% if editable is pimcore_headless_editable %}
                {{ editable.getContent()|raw }}
            {% endif %}
        {% endfor %}
    {% endfor %}
</div>

2. Add a layout class, which implements \Pimcore\Bundle\HeadlessDocumentsBundle\Headless\Layout\LayoutInterface and define layout path in the class:

src/Headless/CustomLayout.php

class CustomLayout implements \Pimcore\Bundle\HeadlessDocumentsBundle\Headless\Layout\LayoutInterface
{
    public function getName(): string
    {
        return 'custom';
    }

    public function getLayoutPath(): string
    {
        return 'headless/custom.html.twig';
    }
}

3. Register Layout as a tagged service ``: config/services.yaml

    App\Headless\CustomLayout:
        tags:
            - { name: pimcore.headless.documents.layout }

4. Use custom layout in template configuration:

layout: custom
content:
    headline:
        type: input
        config:
            placeholder: Headline
            required: true
    mainContent:
        type: wysiwyg