#52004 closed defect (bug) (fixed)
Twenty Twenty-One: Problem embedding Google calendar
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (25)
#1
@
2 years ago
- Component changed from General to Bundled Theme
- Focuses css added
- Milestone changed from Awaiting Review to 5.6.1
#2
@
2 years ago
- Summary changed from problem embedding google calendar in twenty twenty one theme to Twenty Twenty-One: Problem embedding Google calendar
#3
@
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
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; }
#4
@
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 :)
This ticket was mentioned in Slack in #core-themes by poena. View the logs.
2 years ago
#10
@
2 years ago
- Keywords fixed-major added
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening for backport.
This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.
2 years ago
#13
@
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
@
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.
Hi @thorlentz, thanks for the report.
I am seeing this in style.css which does indeed seem incorrect:
As a point of comparison, this is in Twenty Nineteen:
Milestoning for 5.6.1 as this likely affects other embeds.