Conditionally show/hide block styles depending on the currently selected variation

index.tsx

import { addFilter } from "@wordpress/hooks";
import { createHigherOrderComponent } from "@wordpress/compose";

interface blockProps {
	attributes: {
		className: string;
	};
	isSelected: boolean;
	name: string;
}

addFilter(
	'editor.BlockEdit',
	'blockify/conditional-block-styles',
	createHigherOrderComponent( BlockEdit => {
		return ( props: blockProps ) => {
			const { attributes, isSelected, name } = props;

			const blockEdit = <BlockEdit { ...props } />;
			const className = attributes.className ?? '';

			if ( ! isSelected || name !== 'core/image' ) {
				return blockEdit;
			}

			// Get the button dom element.
			const iconOnlyStyleButton = document.querySelector( '[aria-label="Icon Only"]' ) as HTMLButtonElement;

			if ( ! iconOnlyStyleButton ) {
				return blockEdit;
			}

			// Check for the block variation class name.
			if ( className.includes( 'is-style-icon' ) ) {
				iconOnlyStyleButton.style.display = 'inline-block';
			} else  {
				iconOnlyStyleButton.style.display = 'none';
			}

			return blockEdit;
		}
	}, 'withConditionalBlockStyle' ),
	9
);