Fix/drop cap

[rebeccaj1211]

Description

In reference to #11756.

If the text is left aligned, the user can activate drop cap. If it is center or right aligned, then the drop cap button is turned off and hidden from the user.

How has this been tested?

Manually tested and passed all unit tests.

Screenshots <!-- if applicable -

https://giphy.com/gifs/YWWAstvJJjeQWrzDQI

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• [ x ] My code is tested.
• [ x ] My code follows the WordPress code style.
• [ x ] My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[kjellr]

Hey @rebeccaj1211! Thanks for taking this on. A couple minor notes:

• If no alignment is set, we should keep the drop cap option available.
• If a user sets a drop cap and then switches the alignment to center or right, it'd be cool to remember the previous setting when they switch back to left alignment. If that's not possible it's not a big deal though.

Thanks again!

[aduth]

Are these changes meant to be included here? I don't see the relation to the original issue #11756.

[rebeccaj1211]

whoops! you're right. This was for another issue that I was fixing.

[rebeccaj1211]

@kjellr
I made the first change that you suggested...
I'm not sure if I agree with the second point. I think it would be strange for a user to toggle drop cap on, click right align (have drop cap turn off), click center (drop cap still be off), click left align (and have drop cap turn on without telling the user why this is on).

[kjellr]

Thanks, @rebeccaj1211!

I'm not sure if I agree with the second point. I think it would be strange for a user to toggle drop cap on, click right align (have drop cap turn off), click center (drop cap still be off), click left align (and have drop cap turn on without telling the user why this is on).

I think it'd make sense to remember the drop cap setting for a couple reasons:

1. When the user changes the alignment, they're not explicitly turning off the drop cap. It makes sense that that setting would be ignored in the new alignment state, but the control itself wasn't intentionally toggled off.
2. In addition, the user may not even have the sidebar open, and they won't see the toggle button changing when they switch alignments. It's generally a bit unexpected to have a control permanently toggle another off-screen control.

I'd love to get some more feedback on that though — it's entirely possible I'm overthinking. 🙂

[sarahmonster]

I'd tend toward leaving the drop cap enabled if the user switches back to an alignment that supports it, mostly because the setting isn't, strictly speaking, tied to the paragraph alignment itself.

How does this work with RTL languages?

[thanasakleas]

Hello,

I also gave it a run.

On LTR, the drop cap turns off and the toggle disappears from the sidebar when the user selects a right or center text-align.
When “text-align: left” is selected again, the toggle re-appears turned off and you have to turn it on if you want to enable the drop cap again.

Although that feels ok to me, I see @kjellr’s point on why to remember the drop cap setting.

On RTL same thing is happening with a text-align: Left/Center.

Another thing that doesn’t feel right is removing the toggle in front of me while I’m changing the alignment.
I’m wondering if there’s a way to “ease” the magical disappearance of the toggle, maybe with a nice piece of text that explains what’s happening?

For example: “Drop Cap is disabled”.

[WunderBart]

Another thing that doesn’t feel right is removing the toggle in front of me while I’m changing the alignment.

I have the same feeling about this.

I’m wondering if there’s a way to “ease” the magical disappearance of the toggle, maybe with a nice piece of text that explains what’s happening?

You should be able to achieve it by wrapping the toggle the Disabled component - it would nicely gray it out and prevent any pointer interaction. You could also add an extra explanation for the disabled state then.

As for the visual handling for this logic, I'd recommend doing it with CSS only because it would cover both, front-end and editor. For ex. we could apply the drop cap styles only when the .has-drop-cap class is paired with .has-text-align-left:

.has-drop-cap.has-text-align-left {
  float: left
  ...
}

Does that make sense, @rebeccaj1211 @thanasakleas?

[MDWolinski]

I agree with leaving the Drop Cap checked if the user specifically turned it on before switching alignment.

Also agree with disabling the component instead of removing it, the helper text could indicate that it requires left (or right, see below) justification.

However, on the Right-to-left, shouldn't it be activated on right justified and not left justified?

[paaljoachim]

We are discussing this issue/PR right now during the Gutenberg Design Triage. In general we feel that the current solution of choosing not to use dropcap works well enough.

[gziolo]

In general we feel that the current solution of choosing not to use dropcap works well enough.

Does it mean that this PR should be closed?

[annezazu]

Closing this PR out due to lack of momentum and in light of the last messages on here. Feel free to re-open if someone wants to revisit finding a solution!