Locked (restrict editing) reusable block is still editable

[MarieComet]

Description

With WP 6.0 beta 1.
A locked reusable block (with "restrict editing") text content is still editable.
From my tests, it's happening only for blocks containing text (paragraph and list block for example).
(See video for example).

Step-by-step reproduction instructions

1. Insert a paragraph or list block, enter some text
2. Add it to reusable blocks
3. Lock it (with "restrict editing" option)
4. Click on the text, I can edit it

Screenshots, screen recording, code snippet

Démo : https://mariecomet.fr/wp-content/uploads/2022/04/locked-reusable-block.mp4

Environment info

• WP 6.0 beta 1
• Gutenberg plugin not active
• Twenty Twenty-One Version: 1.5

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

[MarieComet]

Note : I don't know why, the linked video doesn't load on Firefox, please use Chrome to watch it.

[Mamaduka]

Thanks again, @MarieComet, for contributing.

I just tried to reproduce the issue, but I cannot select block inside Reusable block when editing is locked. Posting my env and screencast. Let me know if I'm missing something.

cc @paaljoachim

Environment

• WP 6.0 Beta 1
• Gutenberg plugin not active (tested with the plugin as well).
• TT1 theme.
• MacOS/Chrome

CleanShot.2022-04-13.at.15.41.14.mp4

[MarieComet]

Yes, it's working on Chrome, can you test on Firefox ?

[MarieComet]

After some tests, it's looks like removing pointer-events: none; here fix the bug :

.block-editor-block-content-overlay.overlay-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: 2px;
    z-index: 10;
    /* pointer-events: none; */
}

[Mamaduka]

I can confirm that the overlay works in Chrome and Safari but fails with Firefox.

[paaljoachim]

Testing.
Local site.
WP 6.0 Beta 1.
Twenty Twenty Two.

Chrome.
Overlay works. Locking works.

Firefox.
Overlay not working. First click goes straight through to inner blocks. First click should only select the overlay. Second click should go through as long as Restrict editing lock is not activated.
Activating locking Restrict editing not working.
Fix the overlay and Restrict editing might also work as it should.

Opera.
Overlay works. Locking works.

Safari
Overlay works. Locking works.

[talldan]

After some tests, it's looks like removing pointer-events: none; here fix the bug

Lets try that out. From what I can tell that also helps with #35079, though that particular issue is still broken in Safari.

I made a PR - #40339.

[talldan]

The 'Backport to WP Beta/RC' label is just for PRs, not for issues, so I've removed it.

[ndiego]

Given that the "edit locking" functionality is not going to make it into 6.0 (see #40498), I am going to remove this from the 6.0 Project Board.

[Mamaduka]

I'm no longer able to reproduce the issue on the current trunk. It might be related to the recent change of using the inert attribute in useDisabled. See #44865.

[Mamaduka]

Hi, @MarieComet

Could you let me know if you can still reproduce this issue?

[MarieComet]

Hi @Mamaduka,

I can't reproduce this issue 👍
Testing with WP 6.2-RC2-55551, Chrome and Firefox.