• Documentation >
• Content management >
• RichText >
• Create custom RichText block

Create custom RichText block

A RichText block is a specific example of a custom block that you can use when you create a page. To create a custom block, you must define the block's layout, provide templates, add a subscriber, and register the subscriber as a service.

Follow the procedure below to create a RichText page block.

First, provide the block configuration under the ibexa_page_fieldtype.blocks configuration key. The following code defines a new block, its view and configuration templates. It also sets the attribute type to richtext (line 15):

ibexa_fieldtype_page:
    blocks:
        my_block:
            name: My Richtext Block
            thumbnail: assets/images/blocks/richtext_block_icon.svg
            configuration_template: '@ibexadesign/blocks/my_block/config.html.twig'
            views:
                default:
                    template: '@ibexadesign/blocks/my_block/default.html.twig'
                    name: My block view
                    priority: -255                    
            attributes:
                content:
                    name: Content
                    type: richtext

Note

Make sure that you provide an icon for the block in the assets/images/blocks/ folder.

Then, create a subscriber that converts a string of data into XML code. Create a src/Event/Subscriber/RichTextBlockSubscriber.php file.

In line 32, my_block is the same name of the block that you defined in line 3 above. Line 32 also implements the PreRender method. Lines 41-51 handle the conversion of content into an XML string:

<?php

declare(strict_types=1);

namespace App\Event\Subscriber;

use Ibexa\FieldTypePage\FieldType\Page\Block\Renderer\BlockRenderEvents;
use Ibexa\FieldTypePage\FieldType\Page\Block\Renderer\Event\PreRenderEvent;
use Ibexa\FieldTypePage\FieldType\Page\Block\Renderer\Twig\TwigRenderRequest;
use Ibexa\FieldTypeRichText\RichText\DOMDocumentFactory;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class RichTextBlockSubscriber implements EventSubscriberInterface
{
    /** @var \Ibexa\FieldTypeRichText\RichText\DOMDocumentFactory */
    private $domDocumentFactory;

    /**
     * @param \Ibexa\FieldTypeRichText\RichText\DOMDocumentFactory $domDocumentFactory
     */
    public function __construct(DOMDocumentFactory $domDocumentFactory)
    {
        $this->domDocumentFactory = $domDocumentFactory;
    }

    /**
     * {@inheritdoc}
     */
    public static function getSubscribedEvents(): array
    {
        return [
            BlockRenderEvents::getBlockPreRenderEventName('my_block') => 'onBlockPreRender',
        ];
    }

    /**
     * @param \Ibexa\FieldTypePage\FieldType\Page\Block\Renderer\Event\PreRenderEvent $event
     */
    public function onBlockPreRender(PreRenderEvent $event): void
    {
        $renderRequest = $event->getRenderRequest();
        if (!$renderRequest instanceof TwigRenderRequest) {
            return;
        }
        $parameters = $renderRequest->getParameters();
        $parameters['document'] = null;
        $xml = $event->getBlockValue()->getAttribute('content')->getValue();
        if (!empty($xml)) {
            $parameters['document'] = $this->domDocumentFactory->loadXMLString($xml);
        }
        $renderRequest->setParameters($parameters);
    }
}

Now you can create templates that are used for displaying and configuring your block.

Create the view template in templates/themes/<your-theme>/blocks/my_block/richtext.html.twig. Line 2 is responsible for rendering the content from XML to HTML5:

<div class="block-richtext {{ block_class }}">
            {{ document | ibexa_richtext_to_html5 }}
</div>

Then, create a separate templates/themes/admin/blocks/my_block/config.html.twig template:

{% extends '@IbexaPageBuilder/page_builder/block/config.html.twig' %}

{% block meta %}
    {{ parent() }}
    <meta name="LanguageCode" content="{{ language_code }}" />
{% endblock %}

Finally, register the subscriber as a service in config/services.yaml:

services:
    App\Event\Subscriber\RichTextBlockSubscriber:
        tags:
            - { name: kernel.event_subscriber }

You have successfully created a custom RichText block. You can now add your block in the Site tab.

For more information about customizing additional options of the block or creating custom blocks with other attribute types, see Create custom Page block.