Skip to content
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

Always open List View: disable sidebar animation when preference is enabled #69240

Open
2 of 6 tasks
afercia opened this issue Feb 19, 2025 · 0 comments
Open
2 of 6 tasks
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. Needs Design Feedback Needs general design feedback. [Package] Interface /packages/interface [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Feb 19, 2025

Description

Noticed while working on #69147 / #69190

When the ''Always open List View:' preferences ie enabled, the sidebar animation on first page load is a very distrqacting and unexpected experience. As an useer, I don't want to see anything that 'moves' on my screen when the page loads.

The animation is even more noticeable and disturbing with browsers that make animations run 'smoother' for example with Safari. Video to illustrate the behavior with Safari:

Screen.Recording.2025-02-19.at.08.51.45.mov

To my understanding, the animation is set on the secondary sidebar in the interface package.

<AnimatePresence initial={ false }>
{ !! secondarySidebar && (
<NavigableRegion
className="interface-interface-skeleton__secondary-sidebar"
ariaLabel={ mergedLabels.secondarySidebar }
as={ motion.div }
initial="closed"
animate="open"
exit="closed"
variants={ {
open: { width: secondarySidebarSize.width },
closed: { width: 0 },
} }
transition={ defaultTransition }
>
<motion.div
style={ {
position: 'absolute',
width: isMobileViewport
? '100vw'
: 'fit-content',
height: '100%',
left: 0,
} }
variants={ {
open: { x: 0 },
closed: { x: '-100%' },
} }
transition={ defaultTransition }
>
{ secondarySidebarResizeListener }
{ secondarySidebar }
</motion.div>
</NavigableRegion>
) }
</AnimatePresence>

So that the animation works on any panel within the sidebar, for example also for the main inserter. Only the List View panel has a preference to stay always open though.

Ideally, when 'Always open List View' is enabled, the animation should not run on first page load. After that, it should run when users close and reopen the list view manually.

Step-by-step reproduction instructions

  • Go to the post editor > Options > Preferences and enable the preference 'Always open List View'.
  • Exit the editor and to the WP admin 'Posts' page.
  • Click any post to edit it in the editor.
  • Observe the jarring animation on page load.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@afercia afercia added [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Package] Interface /packages/interface [Type] Bug An existing feature does not function as intended Needs Design Feedback Needs general design feedback. labels Feb 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] List View Menu item in the top toolbar to select blocks from a list of links. Needs Design Feedback Needs general design feedback. [Package] Interface /packages/interface [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

1 participant