ImageSizeSelector

Displays a selector for setting the image size and the corresponding url in InspectorControls.

link Example

import { ImageSizeSelector } from '@t2/editor';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

export default function Edit({ attributes, setAttributes }) {
    const { mediaId, mediaUrl, sizeSlug } = attributes;
    const blockProps = useBlockProps({ className: 't2-test-block' });

    return (
        <>
            <InspectorControls>
                <PanelBody title={__('Settings', 't2')}>
                    <ImageSizeSelector
                        value={sizeSlug}
                        imageId={mediaId}
                        onChange={(slug, url) => setAttributes({ sizeSlug: slug, mediaUrl: url })}
                    />
                </PanelBody>
            </InspectorControls>
            <div {...blockProps}>
                <img src={mediaUrl} />
            </div>
        </>
    );
}

link Component properties

export type ImageSizeSelectorProps = {
	/** The control label. */
	label?: string;

	/** The selected image size slug. */
	value?: string;

	/** The image id. */
	imageId: number;
	
	/** Callback when the image size changes. */
	onChange: (slug: string, url: string) => void;
};

link Screenshots