Cover Image: Add range slider for background dim #2815

mcsf · 2017-09-27T17:39:43Z

Implements #2006

(previous screencast)

In terms of design:

Should the slider only appear when dimming is toggled? (Current)
Should the slider's position or other style reflect is subordinate relationship with the toggle?
Should the slider altogether replace the toggle?
Should I start this over? :)

In technical terms:

The toggle-based dimming was implemented with a CSS rule on a :before element. These aren't programmatically manipulable, so fully dynamic dimming (i.e., setting background for any alpha value) isn't possible. The current solution is based on ten hardcoded steps offered to the user.
Is it worth moving away from this? (My gut says no.)

codecov · 2017-09-27T17:39:48Z

Codecov Report

Merging #2815 into master will increase coverage by 0.2%.
The diff coverage is 50%.

@@            Coverage Diff            @@
##           master    #2815     +/-   ##
=========================================
+ Coverage   33.77%   33.97%   +0.2%     
=========================================
  Files         191      191             
  Lines        5691     6199    +508     
  Branches      996     1136    +140     
=========================================
+ Hits         1922     2106    +184     
- Misses       3189     3421    +232     
- Partials      580      672     +92

Impacted Files	Coverage Δ
blocks/library/cover-image/index.js	`33.33% <50%> (+2.89%)`	⬆️
blocks/library/code/index.js	`53.84% <0%> (-3.3%)`	⬇️
blocks/editable/index.js	`8.92% <0%> (-1.59%)`	⬇️
blocks/library/separator/index.js	`60% <0%> (ø)`	⬆️
editor/modes/visual-editor/block.js	`0% <0%> (ø)`	⬆️
editor/modes/visual-editor/block-list.js	`0% <0%> (ø)`	⬆️
blocks/library/preformatted/index.js	`50% <0%> (ø)`	⬆️
editor/store-persist.js	`100% <0%> (ø)`	⬆️
...ditor/modes/visual-editor/invalid-block-warning.js	`0% <0%> (ø)`	⬆️
blocks/library/video/index.js	`21.21% <0%> (+0.15%)`	⬆️
... and 10 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e7f1223...7280973. Read the comment docs.

melchoyce · 2017-09-27T19:36:15Z

In my opinion...

Should the slider altogether replace the toggle?

Yes, which answers your first two questions. I think we should get rid of the toggle and just show the slider, defaulting to 0. Then, I'd update the label to either "Dimness" or "Opacity" and show the value as a percentage of 100%, rather than 0–1.

mcsf · 2017-09-27T19:50:15Z

All those sound good!

mcsf · 2017-09-27T20:47:29Z

Updated:

aduth · 2017-09-28T01:00:17Z

Noting that it's an inevitably as we iterate on blocks, but this will likely cause many existing Cover Image blocks to become flagged as invalid, due to markup / class name changes.

Related: #2541

aduth · 2017-09-28T01:05:15Z

blocks/library/cover-image/index.js

+
+function dimRatioToClass( ratio ) {
+	let rounded = Math.round( ratio / 10 );
+	// String#padStart not ready for prime time


This a difficult task to implement correctly, and I think the only viable option is to call out to a service which is designed to take on the burden of maintaining this implementation: http://left-pad.io/

On a more serious note, there's: https://lodash.com/docs/4.17.4#padStart

Or my personal preference, the negative slice:

( '0' + rounded ).slice( -2 );

there's lodash

Ooh, Dash must have failed me. :) Though I like the negative slice better.

aduth · 2017-09-28T01:06:30Z

blocks/library/cover-image/index.js

+	if ( rounded < 10 ) {
+		rounded = '0' + rounded;
+	}
+	return 'has-background-dim--' + rounded;


What was the reasoning behind the double dash? Could be misleading as a pattern that we don't encourage. Should be sufficient with the single dash.

No reasoning, just reflexes. :)

aduth · 2017-09-28T01:07:28Z

blocks/library/cover-image/style.scss

