Post Comments: Add some basic CSS to the post comments block #30382
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
scruffian
added
the
[Block] Comments
scruffian
requested review from
youknowriad,
kjellr,
jasmussen,
MaggieCabrera and
jffng
youknowriad
added
[Feature] Full Site Editing
[Feature] Themes
|
Size Change: +327 B (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
jasmussen
reviewed
Mar 30, 2021
| .comment-author { | ||
| .avatar { | ||
| float: left; | ||
| margin-right: 10px; |
There was a problem hiding this comment.
Should we use 1em here instead?
There was a problem hiding this comment.
The recent columns block has a margin-right: .75em; 🤔 https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/latest-comments/style.scss#L43
No matter what is decided, I think they should match.
There was a problem hiding this comment.
The avatar shape and size are also different 🤔
|
Nice little improvement 👍 👍 |
jffng
reviewed
Mar 30, 2021
| @@ -0,0 +1,33 @@ | |||
|
|
|||
jffng
added a commit
to Automattic/themes
that referenced
this pull request
Mar 30, 2021
|
I assume this is a short term fix, I thought the plan was to split these elements into separate blocks inside a loop. The reply link could use some default spacing. TT1 blocks with latest comments block and a comments block below it. I cut the width because of the size. |
|
And nested comments in Empty theme: |
|
On Firefox the inputs are barely visible and look different than the textarea using empty theme. I'm not sure how much we should style these, to be honest. Maybe we can use the search block defaults as a reference? Firefox:
Search block:
|
This is definitely an improvement — I see all of the same minor errors about Reply link spacing and bullets that @carolinan noted above. This seems like a weird half-way step to me though. Block-based themes will still likely need to refine these styles via CSS. I still recommend we mirror the styles from the Latest Comments block for a more polished default. Is there a reason we're not doing that? |
jffng
added a commit
to Automattic/themes
that referenced
this pull request
Apr 2, 2021
jffng
added a commit
to Automattic/themes
that referenced
this pull request
Apr 2, 2021
* Add baseline styles for post comments. * Initial styles. * Blank Canvas Blocks: Add button styles for the Post Comments block Reply link * Remove widths because of WordPress/gutenberg#30382 * Reset borders and cursor for form inputs. * Move to border and cursor reset to button mixin. * Remove addition to button mixin. * Rebase. Co-authored-by: Danny Dudzic <[email protected]>
scruffian
force-pushed
the
update/comment-form-css
branch
from
32bd645 to
e9b3d62
Compare
|
I've updated this to match latest comments as closely as possible:
|
scruffian
force-pushed
the
update/comment-form-css
branch
from
56c807f to
4779386
Compare
carolinan
approved these changes
May 8, 2021
7 tasks
8 tasks
gziolo
added
[Block] Comments (legacy)
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.
Description
This adds some basic CSS to the Post Comments block, so it doesn't look broken. Fixes #26864
How has this been tested?
Screenshots
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist:
*.native.jsfiles for terms that need renaming or removal).