WordPress.org

Make WordPress Core

Opened 15 months ago

Last modified 8 days ago

#48052 new defect (bug)

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

Reported by: archon810 Owned by:
Milestone: Future Release 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 15 months ago.
screencast of the bug

Download all attachments as: .zip

Change History (4)

@archon810
15 months ago

screencast of the bug

#1 @archon810
15 months 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
14 months 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 14 months ago by andraganescu (previous) (diff)

#3 @sabernhardt
8 days 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.

Note: See TracTickets for help on using tickets.