-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Site Editor: Offset insertion point in iframe #28630
Site Editor: Offset insertion point in iframe #28630
Conversation
@@ -23,6 +23,24 @@ import { isRTL } from '@wordpress/i18n'; | |||
import Inserter from '../inserter'; | |||
import { getBlockDOMNode } from '../../utils/dom'; | |||
|
|||
function offsetIframe( rect, ownerDocument ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This functions comes from
function offsetIframe( rect, ownerDocument ) { |
Is there a good package to host this function so we can use it in both components
and block-editor
package?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure if there's an clear candidate but maybe the @wordpress/dom
package could be a fit.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I took a brief look at Gutenberg packages and agree that @wordpress/dom
might be the right place
Size Change: +810 B (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested this in the post editor (no iframe) and site editor (iframe) and it works as advertised. We should be able to clean some conditionals up once we use the iframe everywhere, but this does the job for now.
cbe933e
to
390a281
Compare
TestingBehavior
Browsers
It looks like the site editor isn't loading again in IE11. It isn't caused by this PR because I can confirm the same issue on the master branch. I'm reopening #28249 |
I agree -- I think it's fine to move forward with this for now, but could we create an issue and/or leave a comment? We could explain the |
Would it be possible to write unit specs for this? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1 from me when we resolve the conversation about DRYing out offsetIframe from the components
and block-editor
packages
|
packages/dom/src/dom.js
Outdated
* | ||
* @return {DOMRect} offsetted bounds | ||
*/ | ||
export function offsetIframe( rect, ownerDocument ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
now that it's a public API, maybe we should find a better name? @ellatrix any thoughts on this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤔 How about: offsetBoundsByOwnerFrame
, offsetRectByOwnerFrame
, frameToScreenPosition
, frameToScreenBounds
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why does it need to be public? Can we not offset the iframe in the popover after we get the anchor rect? Why are we using getAnchorRect
in the first place? That's supposed to be an old API to be deprecated at some point.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ellatrix Moved offsetIframe
back into the popover package. This time into the utils
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1 when discussions about dom
method name and jest mock testing methods are resolved.
When did this regress? When I merged the iframe PR, it worked correctly. Would be great to know what changed broke it. |
I don't think it was a regress. Popover works fine and offsets its position by the iframe position. But |
The custom logic to calculate position is new and I added it in #27860 |
Moved |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm!
@youknowriad can we include this in 10.0? It looks pretty broken now. |
yes, sounds good to me. |
Description
Fixes #28457 #28885
We moved the editor content into an iframe. It already handles offsetting the popover if a ref is passed. But insertion point calculates the position on its own which doesn't take the iframe offset into account. This change offsets the insertion point in the iframe so it's placed at the right position.
How has this been tested?
Paragraph
block, fill it up with some random textColumns
block, choose 50 / 50Column
blockScreenshots
Before
Screen.Recording.2021-01-25.at.10.51.51.mov
After
Screen.Recording.2021-02-01.at.13.44.44.mov
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: