Make WordPress Core

Opened 4 years ago

Closed 3 months ago

#48052 closed defect (bug) (wontfix)

<center> tag around [video] inserts &nbsp and new lines every post update (or even switch between source and post)

Reported by: archon810's profile archon810 Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.3
Component: Editor Keywords: needs-patch 2nd-opinion
Focuses: Cc:

Description

This only seems to happen in the classic editor, which is what we're using and planning on using for years to come. The only active plugin in my test is Classic Editor https://wordpress.org/plugins/classic-editor/. Stock WP 2019 theme.

Tested with 5.2.3 and github master HEAD.

Example code:

<center>[video width="524" height="1080" mp4="https://example.com/wp-content/uploads/2019/09/test.mp4"][/video]</center>

If you switch between Visual and Text, you'll start seeing new lines with &nbsp;s added, like so:

<center>[video width="524" height="1080" mp4="https://example.com/wp-content/uploads/2019/09/test.mp4"][/video]

&nbsp;

&nbsp;

</center>&nbsp;

Attachments (1)

gif.gif (355.2 KB) - added by archon810 4 years ago.
screencast of the bug

Download all attachments as: .zip

Change History (5)

@archon810
4 years ago

screencast of the bug

#1 @archon810
4 years ago

A few ccs for visibility: @SergeyBiryukov @birgire @pento.

The issue was brought up to me by one of our editors who got frustrated with having to delete extra unexpected added lines in his posts with centered [video]s.

#2 @andraganescu
4 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

I can confirm this bug and that it only happens with the center tag.

Last edited 4 years ago by andraganescu (previous) (diff)

#3 @sabernhardt
3 years ago

  • Keywords 2nd-opinion added

There are better ways to center a video than wrapping it the obsolete center tag.
(MDN docs discourage using the tag.)

Option 1: Center all videos added with [video] shortcodes.

  1. Navigate to Appearance > Customize.
  2. Find the "Additional CSS" section.
  3. Paste the following CSS:
    .wp-video {
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    }
    
  4. Publish.

Option 2: Center each video individually with a div tag.

Wrap the shortcode with a div tag that includes centering styles and a max-width equal to the number of pixels defined in the video shortcode's width value.

<div style="margin-left: auto; margin-right: auto; text-align: center; max-width: 524px;">

[video width="524" height="1080" mp4="https://example.com/wp-content/uploads/2019/09/test.mp4"][/video]

</div>

If the width is always the same, you could use a class instead of a style attribute and set those styles in Additional CSS.

#4 @azaozz
3 months ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

As @sabernhardt mentions above centering content shouldn't use the old <center> tag. Looking at w3.org, that tag is "entirely obsolete, and must not be used by authors". See https://www.w3.org/TR/2011/WD-html5-20110405/obsolete.html#non-conforming-features. Best would be to replace it with a div as described above.

Closing as "wontfix". Please feel free to reopen if there is a reason to still support this tag despite the W3 standards.

Note: See TracTickets for help on using tickets.