Cover Image: Classes should be fraction of 100

WordPress · Sep 29, 2017 · 7280973 · 7280973
1 parent eab53ef
commit 7280973
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 -->