Gutenberg Block Style CSS Class Is Not Applying on Backend

Turns out, you need to manually add the wrapper class in the edit function. Here’s the source – https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#classname

I changed this line –

 <section className={`text-section-one`} style={{ backgroundColor: `${bgColor}`}} >

to

  <section className= { `${props.className} text-section-one`}  style={{ backgroundColor: `${bgColor}`}} >

and it solved problem.