-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Navigation: Reduce duplicate code #45779
Conversation
Open in CodeSandbox Web Editor | VS Code | VS Code Insiders |
Size Change: +53 B (0%) Total Size: 1.3 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Everything seems to be working the same as before 👍
) } | ||
</PanelBody> | ||
</InspectorControls> | ||
<MenuInspectorControls currentMenuId={ null } /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is the currentMenuId
prop needed if the value is null
?
666e5ea
to
91e424a
Compare
91e424a
to
74f8eaa
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Worked great in testing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice job! LGTM - left some nits which I think would be nice to address 🤷
<p>{ __( 'Select or create a menu' ) }</p> | ||
) : ( | ||
<OffCanvasEditor | ||
blocks={ innerBlocks } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice if the props were encapsulated inside the component in order that it will be easier to:
- reason about
- refactor later into a separate file
currentMenuId={ currentMenuId } | ||
/> | ||
<ManageMenusButton | ||
disabled={ isManageMenusButtonDisabled } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice if the props were encapsulated inside the component in order that it will be easier to:
- reason about
- refactor later into a separate file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what do you mean by encapsulated inside the component?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I mean you're relying on variables defined outside the component scope. If this component were inside it's own file you couldn't do that. Passing that data via props would be the alternative and makes the component easier to...
reason about
refactor later into a separate file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah yeah, that would be a good next step :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes agreed. I suppose that's why I'm suggesting doing it now (and every time we refactor to a component) because it makes it easier to take the next step.
isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' ) | ||
} | ||
> | ||
{ isOffCanvasNavigationEditorEnabled ? ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice if the props were encapsulated inside the component in order that it will be easier to:
- reason about
- refactor later into a separate file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
@scruffian Sorry to flag this after the merge, but the way the component is defined within another component ( There's no documentation on it, but this twitter convo with some of the React devs has some detail - https://twitter.com/Lilsmooty/status/1575170093566525440. It looks like there's also the |
Thanks @talldan. Yes so each time the component renders the inner component is redefined and thus causes state loss and other consequences. I guess this is what was causing my spidey senses to tingle here but I should have followed it through. @scruffian Let's refactor this out to a separate component and pass the props down. |
Done here: #45850 |
What?
This extracts three blocks of almost identical code to a functional component.
Why?
This will help us avoid making changes in one place but not another by mistake.
How?
Simple refactor
Testing Instructions
Enable the off canvas editing experiment and confirm that you see the list view in the sidebar in the same circumstances as before.