[design] Focused vs. unfocused styles

[dkoo]

When the Curated List block is unfocused, we shouldn't see the borders, paddings, [+], etc...

Originally posted by @thomasguillot in #6 (comment)

[dkoo]

Moving the discussion here:

My thought with this was that without the borders, it becomes really hard to tell that the listings are part of the same "parent" list when you have more than a few items in a list. Also, if we have no borders/padding when the block is unfocused, but add borders/padding when it is focused, won't that cause jitter and text reflow when the padding is added? Or require us to maintain extra padding which might look janky without visible borders?

[thomasguillot]

it becomes really hard to tell that the listings are part of the same "parent" list when you have more than a few items in a list

Think of the group block, with child blocks.

if we have no borders/padding when the block is unfocused, but add borders/padding when it is focused, won't that cause jitter and text reflow when the padding is added?

I guess we should just use an outline like Core blocks.

[dkoo]

I started implementing this, removing the borders and padding from Curated Lists blocks and individual listing blocks inside. What I'm finding is that it makes it nearly impossible to focus the Curated List parent block (where most of the display attributes are set) once it's been populated with inner listing blocks—because it has no padding, anywhere you click inside will end up focusing one of its inner blocks.

I'd suggest we table this for now and keep the borders and padding, unless you have some ideas how how to handle this?

[thomasguillot]

@dkoo What if we just keep .newspack-listings__curated-list-editor { padding: 1px 0; } That would leave users with 2 areas to access the block.
And they can always use the block navigation.

[dkoo]

How does this look/work to you? #14

I retained a bit of padding on the sides of the Curated List block and applied negative margins so that it's still possible to click on the Curated List block in the editor body to focus it. I guess I'm obsessed with making sure that's possible because it's mainly how I use the block editor. 😄

[matticbot]

🎉 This issue has been resolved in version 1.1.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This issue has been resolved in version 1.1.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