Fix: Cover block does not contain has-background-gradient class for p…

…redefined gradients
WordPress · Mar 16, 2020 · 257968b · 257968b
1 parent c8ce275
commit 257968b
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 1 deletion.
diff --git a/packages/block-library/src/cover/deprecated.js b/packages/block-library/src/cover/deprecated.js
@@ -57,6 +57,109 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'string',
+				source: 'html',
+				selector: 'p',
+			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
+			minHeight: {
+				type: 'number',
+			},
+			gradient: {
+				type: 'string',
+			},
+			customGradient: {
+				type: 'string',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				backgroundType,
+				gradient,
+				customGradient,
+				customOverlayColor,
+				dimRatio,
+				focalPoint,
+				hasParallax,
+				overlayColor,
+				url,
+				minHeight,
+			} = attributes;
+			const overlayColorClass = getColorClassName(
+				'background-color',
+				overlayColor
+			);
+			const gradientClass = __experimentalGetGradientClass( gradient );
+
+			const style =
+				backgroundType === IMAGE_BACKGROUND_TYPE
+					? backgroundImageStyles( url )
+					: {};
+			if ( ! overlayColorClass ) {
+				style.backgroundColor = customOverlayColor;
+			}
+			if ( focalPoint && ! hasParallax ) {
+				style.backgroundPosition = `${ Math.round(
+					focalPoint.x * 100
+				) }% ${ Math.round( focalPoint.y * 100 ) }%`;
+			}
+			if ( customGradient && ! url ) {
+				style.background = customGradient;
+			}
+			style.minHeight = minHeight || undefined;
+
+			const classes = classnames(
+				dimRatioToClass( dimRatio ),
+				overlayColorClass,
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					'has-background-gradient': customGradient,
+					[ gradientClass ]: ! url && gradientClass,
+				}
+			);
+
+			return (
+				<div className={ classes } style={ style }>
+					{ url &&
+						( gradient || customGradient ) &&
+						dimRatio !== 0 && (
+							<span
+								aria-hidden="true"
+								className={ classnames(
+									'wp-block-cover__gradient-background',
+									gradientClass
+								) }
+								style={
+									customGradient
+										? { background: customGradient }
+										: undefined
+								}
+							/>
+						) }
+					{ VIDEO_BACKGROUND_TYPE === backgroundType && url && (
+						<video
+							className="wp-block-cover__video-background"
+							autoPlay
+							muted
+							loop
+							src={ url }
+						/>
+					) }
+					<div className="wp-block-cover__inner-container">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -64,7 +64,7 @@ export default function save( { attributes } ) {
 		{
 			'has-background-dim': dimRatio !== 0,
 			'has-parallax': hasParallax,
-			'has-background-gradient': customGradient,
+			'has-background-gradient': gradient || customGradient,
 			[ gradientClass ]: ! url && gradientClass,
 		}
 	);

diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.html
@@ -0,0 +1,11 @@
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","gradient":"midnight"} -->
+<div class="wp-block-cover has-background-dim"
+	style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=)">
+	<span aria-hidden="true" class="wp-block-cover__gradient-background has-midnight-gradient-background"></span>
+	<div class="wp-block-cover__inner-container">
+		<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+		<p class="has-text-align-center has-large-font-size">Cover</p>
+		<!-- /wp:paragraph -->
+	</div>
+</div>
+<!-- /wp:cover -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.json
@@ -0,0 +1,33 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/cover",
+        "isValid": true,
+        "attributes": {
+            "url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+            "hasParallax": false,
+            "dimRatio": 50,
+            "backgroundType": "image",
+            "title": "",
+            "contentAlign": "center",
+            "gradient": "midnight"
+        },
+        "innerBlocks": [
+            {
+                "clientId": "_clientId_0",
+                "name": "core/paragraph",
+                "isValid": true,
+                "attributes": {
+                    "align": "center",
+                    "content": "Cover",
+                    "dropCap": false,
+                    "placeholder": "Write title…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "originalContent": "<p class=\"has-text-align-center has-large-font-size\">Cover</p>"
+            }
+        ],
+        "originalContent": "<div class=\"wp-block-cover has-background-dim\"\n\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=)\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-midnight-gradient-background\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>"
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.parsed.json b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.parsed.json
@@ -0,0 +1,39 @@
+[
+    {
+        "blockName": "core/cover",
+        "attrs": {
+            "url": "data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=",
+            "gradient": "midnight"
+        },
+        "innerBlocks": [
+            {
+                "blockName": "core/paragraph",
+                "attrs": {
+                    "align": "center",
+                    "placeholder": "Write title…",
+                    "fontSize": "large"
+                },
+                "innerBlocks": [],
+                "innerHTML": "\n\t\t<p class=\"has-text-align-center has-large-font-size\">Cover</p>\n\t\t",
+                "innerContent": [
+                    "\n\t\t<p class=\"has-text-align-center has-large-font-size\">Cover</p>\n\t\t"
+                ]
+            }
+        ],
+        "innerHTML": "\n<div class=\"wp-block-cover has-background-dim\"\n\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=)\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-midnight-gradient-background\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t\n\t</div>\n</div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-cover has-background-dim\"\n\tstyle=\"background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=)\">\n\t<span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-midnight-gradient-background\"></span>\n\t<div class=\"wp-block-cover__inner-container\">\n\t\t",
+            null,
+            "\n\t</div>\n</div>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.serialized.html b/packages/e2e-tests/fixtures/blocks/core__cover__deprecated-5.serialized.html
@@ -0,0 +1,5 @@
+<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","gradient":"midnight"} -->
+<div class="wp-block-cover has-background-dim has-background-gradient" style="background-image:url(data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=)"><span aria-hidden="true" class="wp-block-cover__gradient-background has-midnight-gradient-background"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
+<p class="has-text-align-center has-large-font-size">Cover</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:cover -->