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

Try hiding block toolbar under ellipsis #2248

Closed
wants to merge 1 commit into from
Closed

Try hiding block toolbar under ellipsis #2248

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
55 changes: 38 additions & 17 deletions editor/modes/visual-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ import {
mergeBlocks,
insertBlocks,
removeBlocks,
clearSelectedBlock,
startTyping,
stopTyping,
replaceBlocks,
Expand Down Expand Up @@ -74,6 +73,7 @@ class VisualEditorBlock extends Component {
this.onKeyUp = this.onKeyUp.bind( this );
this.handleArrowKey = this.handleArrowKey.bind( this );
this.toggleMobileControls = this.toggleMobileControls.bind( this );
this.toggleToolbar = this.toggleToolbar.bind( this );
this.previousOffset = null;
}

Expand All @@ -95,6 +95,10 @@ class VisualEditorBlock extends Component {
) {
this.previousOffset = this.node.getBoundingClientRect().top;
}

if ( ! newProps.isSelected || newProps.isTyping ) {
this.setState( { showToolbar: false } );
}
}

componentDidUpdate( prevProps ) {
Expand Down Expand Up @@ -185,7 +189,6 @@ class VisualEditorBlock extends Component {
previousBlock,
onRemove,
onFocus,
onDeselect,
} = this.props;

// Remove block on backspace.
Expand All @@ -203,7 +206,7 @@ class VisualEditorBlock extends Component {

// Deselect on escape.
if ( ESCAPE === keyCode ) {
onDeselect();
this.setState( { showToolbar: false } );
}
}

Expand Down Expand Up @@ -305,6 +308,16 @@ class VisualEditorBlock extends Component {
} );
}

toggleToolbar() {
if ( ! this.props.isSelected ) {
this.props.onSelect();
}

this.setState( {
showToolbar: ! this.state.showToolbar,
} );
}

render() {
const { block, multiSelectedBlockUids } = this.props;
const { name: blockName, isValid } = block;
Expand All @@ -329,14 +342,17 @@ class VisualEditorBlock extends Component {

// Generate the wrapper class names handling the different states of the block.
const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus } = this.props;
const showUI = isSelected && ( ! this.props.isTyping || focus.collapsed === false );
const showUI = isSelected && ( this.state.showToolbar || focus.collapsed === false );
const duringInput = this.props.isTyping && ( ! focus || focus.collapsed !== false );
const { showMobileControls } = this.state;
const wrapperClassname = classnames( 'editor-visual-editor__block', {
'is-invalid': ! isValid,
'is-selected': showUI,
'is-selected': isSelected,
'is-multi-selected': isMultiSelected,
'is-hovered': isHovered,
'is-showing-mobile-controls': showMobileControls,
'show-ui': showUI,
'during-input': duringInput,
} );

const { onMouseLeave, onFocus, onInsertBlocksAfter, onReplace } = this.props;
Expand Down Expand Up @@ -368,9 +384,9 @@ class VisualEditorBlock extends Component {
aria-label={ blockLabel }
{ ...wrapperProps }
>
{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
{ ( showUI || isHovered ) && <BlockRightMenu uid={ block.uid } /> }
{ showUI && isValid &&
{ ! duringInput && ( isHovered || isSelected ) && <BlockMover uids={ [ block.uid ] } /> }
{ ( showUI ) && <BlockRightMenu uid={ block.uid } /> }
{ isValid && ! duringInput && ( isHovered || isSelected ) &&
<CSSTransitionGroup
transitionName={ { appear: 'is-appearing', appearActive: 'is-appearing-active' } }
transitionAppear={ true }
Expand All @@ -380,19 +396,27 @@ class VisualEditorBlock extends Component {
component={ FirstChild }
>
<div className="editor-visual-editor__block-controls">
<BlockSwitcher uid={ block.uid } />
<Slot name="Formatting.Toolbar" />
<Toolbar className="editor-visual-editor__mobile-tools">
{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
{ ( showUI || isHovered ) && <BlockRightMenu uid={ block.uid } /> }
{ ! showUI && (
<Toolbar className="editor-visual-editor__toolbar-toggle">
<IconButton
icon="ellipsis"
onClick={ this.toggleToolbar }
/>
</Toolbar>
) }
{ showUI && <BlockSwitcher uid={ block.uid } /> }
{ showUI && <Slot name="Formatting.Toolbar" /> }
{ showUI && <Toolbar className="editor-visual-editor__mobile-tools">
<BlockMover uids={ [ block.uid ] } />
<BlockRightMenu uid={ block.uid } />
<IconButton
className="editor-visual-editor__mobile-toggle"
onClick={ this.toggleMobileControls }
aria-expanded={ showMobileControls }
label={ __( 'Toggle extra controls' ) }
icon="ellipsis"
/>
</Toolbar>
</Toolbar> }
</div>
</CSSTransitionGroup>
}
Expand Down Expand Up @@ -461,9 +485,6 @@ export default connect(
uid: ownProps.uid,
} );
},
onDeselect() {
dispatch( clearSelectedBlock() );
},

onStartTyping() {
dispatch( startTyping() );
Expand Down
31 changes: 23 additions & 8 deletions editor/modes/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
margin-bottom: 5px;
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
position: relative;

padding: $block-padding;
transition: 0.2s border;

@include break-small {
// The block mover needs to stay inside the block to allow clicks when hovering the block
Expand All @@ -42,11 +42,10 @@
z-index: z-index( '.editor-visual-editor__block:before' );
content: '';
position: absolute;
outline: 1px solid transparent;
transition: 0.2s outline;
border: 2px solid transparent;
transition: 0.2s border;
top: 0;
bottom: 0;

left: 0;
right: 0;

Expand All @@ -73,13 +72,19 @@
background-color: rgba( $white, 0.6 );
}

&.is-hovered:before {
outline: 1px solid $light-gray-500;
&.is-hovered:before,
&.is-selected:before {
border-left: 2px solid $light-gray-500;
transition: 0.2s outline;
}

&.is-selected:before {
outline: 2px solid $light-gray-500;
&.show-ui:before {
border: 2px solid $light-gray-500;
transition: 0.2s outline;
}

&.during-input:before {
border: 2px solid transparent;
transition: 0.2s outline;
}

Expand Down Expand Up @@ -287,6 +292,16 @@
}
}

ul.editor-visual-editor__toolbar-toggle {
height: 20px;
margin-top: 18px;
vertical-align: bottom;

button {
padding: 0 5px;
}
}

.editor-visual-editor__block-controls {
display: flex;
position: sticky;
Expand Down