JSFiddle - React, Tailwind, and code Playground
JavaScript
wp.blocks.BlockEdit( 'all', ( originalBlock ) => {
const cssOptions= [
{value: 'classes1', label: 'classes1'},
{value: 'classes2', label: 'classes2'},
{value: 'classes3', label: 'classes3'},
{value: 'classes4', label: 'classes4'},
];
attributes: {
className: {
type: 'string',
},
},
edit( props ) {
const element = originalBlock.save( props );
const { attributes, setAttributes } = props;
const { className } = attributes;
function addClassName(className ) {
props.setAttributes({className : className });
}
return [
element,
<InspectorControls>
<SelectControl
label={ __( 'Additional CSS Class' ) }
select={className}
options={cssOptions}
onChange={ addClassName }
/>
</InspectorControls>
];
},
save( props ) {
const element = originalBlock.save( props );
const { className } = props.attributes;
return cloneElement( element, {
className: [ element.props.className || '', className ].join( ' ' ),
} );
},
} );