WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

Last modified 4 weeks ago

#52004 closed defect (bug) (fixed)

Twenty Twenty-One: Problem embedding Google calendar

Reported by: thorlentz Owned by: desrosj
Milestone: 5.6.1 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch, fixed-major, has-screenshots, twenty-twenty-one-1.1
Focuses: css Cc:

Description

Hi WordPress org.

Nice work you're doing.

When i try to embed my google calendar on my page using HTML code provided by google calendar, the calendar are squeezed to the left and not really showing.

You can have a look here.

https://thorlentz.dk/en/calendar/

Regards Thor Lentz

Attachments (6)

52004.diff (573 bytes) - added by mukesh27 5 weeks ago.
Initial Patch.
52004.2.diff (607 bytes) - added by mukesh27 5 weeks ago.
Updated patch.
crushed-calendar.png (53.1 KB) - added by desrosj 4 weeks ago.
After-youtube-iframe-ie11.png (226.9 KB) - added by poena 4 weeks ago.
After: Youtube iframe inside HTML block, IE11
After-youtube-iframe-firefox.png (226.6 KB) - added by poena 4 weeks ago.
After: Youtube iframe inside HTML block, Firefox, PC
After-youtube-iframe-chrome.png (225.8 KB) - added by poena 4 weeks ago.
After: Youtube iframe inside HTML block, Chrome, PC

Download all attachments as: .zip

Change History (24)

#1 @helen
5 weeks ago

  • Component changed from General to Bundled Theme
  • Focuses css added
  • Milestone changed from Awaiting Review to 5.6.1

Hi @thorlentz, thanks for the report.

I am seeing this in style.css which does indeed seem incorrect:

@media only screen and (min-width: 482px) {

	.entry-content > iframe[style] {
		max-width: var(--global--spacing-vertical) !important;
	}
}

As a point of comparison, this is in Twenty Nineteen:

.entry .entry-content > iframe[style] {
  margin: 32px 0 !important;
  max-width: 100% !important;
}

@media only screen and (min-width: 768px) {
  .entry .entry-content > iframe[style] {
    max-width: calc(8 * (100vw / 12) - 28px) !important;
  }
}

@media only screen and (min-width: 1168px) {
  .entry .entry-content > iframe[style] {
    max-width: calc(6 * (100vw / 12) - 28px) !important;
  }
}

Milestoning for 5.6.1 as this likely affects other embeds.

#2 @SergeyBiryukov
5 weeks ago

  • Summary changed from problem embedding google calendar in twenty twenty one theme to Twenty Twenty-One: Problem embedding Google calendar

@mukesh27
5 weeks ago

Initial Patch.

#3 @poena
5 weeks ago

Hi

@thorlentz How are you adding the embed code? Are you using the editors HTML block?

When using the HTML block, the content is not aligned unless the added HTML code includes its own alignments.

You can bypass this by placing the HTML block with the embed code inside a group block.

@mukesh27
Twenty Twenty-One uses SCSS so the code needs to be updated in the entry.scss file and then be
compiled to update the style.css file, the rtl style, and the style for Internet Explorer.

The instructions for how to do this are limited, let me know if I can clarify them:
https://github.com/WordPress/twentytwentyone/blob/trunk/CONTRIBUTING.md#getting-started-with-development

https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/entry.scss#L58

Only the faulty max width for the media(mobile) needs to be removed:

// Overwrite iframe embeds that have inline styles.
> iframe[style] {

	margin: var(--global--spacing-vertical) 0 !important;
	max-width: 100% !important;

	@include media(mobile) {
		max-width: var(--global--spacing-vertical) !important;
	}
}
// Overwrite iframe embeds that have inline styles.
> iframe[style] {

	margin: var(--global--spacing-vertical) 0 !important;
	max-width: 100% !important;
}

@mukesh27
5 weeks ago

Updated patch.

#4 @thorlentz
5 weeks ago

Thank you guys :)

I am kind of newbee when it comes to aplying patch files and so on, but placing the HTML within a group block, like @poena sugested, did work.

Have a nice day and merry christmas to all of you :)

#5 @poena
5 weeks ago

The updated patch looks good to me.

#6 @hellofromTonya
5 weeks ago

  • Keywords has-patch added

This ticket was mentioned in Slack in #core-themes by poena. View the logs.


4 weeks ago

#8 @desrosj
4 weeks ago

  • Owner set to desrosj
  • Status changed from new to reviewing

#9 @desrosj
4 weeks ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 49823:

Twenty Twenty-One: Prevent <iframe> embeds from being too narrow.

This fixes an issue where <iframe> embeds were being pushed to the side of the screen and compressed to the point of being unusable.

Props helen, mukesh27, poena, thorlentz.
Fixes #52004.

#10 @desrosj
4 weeks ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#11 @desrosj
4 weeks ago

  • Keywords has-screenshots added

Forgot to attach a screenshot.

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


4 weeks ago

@poena
4 weeks ago

After: Youtube iframe inside HTML block, IE11

@poena
4 weeks ago

After: Youtube iframe inside HTML block, Firefox, PC

@poena
4 weeks ago

After: Youtube iframe inside HTML block, Chrome, PC

#13 @desrosj
4 weeks ago

@poena For clarity, was this showing correctly for you before this commit? Or you were just able to identify this as an additional instance?

#14 @poena
4 weeks ago

@desrosj I did not understand your question -an additional instance?

These are screenshots with the patch applied, so that we can compare the before and after.
The screenshots are correct. The iframe is the correct width, all content is showing, compared to the crushed calendar.

*It is left aligned because the HTML block has no alignments of its own on the front, and that is not related to the ticket.

#15 @poena
4 weeks ago

#52130 was marked as a duplicate.

#16 @desrosj
4 weeks ago

Ah! Thanks for the clarification!

#17 @desrosj
4 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 49851:

Twenty Twenty-One: Prevent <iframe> embeds from being too narrow.

This fixes an issue where <iframe> embeds were being pushed to the side of the screen and compressed to the point of being unusable.

Props helen, mukesh27, poena, thorlentz.
Merges [49823] to the 5.6 branch.
Fixes #52004.

#18 @desrosj
4 weeks ago

  • Keywords twenty-twenty-one-1.1 added

Adding a custom keyword for querying tickets included in the Twenty Twenty-One version 1.1 release in the future.

Note: See TracTickets for help on using tickets.