Font Library: refactor FontsGrid component #58503
Closed
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
t-hamano
added
[Type] Code Quality
t-hamano
commented
Jan 31, 2024
| */ | ||
| import FontCard from './font-card'; | ||
|
|
||
| const PAGE_SIZE = 32; |
There was a problem hiding this comment.
The pageSize prop that the FontsGrid component has is never used, so I defined it as a constant.
t-hamano
commented
Jan 31, 2024
Comment on lines
-43
to
+58
| { items.map( ( child, i ) => { | ||
| if ( i === itemsLimit - 1 ) { | ||
| return ( | ||
| <div key={ child.key } ref={ setLastItem }> | ||
| { child } | ||
| </div> | ||
| ); | ||
| } | ||
| return <div key={ child.key }>{ child }</div>; | ||
| } ) } | ||
| { fonts.slice( 0, itemsLimit ).map( ( font, i ) => ( | ||
| <FontCard | ||
| key={ i } | ||
| font={ font } | ||
| ref={ | ||
| i === itemsLimit - 1 ? setLastItem : undefined | ||
| } | ||
| onChange={ onChange } | ||
| /> | ||
| ) ) } |
There was a problem hiding this comment.
This refactoring allows us to remove unnecessary div elements.
|
Size Change: -48 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Hi @t-hamano, thanks for submitting this PR :)
I've tested it, and it's working fine, but I'm not sure if it's still relevant given the on-going implementation of the pagination as requested in this issue.
@pbking, could you take a look at this and confirm, please?
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
aaronjorbin
added
the
props-bot
github-actions
bot
removed
the
props-bot
|
@matiasbenedetto I think #58794 will definitely have a higher priority. Therefore, I'm fine with #58794 being advanced before this PR. Once #58794 is merged, I would like to resolve conflicts 👍 |
|
Indeed, I believe this won't be relevant if we land the pagination branch; that does away with the FontsGrid component. There might be other improvements in there that are relevant and useful. |
3 tasks
|
This PR now has too many conflicts with trunk. Therefore, I would like to close this PR and submit a new PR if necessary. |
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.
What?
This PR refactors the FontsGrid component to improve code quality.
Why?
The current
FontsGridcomponent receiveschildren. In order to pass thechildrento theFontsGridcomponent, we render theFontCardcomponent using themap()function. Inside theFontsGridcomponent, we loop through its children again, causing a double loop.We should simply pass the fonts as props to the
FontsGridcomponent, and theFontsGridcomponent should render based on those props.How?
At the same time as refactoring, I integrated
LibraryFontCardandFontCardcomponents. This is because the component names are similar and difficult to identify. Also, theFontCardcomponent is completely dependent on theLibraryFontCardcomponent, so there shouldn't be any need to split it.Testing Instructions
The layout and behavior of the Font Library should remain unchanged.