-
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
Popover component overlay not fully visible in Customizer #43678
Comments
It looks like popovers are already intended to render in a special slot when they are in the customizer: gutenberg/packages/customize-widgets/src/components/customize-widgets/index.js Lines 59 to 68 in de446ff
When rendered in this ad-hoc wrapper, there are style overrides to enforce the gutenberg/packages/customize-widgets/src/components/sidebar-block-editor/style.scss Lines 15 to 26 in eac445b
So I guess that one way to fix this bug is to make sure that all popovers being currently affected by the issue reported above, get effectively rendered in the above slot correctly |
I'm not sure that PR is wide enough in scope to fix the bug for plugins or themes that use Those plugins/themes could implement similar fixes. I'm a bit short of ideas on how to fix it beyond that other than changing everything back to fixed positioning. |
Hi guys I am using kadence theme and am experiencing the same issue. Is there a fix for this? |
Ping! Issue is open for 232 days and counting... UPDATE: ... Issue now fixes for me! - I'm just looking into this (same/similar ??) issue with our theme... so can't comment much - seems to be this issue (POPOVER is hidden under the right sidebar. Offending popover slot code is: I can force the POPOVER into view by adding CSS position to `.popover-slot - but the left px value needed is never consistent (I assume its getting dynamically re-positioned every time the slot is rendered ) Aside: IMO, WordPress' biggest downside is suddenly discovering something is broken, and trying to track down the "when and why" of it... Sure I understand it happens, but core updates should never be breaking changes (unless absolutely unavoidably). |
Hey @mleathem , glad to hear that issue got fixed on your end.
There were already a few messages sharing advice on how to implement a fix if needed (see #43678 (comment) and #43678 (comment)). While I understand that such a bug may be inconvenient, I would also remind you that this is an open-source project in which everyone does their best work while keeping the interest of the community in mind. |
Description
Related: #41739
The issue here is that in previous versions (current WP included version) the popover component was positioned
fixed
and with the latest Gutenberg updates it changes toabsolute
because theis_expanded
class never gets added. I believe this might be the cause here. The popover to respect overflow and other containers to stay within their boundaries.The issue started since this commit: 8b14921#diff-7895f8092f907d624abdbe647e2201f1cebe9198cd3fae6ba759b70a4c0bfef4
As you can see in
/packages/components/src/popover/style.scss
it removed thefixed
position from the.components-popover
element.It adds this in the
&.is-expanded
version though this class never gets added unfortunately.Step-by-step reproduction instructions
Create a popover color picker within the customizer. The color picker is partially hidden.
Screenshots, screen recording, code snippet
Environment info
The screenshot example is made with the GeneratePress theme but any theme which includes a popover color picker will do fine to reproduce.
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: