LOW PRIORITY: Arrow keys scroll editor page

Bugs
1

Description:

Arrow keys cause the entire page to jump around, making the editor very difficult to use. It seems like the left arrow scrolls the current block to the top of the page, (EDIT: the right arrow does not scroll it down – I was confusing other Gutenberg scrolling) and the right arrow scrolls it down. This makes it super hard to edit the page.

Turns out there is a simple workaround: edit it while in tablet mode, or some other mode than 100% width. The problem entirely goes away, and all is well if you do that. So this is probably not worth looking into.

Step-by-step reproduction instructions:

  1. Have a page whose length is longer than the browser window.
  2. Click on some block in the middle of the page.
  3. Press the left or right arrow key.

Environment info

  • WordPress version: 6.5.3
  • Cwicly Plugin version: 1.4.1.4
2

Shrinking the margins to use tablet mode doesn’t any longer work, because none of the dialog boxes show up when the margins are shrunk. So you can’t create links. So I’d like to increase the priority of this bug.

3

I don’t know if this helps, but adding the violentmonkey browser extension, and using it to override the CSS as follows partially fixes the problem. I’d prefer it eventually get fixed in Cwicly; grepping indicates the problematic style element gets added in index.js in the build directory of cwicly. Unsurprisingly, disabling all other plugins does not help. The violentmonkey script is below (edited to remove bogus color). This doesn’t totally help the scrolling, but it makes it a (little?) bit better.

Blockquote
// ==UserScript==
// @name New script equitieslab.com
// @namespace Violentmonkey Scripts
// @match https://your.awesome-domain.com/wp-admin/post.php*
// @grant GM_addStyle
// @version 1.0
// @author Henry Crutcher
// @description 8/3/2024, 8:48:40 PM
// ==/UserScript==
GM_addStyle (
div.edit-post-visual-editor.has-inline-canvas { overflow: hidden !important; }
);

4

Hi @equitieslab,

A quick temporary workaround until this is fixed:

/* ENSURE DIALOGS TRIGGERED FROM INLINE CONTENT REMAIN VISIBLE */
div.edit-post-visual-editor .components-popover { 
    transform: unset !important;
);

This prevents the dialogs (e.g. link dialog) from being hidden.

Also, for a solution that applies this to the editor for all users, I recommend using a tool like Branda that has Admin CSS.

5

Hello @equitieslab,

Thanks for the report and sorry for not getting back on this one.

I’m not sure I am fully able to reproduce the issue you’re experiencing here.
Would you be able to take a quick screencast of this so that I can see what I might be missing?

Thanks in advance!

Cheers,

6

Here’s the video link.

I’ve also emailed you a temporary admin password so you can see it in action by editing the sample doc, or any other loooooong document (the negative EPS one also shows the behaviour). Hosting OS is linux, browser OS that shows the bug is Linux, but probably others…

1 Like
7

Hello @equitieslab,

Wow, thank you very much for this, @equitieslab, it is very helpful.
Will take a detailed look and have this fixed as soon as possible.

Apologies for the trouble, I can see that it could make editing very hard.

Cheers,

2 Likes
8

No worries at all! You have an amazing platform, and I really love the passion you bring to it. This is soooooo much better than anything I’ve seen thus far!

1 Like
9

Any ideas what might be going on? I’m happy to use post-browsing tools such as violentmonkey to monkeypatch the results into something that works better than the current, while waiting for a proper fix.