Twenty Twenty-One: Problem embedding Google calendar

[thorlentz]

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

[helen]

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.

[mukesh27]

Initial Patch.

[poena]

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]

Updated patch.

[thorlentz]

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 :)

[poena]

The updated patch looks good to me.

[desrosj]

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.

[desrosj]

Reopening for backport.

[desrosj]

Forgot to attach a screenshot.

[poena]

After: Youtube iframe inside HTML block, IE11

[poena]

After: Youtube iframe inside HTML block, Firefox, PC

[poena]

After: Youtube iframe inside HTML block, Chrome, PC

[desrosj]

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

[poena]

@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.

[poena]

#52130 was marked as a duplicate.

[desrosj]

Ah! Thanks for the clarification!

[desrosj]

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.

[desrosj]

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

[Marco Raaphorst]

with enourmous amounts of white space at the bottom of these object