feat: post component height to parent window [FC-0083] #36477

navinkarkera · 2025-04-04T05:58:17Z

Description

XBlock rendered in an iframe in frontend-app-authoring needs to resize automatically based on component size.

This PR updates xblock iframe template to post message to parent window on size change.

Test instructions

Follow instructions from openedx/frontend-app-authoring#1779 and make sure that the components are properly resized in unit page, preview modals and course unit page.

openedx-webhooks · 2025-04-04T05:58:21Z

Thanks for the pull request, @navinkarkera!

This repository is currently maintained by @openedx/wg-maintenance-edx-platform.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

openedx/core/djangoapps/content_libraries/api/libraries.py

pomegranited

👍

I tested this using the PR test instructions on Component cards, Component modal, Unit components, and course Unit pages with blocks.
I read through the code
I checked for accessibility issues by using my keyboard to navigate
Includes documentation of the tricky stuff around iframe resizing
~~User-facing strings are extracted for translation~~ N/A

ChrisChV · 2025-04-10T20:20:32Z

@navinkarkera This brokes some advanced editors:

Completion

LT Consumer

The editor is not displayed

PDF

navinkarkera · 2025-04-11T07:01:36Z

@ChrisChV I updated iframe minimum height to 200px here: openedx/frontend-app-authoring@ea853aa and the editors are visible now.

vokoscreenNG-2025-04-11_12-27-18.webm

The LTI and pdf previews were not rendering properly even before this PR.

ChrisChV · 2025-04-11T16:16:14Z

The LTI and pdf previews were not rendering properly even before this PR.

When I use both (edx-platform and frontend-app-authoring) in master, the editors display well in size. The issue occurs when I change the branches of these PRs.

Note: For the PDF block we are using this requirement: git+https://github.com/open-craft/xblock-pdf.git@v1.1.0#egg=xblock-pdf

https://www.loom.com/share/857c28aede314d38b5ae6c12efa8f83d?sid=ae74c79f-8d5d-40ac-acad-f680a28a6b34

navinkarkera · 2025-04-11T17:16:07Z

@ChrisChV is the issue fixed with the latest changes in both PRs? I can increase the minimum height tomorrow if required.

ChrisChV · 2025-04-11T17:27:34Z

LT Consumer

The editor is not displayed

@navinkarkera Only this issue was fixed, but the editor is still small. Is this a simple fix? Just increase the size here: openedx/frontend-app-authoring@ea853aa? If so, I can do it today.

navinkarkera · 2025-04-11T17:31:08Z

@ChrisChV I updated iframe minimum height to 200px here: openedx/frontend-app-authoring@ea853aa and the editors are visible now.

vokoscreenNG-2025-04-11_12-27-18.webm

The LTI and pdf previews were not rendering properly even before this PR.

The LTI editor is being displayed properly no? Am I testing the wrong component?

ChrisChV · 2025-04-11T17:38:10Z

The LTI editor is being displayed properly no?

From what I see, yes, the LTI has not had a problem, the one that had a problem is the LTI consumer, which is a different block 😄

Only this issue was fixed, but the editor is still small. Is this a simple fix? Just increase the size here: openedx/frontend-app-authoring@ea853aa? If so, I can do it today.

I have tried changing it to 700px and it works fine

edx-pipeline-bot · 2025-04-11T19:27:18Z

2U Release Notice: This PR has been deployed to the edX staging environment in preparation for a release to production.

edx-pipeline-bot · 2025-04-11T19:51:52Z

2U Release Notice: This PR has been deployed to the edX production environment.

navinkarkera · 2025-04-12T06:12:33Z

@ChrisChV Setting min-height to 700 make unit page previews weird (all components take up 700px), so I created a small PR that sets min height based on preview location (large in modal previews) and blocktypes. Please review: openedx/frontend-app-authoring#1813 whenever possible.

XBlock rendered in an iframe in frontend-app-authoring needs to resize automatically based on component size. Updates xblock iframe template to post message to parent window on size change.

bradenmacdonald · 2025-04-30T16:55:45Z

common/templates/xblock_v2/xblock_iframe.html

+                var lastHeight = window.parent[0].offsetHeight;
+                var lastWidth = window.parent[0].offsetWidth;


@navinkarkera Apparently these lines are causing same-origin errors:

Uncaught SecurityError: Failed to read a named property 'offsetHeight' from 'Window': Blocked a frame with origin "https://studio.stage.edx.org/" from accessing a cross-origin frame.

Can we change the initial value of lastHeight and lastWidth to something that doesn't try to access window.parent?

Also what is the [0] in window.parent[0] even doing?

@bradenmacdonald Turns out that we don't even need this piece of code.

Created a very small PR: #36643

openedx#36477 (comment)

#36477 (comment)

openedx#36477 (comment) (cherry picked from commit 6508010)

…6652) #36477 (comment) (cherry picked from commit 6508010)

XBlock rendered in an iframe in frontend-app-authoring needs to resize automatically based on component size. Updates xblock iframe template to post message to parent window on size change.

#36477 (comment)

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Apr 4, 2025

openedx-webhooks added this to Contributions Apr 4, 2025

