Blocks: Unselect the block when clicking outside the current block

blocks/editable/format-toolbar.js

@@ -124,6 +124,7 @@ class FormatToolbar extends wp.element.Component {
 			} );
 		}
 
+		/* eslint-disable jsx-a11y/no-autofocus */
 		return (
 			<div className="editable-format-toolbar">
 				<Toolbar controls={ toolbarControls } />
@@ -134,6 +135,7 @@ class FormatToolbar extends wp.element.Component {
 						style={ linkStyle }
 						onSubmit={ this.submitLink }>
 						<input
+							autoFocus
 							className="editable-format-toolbar__link-input"
 							type="url"
 							required
@@ -156,6 +158,7 @@ class FormatToolbar extends wp.element.Component {
 				}
 			</div>
 		);
+		/* eslint-enable jsx-a11y/no-autofocus */
 	}
 }
 

editor/block-mover/index.js

@@ -15,19 +15,24 @@ import './style.scss';
 import { isFirstBlock, isLastBlock } from '../selectors';
 
 function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
+	// We emulate a disabled state because forcefully applying the `disabled`
+	// attribute on the button while it has focus causes the screen to change
+	// to an unfocused state (body as active element) without firing blur on,
+	// the rendering parent, leaving it unable to react to focus out.
+
 	return (
 		<div className="editor-block-mover">
 			<IconButton
 				className="editor-block-mover__control"
-				onClick={ onMoveUp }
+				onClick={ isFirst ? null : onMoveUp }
 				icon="arrow-up-alt2"
-				disabled={ isFirst }
+				aria-disabled={ isFirst }
 			/>
 			<IconButton
 				className="editor-block-mover__control"
-				onClick={ onMoveDown }
+				onClick={ isLast ? null : onMoveDown }
 				icon="arrow-down-alt2"
-				disabled={ isLast }
+				aria-disabled={ isLast }
 			/>
 		</div>
 	);

editor/block-mover/style.scss

@@ -19,9 +19,10 @@
 		color: $dark-gray-900;
 	}
 
-	&[disabled] {
+	&[aria-disabled="true"] {
 		cursor: default;
 		color: $light-gray-300;
+		pointer-events: none;
 	}
 
 	.dashicon {