README

TYPO3 Extension EXT:nb_headless_content_blocks

Connects together EXT:headless (friendsoftypo3/headless) and EXT:content_blocks (friendsoftypo3/content-blocks)

TYPO3 Installation

Install extension using composer

composer require netzbewegung/nb_headless_content_blocks

and then, include Site Set "Headless Content Blocks", and you are ready to go.

Features

• Converts all complex objects into an array without extra configuration
• Richtext fields are automaticly converted via parseFunc($value, null, '< lib.parseFunc_RTE')
• Additional thumbnails can be created via headless.php per Content Block
• Support for EXT:container

Custom Configuration per Content Block Type

Create headless.php inside each Content Block.

your_extension/ContentBlocks/ContentElements/your-content-block-element/headless.php

<?php

use TYPO3\CMS\Fluid\ViewHelpers\Uri\ImageViewHelper;

$generateThumbnail = function (array $arguments): string {
    if (array_key_exists('absolute', $arguments) === false) {
        $arguments['absolute'] = true;
    }

    $imageViewHelper = new ImageViewHelper();

    foreach ($imageViewHelper->prepareArguments() as $argumentKey => $argumentDefinition) {
        if (array_key_exists($argumentKey, $arguments) === false) {
            $arguments[$argumentKey] = $argumentDefinition->getDefaultValue();
        }
    }

    $imageViewHelper->setArguments($arguments);

    return $imageViewHelper->initializeArgumentsAndRender();

};

foreach ($data['items'] ?? [] as $itemKey => $item) {

    if ($item['image']) {
        $image = $item['image'];

        $data['items'][$itemKey]['image']['thumbnails'] = [
            'mobile' => $generateThumbnail(['src' => $image['id'], 'treatIdAsReference' => true, 'width' => 320]),
            'desktop' => $generateThumbnail(['src' => $image['id'], 'treatIdAsReference' => true, 'width' => 800]),
        ];
    }
}

return $data;

Additional Data via Sub DataProcessing

tt_content.vendor_yourcontentblockelement.fields.data.dataProcessing.10 {
    dataProcessing {
        10 = menu
        10 {
            levels = 2
            as = navigation
        }
    }
}

Custom Configuration per FieldType/FieldName/TCA-Configuration in ArrayRecursiveToArray via PSR-14 Event

Create a PSR-14 Event Listener in your extension. Use $event->setProcessedValue($yourModifiedValueForThisField) to handle the value for specific fields. Any unhandled fields will fall back to the default processing.

<?php

declare(strict_types=1);

namespace MyVendor\MyExtension\EventListener;

use Netzbewegung\NbHeadlessContentBlocks\Event\ModifyArrayRecursiveToArrayEvent;
use TYPO3\CMS\Core\Attribute\AsEventListener;

#[AsEventListener()]
final class MyCustomListener {
    public function __invoke(ModifyArrayRecursiveToArrayEvent $event): void {
        // Example: Custom handling by field name (tt_content.tx_my_vendor_field_name)
        if ($event->getKey() === 'tx_my_vendor_field_name') {
            $value = $event->getValue();
            // Do your custom processing here
            $processedValue = strtoupper($value);
            // $processedValue The value which is returned for this field in json response
            $event->setProcessedValue($processedValue);
        }

        // Example: Custom handling for all text fields
        if ($event->getTcaFieldDefinition()->fieldType instanceof \TYPO3\CMS\ContentBlocks\FieldType\TextFieldType) {
            $value = $event->getValue();
            // Do your custom processing here
            $processedValue = strtoupper($value);
            // $processedValue The value which is returned for this field in json response
            $event->setProcessedValue($processedValue);
        }

        // Example: Custom handling for a specific field which have custom field type
        if ($event->getTcaFieldDefinition()->fieldType instanceof \MyVendor\MyExtension\MyCustomFieldType) {
            $value = $event->getValue();
            // Do your custom processing here
            $processedValue = strtoupper($value);
            // $processedValue The value which is returned for this field in json response
            $event->setProcessedValue($processedValue);
        }
    }
}

Custom Configuration for EXT:container (b13/container)

TypoScript Setup

left/right parallel to data

lib.content.select.where = colPos NOT IN (201, 202)

tt_content.b13_2_columns_container =< lib.contentElement
tt_content.b13_2_columns_container {
    fields {
        left = TEXT
        left {
            dataProcessing {
                10 = nb-container-json 
                10 {
                    colPos = 201
                    as = left
                }
            }
        }
        right = TEXT
        right {
            dataProcessing {
                10 = nb-container-json 
                10 {
                    colPos = 202
                    as = right
                }
            }
        }
    }
}

left/right inside data (via Sub DataProcessing)

lib.content.select.where = colPos NOT IN (201, 202)

tt_content.b13_2_columns_container.fields.data.dataProcessing.10 {
    dataProcessing {
        10 = nb-container-json 
        10 {
            colPos = 201
            as = left
        }

        20 = nb-container-json 
        20 {
            colPos = 202
            as = right
        }
    }
}