-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Add block appender to Nav block offcanvas experiment #45905
Conversation
Open in CodeSandbox Web Editor | VS Code | VS Code Insiders |
Size Change: +268 B (0%) Total Size: 1.3 MB
ℹ️ View Unchanged
|
@@ -67,6 +67,7 @@ function ButtonBlockAppender( | |||
<VisuallyHidden as="span">{ label }</VisuallyHidden> | |||
) } | |||
<Icon icon={ plus } /> | |||
{ children } |
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.
This may need to be a separate PR. Basically it allows us to do this
<ButtonBlockAppender
className="offcanvas-editor__list-appender__toggle"
rootClientId={ rootClientId }
>
{ __( 'Add Menu Item' ) }
</ButtonBlockAppender>
Otherwise we're going to have to reimplement all of <ButtonBlockAppender>
as a custom component. Possible but will require additional time.
( event, clientId ) => { | ||
updateBlockSelection( event, clientId ); | ||
setSelectedTreeId( clientId ); | ||
( event, _clientId ) => { |
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.
These changes to clientID
were to appease the linter which was telling me it was shadowing an existing var.
/> | ||
</ListViewContext.Provider> | ||
</TreeGrid> | ||
<div className="offcanvas-editor"> |
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.
Wrapped in custom class
<OffCanvasEditorAppender | ||
rootClientId={ clientId } | ||
/> |
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.
The internal implementation of BlockListAppender
doesn't pass the rootClientId
to the CustomComponent provided by renderAppender
. So we have to manually do it here.
<tr> | ||
<BlockListAppender |
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 noticed from an a11y POV the arrow key navigation will not focus this element. I think that's probably legit as it's not a "block" per se but FYI.
className="offcanvas-editor__list-appender__toggle" | ||
rootClientId={ rootClientId } | ||
> | ||
{ __( 'Add Menu Item' ) } |
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.
Annoyingly the internal implementation of ButtonBlockAppender
doesn't allow us to customise the label. So we have one text based label here and another provided by ButtonBlockAppender
.
See alternative over at #45947 |
Closing in favour of #45947 |
What?
Adds a basic appender to the Offcanvas Nav block experiment.
This does not fully implement the appender. Further work is required to customise the appender to show the UI in the sidebar rather than on the canvas.
Consider also comparing this with #45947.
Part of #45445.
Co-authored-by: Dave Smith getdavemail@gmail.com
Why?
Addresses the first part of #45445.
How?
Adds a custom appender to the list view sidebar.
Testing Instructions
Screenshots or screencast
Screen.Capture.on.2022-11-21.at.14-23-54.mp4