Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update: Refactor paragraph block to be a functional component #18125

Conversation

@jorgefilipecosta
Copy link
Member

jorgefilipecosta commented Oct 27, 2019

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.

@jorgefilipecosta jorgefilipecosta force-pushed the update/refactor-paragraph-block-to-be-a-functional-component branch from a229709 to f453813 Oct 28, 2019
Copy link
Contributor

youknowriad left a 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(

This comment has been minimized.

Copy link
@youknowriad

youknowriad Nov 12, 2019

Contributor

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(

This comment has been minimized.

Copy link
@youknowriad

youknowriad Nov 12, 2019

Contributor

Same as above

);
}

function ParagraphToolbar( { direction, setDirection } ) {

This comment has been minimized.

Copy link
@youknowriad

youknowriad Nov 12, 2019

Contributor

Should this be renamed ParagraphRTLToolbar instead?

@jorgefilipecosta jorgefilipecosta force-pushed the update/refactor-paragraph-block-to-be-a-functional-component branch from f453813 to 5fa6e6d Nov 12, 2019
Copy link
Contributor

youknowriad left a comment

Looks great, thanks 👍

@jorgefilipecosta jorgefilipecosta merged commit 7d64e01 into master Nov 12, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@youknowriad youknowriad added this to the Gutenberg 7.0 milestone Nov 25, 2019
@aduth aduth deleted the update/refactor-paragraph-block-to-be-a-functional-component branch Dec 6, 2019
@aduth

This comment has been minimized.

Copy link
Member

aduth commented Dec 6, 2019

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.