Experiment w/ Annotation Reducers, Selectors, Components

blocks/api/registration.js

@@ -51,6 +51,7 @@ let defaultBlockName;
 export function registerBlockType( name, settings ) {
 	settings = {
 		name,
+		attributes: {},
 		...get( window._wpBlocks, name ),
 		...settings,
 	};
@@ -115,10 +116,25 @@ export function registerBlockType( name, settings ) {
 		);
 		return;
 	}
+	if ( typeof settings.attributes !== 'object' || settings.attributes === null ) {
+		console.error(
+			'Block attributes must be an object.'
+		);
+		return;
+	}
 	if ( ! settings.icon ) {
 		settings.icon = 'block-default';
 	}
 
+	// All blocks can have annotations.
+	settings.attributes.annotations = {
+		type: 'array',
+		items: {
+			type: 'integer',
+		},
+		default: [],
+	};
+
 	settings = applyFilters( 'blocks.registerBlockType', settings, name );
 
 	return blocks[ name ] = settings;

date/index.js

@@ -306,6 +306,27 @@ export function dateI18n( dateFormat, dateValue = new Date(), gmt = false ) {
 	return format( dateFormat, dateMoment );
 }
 
+/**
+ * Human time difference (like `human_time_diff()` in PHP).
+ *
+ * @param  {?(Date|String|Number|Moment|null)} from    Value parsable by moment.js or 'now'. Default is now.
+ * @param  {?(Date|String|Number|Moment|null)} to      Value parsable by moment.js or 'now'. Default is now.
+ * @param  {?Boolean}                          verbose True to include an 'in' prefix or 'ago' suffix as necessary.
+ *                                                     Defaults to false so it matches `human_time_diff()` in PHP,
+ *                                                     which doesn't support this additional argument yet.
+ *
+ * @return {String}                                    Difference; e.g., 3 days, in 3 days, 3 days ago.
+ */
+export function humanTimeDiff( from, to, verbose = false ) {
+	// Convert to moment and establish 'to' time.
+	const fromMoment = moment( ! from || from === 'now' ? {} : from );
+	to = ! to || to === 'now' ? {} : to; // {} = current time.
+	// Set the locale.
+	fromMoment.locale( window._wpDateSettings.l10n.locale );
+	// Format and return.
+	return fromMoment.to( to, ! verbose ? true : false );
+}
+
 export const settings = window._wpDateSettings;
 
 // Initialize.

editor/assets/stylesheets/_z-index.scss

