From 728097398c477ebdcccf2a9caa09e2f0d1276e79 Mon Sep 17 00:00:00 2001
From: Miguel Fonseca <miguelcsf@gmail.com>
Date: Fri, 29 Sep 2017 17:12:31 +0100
Subject: [PATCH] Cover Image: Classes should be fraction of 100

---
 blocks/library/cover-image/index.js                    | 2 +-
 blocks/library/cover-image/style.scss                  | 2 +-
 blocks/test/fixtures/core__cover-image.html            | 2 +-
 blocks/test/fixtures/core__cover-image.json            | 2 +-
 blocks/test/fixtures/core__cover-image.parsed.json     | 2 +-
 blocks/test/fixtures/core__cover-image.serialized.html | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
index d5abf2b735469..112f56ac5bd50 100644
--- a/blocks/library/cover-image/index.js
+++ b/blocks/library/cover-image/index.js
@@ -193,5 +193,5 @@ registerBlockType( 'core/cover-image', {
 function dimRatioToClass( ratio ) {
 	return ( ratio === 0 || ratio === 50 )
 		? null
-		: 'has-background-dim-' + Math.round( ratio / 10 );
+		: 'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) );
 }
diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
index 24f5e347f102c..a9934a93fbc98 100644
--- a/blocks/library/cover-image/style.scss
+++ b/blocks/library/cover-image/style.scss
@@ -33,7 +33,7 @@
 	}
 
 	@for $i from 1 through 10 {
-		&.has-background-dim.has-background-dim-#{ $i }:before {
+		&.has-background-dim.has-background-dim-#{ $i * 10 }:before {
 			background-color: rgba( black, $i * 0.1 );
 		}
 	}
diff --git a/blocks/test/fixtures/core__cover-image.html b/blocks/test/fixtures/core__cover-image.html
index 1a5835852dbb7..de557f4357676 100644
--- a/blocks/test/fixtures/core__cover-image.html
+++ b/blocks/test/fixtures/core__cover-image.html
@@ -1,5 +1,5 @@
 <!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-4 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
     <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:core/cover-image -->
diff --git a/blocks/test/fixtures/core__cover-image.json b/blocks/test/fixtures/core__cover-image.json
index 35f3566c0290b..a8b2f95c682ef 100644
--- a/blocks/test/fixtures/core__cover-image.json
+++ b/blocks/test/fixtures/core__cover-image.json
@@ -11,6 +11,6 @@
             "hasParallax": false,
             "dimRatio": 40
         },
-        "originalContent": "<section class=\"wp-block-cover-image has-background-dim-4 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>"
+        "originalContent": "<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>"
     }
 ]
diff --git a/blocks/test/fixtures/core__cover-image.parsed.json b/blocks/test/fixtures/core__cover-image.parsed.json
index 70ad0a76af4c0..9d337ce943ef1 100644
--- a/blocks/test/fixtures/core__cover-image.parsed.json
+++ b/blocks/test/fixtures/core__cover-image.parsed.json
@@ -5,7 +5,7 @@
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
             "dimRatio": 40
         },
-        "rawContent": "\n<section class=\"wp-block-cover-image has-background-dim-4 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>\n"
+        "rawContent": "\n<section class=\"wp-block-cover-image has-background-dim-40 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg);\">\n    <h2>Guten Berg!</h2>\n</section>\n"
     },
     {
         "attrs": {},
diff --git a/blocks/test/fixtures/core__cover-image.serialized.html b/blocks/test/fixtures/core__cover-image.serialized.html
index 1a5835852dbb7..de557f4357676 100644
--- a/blocks/test/fixtures/core__cover-image.serialized.html
+++ b/blocks/test/fixtures/core__cover-image.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
-<section class="wp-block-cover-image has-background-dim-4 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<section class="wp-block-cover-image has-background-dim-40 has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
     <h2>Guten Berg!</h2>
 </section>
 <!-- /wp:core/cover-image -->