Add min-width to audio block. #11749
Conversation
Fixes #11740. The audio block has no intrinsic width, and collapses if we don't set an explicit min-width on it. This PR does that.
| @@ -4,4 +4,7 @@ | |||
|
|
|||
| .wp-block-audio audio { | |||
| width: 100%; | |||
|
|
|||
| // The audio block has no intrinsic width and needs an explicit min-width to not collapse. | |||
| min-width: $break-mobile / 2; | |||
There was a problem hiding this comment.
Should this be applied for the frontend too?
|
The published post already seems to have some kind of width set, which looks different from the editor, could we make it the same? Editor:
Published post:
|
There's probably things coming from the theme styles there, we should test with a theme without Gutenberg support and see how it behaves. |
Do we know one that definitely doesn't have support? I've tried installing random ones and I see the floated audio block correctly in all of them so far. |
|
I have a fix, pushing in a second. Great feedback, both. |
|
So, the feedback was solid. Just pushed a change that addresses all of it, and some issues that popped up as a result of the refactor. Turns out that the audio element DOES have an intrinsic width. It's 300px, and it's given by the browser. But we set that to 100% to avoid this:
The centered caption here is weird, right? But when we float, then the 100% width collapses. If that 100% width was not applied, then it wouldn't have. I looked into ways to apply the 100% width ONLY to a non-aligned block, but wasn't able to do so without using So I simply added the 300px width as a min-width on the element level. Editor:
Not-gutenberg-ready-theme:
|
|
👍 |
|
Thank you, both. I'll be merging when the checks pass, unless anyone complains. |
Is this a sign that perhaps there should be |
* Add min-width to audio block. Fixes #11740. The audio block has no intrinsic width, and collapses if we don't set an explicit min-width on it. This PR does that. * Update changelog * Move to style.scss instead. * Refactor, address feedback.
In this specific case, I feel the change to use min-width is a superior solution. But sure, alignnone could make sense to add. But right now some blocks in the editor do not have the alignment classes, like in this case a floated audio block doesn't have the alignleft/aligncenter/alignright classes. A missing feature that will be implemented at some point. |
Fixes #11740.
The audio block has no intrinsic width, and collapses if we don't set an explicit min-width on it. This PR does that.
What should the min-width be? In this case I've set it to 240px, which is a nice round number, and seems to be the tiniest width at which the actual controls appear usable in.
It would be a nice enhancement in the future to let the user set the width of the audio block themselves, perhaps in an inspector interface like that for the image block.
Have set no milestone since I'm imagining this will go in as a 4.3RC fix.