Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#52130 closed defect (bug) (duplicate)

Twenty Twenty-One: Embedded HTML doesn't display correctly

Reported by: celendesign's profile celendesign Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords:
Focuses: ui, accessibility Cc:

Description

When embedding custom HTML (I use it to embed Google My Maps) into a post with the WordPress theme twenty twenty one, the map is displayed on the left edge but apart from 20px completely off screen. See attached files.

Example: https://hitchedtotravel.com/krk-best-beaches/ and scroll down to the chapter Map

Workaround: You can get it working by adding a group around the HTML block, then it displays correctly.

Attachments (3)

SNAG-0002.png (56.4 KB) - added by celendesign 3 years ago.
HTML block used in the editor
SNAG-0003.png (43.3 KB) - added by celendesign 3 years ago.
Display of the map on the page (source: https://hitchedtotravel.com/krk-best-beaches/)
SNAG-0004.png (57.9 KB) - added by celendesign 3 years ago.
Workaround, put a group around the HTML block

Download all attachments as: .zip

Change History (6)

@celendesign
3 years ago

HTML block used in the editor

@celendesign
3 years ago

Display of the map on the page (source: https://hitchedtotravel.com/krk-best-beaches/)

@celendesign
3 years ago

Workaround, put a group around the HTML block

#1 @SergeyBiryukov
3 years ago

  • Component changed from Posts, Post Types to Bundled Theme
  • Summary changed from Embedded HTML in theme twenty twenty one doesn't display correctly to Twenty Twenty-One: Embedded HTML doesn't display correctly

#2 @SergeyBiryukov
3 years ago

  • Milestone changed from Awaiting Review to 5.6.1

#3 @poena
3 years ago

  • Milestone 5.6.1 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #52004.

Hi

This is a duplicate of https://core.trac.wordpress.org/ticket/52004

The cause is not the HTML block, but an incorrect max-width set to iframes.
HTML blocks are not aligned because they can contain anything and they do not have a wrapper element.
It is only more apparent in themes that does not use a negative margin to align the wide and full with blocks.

Note: See TracTickets for help on using tickets.