WordPress Gutenberg: add preset size selector to core Post Featured Image block

post-featured-image.js

/**
 * Add a custom preset image size selector to the block
 * Currently only on core post featured image block
 * 
 * [email protected] 11.3.2022
 */

import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';
import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
import { _x } from '@wordpress/i18n';

/**
 * Restrict to specific blocks
 */
const allowedBlocks = ['core/post-featured-image'];

/**
 * Add custom attributes to the block.
 */
addFilter('blocks.registerBlockType', 'sht/post-featured-image-attributes', settings => {
    if (typeof settings.attributes !== 'undefined' && allowedBlocks.includes(settings.name)) {
        settings.attributes = Object.assign(settings.attributes, {
            sizeSlug: {
                type: 'string',
                default: 'thumbnail',
            },
        });
    }

    return settings;
});

/**
 * Add control to the InspectorControls in the editor
 */

addFilter(
    'editor.BlockEdit',
    'sht/post-featured-image-advanced-control',
    createHigherOrderComponent(BlockEdit => {
        return props => {
            const { attributes, setAttributes } = props;

            const { sizeSlug } = attributes;

            if (props.name !== 'core/post-featured-image') {
                return <BlockEdit {...props} />;
            }

            return (
                <Fragment>
                    <BlockEdit {...props} />
                    <InspectorControls>
                        <PanelBody title={_x('Bildgrösse', 'Select field label', 'sha')}>
                            <SelectControl
                                label={_x(
                                    'Vordefinierte Bildgrösse auswählen',
                                    'Select field label',
                                    'sha'
                                )}
                                value={sizeSlug}
                                options={[
                                    {
                                        label: _x('Kleinbild', 'Selector label', 'sha'),
                                        value: 'thumbnail',
                                    },
                                    {
                                        label: _x('Mittel', 'Selector label', 'sha'),
                                        value: 'medium',
                                    },
                                    {
                                        label: _x('Gross', 'Selector label', 'sha'),
                                        value: 'large',
                                    },
                                    {
                                        label: _x('Vollständige Grösse', 'Selector label', 'sha'),
                                        value: 'full',
                                    },
                                ]}
                                onChange={sizeSlug => setAttributes({ sizeSlug })}
                            />
                        </PanelBody>
                    </InspectorControls>
                </Fragment>
            );
        };
    })
);

PostFeaturedImage.php

<?php

namespace SayHello\Theme\Block;

use WP_Block;

/**
 * Core Post Featured Image block
 * From plugin
 *
 * @author Say Hello GmbH <[email protected]>
 */
class PostFeaturedImage
{

	public function run()
	{
		add_action('render_block', [$this, 'renderBlock'], 10, 2);
	}

	public function renderBlock(string $html, array $block)
	{

		if (empty($html) || $block['blockName'] !== 'core/post-featured-image') {
			return $html;
		}

		$classNameBase = wp_get_block_default_classname($block['blockName']);
		$size = $block['attrs']['sizeSlug'] ?? 'thumbnail';

		$image = wp_get_attachment_image(
			get_post_thumbnail_id(),
			$size,
			false,
			['class' => "attachment-thumbnail size-{$size} wp-post-image"]
		);

		if (empty($image)) {
			return '';
		}

		return sprintf('<figure class="%s" data-sht-customisedby="theme">%s</figure>', $classNameBase, $image);
	}
}