Add post author avatar block #38265
Add post author avatar block #38265
Conversation
|
Size Change: +1.61 kB (0%) Total Size: 1.14 MB
ℹ️ View Unchanged
|
Not sure if it is the best way to do it. But if you add That way you can get border props (both classname and styles) by:
You have a similar approach on We did something similar to the Comment Author Avatar, feel free to check it, it was with spacing attributes: |
carolinan
requested review from
ajitbohra,
mkaz,
spacedmonkey and
TimothyBJacobs
as code owners
|
@c4rl0sbr4v0 Thank you for the help! I think it is solved now. I added I tested using the placeholder SVG; but found that on my install it was never visible. I am not sure how to measure it, but perhaps the svg takes so long to load that the correct image is displayed just as fast. |
|
I would like to avoid the two stylesheets, if there are better ways to solve the left and right margins that are not working in the editor without the CSS. I feel like being able to adjust the spacing will be important for creating different layouts together with the author name and biography blocks. |
carolinan
changed the title
|
Great job! I will take this PR as a reference for the comments too 🚀 Sorry, I don't completely understand the issue with SVG you mention. 🙇
We could make that square only with plain CSS if it is faster than a SVG. Also, we need to add this CSS to the SVG parent dom element in order to be shown: stroke: currentColor;
stroke-dasharray: 3;
Do you mean the real post author avatar? |
Yes. |
In that case, the main issue we have, is that if we go to the Site Editor -> Single Post. We cannot give styles to a text placeholder. (screenshot attached)
@jameskoster mentioned the idea of displaying a default avatar, I'm still checking if that would mean to do a request to the REST API to fetch that information. Will keep you posted here as well! |
|
The author avatar has a fallback image already if the user has not set up an avatar at gravatar. |
At least, this is also happening on Comments Avatar Author on some template parts edition, and also inside any post or page 😅 But, I recorded a screen video where when you edit the Single Post template on the Site Editor, it does not display an avatar, just the text placeholder. Screen.Recording.2022-01-28.at.14.26.19.mov |
|
Would it be acceptable for the placeholder to keep the .4 opacity? It affects the border color option but only in the editor, so it doesn't match the front. Or would it be better if the placeholder respected the border color option, but looked different from all the other placeholders that use .4 opacity? |
|
Left: Editor, various settings. Right: front. For some reason, the front is displaying an avatar from an existing user (from the imported theme test data).
|
I guess the best option is always to keep consistency between editor and frontend. So in this case would be better to remove that opacity. That will also happen to comments author's avatar. |
|
I am trying to troubleshoot why the avatar is displaying an actual user avatar on the front, for pages that are not single post type templates.
At this point, I added a
|
|
Perhaps its a non issue if the blocks will be limited to a parent post author block. |
Shouldn't they be consistent? Padding and background enable you to create things like this:
IE some spacing around the image and a border. |
|
I was not able to get that to work with the resizer. |
|
Anyway I am hesitant to do any more work on this until there is a final decision about if this is going to be separate block or a variation of the post comment avatar block, and what the new name will be and so on. |
|
For what it's worth, I think it's valuable to have a simple avatar block like this 👍 👍 |
@carolinan I will push at the end of the day a draft PR of a first iteration. I'm comparing and taking code from both Comment and Post, and will be happy to share the development, meaning you can commit without any hesitation, your experience is kindly appreciated 😄 |
|
Closed in favor of #38591 |
Description
Adds a new block for the post author avatar.
Partial for #35596
Also closes #31962, #35693
The goal is to support the following:
Compared to the comment avatar I opted out of padding and background color because I did not see how the background color would be used with this block.
The block has a wrapping figure element, an optional link, and an image element.
The wrapper is needed for two reasons:
"__experimentalSelector", but the documentation says that the parent selector is automatically included )Problems:
Adding width: fit-content to the wrapper may solve this. On the front, all four sides of the margin works, because it is added to the image element. This does lead to inconsistencies between the editor and front.
Question:
How do I remove the "has-border-color" CSS class from blockProps, which is placed on the wrapper?
I read through the documentation for classnames and tried several things but was not able to remove it.
Alternatives:
The block could include a CSS file to force hide the border on the wrapper but that did not feel like the right approach either.
Testing Instructions
Screenshots
Types of changes
New feature (non-breaking change which adds functionality)
Checklist:
*.native.jsfiles for terms that need renaming or removal).