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
More block: Match the design in the editor with the front, resolve the undo/redo issue #61131
Conversation
- 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.
Size Change: -2.39 kB (0%) Total Size: 1.74 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.
Great, we should almost never use input fields in block markup, unless it's an actual input on the front end.
I will update the tests later this week because of a national holiday. |
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.
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). |
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
input
element 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...)
.input
element with aPlainText
component with ana
tag, because theinput
element has some default styles that would need to be overwritten.onKeyDown
behaviour withdisableLineBreaks
, and uses__unstablOnSplitAtEnd
to insert a new paragraph block if the user clicks onEnter
at 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: