-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
ResizableFrame: Fix styling in Firefox #52700
Conversation
Size Change: +1.22 kB (0%) Total Size: 1.43 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 tried this out and it worked well. Looks 🚢 shape to me.
@@ -332,6 +341,12 @@ export default function Layout() { | |||
} | |||
isFullWidth={ isEditing } | |||
oversizedClassName="edit-site-layout__resizable-frame-oversized" |
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.
It looks like the use of this prop could be removed now and further that the prop itself could be removed from ResizableFrame
. Of course I could've missed something.
oversizedClassName="edit-site-layout__resizable-frame-oversized" |
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.
Good catch, thanks! 6ecff49
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.
Hmm testing these changes on Chrome I'm now seeing the same buggy behaviour :has
was causing in Firefox 🤔 can anyone else reproduce this?
chrome-resize.mov
I tried again and wasn't able to until I narrowed the browser window after load. Widening it after load has a funny effect too. I tried on trunk and can get the same thing. |
Thanks for testing! The glitches you are seeing, if they're due to window resizing, is should be fixed in #52697. |
Flaky tests detected in 6ecff49. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5587249549
|
* ResizableFrame: Fix styling in Firefox * Remove unused class
* Filter out patterns that are not allowed in the inserter (#52675) * Remove autofocus and improve placeholder text consistency. (#52634) * Do not navigate to the styles pages unless you're in a random listing page (#52728) * Patterns: Don't override the rootClientID in create menu - only set if undefined (#52713) * Footnotes: store in revisions (#52686) * Fix: Block toolbar obscuring document tools when Top Toolbar is enabled (#52722) * Update toolbar width * Site editor needs specific width * fixes top toolbar width for post editor when not in fullscreen * remove the body rule --------- Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com> * Site Editor: Fix site link accessibility issues (#52744) * Add id to pattern inserted notice to stop multiple notices stacking (#52746) * Global Styles: Don't use named arguments for 'sprintf' (#52782) * Footnotes: Use static closures when not using '' (#52781) * removes check for active preview device type to enable the fixed toolbar preference (#52770) * Parser / Site Editor: Ensure autop is not run when freeform block is set to core/html (#52716) * Parse / Site Editor: Ensure autop is not run when freeform block is set to core/html * Switch to equals freeform instead of not equals core/html * Rename core/test-freeform to core/freeform in tests * Adding @SInCE annotation for relevant 6.3 changes. (#52820) * Navigation: Load the raw property on the navigation fallback (#52758) * Navigation: Load the raw property on the navigation fallback * Update lib/compat/wordpress-6.3/navigation-fallback.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update lib/compat/wordpress-6.3/navigation-fallback.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Add a test for these properties * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * Update phpunit/class-gutenberg-rest-navigation-fallback-controller-test.php Co-authored-by: Dave Smith <getdavemail@gmail.com> * add more comments * add necessary method * Fix php coding standards error --------- Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com> * Allow styles to be changed dynamically through editor settings (#52767) * ResizableFrame: Fix styling in Firefox (#52700) * ResizableFrame: Fix styling in Firefox * Remove unused class * Patterns: Fix empty general template parts category (#52747) --------- Co-authored-by: Glen Davies <glen.davies@automattic.com> --------- Co-authored-by: Carolina Nymark <myazalea@hotmail.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com> Co-authored-by: Riad Benguella <benguella@gmail.com> Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Andrei Draganescu <andrei.draganescu@automattic.com> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Co-authored-by: Ramon <ramonjd@users.noreply.github.com> Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com> Co-authored-by: Lena Morita <lena@jaguchi.com> Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com>
Fixes #52516
What?
Fixes the broken styling when the Editor Canvas is resized to a wider width in Firefox.
Why?
Some CSS rules were not applying correctly in Firefox because it doesn't support
:has()
yet (#52699).How?
Restructures the CSS so it doesn't rely on
:has()
and follows BEM more cleanly.Testing Instructions
Screenshots or screencast
CleanShot.2023-07-18.at.02.09.43.mp4