WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 3 days ago

#48691 assigned defect (bug)

Twenty Twenty: Audio block alignment issue

Reported by: kharisblank Owned by: nielslange
Milestone: 5.4 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch has-screenshots needs-refresh
Focuses: ui, css Cc:
PR Number:

Description

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.

https://i.imgur.com/57TRzlj.png

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

Best,
Kharis

Attachments (3)

audio-align-right-issue.png (25.9 KB) - added by kharisblank 3 weeks ago.
Alignment issue when "Align Right" enabled on Audio Block. Here is how web browser's inspector shows.
audio-align-right-produces-horizontal-scroll.gif (363.5 KB) - added by kharisblank 3 weeks ago.
Horizontal scroll bar appears when "Align Right" enabled on Audio Block.
fix-audio-block-alignment.1.diff (558 bytes) - added by kharisblank 3 weeks ago.
My first attempt to patch this bug. Still need some testings.

Download all attachments as: .zip

Change History (18)

#1 follow-up: @nielslange
4 weeks ago

  • Keywords needs-testing removed

@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:

  • ...

#2 @nielslange
4 weeks ago

  • Keywords reporter-feedback added

#3 in reply to: ↑ 1 @kharisblank
3 weeks ago

Replying to nielslange:

You're welcome!

Steps to reproduce:

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

https://i.imgur.com/R726wo0.gif

https://i.imgur.com/3xMgZob.gif

Expected behaviour:

https://i.imgur.com/xFWTQiY.png

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.

https://i.imgur.com/qE3GAap.png


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:

https://i.imgur.com/Ya3lk7R.gif

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
3 weeks ago

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

@kharisblank
3 weeks ago

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

#4 follow-up: @nielslange
3 weeks ago

  • Keywords reporter-feedback removed
  • Owner set to nielslange
  • Status changed from new to assigned

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

#5 @ianbelanger
3 weeks ago

  • Milestone changed from Awaiting Review to 5.3.1

#6 in reply to: ↑ 4 @kharisblank
3 weeks ago

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
3 weeks ago

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

#8 @poena
3 weeks ago

Hi
I am able to reproduce the problem.

I actually think the centering of the text needs 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?

Last edited 3 weeks ago by poena (previous) (diff)

#9 @nielslange
3 weeks ago

@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.

#10 @kharisblank
3 weeks ago

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

#11 @nielslange
3 weeks ago

@kharisblank Can you think of another solution? 😉

#12 @kharisblank
3 weeks ago

@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

#13 @kharisblank
3 weeks ago

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.

https://i.imgur.com/qYNadRs.gif

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?

https://i.imgur.com/maC1Wno.png

Last edited 3 weeks ago by kharisblank (previous) (diff)

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


8 days ago

#15 @ianbelanger
3 days ago

  • Keywords needs-refresh added
  • Milestone changed from 5.3.1 to 5.4

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

Note: See TracTickets for help on using tickets.