# Create custom RichText block

A RichText block is a specific example of a [custom block](https://doc.ibexa.co/en/latest/content_management/pages/create_custom_page_block/index.md) 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](https://doc.ibexa.co/en/latest/administration/configuration/configuration/#configuration-files). 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
{
    /**
     * @param \Ibexa\FieldTypeRichText\RichText\DOMDocumentFactory $domDocumentFactory
     */
    public function __construct(private readonly 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](https://doc.ibexa.co/en/latest/templating/templates/templates/index.md) 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](https://doc.ibexa.co/en/latest/content_management/pages/create_custom_page_block/index.md).