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

Show UI on text selection #861

Merged
merged 1 commit into from
May 23, 2017
Merged

Show UI on text selection #861

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
8 changes: 8 additions & 0 deletions blocks/editable/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,18 @@ export default class Editable extends wp.element.Component {
}

const content = this.getContent();
const collapsed = this.editor.selection.isCollapsed();

this.setState( {
empty: ! content || ! content.length,
} );

if ( this.props.focus.collapsed !== collapsed ) {
Copy link
Member

Choose a reason for hiding this comment

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

Could we expect focus to ever be undefined at this point?

Copy link
Member Author

Choose a reason for hiding this comment

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

If somehow the editor is active and the block is not selected, then yes. Maybe getBlockFocus should return an empty object in that case? Or not? Cc @youknowriad.

Copy link
Contributor

Choose a reason for hiding this comment

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

It think this is possible when the editor become active (before the rerender), it's worth checking IMO. good catch @aduth

this.props.onFocus( {
...this.props.focus,
collapsed,
} );
}
}

onChange() {
Expand Down
7 changes: 4 additions & 3 deletions editor/modes/visual-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,9 @@ class VisualEditorBlock extends wp.element.Component {
}

const { isHovered, isSelected, isTyping, focus } = this.props;
const showUI = isSelected && ( ! isTyping || ! focus.collapsed );
const className = classnames( 'editor-visual-editor__block', {
'is-selected': isSelected && ! isTyping,
'is-selected': showUI,
'is-hovered': isHovered,
} );

Expand Down Expand Up @@ -196,8 +197,8 @@ class VisualEditorBlock extends wp.element.Component {
tabIndex="0"
{ ...wrapperProps }
>
{ ( ( isSelected && ! isTyping ) || isHovered ) && <BlockMover uid={ block.uid } /> }
{ isSelected && ! isTyping &&
{ ( showUI || isHovered ) && <BlockMover uid={ block.uid } /> }
{ showUI &&
<div className="editor-visual-editor__block-controls">
<BlockSwitcher uid={ block.uid } />
{ !! settings.controls && (
Expand Down