Skip to content

VisualBlock: add some inline comments. #992

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

Merged
mtias merged 1 commit into from
Jun 2, 2017
Merged

VisualBlock: add some inline comments. #992

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
21 changes: 13 additions & 8 deletions editor/modes/visual-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ class VisualEditorBlock extends wp.element.Component {
onDeselect,
} = this.props;

// Remove block on backspace
// Remove block on backspace.
if ( BACKSPACE === keyCode ) {
if ( target === this.node ) {
onRemove( [ uid ] );
Expand All @@ -127,7 +127,7 @@ class VisualEditorBlock extends wp.element.Component {
}
}

// Deselect on escape
// Deselect on escape.
if ( ESCAPE === keyCode ) {
onDeselect();
}
Expand All @@ -136,7 +136,7 @@ class VisualEditorBlock extends wp.element.Component {
mergeBlocks( forward = false ) {
const { block, previousBlock, nextBlock, onMerge } = this.props;

// Do nothing when it's the first block
// Do nothing when it's the first block.
if (
( ! forward && ! previousBlock ) ||
( forward && ! nextBlock )
Expand All @@ -153,7 +153,6 @@ class VisualEditorBlock extends wp.element.Component {

selectAndStopPropagation( event ) {
this.props.onSelect();

// Visual editor infers click as intent to clear the selected block, so
// prevent bubbling when occurring on block where selection is intended
event.stopPropagation();
Expand All @@ -168,7 +167,7 @@ class VisualEditorBlock extends wp.element.Component {
this.previousOffset = null;
}

// Focus node when focus state is programmatically transferred
// Focus node when focus state is programmatically transferred.
if ( this.props.focus && ! prevProps.focus ) {
this.node.focus();
}
Expand All @@ -183,16 +182,23 @@ class VisualEditorBlock extends wp.element.Component {
render() {
const { block, selectedBlocks } = this.props;
const blockType = wp.blocks.getBlockType( block.name );

// The block as rendered in the editor is composed of general block UI
// (mover, toolbar, wrapper) and the display of the block content, which
// is referred to as <BlockEdit />.
let BlockEdit;
// `edit` and `save` are functions or components describing the markup
// with which a block is displayed. If `blockType` is valid, assign
// them preferencially as the render value for the block.
if ( blockType ) {
BlockEdit = blockType.edit || blockType.save;
}

// Should `BlockEdit` return as null, we have nothing to display for the block.
if ( ! BlockEdit ) {
return null;
}

// Generate the wrapper class names handling the different states of the block.
const { isHovered, isSelected, isMultiSelected, isFirstSelected, isTyping, focus } = this.props;
const showUI = isSelected && ( ! isTyping || ! focus.collapsed );
const className = classnames( 'editor-visual-editor__block', {
Expand All @@ -203,14 +209,13 @@ class VisualEditorBlock extends wp.element.Component {

const { onSelect, onMouseLeave, onFocus, onInsertAfter } = this.props;

// Determine whether the block has props to apply to the wrapper
// Determine whether the block has props to apply to the wrapper.
let wrapperProps;
if ( blockType.getEditWrapperProps ) {
wrapperProps = blockType.getEditWrapperProps( block.attributes );
}

// Disable reason: Each block can be selected by clicking on it

/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
return (
<div
Expand Down