Cover Image: Add range slider for background dim (#2815)

* Cover Image: Replace hasBackgroundDim toggle with slider control * Cover Image: Ensure backcompat via default attributes
WordPress · Oct 2, 2017 · eb25d78 · eb25d78
1 parent 8df730f
commit eb25d78
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 27 deletions.
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -17,6 +17,7 @@ import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
 import ToggleControl from '../../inspector-controls/toggle-control';
+import RangeControl from '../../inspector-controls/range-control';
 import BlockDescription from '../../block-description';
 
 const { children } = source;
@@ -48,9 +49,9 @@ registerBlockType( 'core/cover-image', {
 			type: 'boolean',
 			default: false,
 		},
-		hasBackgroundDim: {
-			type: 'boolean',
-			default: true,
+		dimRatio: {
+			type: 'number',
+			default: 50,
 		},
 	},
 
@@ -62,18 +63,22 @@ registerBlockType( 'core/cover-image', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus, className } ) {
-		const { url, title, align, id, hasParallax, hasBackgroundDim } = attributes;
+		const { url, title, align, id, hasParallax, dimRatio } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
 		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
-		const toggleBackgroundDim = () => setAttributes( { hasBackgroundDim: ! hasBackgroundDim } );
+		const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
 		const style = url
 			? { backgroundImage: `url(${ url })` }
 			: undefined;
-		const classes = classnames( className, {
-			'has-parallax': hasParallax,
-			'has-background-dim': hasBackgroundDim,
-		} );
+		const classes = classnames(
+			className,
+			dimRatioToClass( dimRatio ),
+			{
+				'has-background-dim': dimRatio !== 0,
+				'has-parallax': hasParallax,
+			}
+		);
 
 		const controls = focus && [
 			<BlockControls key="controls">
@@ -108,10 +113,13 @@ registerBlockType( 'core/cover-image', {
 					checked={ !! hasParallax }
 					onChange={ toggleParallax }
 				/>
-				<ToggleControl
-					label={ __( 'Dim Background' ) }
-					checked={ !! hasBackgroundDim }
-					onChange={ toggleBackgroundDim }
+				<RangeControl
+					label={ __( 'Background Dimness' ) }
+					value={ dimRatio }
+					onChange={ setDimRatio }
+					min={ 0 }
+					max={ 100 }
+					step={ 10 }
 				/>
 			</InspectorControls>,
 		];
@@ -161,14 +169,18 @@ registerBlockType( 'core/cover-image', {
 	},
 
 	save( { attributes, className } ) {
-		const { url, title, hasParallax, hasBackgroundDim } = attributes;
+		const { url, title, hasParallax, dimRatio } = attributes;
 		const style = url
 			? { backgroundImage: `url(${ url })` }
 			: undefined;
-		const classes = classnames( className, {
-			'has-parallax': hasParallax,
-			'has-background-dim': hasBackgroundDim,
-		} );
+		const classes = classnames(
+			className,
+			dimRatioToClass( dimRatio ),
+			{
+				'has-background-dim': dimRatio !== 0,
+				'has-parallax': hasParallax,
+			}
+		);
 
 		return (
 			<section className={ classes } style={ style }>
@@ -177,3 +189,9 @@ registerBlockType( 'core/cover-image', {
 		);
 	},
 } );
+
+function dimRatioToClass( ratio ) {
+	return ( ratio === 0 || ratio === 50 )
+		? null
+		: 'has-background-dim-' + ( 10 * Math.round( ratio / 10 ) );
+}
diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -29,7 +29,13 @@
 		left: 0;
 		bottom: 0;
 		right: 0;
-		background: rgba( 0,0,0,.5 );
+		background: rgba( black, 0.5 );
+	}
+
+	@for $i from 1 through 10 {
+		&.has-background-dim.has-background-dim-#{ $i * 10 }:before {
+			background-color: rgba( black, $i * 0.1 );
+		}
 	}
 
 	&.components-placeholder {

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","hasBackgroundDim":true} -->
-<section class="wp-block-cover-image has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
+<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
@@ -9,8 +9,8 @@
             ],
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
             "hasParallax": false,
-            "hasBackgroundDim": true
+            "dimRatio": 40
         },
-        "originalContent": "<section class=\"wp-block-cover-image 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
@@ -3,9 +3,9 @@
         "blockName": "core/cover-image",
         "attrs": {
             "url": "https://cldup.com/uuUqE_dXzy.jpg",
-            "hasBackgroundDim": true
+            "dimRatio": 40
         },
-        "rawContent": "\n<section class=\"wp-block-cover-image 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"} -->
-<section class="wp-block-cover-image has-background-dim" style="background-image:url(https://cldup.com/uuUqE_dXzy.jpg);">
+<!-- wp:core/cover-image {"url":"https://cldup.com/uuUqE_dXzy.jpg","dimRatio":40} -->
+<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 -->