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

[kjellr]

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

Wide

Full

---

Front End Screenshots:

Normal

Wide

Full

[swissspidy]

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]

Embed blocks on the front end with WordPress 6.5

[sabernhardt]

Embed blocks in the iframe editor

[sabernhardt]

Embed blocks in the non-framed editor

[sabernhardt]

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