+		background: rgba( 0,0,0,.9 );
+	}
+
+	&.has-background-dim.has-background-dim--10:before {


A SASS loop control could help avoid the duplication here, if maybe a bit overkill:

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_for
http://thesassway.com/intermediate/if-for-each-while#for

@for $i from 1 through 10 { &.has-background-dim.has-background-dim-#{ $i } { background-image: rgba( black, $i * 0.1 ); } }

(Which, I'm seeing could be an issue for the 0 prefixing, and begs the question: Do we need the padding?)

Yeah, I'll drop the padding. I think my subconscious reasoning was that classes are strings, thus numbers injected into these should have the padding so that alphabetical sorting matches number sorting. ¯_(ツ)_/¯

aduth · 2017-09-28T01:11:07Z

blocks/library/cover-image/index.js

 		const style = url
 			? { backgroundImage: `url(${ url })` }
 			: undefined;
 		const classes = classnames( className, {
 			'has-parallax': hasParallax,
-			'has-background-dim': hasBackgroundDim,
+			'has-background-dim': dimRatio !== 0,
+			[ dimRatioToClass( dimRatio ) ]: dimRatio !== 0,


Maybe dimRatioToClass should return an empty string or null value when it is not equal to zero, which we pass as a standalone argument to classnames to be dropped?

Saner, yes.

mcsf · 2017-09-28T11:59:03Z

Thanks for the sanity, @aduth! Feedback addressed.

aduth · 2017-09-29T12:44:40Z

blocks/library/cover-image/index.js

+			className,
+			dimRatioToClass( dimRatio ),
+			{
+				'has-background-dim': dimRatio !== 0,


Was this added to try to preserve backwards compatibility with existing content? I'd have hoped it would be the case, but unfortunately existing cover image blocks appear to be flagged as invalid. The issue appears to be that the old content will have the has-background-dim class, but the dimRatio will not be found and therefore default to 0, thus causing a subsequent save to save without has-background-dim and cause content loss (the validator in action!). Maybe we should assign the default for dimRatio to mimic what had previously existed as the default for hasBackgroundDim effect?

(For debugging validation, see also new #2837)

Was this added to try to preserve backwards compatibility with existing content?

Not really. For the issue of compatibility, I stopped to consider what we could do at the framework level. Regardless, something as small as this shouldn't be blocked by that, so I pushed ~~2884db~~ eab53ef. Note, though, the weirdness of

function dimRatioToClass( ratio ) { - return ratio === 0 + return ( ratio === 0 || ratio === 50 ) ? null : 'has-background-dim-' + Math.round( ratio / 10 ); }

Since 50% dimming corresponds to the previous default value of hasBackgroundDim, we need to treat that specifically to avoid altering our block's class list.

Not really.

If not, why do we need has-background-dim at all? (Edit: I say this, though it may allow us to keep compatibility)

Note, though, the weirdness of

I think this is fine, expected even. Similar to how we omit default values from serialized comments, we can omit the default value (50) from the class set.

So... my answer was for the past only. :)

I say this, though it may allow us to keep compatibility

Exactly. At first, it lingered while I pondered on the general compat stuff, but with that eab53ef it makes sense to keep it.

aduth · 2017-09-29T16:04:43Z

blocks/library/cover-image/index.js

+function dimRatioToClass( ratio ) {
+	return ( ratio === 0 || ratio === 50 )
+		? null
+		: 'has-background-dim-' + Math.round( ratio / 10 );


One more thing: Do we need the division? I might think .has-background-dim-50 is clearer at a glance than .has-background-dim-5

The classes reflected the allowed granularity, but I can change that. Maybe it'll make it more future-proof.

Actually, the division might still be needed, but the computation becomes:

10 * Math.round( ratio / 10 )

meaning that 35…44 -> 40, etc. Edit: in case a user inputs a specific value in between 40 and 50

aduth

Confirmed back-compat, looks great 👍

mcsf added [Feature] Blocks Overall functionality of blocks Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement. labels Sep 27, 2017

mcsf self-assigned this Sep 27, 2017

mcsf requested review from aduth and melchoyce September 27, 2017 17:39

aduth reviewed Sep 28, 2017

View reviewed changes

mcsf force-pushed the add/cover-image-ranged-dimmer branch from cb56807 to e2d6697 Compare September 28, 2017 11:57

Cover Image: Replace hasBackgroundDim toggle with slider control

f6ae7fe

mcsf force-pushed the add/cover-image-ranged-dimmer branch from e2d6697 to 89cd7ff Compare September 28, 2017 16:15

aduth requested changes Sep 29, 2017

View reviewed changes

Cover Image: Ensure backcompat via default attributes

eab53ef

mcsf force-pushed the add/cover-image-ranged-dimmer branch from 2884db5 to 31ebf85 Compare September 29, 2017 15:17

aduth reviewed Sep 29, 2017

View reviewed changes

Cover Image: Classes should be fraction of 100

7280973

mcsf force-pushed the add/cover-image-ranged-dimmer branch from 31ebf85 to 7280973 Compare September 29, 2017 16:14

aduth approved these changes Sep 29, 2017

View reviewed changes

mcsf merged commit eb25d78 into master Oct 2, 2017

mcsf deleted the add/cover-image-ranged-dimmer branch October 2, 2017 11:41

BronsonQuick mentioned this pull request Jul 10, 2018

Cover Image: Change the label from "Background Dimness" to "Background Opacity" #7853

Closed

mcsf mentioned this pull request May 13, 2020

Lower spacer and cover block step values #22320

Merged

6 tasks

t-hamano mentioned this pull request Jun 19, 2023

Cover Block: Overlay is only possible in 10-steps instead of 1 - Disable Rounding #51625

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cover Image: Add range slider for background dim #2815

Cover Image: Add range slider for background dim #2815

mcsf commented Sep 27, 2017 •

edited

Loading

codecov bot commented Sep 27, 2017 •

edited

Loading

melchoyce commented Sep 27, 2017

mcsf commented Sep 27, 2017

mcsf commented Sep 27, 2017

aduth commented Sep 28, 2017

aduth Sep 28, 2017

mcsf Sep 28, 2017 •

edited

Loading

aduth Sep 28, 2017

mcsf Sep 28, 2017 •

edited

Loading

aduth Sep 28, 2017

mcsf Sep 28, 2017

aduth Sep 28, 2017

mcsf Sep 28, 2017

mcsf commented Sep 28, 2017

aduth Sep 29, 2017

mcsf Sep 29, 2017 •

edited

Loading

aduth Sep 29, 2017 •

edited

Loading

aduth Sep 29, 2017

mcsf Sep 29, 2017

aduth Sep 29, 2017

mcsf Sep 29, 2017

mcsf Sep 29, 2017 •

edited

Loading

aduth left a comment

Cover Image: Add range slider for background dim #2815

Cover Image: Add range slider for background dim #2815

Conversation

mcsf commented Sep 27, 2017 • edited Loading

codecov bot commented Sep 27, 2017 • edited Loading

Codecov Report

melchoyce commented Sep 27, 2017

mcsf commented Sep 27, 2017

mcsf commented Sep 27, 2017

aduth commented Sep 28, 2017

Choose a reason for hiding this comment

mcsf Sep 28, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcsf Sep 28, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcsf commented Sep 28, 2017

Choose a reason for hiding this comment

mcsf Sep 29, 2017 • edited Loading

Choose a reason for hiding this comment

aduth Sep 29, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcsf Sep 29, 2017 • edited Loading

Choose a reason for hiding this comment

aduth left a comment

Choose a reason for hiding this comment

mcsf commented Sep 27, 2017 •

edited

Loading

codecov bot commented Sep 27, 2017 •

edited

Loading

mcsf Sep 28, 2017 •

edited

Loading

mcsf Sep 28, 2017 •

edited

Loading

mcsf Sep 29, 2017 •

edited

Loading

aduth Sep 29, 2017 •

edited

Loading

mcsf Sep 29, 2017 •

edited

Loading