fix (number box): number box gradient now applied correctly (#3387)

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

* fix(number-box): add deprecation code

Author: Arukuen

src/block/number-box/deprecated.js

@@ -5,9 +5,58 @@ import { withVersion } from '~stackable/higher-order'
 import {
 	deprecateBlockBackgroundColorOpacity, deprecateTypographyGradientColor, deprecationBackgrounColorOpacity,
 	deprecateBlockShadowColor, deprecateContainerShadowColor, deprecateShadowColor,
+	BlockDiv, CustomCSS, Typography,
+	getResponsiveClasses, getTypographyClasses, getAlignmentClasses,
 } from '~stackable/block-components'
+import classnames from 'classnames'
+
+const depecatedSave_3_13_11 = props => {
+	const {
+		className,
+		attributes,
+	} = props
+
+	const responsiveClass = getResponsiveClasses( props.attributes )
+	const textClasses = getTypographyClasses( props.attributes )
+	const blockAlignmentClass = getAlignmentClasses( props.attributes )
+
+	const blockClassNames = classnames( [
+		className,
+		'stk-block-number-box',
+		responsiveClass,
+		blockAlignmentClass,
+	], {
+		'stk--has-shape': attributes.hasShape,
+	} )
+
+	const textClassNames = classnames( [
+		'stk-block-number-box__text',
+		textClasses,
+	] )
+
+	return (
+		<BlockDiv.Content
+			className={ blockClassNames }
+			attributes={ attributes }
+			version={ props.version }
+		>
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
+			<CustomCSS.Content attributes={ attributes } />
+			<Typography.Content
+				tagName="div"
+				attributes={ attributes }
+				className={ textClassNames }
+				role="presentation"
+			/>
+		</BlockDiv.Content>
+	)
+}
 
 const deprecated = [
+	{
+		attributes: attributes( '3.13.11' ),
+		save: depecatedSave_3_13_11,
+	},
 	{
 		// Support the new shadow color.
 		attributes: attributes( '3.12.11' ),

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%;