More block: Match the design in the editor with the front, resolve the undo/redo issue #61131
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Updates the default text in the editor to match the default text on the front. - Removes the editor styles, since the styles made the block look different than on the front. - Replaces the input element with a RichText component with an a tag, because the input element has some default styles that would need to be overwritten. - Replaces the onKeyDown behaviour with the Richtext prop disableLineBreaks, and uses __unstablOnSplitAtEnd to insert a new paragraph block if the user clicks on enter at the end of the block's text content.
carolinan
added
[Type] Bug
|
Size Change: -2.39 kB (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
ellatrix
reviewed
Apr 26, 2024
ellatrix
approved these changes
Apr 26, 2024
|
I will update the tests later this week because of a national holiday. |
richtabor
requested changes
Apr 30, 2024
There was a problem hiding this comment.
I don't think we should reduce the utility design of the more block. The other refactoring is good, but as a utility block it should clearly communicate the intention (essentially a page break).
I left a comment on the main issue: #34419 (comment)
|
I think it'd be helpful to maintain the page break design, but use the colors from the site, so that it ensures proper contrast (rather than the arbitrary #ccc and white). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
With this pull request, my intention was first to only update the look of the block in the editor to match the front. But it turned into a small refactor.
When I tested the block, I found that changing it from using an
inputelement to use aPlainText(v2) would also solve the problem with the undo/redo, described in issue 58875.Closes #34419, #58875
Why?
The block was styled to look like the more tag in the classic editor. This made the block recognisable for user who has used the classic editor. But the block style did not match the front, which arguably made it more difficult to see what the end result would be.
How?
(more...).inputelement with aPlainTextcomponent with anatag, because theinputelement has some default styles that would need to be overwritten.onKeyDownbehaviour withdisableLineBreaks, and uses__unstablOnSplitAtEndto insert a new paragraph block if the user clicks onEnterat the very end of the block's text content.Testing Instructions
Activate a block theme.
Deactivate Gutenberg.
Create a new post.
Add some content
Add a more block. Adjust the text and then try to use the undo commands.
Add some content after the more block.
Activate Gutenberg with this PR.
Confirm that there are no block validation errors caused by the changes to the more block.
Confirm that the more block has a new design, it should now look like a plain text with a link.
Adjust the text and then try to use the undo commands. Confirm that the undo now works.
Next, test the block in an archive, using a query loop with a post content block.
It must be a post content block, it will not work with an excerpt.
View the archive on the front, locate the post you created, and confirm that:
Screenshots or screencast
Before:
After:
