Twenty Twenty: Audio block alignment issue

[kharisblank]

Hello The Amazing Team of Twenty Twenty,

I am playing around with audio block and found alignment issue. See the attached image that best explains it better.

I have searched previous tickets and didn't find it has been reported. I hope this isn't duplicate ticket.

Best,
Kharis

[nielslange]

@kharisblank Thanks for reporting this issue. Could you provide more information regarding this issue? The following template might be helpful.

---

Steps to reproduce:

1. ...
2. ...
3. ...

Expected behaviour:

• ...

Current behaviour:

• ...

[kharisblank]

Replying to nielslange:

You're welcome!

Steps to reproduce:

1. Insert an audio block and set a caption
2. Enable "Align Center"

Expected behaviour:

Audio block along with its caption should be center aligned when vieweing the actual post.

Current behaviour:

It's already centered in block editor. But it isn't when vieweing the actual post page.

---

When I chose "Align Right", the audio block goes too far right and overlaps the main content's container. It's resulting horizontal window scroll bar at the bottom appears. See the below screencast:

Expected behaviour for this:

• Audio block should not overlapping main content's container
• Align right the caption

Let me know if there's anything else I should explain more.

Best,
Kharis

[kharisblank]

Alignment issue when "Align Right" enabled on Audio Block. Here is how web browser's inspector shows.

[kharisblank]

Horizontal scroll bar appears when "Align Right" enabled on Audio Block.

[nielslange]

@kharisblank That's a fantastic issue report! Very detailed and very well done. Do you like to create a patch for this issue?

[kharisblank]

Replying to nielslange:

Do you like to create a patch for this issue?

I will try to make a patch for this and will submit it soon.

Regards,
Kharis

[kharisblank]

My first attempt to patch this bug. Still need some testings.

[kharisblank]

You may want to use these test posts to check this patch in action:

• ​https://qmaubeli.online/patch-test-audio-center-align/
• ​https://qmaubeli.online/patch-test-audio-left-align/
• ​https://qmaubeli.online/patch-test-audio-right-align/

Best,
Kharis

[poena]

Hi
I am able to reproduce the problem.

I actually think this needs to be fixed in the block editor styles and not in the themes.
For example, the block editor styles the figcaption for the video block:

.wp-block-video.aligncenter{text-align:center}

but this is missing for the audio block.

Looking at Twenty Nineteen, the theme itself always centers the figcaption for the audio block, no matter
what the alignment of the block is.

---

I believe that the min-width part of the patch needs to be removed, because the player is much wider in the editor than it is in the front, what do you think?

[nielslange]

@kharisblank Thanks for creating the patch. I'd agree with @poena that the styles to fix this issue should be applied to /assets/css/editor-style-block.css rather than to style.css.

I also believe that the width of the audio elements should only be changed when needed, but not by default. While I can see the progress bar of the audio track on ​https://qmaubeli.online/patch-test-audio-center-align/, when viewing the audio block on ​https://qmaubeli.online/patch-test-audio-left-align/ and ​https://qmaubeli.online/patch-test-audio-right-align/ the progress bar turns into a single dot which makes it impossible to navigate within the audio file.

[kharisblank]

Hi all,

I'd agree with @poena as well. .aligncenter is universal class name. A theme should not redefine center alignmet for it.

@nielslange ​this is what happens without this code.

.wp-block-audio.alignleft audio,
.wp-block-audio.alignright audio {
  width: auto;
  min-width: 100%;
  max-width: 100%;
}

Best,
Kharis

[nielslange]

@kharisblank Can you think of another solution? 😉

[kharisblank]

@poena

I believe that the min-width part of the patch needs to be removed, because the player is much wider in the editor than it is in the front, what do you think?

I am not quite sure about this. Because minimum width is defined in below lines of code in block library CSS of the core.

.wp-block-audio audio {
  width: 100%;
  min-width: 300px;
}

However this breaking right alignment on Twenty Twenty. Without extra custom width min-width: 100%;, ​this is what I am getting.

@nielslange

Can you think of another solution?

Let me try it.

Best,
Kharis

[kharisblank]

I used this improved code (only for right alignment at this time). In this code I attempted to maintain the HTML5 audio minimum width to avoid unaccessible audio controls and make it to be more adaptive to its container. By default its width is 270px on Firefox and 300px on Chrome. ​Refer to W3S.

.entry-content > .wp-block-audio.alignright {
   max-width: 100%;
}

@media only screen and (min-width: 480px) {
  .entry-content > .wp-block-audio.alignright {
    min-width: 0;
    padding-right: 2rem;
  }
}

@media only screen and (min-width: 1000px) {
  .entry-content > .wp-block-audio.alignright {
    position: static;
    margin-right: 0;
    left: auto;
    max-width: 100%;
  }
}

@media only screen and (min-width: 1280px) {
  .entry-content > .wp-block-audio.alignright {
    max-width: unset;
    left: auto;
  }
}

This is what I am getting (on Firefox). I tested with Chrome as well and it behaves the same way.

I believe this code still need some testings at your end. I'd like to hear your thought on this.

Extra question:

Does anybody know why lesser width of the audio always appears like this on Safari, even when my custom code removed?

[ianbelanger]

The patch does somewhat fix the issue, but I think it needs to be refreshed and tested more, so I am punting this to 5.4

[ianbelanger]

This still has not been refreshed so I am punting out of 5.4.

[poena]

I can reproduce this in WordPress 6.4.2, but only when the audio block is full width.

For the full width block, the caption has a set width and max-width on the front but not in the editor. The result is that on the front, the text is left aligned, but only as wide as the content width.

Personally I think the alignment would be OK if only the editor and front matched.

Audio block captions at all other alignments are to the left in both the editor and the front.

[karmatosed]

I am testing this today and curiously on wide or non-wide the same both at the front and back is true, centering doesn't work for the caption. My recommendation would be to either keep it this way or to bring in centering for both editors.

[karmatosed]

Centering not being reflected in caption

[karmatosed]

For now, I am going to recommend this is closed unless we get a PR that specifically targets the center alignment on both front and back editor. It does match in testing, it's just not centering the caption. We absolutely can change this if others feel different though, but I feel progressing this onward is useful.

[karmatosed]

I am going to follow through closing this, thank you everyone.