Try block annotation, starting with full block annotation

editor/actions.js

@@ -576,3 +576,25 @@ export function convertBlockToReusable( uid ) {
 		uid,
 	};
 }
+
+/**
+ * Returns an action object used to add an annotation to the editor.
+ *
+ * @param {string} start The ID of the block to start the annotation.
+ * @param {string} end The ID of the block to end the annotation.
+ * @returns {Object} Action object.
+ */
+export function annotateBlocks( start, end ) {
+	return {
+		type: 'ADD_ANNOTATION',
+		annotation: {
+			start: {
+				block: start,
+			},
+			end: {
+				block: end,
+			},
+			blockAnnotation: true,
+		},
+	};
+}

editor/components/block-list/block.js

@@ -52,6 +52,7 @@ import {
 	isFirstMultiSelectedBlock,
 	isTyping,
 	getBlockMode,
+	getAnnotationsForBlock,
 } from '../../selectors';
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
@@ -346,14 +347,15 @@ class BlockListBlock extends Component {
 		// (mover, toolbar, wrapper) and the display of the block content.
 
 		// Generate the wrapper class names handling the different states of the block.
-		const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus } = this.props;
+		const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus, annotations } = this.props;
 		const showUI = isSelected && ( ! this.props.isTyping || ( focus && focus.collapsed === false ) );
 		const { error } = this.state;
 		const wrapperClassName = classnames( 'editor-block-list__block', {
 			'has-warning': ! isValid || !! error,
 			'is-selected': showUI,
 			'is-multi-selected': isMultiSelected,
 			'is-hovered': isHovered,
+			'is-fully-annotated': annotations.filter( annotation => annotation.blockAnnotation ).length !== 0,
 		} );
 
 		const { onMouseLeave, onFocus, onReplace } = this.props;
@@ -453,6 +455,7 @@ export default connect(
 			order: getBlockIndex( state, ownProps.uid ),
 			meta: getEditedPostAttribute( state, 'meta' ),
 			mode: getBlockMode( state, ownProps.uid ),
+			annotations: getAnnotationsForBlock( state, ownProps.uid ),
 		};
 	},
 	( dispatch, ownProps ) => ( {

editor/components/block-list/style.scss

@@ -91,6 +91,10 @@
 		background: $blue-medium-highlight;
 	}
 
+	&.is-fully-annotated {
+		outline: 1px solid red;
+	}
+
 	.iframe-overlay {
 		position: relative;
 	}

editor/components/block-settings-menu/index.js

@@ -3,6 +3,7 @@
  */
 import classnames from 'classnames';
 import { connect } from 'react-redux';
+import { flow, noop, head, last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,9 +19,9 @@ import BlockInspectorButton from './block-inspector-button';
 import BlockModeToggle from './block-mode-toggle';
 import BlockDeleteButton from './block-delete-button';
 import UnknownConverter from './unknown-converter';
-import { selectBlock } from '../../actions';
+import { selectBlock, annotateBlocks } from '../../actions';
 
-function BlockSettingsMenu( { uids, onSelect, focus } ) {
+function BlockSettingsMenu( { uids, onSelect, focus, onAnnotate } ) {
 	const count = uids.length;
 
 	return (
@@ -55,6 +56,13 @@ function BlockSettingsMenu( { uids, onSelect, focus } ) {
 					<BlockInspectorButton onClick={ onClose } />
 					{ count === 1 && <BlockModeToggle uid={ uids[ 0 ] } onToggle={ onClose } /> }
 					{ count === 1 && <UnknownConverter uid={ uids[ 0 ] } /> }
+					<IconButton
+						className="editor-block-settings-menu__control"
+						onClick={ () => onAnnotate( uids ) }
+						icon="admin-generic"
+					>
+						{ __( 'Annotate' ) }
+					</IconButton>
 					<BlockDeleteButton uids={ uids } />
 				</NavigableMenu>
 			) }
@@ -68,5 +76,8 @@ export default connect(
 		onSelect( uid ) {
 			dispatch( selectBlock( uid ) );
 		},
+		onAnnotate( uids ) {
+			dispatch( annotateBlocks( head( uids ), last( uids ) ) );
+		}
 	} )
 )( BlockSettingsMenu );

editor/reducer.js

@@ -717,6 +717,19 @@ export const reusableBlocks = combineReducers( {
 	},
 } );
 
+export function annotations( state = [], action ) {
+	switch ( action.type ) {
+		case 'ADD_ANNOTATION':
+			return [
+				action.annotation,
+				...state
+			];
+			break;
+	}
+
+	return state;
+}
+
 export default optimist( combineReducers( {
 	editor,
 	currentPost,
@@ -731,4 +744,5 @@ export default optimist( combineReducers( {
 	notices,
 	metaBoxes,
 	reusableBlocks,
+	annotations,
 } ) );

editor/selectors.js

@@ -1072,3 +1072,30 @@ export function isSavingReusableBlock( state, ref ) {
 export function getReusableBlocks( state ) {
 	return Object.values( state.reusableBlocks.data );
 }
+
+/**
+ * Returns all the annotations for a specific block.
+ *
+ * @param {Object} state Global application state.
+ * @param {string} uid The block UID to get annotations for.
+ * @returns {Object[]} The annotations relevant for this block.
+ */
+export const getAnnotationsForBlock = createSelector(
+	( state, uid ) => {
+		const { blockOrder } = state.editor.present;
+		const { annotations } = state;
+
+		return annotations.filter( ( annotation ) => {
+			const startIndex = blockOrder.indexOf( annotation.start.block );
+			const endIndex = blockOrder.indexOf( annotation.end.block );
+
+			const annotatedBlocks = blockOrder.slice( startIndex, endIndex + 1 );
+
+			return annotatedBlocks.includes( uid );
+		} );
+	},
+	( state, uid ) => [
+		state.annotations,
+	],
+);
+