Headless Bricks

A Headless Brick is a reusable set of editables that editors add to a Headless Document through an areablock content entry. It works the same way as an Areablock of a standard Pimcore document.

Headless Bricks extend Pimcore's area-bricks, but without a brick class: define the brick structure as YAML and reference it by name in a template's areablock configuration. There is nothing to register in PHP.

Brick Configuration Interface

Users with the pimcore_headless_documents_config permission (see Installation) manage bricks directly in Pimcore Studio, under Experience & E-commerce > Headless Documents > Headless Bricks in the main menu. As with templates, the interface shows inline help for every supported editable type.

Configuration Structure

A brick is a YAML structure with type: brick and an items map of editables:

• group: an optional label used to group bricks in the Studio interface, see Grouping.
• icon: an optional icon path shown next to the brick in the Areablock's brick picker.
• items: the brick's editables, in the same structure as a template's content entries.

var/config/headless_bricks/teasers.yaml:

pimcore_headless_documents:
    bricks:
        teasers:
            type: brick
            items:
                teaser_1:
                    type: snippet
                teaser_2:
                    type: snippet
        gallery:
            type: brick
            icon: '<some icon path>'
            group: 'Gallery'
            items:
                image:
                    type: image
                    config:
                        width: 200
                        height: 200
                        thumbnail: gallery

Reference bricks by name in a template's areablock entry, under config.allowed:

var/config/headless_templates/example.yaml:

pimcore_headless_documents:
    templates:
        example:
            content:
                contentBlocks:
                    type: areablock
                    config:
                        allowed: ['teasers', 'gallery']