WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 10 months ago

Last modified 10 months 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 (7)

52004.diff (573 bytes) - added by mukesh27 11 months ago.
Initial Patch.
52004.2.diff (607 bytes) - added by mukesh27 11 months ago.
Updated patch.
crushed-calendar.png (53.1 KB) - added by desrosj 10 months ago.
After-youtube-iframe-ie11.png (226.9 KB) - added by poena 10 months ago.
After: Youtube iframe inside HTML block, IE11
After-youtube-iframe-firefox.png (226.6 KB) - added by poena 10 months ago.
After: Youtube iframe inside HTML block, Firefox, PC
After-youtube-iframe-chrome.png (225.8 KB) - added by poena 10 months 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 7 months ago.
with enourmous amounts of white space at the bottom of these object

Download all attachments as: .zip

Change History (25)

#1 @helen
11 months 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
11 months ago

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

@mukesh27
11 months ago

Initial Patch.

#3 @poena
11 months 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
11 months ago

Updated patch.

#4 @thorlentz
11 months 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
11 months ago

The updated patch looks good to me.

#6 @hellofromTonya
11 months ago

  • Keywords has-patch added

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


10 months ago

#8 @desrosj
10 months ago

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

#9 @desrosj
10 months 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
10 months ago

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

Reopening for backport.

#11 @desrosj
10 months ago

  • Keywords has-screenshots added

Forgot to attach a screenshot.

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


10 months ago

@poena
10 months ago

After: Youtube iframe inside HTML block, IE11

@poena
10 months ago

After: Youtube iframe inside HTML block, Firefox, PC

@poena
10 months ago

After: Youtube iframe inside HTML block, Chrome, PC

#13 @desrosj
10 months 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
10 months 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
10 months ago

#52130 was marked as a duplicate.

#16 @desrosj
10 months ago

Ah! Thanks for the clarification!

#17 @desrosj
10 months 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
10 months 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
7 months ago

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

Note: See TracTickets for help on using tickets.