-
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
List/quote: unwrap inner block when pressing Backspace at start #45075
Conversation
Size Change: +111 B (0%) Total Size: 1.32 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.
In terms of writing flow, I really like this!
My immediate instinct with isUnmodifiedBlock
was whether we need a new API, but also whether we could do without that kind of special handling in the merger, and just consider whether the block is empty — not sure.
Anyway, that got me to test this with empty blocks, and I found the following bug:
- Insert a Paragraph followed by a List with a couple of List Items
- Move the caret to the beginning of the first List Item
- Press Enter to insert an empty List Item
- Move the caret up to that empty item
- Press Backspace
Unexpected: the whole List is deleted.
Screen.Recording.2022-10-18.at.16.42.06.mov
That would be the same as |
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.
@ellatrix I think it would be cool to sneak an A11Y improvement in to this PR. As far as functionality goes, it works fine. However, it would be great to have additional context that tells screen reader users what just happened.
Combined content from list block in to previous paragraph block. Deleted list block. Now editing paragraph block.
Deleted list block. Now editing previous paragraph block.
Thoughts on how to communicate this information?
expect( await hasBlockSwitcher() ).toBeFalsy(); | ||
// Verify the correct block transforms appear. | ||
expect( await getAvailableBlockTransforms() ).toHaveLength( 1 ); | ||
expect( await getAvailableBlockTransforms() ).toHaveLength( 0 ); |
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.
The comments in this test no longer seem to agree with the code. Where is the change coming from?
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.
The comments should actually make sense because I'm merely reverting
https://github.com/WordPress/gutenberg/pull/43181/files#diff-56243bd4e7ab153498f10d75b0827121efa47fe088f53d75332a093e91a7edf2
{ | ||
type: 'block', | ||
blocks: [ '*' ], | ||
transform: ( _attributes, childBlocks ) => { | ||
return getListContentFlat( childBlocks ).map( ( content ) => | ||
createBlock( 'core/paragraph', { | ||
content, | ||
} ) | ||
); | ||
}, | ||
}, |
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.
Checking my assumptions here: this bit that we removed — i.e. the Unwrap transform — was functionally equivalent to the Transform to Paragraph transform, right? So we don't lose anything?
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, it was a hackier way of doing list item to paragraph. It wasn't great because '*' should mean unwrap, while this is unwrapping and converting it to paragraphs.
} = registry.select( blockEditorStore ); | ||
|
||
function moveFirstItemUp( _clientId, changeSelection = true ) { |
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.
A high-level comment stating the goal of the function and its general algorithm would be greatly appreciated. :)
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.
Done
7f26426
to
fd3944b
Compare
await pageUtils.pressKeyTimes( 'ArrowUp', 3 ); | ||
await page.keyboard.press( 'Delete' ); | ||
|
||
expect( await editor.getEditedPostContent() ).toMatchSnapshot(); |
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.
Restored tests to pre #44916
...-blocks-test-restore-sele-2a1ee-roduces-more-than-one-block-on-forward-delete-1-chromium.txt
Show resolved
Hide resolved
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.
🚀
649e78e
to
e1b346d
Compare
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 all of the tests are passing now, including the mobile ones 🚀
What?
Fixes #34100.
Follow up to #43181.
Why?
It's less jarring than the current experience: unwrapping all list items at once.
How?
Modifies the onMerge function.
Testing Instructions
Create a list, press Backspace at the start of the first list item.
Do the same for Quote and Group.
Screenshots or screencast