Block Directory: Change 'update' icon to text to be more communicative. #19451
Conversation
| @@ -16,7 +16,9 @@ function DownloadableBlockInfo( { description, activeInstalls, humanizedUpdated | |||
| <Icon icon="chart-line"></Icon>{ sprintf( _n( '%d active installation', '%d active installations', activeInstalls ), activeInstalls ) } | |||
| </div> | |||
| <div className="block-directory-downloadable-block-info__column"> | |||
| <Icon icon="update"></Icon><span aria-label={ sprintf( __( 'Updated %s' ), humanizedUpdated ) }>{ humanizedUpdated }</span> | |||
| <span aria-label={ sprintf( __( 'Updated %s' ), humanizedUpdated ) }> | |||
| <strong>{ __( 'Updated: ', 'gutenberg' ) }</strong> { humanizedUpdated } | |||
There was a problem hiding this comment.
| <strong>{ __( 'Updated: ', 'gutenberg' ) }</strong> { humanizedUpdated } | |
| <strong>{ __( 'Updated: ' ) }</strong> { humanizedUpdated } |
We don't use the gutenberg textdomain here, because it will be merged into core.
| @@ -16,7 +16,9 @@ function DownloadableBlockInfo( { description, activeInstalls, humanizedUpdated | |||
| <Icon icon="chart-line"></Icon>{ sprintf( _n( '%d active installation', '%d active installations', activeInstalls ), activeInstalls ) } | |||
| </div> | |||
| <div className="block-directory-downloadable-block-info__column"> | |||
| <Icon icon="update"></Icon><span aria-label={ sprintf( __( 'Updated %s' ), humanizedUpdated ) }>{ humanizedUpdated }</span> | |||
| <span aria-label={ sprintf( __( 'Updated %s' ), humanizedUpdated ) }> | |||
There was a problem hiding this comment.
Without an icon I don't think this span with aria-label makes too much sense anymore. A11y feedback would be good here.
There was a problem hiding this comment.
Definitely agreed, otherwise the aria-label will override the actual text. And since the actual text is even more descriptive now, that would mean a loss of information. So yes, the span should go away including the aria-label. The strong with info text is totally sufficient here.
There was a problem hiding this comment.
Yeah totally. Thanks for the heads up!
There was a problem hiding this comment.
In a parallel conversation, I was made aware of these prototypes:
https://www.figma.com/file/QKhoOKXkBN2mHacqvrtdNuI6/Gutenberg-Block-Library-Installation?node-id=370%3A0
It appears like the current implementation was missing the "Updated" string but maintained the copy. The design could accommodate it by having a smaller font size. With that in mind. I have updated this PR to be:
Should this be tagged with "Needs Design Feedback" in case there have been other conversations had here?
…extra elements, make the font size smaller.
|
LGTM, but due to the visuals, don't feel I have the authority to approve this. |
Yep, totally with you on this. Let me try a bit of tag cloud to pull in some more opinions :) |
|
Does the label wrap to a new line in longer translations? Want to make sure it doesn't cut off. |
It will not be cut off. However since we use |
gziolo
added
[Feature] Block Directory
Description
The 'update' dashicon does not do a very good job communicating the "Last Update" date. This PR changes that icon to a copy. This brings in more alignment with the Plugin Directory and its UI as well.
How has this been tested?
Tested manually.
Screenshots
Before:
After:
Types of changes
Copy Update.
Checklist: