Make WordPress Core

Opened 5 years ago

Last modified 4 weeks ago

#45900 new defect (bug)

Twenty Nineteen: WordPress embed width does not match between front and back end

Reported by: kjellr's profile kjellr Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.0.2
Component: Bundled Theme Keywords: dev-feedback
Focuses: Cc:

Description

As originally reported by @bph on the Twenty Nineteen GitHub repository:

https://github.com/WordPress/twentynineteen/issues/736

It's possible this applies to more types of embeds as well.


Editor Screenshots

Normal
https://cldup.com/BHgla9VUPO-1200x1200.png

Wide
https://cldup.com/Ux-6Cf5s92-1200x1200.png

Full
https://cldup.com/aHoyAtD_gQ-3000x3000.png


Front End Screenshots:

Normal
https://cldup.com/3qmWq9UaLu-3000x3000.png

Wide
https://cldup.com/3qmWq9UaLu-3000x3000.png

Full
https://cldup.com/OeugId-DEO-3000x3000.png

Attachments (3)

2019-embed-blocks-alignment-front-6.5.2.png (154.8 KB) - added by sabernhardt 6 weeks ago.
Embed blocks on the front end with WordPress 6.5
2019-embed-blocks-alignment-iframe-6.5.2.png (282.3 KB) - added by sabernhardt 6 weeks ago.
Embed blocks in the iframe editor
2019-embed-blocks-alignment-nonframe-6.5.2.png (294.6 KB) - added by sabernhardt 6 weeks ago.
Embed blocks in the non-framed editor

Download all attachments as: .zip

Change History (6)

#1 @swissspidy
5 years ago

If you look at get_oembed_response_data(), WordPress embeds have a default max width of 600px, which is what you see on the front end.

That max width should be respected, so the width as shown in the editor screenshots are wrong IMO.

@sabernhardt
6 weeks ago

Embed blocks on the front end with WordPress 6.5

@sabernhardt
6 weeks ago

Embed blocks in the iframe editor

@sabernhardt
6 weeks ago

Embed blocks in the non-framed editor

#2 @sabernhardt
6 weeks ago

  • Keywords needs-testing removed

The editor does not display the Embed block (for a Make WordPress post) wider than 600 pixels anymore, though the editor still does not match the front.

On the front:

  • All six Embed blocks are 600 pixels wide.
  • The blocks with No alignment, Center, Left, and Wide options all line up with the side of a paragraph.
  • The Right-aligned block floats on the right side of the content area (with a margin).
  • The Full width block touches the left edge of the viewport.

In the iframe editor:

  • The Left and Right aligned blocks are a maximum of 360 pixels wide, but the other four are 600 pixels.
  • The Center, Left, and Wide options align the block to the left of a paragraph. In RTL languages, Right and Wide options put the block to the right of a paragraph, but the Center option positions it closer to the left side than the right.
  • The No alignment, Right and Full options match the front. In RTL, the No alignment and Left options match the front, but the Full option is only slightly to the right of a paragraph.

In the non-framed (v2) editor:

  • The Left and Right aligned blocks are 360 pixels wide, but the other four are 600 pixels.
  • The alignments match the front in English. In RTL, Center aligns it perfectly to the center instead of the right side, and Full appears a little to the left of the right-side content margin.

English-US
Twenty Nineteen 2.8
WordPress 6.5.2
Firefox 124.0.2
Windows 10

#3 @karmatosed
4 weeks ago

  • Keywords dev-feedback added
Note: See TracTickets for help on using tickets.