type: 'TRASH_POST_SUCCESS',
} );
} );
},
TRASH_POST_SUCCESS( action ) {
const { postId, postType } = action;
window.location.href = getWPAdminURL( 'edit.php', {
trashed: 1,
post_type: postType,
ids: postId,
} );
},
MERGE_BLOCKS( action, store ) {
const { dispatch } = store;
const [ blockA, blockB ] = action.blocks;
const blockType = getBlockType( blockA.name );
// Only focus the previous block if it's not mergeable
if ( ! blockType.merge ) {
dispatch( focusBlock( blockA.uid ) );
return;
}
// We can only merge blocks with similar types
// thus, we transform the block to merge first
const blocksWithTheSameType = blockA.name === blockB.name
? [ blockB ]
: switchToBlockType( blockB, blockA.name );
// If the block types can not match, do nothing
if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
render() {
const { block, multiSelectedBlockUids } = this.props;
const blockType = getBlockType( block.name );
// translators: %s: Type of block (i.e. Text, Image etc)
const blockLabel = sprintf( __( 'Block: %s' ), blockType.title );
const { className = getBlockDefaultClassname( block.name ) } = blockType;
// 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, isFirstMultiSelected, isTyping, focus } = this.props;
const showUI = isSelected && ( ! isTyping || ! focus.collapsed );
const wrapperClassname = classnames( 'editor-visual-editor__block', {
'is-selected': showUI,
'is-multi-selected': isMultiSelected,
'is-hovered': isHovered,
} );
const { onMouseLeave, onFocus, onInsertBlocksAfter } = this.props;
// 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
ref={ this.bindBlockNode }
onKeyDown={ this.onKeyDown }
onKeyUp={ this.onKeyUp }
onFocus={ this.onFocus }
onMouseMove={ this.maybeHover }
onMouseEnter={ this.maybeHover }
onMouseLeave={ onMouseLeave }
className={ wrapperClassname }
data-type={ block.name }
tabIndex="0"
aria-label={ blockLabel }
{ ...wrapperProps }
>
{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
{ ( showUI || isHovered ) && <BlockRightMenu uid={ block.uid } /> }
{ showUI &&
<CSSTransitionGroup
transitionName={ { appear: 'is-appearing', appearActive: 'is-appearing-active' } }
transitionAppear={ true }
transitionAppearTimeout={ 100 }
transitionEnter={ false }
transitionLeave={ false }
component={ FirstChild }
>
<div className="editor-visual-editor__block-controls">
<BlockSwitcher uid={ block.uid } />
<Slot name="Formatting.Toolbar" />
</div>
</CSSTransitionGroup>
}
{ isFirstMultiSelected && (
<BlockMover uids={ multiSelectedBlockUids } />
) }
<div
onKeyPress={ this.maybeStartTyping }
onDragStart={ ( event ) => event.preventDefault() }
onMouseDown={ this.onPointerDown }
onTouchStart={ this.onPointerDown }
>
<BlockEdit
focus={ focus }
attributes={ block.attributes }
setAttributes={ this.setAttributes }
insertBlocksAfter={ onInsertBlocksAfter }
setFocus={ partial( onFocus, block.uid ) }
mergeBlocks={ this.mergeBlocks }
className={ className }
id={ block.uid }
/>
</div>
</div>
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
}
