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

Blocks: Fix the black border appearing too often in blocks #5140

Closed
wants to merge 2 commits into from
Closed

Blocks: Fix the black border appearing too often in blocks #5140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f38c0d1
Blocks: Fix the black border appearing too often in blocks
youknowriad Feb 19, 2018
d040066
Using a mutation observer to update the flag for performance reasons
youknowriad Feb 26, 2018
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
11 changes: 0 additions & 11 deletions edit-post/components/modes/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,6 @@
}
}

// This is a focus style shown for blocks that need an indicator even when in an isEditing state
// like for example an image block that receives arrowkey focus.
.edit-post-visual-editor .editor-block-list__block:not( .is-selected ) .editor-block-list__block-edit {
box-shadow: 0 0 0 0 $white, 0 0 0 0 $dark-gray-900;
transition: .1s box-shadow .05s;

&:focus {
box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-900;
}
}

.edit-post-visual-editor .editor-post-title {
margin-left: auto;
margin-right: auto;
Expand Down
32 changes: 22 additions & 10 deletions editor/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { connect } from 'react-redux';
import classnames from 'classnames';
import { get, reduce, size, castArray, noop, first, last } from 'lodash';
import { get, reduce, size, castArray, noop, first, last, some } from 'lodash';
import tinymce from 'tinymce';

/**
Expand All @@ -16,6 +16,7 @@ import {
getScrollContainer,
placeCaretAtHorizontalEdge,
placeCaretAtVerticalEdge,
isEditableNode,
} from '@wordpress/utils';
import {
BlockEdit,
Expand Down Expand Up @@ -100,6 +101,7 @@ export class BlockListBlock extends Component {
this.onClick = this.onClick.bind( this );
this.selectOnOpen = this.selectOnOpen.bind( this );
this.onSelectionChange = this.onSelectionChange.bind( this );
this.updateHasEditableContent = this.updateHasEditableContent.bind( this );

this.previousOffset = null;
this.hadTouchStart = false;
Expand All @@ -108,6 +110,7 @@ export class BlockListBlock extends Component {
error: null,
isHovered: false,
isSelectionCollapsed: true,
hasEditableContent: false,
};
}

Expand Down Expand Up @@ -137,6 +140,11 @@ export class BlockListBlock extends Component {
if ( this.props.isSelected ) {
this.focusTabbable();
}

this.contentObserver = new window.MutationObserver( this.updateHasEditableContent );
this.contentObserver.observe( this.node, { childList: true, subtree: true } );

this.updateHasEditableContent();
}

componentWillReceiveProps( newProps ) {
Expand Down Expand Up @@ -182,12 +190,21 @@ export class BlockListBlock extends Component {
componentWillUnmount() {
this.removeStopTypingListener();
document.removeEventListener( 'selectionchange', this.onSelectionChange );
this.contentObserver.disconnect();
}

removeStopTypingListener() {
document.removeEventListener( 'mousemove', this.stopTypingOnMouseMove );
}

updateHasEditableContent() {
// Update the hasEditableContent property
const hasEditableContent = some( focus.tabbable.find( this.node ), isEditableNode );
Copy link
Member

@aduth aduth Feb 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

I'm quite concerned that we query select and filter on every change to the block. If it's a matter of avoiding effects that only appear on focusing a specific element (.editor-block-list__block-edit), could we do it on that element's focus event?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It could work, but the behavior of the block could change if its content change as well Imagine an image transformed to a text somehow or I don't know, blocks can do what they want.

Copy link
Member

Choose a reason for hiding this comment

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

In the absolute worst case I'd still prefer a MutationObserver monitoring childList and attributes. I expect at least this wouldn't fire the callback on every keypress.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated using a MutationObserver. Let me know what you think. In my testing, it doesn't trigger on each keypress.

if ( this.state.hasEditableContent !== hasEditableContent ) {
this.setState( { hasEditableContent } );
}
}

setBlockListRef( node ) {
// Disable reason: The root return element uses a component to manage
// event nesting, but the parent block list layout needs the raw DOM
Expand Down Expand Up @@ -219,17 +236,12 @@ export class BlockListBlock extends Component {
}

// Find all tabbables within node.
const tabbables = focus.tabbable.find( this.node )
.filter( ( node ) => node !== this.node );
const tabbables = focus.tabbable.find( this.node ).filter( isEditableNode );

// If reversed (e.g. merge via backspace), use the last in the set of
// tabbables.
const isReverse = -1 === initialPosition;
const target = ( isReverse ? last : first )( tabbables );

if ( ! target ) {
return;
}
const target = ( isReverse ? last : first )( tabbables ) || this.node;

target.focus();

Expand Down Expand Up @@ -522,6 +534,7 @@ export class BlockListBlock extends Component {
isFirstMultiSelected,
isLastInSelection,
} = this.props;
const { error, hasEditableContent } = this.state;
const isHovered = this.state.isHovered && ! this.props.isMultiSelecting;
const { name: blockName, isValid } = block;
const blockType = getBlockType( blockName );
Expand All @@ -540,8 +553,6 @@ export class BlockListBlock extends Component {
const shouldShowSettingsMenu = shouldShowMovers;
const shouldShowContextualToolbar = shouldAppearSelected && isValid && showContextualToolbar;
const shouldShowMobileToolbar = shouldAppearSelected;
const { error } = this.state;

// Insertion point can only be made visible when the side inserter is
// not present, and either the block is at the extent of a selection or
// is the last block in the top-level list rendering.
Expand All @@ -558,6 +569,7 @@ export class BlockListBlock extends Component {
'is-multi-selected': isMultiSelected,
'is-hovered': isHovered,
'is-reusable': isReusableBlock( blockType ),
'has-editable-content': hasEditableContent,
} );

const { onReplace } = this.props;
Expand Down
6 changes: 6 additions & 0 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,12 @@
}
}

// This is a focus style shown for blocks that need an indicator even when in an isEditing state
// like for example an image block that receives arrowkey focus.
.editor-block-list__block:not(.has-editable-content):not( .is-selected ) > .editor-block-list__block-edit:focus {
box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-900;
}

.editor-block-list .editor-inserter {
margin: $item-spacing;

Expand Down
10 changes: 4 additions & 6 deletions editor/components/writing-flow/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
isVerticalEdge,
placeCaretAtHorizontalEdge,
placeCaretAtVerticalEdge,
isEditableNode,
} from '@wordpress/utils';

/**
Expand Down Expand Up @@ -76,12 +77,9 @@ class WritingFlow extends Component {
getVisibleTabbables() {
return focus.tabbable
.find( this.container )
.filter( ( node ) => (
node.nodeName === 'INPUT' ||
node.nodeName === 'TEXTAREA' ||
node.contentEditable === 'true' ||
node.classList.contains( 'editor-block-list__block-edit' )
) );
.filter( ( node ) =>
isEditableNode( node ) || node.classList.contains( 'editor-block-list__block-edit' )
);
}

getClosestTabbable( target, isReverse ) {
Expand Down
15 changes: 15 additions & 0 deletions utils/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,3 +366,18 @@ export function getScrollContainer( node ) {
// Continue traversing
return getScrollContainer( node.parentNode );
}

/**
* Given a DOM node, returns whether the node is editable or not.
*
* @param {Element} node Node to check
*
* @return {boolean} Whether the node is editable or not
*/
export function isEditableNode( node ) {
return (
node.nodeName === 'INPUT' ||
node.nodeName === 'TEXTAREA' ||
node.contentEditable === 'true'
);
}