Beef up the padding on component panel titles.

[JJJ]

This increases the size of the clickable target area for component panel titles by 30px in each direction, making them easier to click open & closed.

Fixes #1335.

[jasmussen]

Nice! Thanks for doing this!

I think we should probably remove the border radius on the focus rectangle for this one:

With that done, though, 👍 👍

[aduth]

Alternative to negative margin is to create a separate wrapping component for the content itself, applying default padding there, and letting button / toggle render naturally at the bounds of the panel.

Downside is more nodes on the page.

Thoughts?

[JJJ]

Thoughts?

I agree, negative margins are undesirable – it's hard for me to gauge to what degree for this project compared to others (WordPress itself, for example, is full of them.) My preference would be not to perpetuate the bad habit, but I didn't want to rough up Gutenberg too assertively out of the gate.

I think we should probably remove the border radius on the focus rectangle for this one

Good catch. I'll push that to my branch soon if no one else gets to it first.

[JJJ]

I think we should probably remove the border radius

Once I removed the radius, it revealed there was a 1px margin between the button and the container elements. This had the undesirable effect of revealing a gap around the outline & box shadow, and because those container elements have horizontal borders already, I believe that gap was unintentional, so I've also set margin: 0; on those buttons in the same commit.

The result is a 2px reduction in overall button height in each panel (which could be mitigated with additional padding) and visually I think it still looks OK (if not better) but I don't want to be suggestive.

The missing right-outline is also undesirable, but fixing that is its own rabbit hole.

[youknowriad]

Did you try to rebase here? I think the 1px margin might have been fixed.

[aduth]

Once I removed the radius, it revealed there was a 1px margin between the button and the container elements. This had the undesirable effect of revealing a gap around the outline & box shadow, and because those container elements have horizontal borders already, I believe that gap was unintentional, so I've also set margin: 0; on those buttons in the same commit.

Not sure if this one is browser-specific, but FWIW I was not able to reproduce this margin when removing the margin locally.

It feels a little crowded when focus highlight is active on an expanded panel, but I don't find it particularly problematic.

[jasmussen]

Thanks for this PR! Feels sooo much better now.