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.

Sign up for GitHub

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

Jump to bottom

Add basic edit button UI to Nav block offcanvas editor #45815

Merged
merged 1 commit into from
Nov 16, 2022
Merged

Add basic edit button UI to Nav block offcanvas editor #45815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions packages/block-editor/src/components/off-canvas-editor/block-edit-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/**
* WordPress dependencies
*/
import { edit } from '@wordpress/icons';
import { Button } from '@wordpress/components';
import { useDispatch } from '@wordpress/data';

/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';

const BlockEditButton = ( { label, clientId } ) => {
const { selectBlock } = useDispatch( blockEditorStore );

const onClick = () => {
selectBlock( clientId );
};

return <Button icon={ edit } label={ label } onClick={ onClick } />;
};

export default BlockEditButton;
72 changes: 52 additions & 20 deletions packages/block-editor/src/components/off-canvas-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
} from '../block-mover/button';
import ListViewBlockContents from './block-contents';
import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
import BlockEditButton from './block-edit-button';
import { useListViewContext } from './context';
import { getBlockPositionDescription } from './utils';
import { store as blockEditorStore } from '../../store';
Expand Down Expand Up @@ -132,6 +133,14 @@ function ListViewBlock( {
)
: __( 'Options' );

const editAriaLabel = blockInformation
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not put this in the component itself?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like other labels are here as well.

? sprintf(
// translators: %s: The title of the block.
__( 'Edit %s block' ),
blockInformation.title
)
: __( 'Edit' );

const { isTreeGridMounted, expand, collapse } = useListViewContext();

const hasSiblings = siblingBlockCount > 0;
Expand All @@ -146,6 +155,11 @@ function ListViewBlock( {
{ 'is-visible': isHovered || isFirstSelectedBlock }
);

const listViewBlockEditClassName = classnames(
'block-editor-list-view-block__menu-cell',
{ 'is-visible': isHovered || isFirstSelectedBlock }
);

// If ListView has experimental features related to the Persistent List View,
// only focus the selected list item on mount; otherwise the list would always
// try to steal the focus from the editor canvas.
Expand Down Expand Up @@ -307,26 +321,44 @@ function ListViewBlock( {
) }

{ showBlockActions && (
<TreeGridCell
className={ listViewBlockSettingsClassName }
aria-selected={ !! isSelected || forceSelectionContentLock }
>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockSettingsDropdown
clientIds={ dropdownClientIds }
icon={ moreVertical }
label={ settingsAriaLabel }
toggleProps={ {
ref,
className: 'block-editor-list-view-block__menu',
tabIndex,
onFocus,
} }
disableOpenOnArrowDown
__experimentalSelectBlock={ updateSelection }
/>
) }
</TreeGridCell>
<>
<TreeGridCell
className={ listViewBlockEditClassName }
aria-selected={
!! isSelected || forceSelectionContentLock
}
>
{ () => (
<BlockEditButton
label={ editAriaLabel }
clientId={ clientId }
/>
) }
</TreeGridCell>
<TreeGridCell
className={ listViewBlockSettingsClassName }
aria-selected={
!! isSelected || forceSelectionContentLock
}
>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockSettingsDropdown
clientIds={ dropdownClientIds }
icon={ moreVertical }
label={ settingsAriaLabel }
toggleProps={ {
ref,
className:
'block-editor-list-view-block__menu',
tabIndex,
onFocus,
} }
disableOpenOnArrowDown
__experimentalSelectBlock={ updateSelection }
/>
) }
</TreeGridCell>
</>
) }
</ListViewLeaf>
);
Expand Down