Gutenberg: server side render with editable title

index.jsx

import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { _x } from '@wordpress/i18n';
import { sayhello as icon } from '../../icons';
import { Fragment } from '@wordpress/element';
import { PanelBody } from '@wordpress/components';

const blockName = 'sht/post-more-same-category';

registerBlockType(blockName, {
    apiVersion: 2,
    title: _x('Weitere Artikel zum gleichen Thema', 'Block title', 'sha'),
    icon,
    category: 'sht/blocks',
    supports: {
        align: false,
        html: false,
    },
    attributes: {
        title: {
            type: 'string',
            default: '',
        },
    },
    edit: ({ attributes }) => {
        const blockProps = useBlockProps();

        const { title } = attributes;

        return (
            <Fragment>
                <InspectorControls>
                    <PanelBody label={__('Einstellungen', 'sha')}>
                        <TextControl
                            label={__('Überschrift', 'sha')}
                            value={title}
                            onChange={title => setAttributes({ title })}
                        />
                    </PanelBody>
                </InspectorControls>
                <div {...blockProps}>
                    <ServerSideRender block={blockName} attributes={attributes} />
                </div>
            </Fragment>
        );
    },
});

PostMoreSameCategory.php

<?php

namespace SayHello\Theme\Block;

use WP_Term;

/**
 * More posts from same category as current post
 *
 * @author Say Hello GmbH <[email protected]>
 */
class PostMoreSameCategory
{

	public function run()
	{
		add_action('init', [$this, 'register']);
	}

	public function register()
	{
		register_block_type('sht/post-more-same-category', [
			'attributes' => [
				'title' => [
					'default' => '',
					'type'    => 'string'
				],
			],
			'render_callback' => function (array $attributes) {

				// Editor
				if (sht_theme()->Package->Gutenberg->isContextEdit()) {
					ob_start();
?>
				<div class="c-editormessage">
					<?php _e('Weitere Artikel aus dem gleichen Thema', 'sha'); ?>
				</div>
			<?
					$html = ob_get_contents();
					ob_end_clean();
					return $html;
				}

				$current_post_id = get_the_ID();

				$primary_category = sht_theme()->PostType->Post->getPrimaryCategory($current_post_id);

				if (!$primary_category instanceof WP_Term) {
					return '';
				}

				$posts_in_term = get_posts([
					'posts_per_page' => 3,
					'fields' => 'ids',
					'tax_query' => [
						[
							'taxonomy' => 'category',
							'terms' => $primary_category->term_id,
						],
					]
				]);

				if (!count($posts_in_term)) {
					return '';
				}

				ob_start();

			?>
			<div class="wp-block-sht-post-more-same-category">
				<?php if (!empty($attributes['title'] ?? '')) { ?>
					<h2 class="wp-block-sht-post-more-same-category__header"><?php echo esc_html($attributes['title']); ?></h2>
				<?php } ?>
				<ul class="wp-block-sht-post-more-same-category__entries">
					<?php foreach ($posts_in_term as $post_id) { ?>
						<li class="wp-block-sht-post-more-same-category__entry">
							<div class="wp-block-sht-post-more-same-category__title"><?php echo get_the_title($post_id); ?></div>
						</li>
					<?php } ?>
				</ul>
			</div>
<?php
				$html = ob_get_contents();
				ob_end_clean();
				return $html;
			}
		]);
	}
}