Update: Refactor paragraph block to be a functional component#18125
Conversation
a229709 to
f453813
Compare
youknowriad
left a comment
There was a problem hiding this comment.
I started by commenting on one useMemo/useCallback but I noticed that it's a trend across all props and callbacks. I do wonder if we should use these two hooks in our refactorings from component classes to hooks. I understand that sometimes it's necessary to avoid rerenders but I'd probably prefer to start without trying to optimize everything.
Other than that, the changes are good.
| const isRTL = useSelect( ( select ) => { | ||
| return select( 'core/block-editor' ).getSettings().isRTL; | ||
| } ); | ||
| const toolbarControls = useMemo( |
There was a problem hiding this comment.
In the previous version, we were not using a memoized prop, do you think it's really necessary here? I always wonder if we're over-optimizing sometimes, My personal opinion would be to start with a non-optimized version unless we measure change in performance.
| setTextColor, | ||
| textColor, | ||
| } ) { | ||
| const colorSettings = useMemo( |
| ); | ||
| } | ||
|
|
||
| function ParagraphToolbar( { direction, setDirection } ) { |
There was a problem hiding this comment.
Should this be renamed ParagraphRTLToolbar instead?
f453813 to
5fa6e6d
Compare
youknowriad
left a comment
There was a problem hiding this comment.
Looks great, thanks 👍
|
In investigating typing performance regressions between Gutenberg 6.9 and Gutenberg 7.0, something as significant a refactor to the paragraph block like this seems like it could be a prime candidate as a contributor. It would have been good to do some performance measurements of this refactor (though generally I'd have hoped only for improvements). |
Description
This PR updates the paragraph block to be a functional component.
We are introducing new hook based API's (e.g: the colors hook) and these API's can only be used if the component is functional.
How has this been tested?
I verified the paragraph still works as before.