Improve scoping of nested paragraph right-padding rule #12106
Conversation
This addresses feedback in #11757 (comment). The initial issue was that in the default appender, and in empty paragraphs, the plus to add blocks overlaps the placeholder text. The right-padding fixed that. But it bled into other blocks with placeholders, such as the Button block. This PR scopes the rich text rule to only apply to empty paragraphs. The appender was already scoped.
| // On mobile and in nested contexts, the plus to add blocks shows up on the right. | ||
| // This padding makes sure it doesn't overlap text. | ||
| & + .editor-rich-text__tinymce { | ||
| & + .editor-rich-text__tinymce.wp-block-paragraph { |
There was a problem hiding this comment.
I don't like that we target specific blocks in a generic component, what's the reason here? We could do the opposite if needed. Target the richText in the block.
There was a problem hiding this comment.
Target the richText in the block.
Do you mean move these styles into the paragraph block?
Given we have a unique case for the empty paragraph block, I think it's okay to make rules specific to that. But you could have a point in where the styles should live.
There was a problem hiding this comment.
yes, move to paragraph what's specific to paragraph and leave here what's generic to RichText.
| // Specific to the empty paragraph placeholder: | ||
| // when shown on mobile and in nested contexts, the plus to add blocks shows up on the right. | ||
| // This padding makes sure it doesn't overlap text. | ||
| .editor-rich-text__tinymce[data-is-placeholder-visible="true"] + .editor-rich-text__tinymce.wp-block-paragraph { |
There was a problem hiding this comment.
It should be in editor.scss right?
There was a problem hiding this comment.
Argh, yes it should. Many apologies, I know you're busy. 81a81a4 should fix that up.
|
@youknowriad looks like your comments have been addressed -- can we get this merged? |
This addresses feedback in #11757 (comment).
The initial issue was that in the default appender, and in empty paragraphs, the plus to add blocks overlaps the placeholder text. The right-padding fixed that. But it bled into other blocks with placeholders, such as the Button block.
This PR scopes the rich text rule to only apply to empty paragraphs. The appender was already scoped.
Before:
After:
The button isn't as wide on the right side, in the after.