-
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
Fix support of sticky position in non-iframed post editor #53540
Conversation
Size Change: +1.17 kB (0%) Total Size: 1.5 MB
ℹ️ View Unchanged
|
Flaky tests detected in 38b48cc. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5825194035
|
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.
Great work honing in on a good fix for this one @stokesman!
At first I tried to avoid adding a class but didn't find any existing markup to hang this on and didn't want to use :has for lack of complete support
I quite like the addition of the classname as it means we can be explicit about why the overflow: hidden
rule is added 👍
This is testing nicely for me:
✅ When iframed, this is working as on trunk
and the duplicate scrollbars issue is not reintroduced
✅ When not iframed, this resolves the issue for sticky positioning and allows sticky elements to stick to the top of the editor
Just left a comment about whether we should add a comment explaining why the overflow: hidden
rule is sometimes present, but other than that this LGTM! ✨
@@ -2,7 +2,9 @@ | |||
position: relative; | |||
display: flex; | |||
flex-flow: column; | |||
overflow: hidden; | |||
&.is-isolated { |
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.
Should we add a comment prior to this rule explaining why overflow: hidden
is only applied when .is-isolated
is applied? It's a tricky edge case this one, so could be good to make sure we don't accidentally reintroduce the problem further down the track.
Now that the editor is iframed by default, I think it's time to remove the inline classic editor entirely. It was only left inline because we didn't want to change the default experience yet last time. |
@@ -2,7 +2,9 @@ | |||
position: relative; | |||
display: flex; | |||
flex-flow: column; | |||
overflow: hidden; | |||
&.is-isolated { | |||
overflow: hidden; |
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.
Does it hurt to always apply this rule?
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.
Yes, unfortunately overflow: hidden
in the non-iframed editor prevents the styling for sticky positioned blocks from working (E.g. Group block set to sticky
).
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.
Oops, sorry, I meant to never apply this rule. There's no comment about why it's needed
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've added a comment with explanation for both cases. I also inverted the application of the class. It seems a hair neater that way as a class isn't added for what is the expected case.
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.
Oops, sorry, I meant to never apply this rule. There's no comment about why it's needed
Ah, gotcha. And thanks for adding the explanatory comment @stokesman!
@ellatrix there's a screengrab on the earlier PR that added overflow: hidden
over in #49978 — basically, the interaction between the iframed editor and the block toolbar popover results in additional scrollbars when the toolbar goes off screen in long posts if we don't have the rule in place.
* Fix support of sticky position in non-iframed post editor
I just cherry-picked this PR to the update/bugfixes-6-3-1 branch to get it included in the next release: edba315 |
* Fix support of sticky position in non-iframed post editor
* Update document title buttons radius (#53221) * Fix: Sync status overlaps for some languages in Patterns post type page (#53243) * Image block: Fix stretched images constrained by max-width (#53274) * Fix dragging to resize from stretching image in the frontend * Add image block v7 deprecation * Update deprecation comment * Prevent image losing its aspect ratio at smaller window dimensions * Revert "Prevent image losing its aspect ratio at smaller window dimensions" This reverts commit 8ac9f8c. --------- Co-authored-by: scruffian <ben@scruffian.com> * Image Block: Don't render `DimensionsTool` if it is not resizable (#53181) * Fix missing Replace button in content-locked Image blocks (#53410) * Revert "don't display BlockContextualToolbar at all in contentonly locking (#53110)" This reverts commit 5efce0e. * Alternative fix to hide BlockContextualToolbar when there are no controls * fix the go to for non pages by showing it only for pages (#53408) * Site Editor: Fix document actions label helper method (#52974) * Site Editor: Fix document actions label helper method * Add missing useSelect dep * Fix e2e tests * Move the label map at the file level to avoid recreating the object on every render * Image: Clear aspect ratio when wide aligned (#53439) * RichText: Remove 'Footnotes' when interactive formatting is disabled (#53474) Introduce a new 'interactive' setting for format types * Preserve block style variations when securing theme json (#53466) * Preserve block style variations when securing theme json Valid and safe block style variations were being removed by `WP_Theme_JSON_Gutenberg::remove_insecure_properties` when securing the theme.json. When this was a problem varied depending upon site configuration, but out-of-the-box it was a problem for administrators on multi-site installs. This change adds explicit processing of variations in `remove_insecure_properties` so that they won't get removed. * Add another variation sanitisation test This test checks that when removing insecure properties an unknown/unsupported property is removed from the variation. * Site editor: add missing i18n in `HomeTemplateDetails` (#53543) * Site editor: add missing i18n in `HomeTemplateDetails` * Lint fix * Fix: Snack bar not fixed on certain pages in the Site Editor (#53207) * Fix document title alignment in command palette button (#53224) * Fallback to default max viewport if layout wide size is fluid. (#53551) * Link Control: persist advanced settings toggle state to preferences if available (#52799) * Link Control: Create a preference for whether the advanced section is open * move the useSelect to the component that uses it * Supply preference setter via settings * Pass setter to Post Editor * Provide local state fallbacks in absence of preference store settings * Conditionalise display of settings drawer to “edit” mode only * Extract to constant to improve comprehension * Fix bug in preferences resolution * Improve comments * Add e2e scaffold * Fix e2e test to correctly assert on feature * Remove focused test * Reinstate original logic to hide settings when not required * Scaffold documentation * Revert providing prefs via settings * Refactor to use `core/block-editor` as preference scope * Update docs * Reinstate remaining original conditional * tentative fix for the e2e test * Try a different syntax for shiftAlt * another attempt to fix the e2e test --------- Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com> * Add tests for fluid layout + typography (#53554) * Fix support of sticky position in non-iframed post editor (#53540) * Fix support of sticky position in non-iframed post editor * Revert "Footnotes: Fix recursion into updating attributes when attributes is not an object (#53257)" This reverts commit ab04074. * Fix: indicator style when block moving mode (#53972) * Fix post editor top toolbar with custom fields in Safari (#53688) * Set top toolbar size dynamically (#53526) * fix the top toolbar size in the space remaining after plugin items are pinned * only resize above the tablet breakpoint * fix fixed block toolbar collapse button when icon labels are shown * Update height and scroll behavior * move the layout effect to the affected component, fixes for fullscreen, no block selected, icon labels height --------- Co-authored-by: jasmussen <joen@automattic.com> * Roll back camelCase change in 96b6b1e --------- Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: scruffian <ben@scruffian.com> Co-authored-by: Robert Anderson <robert@noisysocks.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Dean Sas <dean.sas@automattic.com> Co-authored-by: Pascal Birchler <pascalb@google.com> Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com> Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net> Co-authored-by: jasmussen <joen@automattic.com> Co-authored-by: ramon <ramonjd@gmail.com>
In WordPress 6.3, the block toolbar is no longer available below 782px due to the addition of overflow:hidden. I am glad that this PR will fix that for 6.3.2. Thanks. One thought though, what about using (I haven't looked at the issue in #49978 in detail, so maybe there is some reason why you adopted HIDDEN instead of CLIP. In that case, sorry for the rude suggestion) |
Thanks for the ping!
With the rule being guarded based on the additional class name, I'm not sure if there'd be much additional value to switching to
|
If I understand it, using |
What?
This is a rework of #49978 to fix up the effect it had of breaking sticky positioning in the legacy (non-iframed) post editor.
Why?
Sticky positioning in the non-iframed post editor is not working as before. To fix #53477
How?
Adds a class to allow the fix made in #49978 to target just the iframed editor thus avoid its breakage in the non-iframed editor.
At first I tried to avoid adding a class but didn't find any existing markup to hang this on and didn't want to use
:has
for lack of complete support. There's.has-metaboxes
that works in some cases but doesn't when it’s a block ofapiVersion < 3
causing the lack of iframe. Alternative ideas are welcome.Testing Instructions
Sample markup to test sticky positioning
Screenshots or screencast