JSFiddle - React, Tailwind, and code Playground
JavaScript
function withInspectorContro( BlockEdit ) {
const WrappedBlockEdit = ( props ) => {
const hasCustomClassName = hasBlockSupport( props.name, 'customClassName', true ) && props.isSelected;
return [
<BlockEdit key="block-edit-custom-class-name" { ...props } />,
hasCustomClassName && <InspectorControls key="inspector-custom-class-name">
<SelectControl
label={ __( 'Additional CSS Class' ) }
value={ props.attributes.className || '' }
onChange={ ( newclassNames ) => {
props.setAttributes( {
className: newclassNames,
} );
} }
options={ linkCss }
/>
</InspectorControls>
];
};
WrappedBlockEdit.displayName = getWrapperDisplayName( BlockEdit, 'customClassName' );
return WrappedBlockEdit;
}
addFilter( 'blocks.BlockEdit', 'core/custom-class-name/inspector-contro', withInspectorContro );