github-project-automation bot moved this to Needs Triage in Contributions Apr 4, 2025

navinkarkera changed the title ~~feat: post component height to parent window~~ feat: post component height to parent window [FC-0083] Apr 4, 2025

navinkarkera force-pushed the navin/fal-4049/xblock-iframe-height branch from 0fce6f1 to 5659d38 Compare April 4, 2025 16:51

mphilbrick211 added the FC Relates to an Axim Funded Contribution project label Apr 7, 2025

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Apr 7, 2025

bradenmacdonald reviewed Apr 8, 2025

View reviewed changes

openedx/core/djangoapps/content_libraries/api/libraries.py Show resolved Hide resolved

navinkarkera force-pushed the navin/fal-4049/xblock-iframe-height branch 2 times, most recently from c1bca0f to bd45d68 Compare April 9, 2025 13:14

navinkarkera marked this pull request as ready for review April 9, 2025 13:15

navinkarkera mentioned this pull request Apr 9, 2025

feat: library unit page skeleton [FC-0083] openedx/frontend-app-authoring#1779

Merged

pomegranited approved these changes Apr 10, 2025

View reviewed changes

navinkarkera added 3 commits April 10, 2025 16:01

feat: post component height to parent window

1b2178d

feat: add tags_count to library xblock metadata

00cb1ab

chore: add todo comment about tags_count field

46f1a75

navinkarkera force-pushed the navin/fal-4049/xblock-iframe-height branch from bd45d68 to 46f1a75 Compare April 10, 2025 10:31

Merge branch 'master' into navin/fal-4049/xblock-iframe-height

d3a1387

ChrisChV enabled auto-merge (squash) April 11, 2025 17:41

ChrisChV merged commit b893b23 into openedx:master Apr 11, 2025
48 checks passed

ChrisChV deleted the navin/fal-4049/xblock-iframe-height branch April 11, 2025 18:01

github-project-automation bot moved this from Waiting on Author to Done in Contributions Apr 11, 2025

navinkarkera mentioned this pull request Apr 12, 2025

fix: auto adjust min height of xblock previews [FC-0083] openedx/frontend-app-authoring#1813

Merged

ormsbee mentioned this pull request Apr 23, 2025

Remove py2neo dependency #36586

Merged

bradenmacdonald reviewed Apr 30, 2025

View reviewed changes

navinkarkera added a commit to open-craft/openedx-platform that referenced this pull request May 1, 2025

fix: unwanted section of code causing security error

f4bc492

openedx#36477 (comment)

navinkarkera mentioned this pull request May 1, 2025

fix: unwanted section of code causing security error #36643

Merged

bradenmacdonald pushed a commit that referenced this pull request May 1, 2025

fix: unwanted section of code causing cross-origin error (#36643)

6508010

#36477 (comment)

navinkarkera added a commit to open-craft/openedx-platform that referenced this pull request May 2, 2025

fix: unwanted section of code causing cross-origin error (openedx#36643)

2a30a73

openedx#36477 (comment) (cherry picked from commit 6508010)

navinkarkera mentioned this pull request May 2, 2025

fix: unwanted section of code causing cross-origin error (#36643) #36652

Merged

bradenmacdonald pushed a commit that referenced this pull request May 2, 2025

fix: unwanted section of code causing cross-origin error (#36643) (#3…

d6df4d1

…6652) #36477 (comment) (cherry picked from commit 6508010)

UsamaSadiq pushed a commit that referenced this pull request May 14, 2025

fix: unwanted section of code causing cross-origin error (#36643)

81c2f4e

#36477 (comment)

marlonkeating pushed a commit that referenced this pull request Jul 15, 2025

fix: unwanted section of code causing cross-origin error (#36643)

ea2377e

#36477 (comment)

		var lastHeight = window.parent[0].offsetHeight;
		var lastWidth = window.parent[0].offsetWidth;

feat: post component height to parent window [FC-0083] #36477

feat: post component height to parent window [FC-0083] #36477

Uh oh!

Conversation

navinkarkera commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

openedx-webhooks commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

pomegranited left a comment

Choose a reason for hiding this comment

Uh oh!

ChrisChV commented Apr 10, 2025

Uh oh!

navinkarkera commented Apr 11, 2025

Uh oh!

ChrisChV commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

navinkarkera commented Apr 11, 2025

Uh oh!

ChrisChV commented Apr 11, 2025

Uh oh!

navinkarkera commented Apr 11, 2025

Uh oh!

ChrisChV commented Apr 11, 2025

Uh oh!

Uh oh!

edx-pipeline-bot commented Apr 11, 2025

Uh oh!

edx-pipeline-bot commented Apr 11, 2025

Uh oh!

navinkarkera commented Apr 12, 2025

Uh oh!

bradenmacdonald Apr 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

navinkarkera May 1, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

navinkarkera commented Apr 4, 2025 •

edited

Loading

openedx-webhooks commented Apr 4, 2025 •

edited

Loading

ChrisChV commented Apr 11, 2025 •

edited

Loading

bradenmacdonald Apr 30, 2025 •

edited

Loading