@@ -22,6 +22,7 @@ $z-layers: (
 	'.editor-block-switcher__menu': 2,
 	'.components-popover__close': 2,
 	'.editor-block-mover': 1,
+	'.editor-block-annotations-button': 1,
 	'.blocks-gallery-image__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 20, // Below the header
 	'.editor-header': 30,
@@ -44,6 +45,9 @@ $z-layers: (
 	'.components-popover': 1000000,
 	'.components-autocomplete__results': 1000000,
 	'.blocks-url-input__suggestions': 9999,
+
+	// Show annotations above most standard content, but below any overlays:
+	'.editor-annotations': 100,
 );
 
 @function z-index( $key ) {

editor/components/block-annotations-button/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+
+/**
+ * Renders component.
+ *
+ * @param  {Object} props Props.
+ *
+ * @return {?Object} Element.
+ */
+function BlockAnnotationsButton( { uids, count, onClick } ) {
+	const className = classnames( 'editor-block-annotations-button', {
+		'is-count-gt0': count > 0,
+	} );
+
+	return (
+		<IconButton
+			className={ className }
+			label={ __( 'Annotations' ) }
+			icon="admin-comments"
+			data-uids={ uids }
+			onClick={ onClick }
+			tooltip={ false }
+		>
+			{ count > 0 && count }
+		</IconButton>
+	);
+}
+
+export default BlockAnnotationsButton;

editor/components/block-list/block.js

@@ -26,6 +26,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import BlockMover from '../block-mover';
 import BlockDropZone from '../block-drop-zone';
 import BlockSettingsMenu from '../block-settings-menu';
+import BlockAnnotationsButton from '../block-annotations-button';
 import InvalidBlockWarning from './invalid-block-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
@@ -62,6 +63,7 @@ import {
 	isSelectionEnabled,
 	isTyping,
 	getBlockMode,
+	getAnnotations,
 } from '../../store/selectors';
 
 const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
@@ -350,6 +352,7 @@ export class BlockListBlock extends Component {
 
 	render() {
 		const { block, order, mode, showContextualToolbar, isLocked } = this.props;
+		const { openAnnotationCount, onClickAnnotationsButton } = this.props;
 		const { name: blockName, isValid } = block;
 		const blockType = getBlockType( blockName );
 		// translators: %s: Type of block (i.e. Text, Image etc)
@@ -392,6 +395,12 @@ export class BlockListBlock extends Component {
 				{ ...wrapperProps }
 			>
 				<BlockDropZone index={ order } />
+				{ ( showUI || isHovered || openAnnotationCount > 0 ) &&
+					<BlockAnnotationsButton
+						uids={ [ block.uid ] }
+						count={ openAnnotationCount }
+						onClick={ onClickAnnotationsButton }
+					/> }
 				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
 				{ ( showUI || isHovered ) && <BlockSettingsMenu uids={ [ block.uid ] } /> }
 				{ showUI && isValid && showContextualToolbar && <BlockContextualToolbar /> }
@@ -459,6 +468,7 @@ const mapStateToProps = ( state, { uid } ) => ( {
 	meta: getEditedPostAttribute( state, 'meta' ),
 	mode: getBlockMode( state, uid ),
 	isSelectionEnabled: isSelectionEnabled( state ),
+	openAnnotationCount: getAnnotations( state, { blockUid: [ uid ], substatus: [ '' ] }, false ).length,
 } );
 
 const mapDispatchToProps = ( dispatch, ownProps ) => ( {

editor/components/block-list/index.js

@@ -49,6 +49,8 @@ class BlockList extends Component {
 		this.setBlockRef = this.setBlockRef.bind( this );
 		this.setLastClientY = this.setLastClientY.bind( this );
 		this.onPointerMove = throttle( this.onPointerMove.bind( this ), 100 );
+		this.onClickAnnotationsButton = this.onClickAnnotationsButton.bind( this );
+
 		// Browser does not fire `*move` event when the pointer position changes
 		// relative to the document, so fire it with the last known position.
 		this.onScroll = () => this.onPointerMove( { clientY: this.lastClientY } );
@@ -205,6 +207,15 @@ class BlockList extends Component {
 		}
 	}
 
+	onClickAnnotationsButton( event ) {
+		const button = event.currentTarget;
+		const uids = button.getAttribute( 'data-uids' ).split( ',' );
+
+		if ( uids ) {
+			// @TODO
+		}
+	}
+
 	render() {
 		const { blocks, showContextualToolbar } = this.props;
 
@@ -219,6 +230,7 @@ class BlockList extends Component {
 						onSelectionStart={ this.onSelectionStart }
 						onShiftSelection={ this.onShiftSelection }
 						showContextualToolbar={ showContextualToolbar }
+						onClickAnnotationsButton={ this.onClickAnnotationsButton }
 					/>,
 					<BlockListSiblingInserter
 						key={ 'sibling-inserter-' + uid }

editor/components/block-list/style.scss

@@ -339,6 +339,21 @@
 				float: left;
 			}
 		}
+
+
+		> .editor-block-annotations-button {
+			position: absolute;
+			top: 8px;
+			right: -40px;
+			z-index: z-index( '.editor-block-annotations-button' );
+
+			// Mobile
+			display: none;
+
+			@include break-small {
+				display: block;
+			}
+		}
 	}
 }
 

editor/components/index.js

@@ -9,6 +9,7 @@ export { default as EditorNotices } from './editor-notices';
 export { default as MetaBoxes } from './meta-boxes';
 export { default as PageAttributes } from './page-attributes';
 export { default as PageAttributesCheck } from './page-attributes/check';
+export { default as PostAnnotationsButton } from './post-annotations-button';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
 export { default as PostComments } from './post-comments';
@@ -43,6 +44,7 @@ export { default as UnsavedChangesWarning } from './unsaved-changes-warning';
 export { default as WordCount } from './word-count';
 
 // Content Related Components
+export { default as BlockAnnotationsButton } from './block-annotations-button';
 export { default as BlockInspector } from './block-inspector';
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';

editor/components/post-annotations-button/index.js

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { IconButton } from '@wordpress/components';
+
+/**
+ * Internal Dependencies
+ */
+import { toggleAnnotations } from '../../store/actions';
+import { isAnnotationsOpen, getAnnotations } from '../../store/selectors';
+
+/**
+ * Renders component.
+ *
+ * @param  {Object} props Props.
+ *
+ * @return {?Object} Component.
+ */
+function PostAnnotationsButton( { isOpen, count, onToggleAnnotations } ) {
+	const onClick = () => {
+		const anchor = '.editor-post-title';
+		const filters = { substatus: [ '' ] };
+		onToggleAnnotations( anchor, filters );
+	};
+
+	const className = classnames( 'editor-post-annotations-button', {
+		'is-open': isOpen,
+	} );
+
+	return (
+		<IconButton
+			className={ className }
+			icon="admin-comments"
+			label={ __( 'All Annotations' ) }
+			onClick={ onClick }
+		>
+			{ count > 0 && count }
+		</IconButton>
+	);
+}
+
+export default connect(
+	( state ) => ( {
+		isOpen: isAnnotationsOpen( state ),
+		count: getAnnotations( state, { parent: 0, substatus: [ '' ] }, false ).length,
+	} ),
+	( dispatch ) => ( {
+		onToggleAnnotations() {
+			dispatch( toggleAnnotations( ...arguments ) );
+		},
+	} ),
+)( PostAnnotationsButton );