fix(number-box): add a container to separate the text from the shape

Author: Arukuen

src/block/number-box/edit.js

@@ -55,11 +55,15 @@ const Edit = props => {
 	const blockClassNames = classnames( [
 		className,
 		'stk-block-number-box',
-		blockAlignmentClass,
 	], {
 		'stk--has-shape': props.attributes.hasShape,
 	} )
 
+	const containerClassNames = classnames( [
+		'stk-block-number-box__container',
+		blockAlignmentClass,
+	] )
+
 	const textClassNames = classnames( [
 		'stk-block-number-box__text',
 		textClasses,
@@ -78,7 +82,6 @@ const Edit = props => {
 
 	return (
 		<>
-
 			<InspectorControls
 				setAttributes={ setAttributes }
 				blockState={ props.blockState }
@@ -94,11 +97,13 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 			>
-				<Typography
-					tagName="div"
-					placeholder="1"
-					className={ textClassNames }
-				/>
+				<div className={ containerClassNames }>
+					<Typography
+						tagName="span"
+						placeholder="1"
+						className={ textClassNames }
+					/>
+				</div>
 			</BlockDiv>
 			{ props.isHovered && <MarginBottom /> }
 		</>

src/block/number-box/save.js

@@ -29,11 +29,15 @@ export const Save = props => {
 		className,
 		'stk-block-number-box',
 		responsiveClass,
-		blockAlignmentClass,
 	], {
 		'stk--has-shape': attributes.hasShape,
 	} )
 
+	const containerClassNames = classnames( [
+		'stk-block-number-box__container',
+		blockAlignmentClass,
+	] )
+
 	const textClassNames = classnames( [
 		'stk-block-number-box__text',
 		textClasses,
@@ -47,12 +51,14 @@ export const Save = props => {
 		>
 			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
-			<Typography.Content
-				tagName="div"
-				attributes={ attributes }
-				className={ textClassNames }
-				role="presentation"
-			/>
+			<div className={ containerClassNames }>
+				<Typography.Content
+					tagName="span"
+					attributes={ attributes }
+					className={ textClassNames }
+					role="presentation"
+				/>
+			</div>
 		</BlockDiv.Content>
 	)
 }

src/block/number-box/style.js

@@ -19,7 +19,7 @@ const blockStyles = new BlockStyleGenerator( {
 } )
 
 blockStyles.addBlockStyles( 'shapeSize', [ {
-	selector: '.stk-block-number-box__text',
+	selector: '.stk-block-number-box__container',
 	styleRule: 'height',
 	attrName: 'shapeSize',
 	key: 'shapeSize',
@@ -28,7 +28,7 @@ blockStyles.addBlockStyles( 'shapeSize', [ {
 	enabledCallback: getAttribute => getAttribute( 'hasShape' ),
 	dependencies: [ 'hasShape' ],
 }, {
-	selector: '.stk-block-number-box__text',
+	selector: '.stk-block-number-box__container',
 	styleRule: 'width',
 	attrName: 'shapeSize',
 	key: 'shapeSize-width',
@@ -40,12 +40,12 @@ blockStyles.addBlockStyles( 'shapeSize', [ {
 
 addBackgroundStyles( blockStyles, {
 	attrNameTemplate: 'shape%s',
-	selector: '.stk-block-number-box__text',
+	selector: '.stk-block-number-box__container',
 	renderCondition: 'hasShape',
 } )
 addBorderStyles( blockStyles, {
 	attrNameTemplate: 'shape%s',
-	selector: '.stk-block-number-box__text',
+	selector: '.stk-block-number-box__container',
 	renderCondition: 'hasShape',
 } )
 Alignment.addStyles( blockStyles )

src/block/number-box/style.scss

@@ -1,6 +1,7 @@
 @import "common";
 
-.stk-block-number-box__text {
+.stk-block-number-box__container,
+div.stk-block-number-box__text {
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
@@ -9,7 +10,8 @@
 	flex: 0 1 auto;
 }
 .stk-block-number-box.stk--has-shape {
-	.stk-block-number-box__text {
+	.stk-block-number-box__container,
+	div.stk-block-number-box__text {
 		background: cssvar(button-background-color);
 		color: #fff;
 		border-radius: 100%;