Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#52004 closed defect (bug) (fixed)

Twenty Twenty-One: Problem embedding Google calendar

Reported by: thorlentz's profile thorlentz Owned by: desrosj's profile 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 (7)

52004.diff (573 bytes) - added by mukesh27 2 years ago.
Initial Patch.
52004.2.diff (607 bytes) - added by mukesh27 2 years ago.
Updated patch.
crushed-calendar.png (53.1 KB) - added by desrosj 2 years ago.
After-youtube-iframe-ie11.png (226.9 KB) - added by poena 2 years ago.
After: Youtube iframe inside HTML block, IE11
After-youtube-iframe-firefox.png (226.6 KB) - added by poena 2 years ago.
After: Youtube iframe inside HTML block, Firefox, PC
After-youtube-iframe-chrome.png (225.8 KB) - added by poena 2 years ago.
After: Youtube iframe inside HTML block, Chrome, PC
Schermafbeelding 2021-03-17 om 10.31.11.png (144.1 KB) - added by Marco Raaphorst 2 years ago.
with enourmous amounts of white space at the bottom of these object

Download all attachments as: .zip

Change History (25)

#1 @helen
2 years 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
2 years ago

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

@mukesh27
2 years ago

Initial Patch.

#3 @poena
2 years 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
2 years ago

Updated patch.

#4 @thorlentz
2 years 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
2 years ago

The updated patch looks good to me.

#6 @hellofromTonya
2 years ago

  • Keywords has-patch added

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


2 years ago

#8 @desrosj
2 years ago

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

#9 @desrosj
2 years 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
2 years ago

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

Reopening for backport.

#11 @desrosj
2 years ago

  • Keywords has-screenshots added

Forgot to attach a screenshot.

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


2 years ago

@poena
2 years ago

After: Youtube iframe inside HTML block, IE11

@poena
2 years ago

After: Youtube iframe inside HTML block, Firefox, PC

@poena
2 years ago

After: Youtube iframe inside HTML block, Chrome, PC

#13 @desrosj
2 years 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
2 years 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
2 years ago

#52130 was marked as a duplicate.

#16 @desrosj
2 years ago

Ah! Thanks for the clarification!

#17 @desrosj
2 years 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
2 years 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.

@Marco Raaphorst
2 years ago

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

Note: See TracTickets for help on using tickets.