gutenberg-formats.js

import './style.scss';

const { toggleFormat, registerFormatType } = wp.richText;
const { RichTextToolbarButton } = wp.blockEditor;

const formatName = 'igmoweb/boxed-format';
const formatTitle = 'Boxed';

const BoxedButton = ( { onChange, value, isActive } ) => {
	const toggleBoxedFormat = () => {
		onChange( toggleFormat(
			value,
			{
				type: formatName,
				attributes: {
					'data-type': 'box',
				},
			}
		) );
	};

	return (
		<RichTextToolbarButton
			icon="archive"
			title={ formatTitle }
			onClick={ toggleBoxedFormat }
			isActive={ isActive }
		/>
	);
};

registerFormatType( formatName, {
	title: formatTitle,
	tagName: 'span',
	className: 'boxed',
	edit: BoxedButton,
} );