You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
With #2160, popovers now render as a direct child of the <body> element, which has the advantage of escaping from style cascade of ancestor nodes, and the downside of escaping style cascade of ancestor nodes. Since some styles are considered "global" in the context of the Gutenberg editor (font sizes, colors, box-sizing, etc), these should still take effect on popover elements. The changes here effectively change the render target of popovers from document.body to the Gutenberg root element (#editor).
Implementation notes:
This adds yet another context provider, which in my cursory investigation seems to be the common approach for pre-React-16 portal implementations.
To try to remedy this issue, and with consideration of my own prior feedback at #2119 (comment), the approach here refactors editor rendered providers into a composable array of components.
Testing instructions:
Verify that there are no regressions in the behavior of Popover controls, currently present in:
Header inserter
Post settings visibility
Content inserter
Note that Gutenberg-global styles take effect in rendered popovers.
change the render target of popovers from document.body to the Gutenberg root element (#editor).
Is there a way to specify a different target for a different type of popover? For example, if in the future the Popover component will be used for modal dialogs, they should be appended to the body element.
Is there a way to specify a different target for a different type of popover? For example, if in the future the Popover component will be used for modal dialogs, they should be appended to the body element.
It shouldn't be much work to implement. The changes here introduced React context specifying the target for popover rendering, so it applies to any popover in the editor. In specialized cases like modals, we could add a prop which would take precedence over this context.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
aduth
added
General Interface
Related: #2160
Related: #2291 (comment)
With #2160, popovers now render as a direct child of the
<body>element, which has the advantage of escaping from style cascade of ancestor nodes, and the downside of escaping style cascade of ancestor nodes. Since some styles are considered "global" in the context of the Gutenberg editor (font sizes, colors, box-sizing, etc), these should still take effect on popover elements. The changes here effectively change the render target of popovers fromdocument.bodyto the Gutenberg root element (#editor).Implementation notes:
This adds yet another context provider, which in my cursory investigation seems to be the common approach for pre-React-16 portal implementations.
To try to remedy this issue, and with consideration of my own prior feedback at #2119 (comment), the approach here refactors editor rendered providers into a composable array of components.
Testing instructions:
Verify that there are no regressions in the behavior of Popover controls, currently present in:
Note that Gutenberg-global styles take effect in rendered popovers.