-
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
Add a control to reset pattern overrides #57845
Conversation
Size Change: +855 B (0%) Total Size: 1.7 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.
This works well, nice work!
I don't have strong feelings about the UI, would appreciate a thumbs up from @SaxonF on that side of things.
{ overrides ? ( | ||
<BlockControls> | ||
<ToolbarGroup> | ||
<ToolbarButton onClick={ resetOverrides }> | ||
{ __( 'Reset overrides' ) } | ||
</ToolbarButton> | ||
</ToolbarGroup> | ||
</BlockControls> | ||
) : 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.
Actually, one thing is that selecting the button causes a focus loss due to the way it's no longer rendered, so it should probably have a aria-disabled state instead (one that is focusable).
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.
Good catch! Or should we move the focus to the pattern block instead? Not sure which is better atm.
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.
Most of the accessibility feedback I see is that focus shouldn't be moved unexpectedly if there's an alternative, so that's why I feel that a disabled state would be the way to go. There's also a lot of precedence for this in the block editor, like the undo/redo buttons that retain focus when they become disabled.
It does introduce the caveat around patterns without overrides, should they have a visible button or should it be disabled? My feeling is that there probably shouldn't be a button at all since it would never become enabled.
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 problem is that patterns without overrides have the same state as after resetting the overrides 🤔. Unless we keep the previous state somehow, but I think that's more confusing than always showing the disabled button. Am I misunderstanding something here?
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 problem is that patterns without overrides have the same state as after resetting the overrides
We do look through the inner blocks to check for any that can have overrides here:
gutenberg/packages/block-library/src/block/edit.js
Lines 141 to 148 in f6d29bd
function setBlockEditMode( setEditMode, blocks, mode ) { | |
blocks.forEach( ( block ) => { | |
const editMode = | |
mode || ( isPartiallySynced( block ) ? 'contentOnly' : 'disabled' ); | |
setEditMode( block.clientId, editMode ); | |
setBlockEditMode( setEditMode, block.innerBlocks, mode ); | |
} ); | |
} |
So given we do that we could also derive whether the pattern has any override attributes within it at the same time and use that to control visibility of the button. I think you end up with three states:
- Pattern has inner blocks that can be overriden but has no override state - show the button but disabled
- Pattern has inner blocks that can be overriden and has override state - show the button enabled
- None of the pattern's inner blocks can be overriden - don't show the button
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.
Oh I see what you mean now! I was only considering the (1) and the (2) states.
<BlockControls> | ||
<ToolbarGroup> | ||
<ToolbarButton onClick={ resetOverrides }> | ||
{ __( 'Reset overrides' ) } |
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.
A thought. I wonder if 'Reset to original' might be a slight improvement on the copy. It fits nicely with the 'Edit original' button next to it, and is slightly less technical.
Yep fine for now. We can move into ellipsis menu later if needed |
…lbar button so that it maintains focus
<ToolbarGroup> | ||
<ToolbarButton | ||
onClick={ resetOverrides } | ||
aria-disabled={ overrides ? 'false' : 'true' } |
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 remember that Buttons
are a bit unusual in that you have to pass disabled
and __experimentalIsFocusable
in order for it to retain focus.
Pushed a commit that does that.
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.
Works great for me. Locally I rebased against trunk to test it on the heading and button blocks, and it was perfect 😄
What?
Part of #53705. Close #57751.
Why?
See #57751.
How?
Add a block control to reset the pattern overrides.
Testing Instructions
Follow the instructions in #53705 (comment) to create a pattern with overrides and add it to a post.
Screenshots or screencast
For patterns that can be overridden but no overrides.

For patterns that can be overridden and with overrides.

For patterns that cannot be overridden.
