Fix for Popover grid positioning in the FSE

[bmarshall511]

Description of the Change

Fixes the Popover grid positioning in the FSE.

Closes #198

How to test the Change

1. Go to the FSE & edit a template or page
2. Add/edit a text component, then click on the insert character button in the toolbar
3. Popover should appear close to the caret

Changelog Entry

Fixed - Fix for the Popover grid positioning in the FSE

Credits

Props @bmarshall511

Checklist:

• I agree to follow this project's Code of Conduct.

[bmarshall511]

@fabiankaegy I've implemented what I think is a fairly hacky fix for the Popover grid positioning in the FSE. There's gotta be a better way to select the FSE iframe than what I'm doing here. Tried Googling around for a while with no luck. Do you have any ideas? I'm hoping the blocks api provides something I can use instead on manually getting the iframe via the name attribute. Forgive the dirty code, just wanted to get something up that worked & could be reviewed for suggestions on a better way of handling it.

[fabiankaegy]

@bmarshall511 I would take a look at the core link format aswell. It appears they are using the contentRef parameter which also gets passed into the edit function. This should be a dom node. Which would allow you to call element.ownerDocument to access the current document element. https://github.com/WordPress/gutenberg/blob/d81637e847cc9474696fc62e2456bb797e09c32f/packages/format-library/src/link/inline.js#L41C2-L41C12

On top of that the core link format use the useAnchor hook with the contentRef passed in to generate the anchor coordinates. Maybe that is worth a look.

[bmarshall511]

@bmarshall511 I would take a look at the core link format aswell. It appears they are using the contentRef parameter which also gets passed into the edit function. This should be a dom node. Which would allow you to call element.ownerDocument to access the current document element. https://github.com/WordPress/gutenberg/blob/d81637e847cc9474696fc62e2456bb797e09c32f/packages/format-library/src/link/inline.js#L41C2-L41C12

On top of that the core link format use the useAnchor hook with the contentRef passed in to generate the anchor coordinates. Maybe that is worth a look.

@fabiankaegy Thanks! contentRef was the missing piece. Was using the code previously implemented as a guide which was using document to find the caret position. This makes the code much cleaner. It's now working both of FSE and the page editor.

[fabiankaegy]

These changes look great to me :)