Coediting: Display user id when block gets frozen

coediting/hooks/index.js

@@ -0,0 +1,77 @@
+/**
+ * External dependency
+ */
+import classnames from 'classnames';
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependency
+ */
+import { BlockEdit, getBlockDefaultClassname, getBlockType, hasBlockSupport } from '@wordpress/blocks';
+import { addFilter } from '@wordpress/hooks';
+import { getWrapperDisplayName } from '@wordpress/element';
+
+/**
+ * Internal dependency
+ */
+import './style.scss';
+// TODO: Move selectors to the local folder
+import {
+	getBlock,
+	getFrozenBlockCollaboratorColor,
+	getFrozenBlockCollaboratorName,
+	isBlockFrozenByCollaborator,
+} from '../../editor/selectors';
+
+const withFrozenMode = ( OriginalComponent, originalProps ) => {
+	const Component = ( { isFrozenByCollaborator, ...props } ) => {
+		if ( isFrozenByCollaborator ) {
+			const { block, collaboratorColor, collaboratorName } = props;
+			const { attributes, name, isValid, uid } = block;
+			const blockType = getBlockType( name );
+
+			// Determine whether the block has props to apply to the wrapper.
+			let wrapperProps;
+			if ( blockType.getEditWrapperProps ) {
+				wrapperProps = blockType.getEditWrapperProps( attributes );
+			}
+
+			// Generate a class name for the block's editable form
+			const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
+				getBlockDefaultClassname( block.name ) :
+				null;
+			const className = classnames( generatedClassName, block.attributes.className );
+
+			return (
+				<div
+					className={ `editor-block-list__block is-frozen-by-collaborator is-${ collaboratorColor }` }
+					{ ...wrapperProps }
+				>
+					<legend className="coediting-legend">{ collaboratorName }</legend>
+					<div className="editor-block-list__block-edit">
+						{ isValid && <BlockEdit
+							attributes={ attributes }
+							className={ className }
+							id={ uid }
+							name={ name }
+						/> }
+					</div>
+				</div>
+			);
+		}
+
+		return <OriginalComponent { ...originalProps } />;
+	};
+	Component.displayName = getWrapperDisplayName( OriginalComponent, 'frozen-mode' );
+
+	const mapStateToProps = ( state, { uid } ) => ( {
+		block: getBlock( state, uid ),
+		collaboratorColor: getFrozenBlockCollaboratorColor( state, uid ),
+		collaboratorName: getFrozenBlockCollaboratorName( state, uid ),
+		isFrozenByCollaborator: isBlockFrozenByCollaborator( state, uid ),
+	} );
+
+	return connect( mapStateToProps )( Component );
+};
+
+addFilter( 'Editor.BlockItem', 'coediting/block-item/frozen-mode', withFrozenMode );

coediting/hooks/style.scss

@@ -0,0 +1,80 @@
+$coediting-green: #46b450;
+$coediting-orange: #f56e28;
+$coediting-purple: #826eb4;
+$coediting-red: #dc3232;
+$coediting-yellow: #ffb900;
+
+.is-frozen-by-collaborator {
+	&.editor-block-list__block {
+		cursor: not-allowed;
+		pointer-events: none;
+		user-select: none;
+
+		&:before {
+			outline: 1px solid;
+		}
+
+		.coediting-legend {
+			color: $white;
+			font-size: $default-font-size;
+			padding: 2px 5px;
+			position: absolute;
+			right: 0;
+			top: 0;
+			z-index: 50;
+
+			@include break-small {
+				right: $block-mover-padding-visible
+			}
+		}
+
+		&.is-green {
+			&:before {
+				outline-color:$coediting-green;
+			}
+			.coediting-legend {
+				background-color: $coediting-green;
+			}
+		}
+
+		&.is-orange {
+			&:before {
+				outline-color:$coediting-orange;
+			}
+			.coediting-legend {
+				background-color: $coediting-orange;
+			}
+		}
+
+		&.is-purple {
+			&:before {
+				outline-color:$coediting-purple;
+			}
+			.coediting-legend {
+				background-color: $coediting-purple;
+			}
+		}
+
+		&.is-red {
+			&:before {
+				outline-color:$coediting-red;
+			}
+			.coediting-legend {
+				background-color: $coediting-red;
+			}
+		}
+
+		&.is-yellow {
+			&:before {
+				outline-color:$coediting-yellow;
+			}
+			.coediting-legend {
+				background-color: $coediting-yellow;
+			}
+		}
+	}
+
+	.editor-block-list__block-edit {
+		opacity: 0.8;
+	}
+}

coediting/index.js

@@ -13,6 +13,7 @@ import { camelCaseKeysDeep } from '@wordpress/utils';
 /**
  * Internal dependencies
  */
+import './hooks';
 import Signal from './signal';
 
 export default class Coediting extends EventEmitter {
@@ -37,16 +38,6 @@ export default class Coediting extends EventEmitter {
 		this.init();
 	}
 
-	/**
-	 * Returns random color from a list of arrays.
-	 *
-	 * @return {string} color from array.
-	 */
-	static getColor() {
-		const colors = [ 'red', 'purple', 'orange', 'yellow', 'green' ];
-		return colors[ Math.floor( Math.random() * colors.length ) ];
-	}
-
 	/**
 	 * Generates uuid which is used for url unique hash.
 	 * @return {string} uuid.
@@ -143,9 +134,9 @@ export default class Coediting extends EventEmitter {
 				this.emit( 'peerData', parsedData );
 			} );
 
-			this.peer.on( 'close', ( peer ) => {
+			this.peer.on( 'close', () => {
 				this.isConnected = false;
-				this.emit( 'peerClosed', peer );
+				this.emit( 'peerClosed', );
 				clearInterval( this.listenSignalTimer );
 				delete this._events.initiator;
 				delete this._events.peerFound;

editor/actions.js

@@ -506,7 +506,7 @@ export function toggleFeature( feature ) {
 }
 
 export {
-	clearFrozenBlock,
+	clearFrozenBlocks,
 	freezeBlock,
 	toggleCoediting,
 } from './state/coediting';

editor/assets/stylesheets/_variables.scss

@@ -80,13 +80,6 @@ $block-spacing: 4px;
 $button-style__radius-roundrect: 4px;
 $button-style__radius-round: 50%;
 
-/* Coediting */
-$coediting-green: #46b450;
-$coediting-orange: #f56e28;
-$coediting-purple: #826eb4;
-$coediting-red: #dc3232;
-$coediting-yellow: #ffb900;
-
 /* Media Queries */
 
 /* All media queries currently in WordPress:

editor/components/block-list/block.js

@@ -47,7 +47,6 @@ import {
 	getEditedPostAttribute,
 	getNextBlock,
 	getPreviousBlock,
-	isBlockFrozenByPeer,
 	isBlockHovered,
 	isBlockMultiSelected,
 	isBlockSelected,
@@ -356,8 +355,6 @@ class BlockListBlock extends Component {
 			'is-selected': showUI,
 			'is-multi-selected': isMultiSelected,
 			'is-hovered': isHovered,
-			'is-frozen-by-peer': this.props.isFrozenByPeer,
-			'is-green': this.props.isFrozenByPeer,
 		} );
 
 		const { onMouseLeave, onFocus, onReplace } = this.props;
@@ -455,7 +452,6 @@ const mapStateToProps = ( state, { uid } ) => ( {
 	order: getBlockIndex( state, uid ),
 	meta: getEditedPostAttribute( state, 'meta' ),
 	mode: getBlockMode( state, uid ),
-	isFrozenByPeer: isBlockFrozenByPeer( state, uid ),
 } );
 
 const mapDispatchToProps = ( dispatch, ownProps ) => ( {

editor/components/block-list/style.scss

@@ -81,70 +81,6 @@
 		background: $blue-medium-highlight;
 	}
 
-	&.is-frozen-by-peer {
-		cursor: not-allowed;
-		pointer-events: none;
-		opacity: 0.8;
-
-		.coediting-legend {
-			float: right;
-			margin-top: -14px;
-			margin-right: -14px;
-			color: #fff;
-			font-size: 12px;
-		}
-
-		&.is-green {
-			&:before {
-				outline: 2px solid $coediting-green;
-				transition: 0.2s outline;
-			}
-			.coediting-legend {
-				background: $coediting-green;
-			}
-		}
-
-		&.is-orange {
-			&:before {
-				outline: 2px solid $coediting-orange;
-				transition: 0.2s outline;
-			}
-			.coediting-legend {
-				background: $coediting-orange;
-			}
-		}
-
-		&.is-purple {
-			&:before {
-				outline: 2px solid $coediting-purple;
-				transition: 0.2s outline;
-			}
-			.coediting-legend {
-				background: $coediting-purple;
-			}
-		}
-
-		&.is-red {
-			&:before {
-				outline: 2px solid $coediting-red;
-				transition: 0.2s outline;
-			}
-			.coediting-legend {
-				background: $coediting-red;
-			}
-		}
-
-		&.is-yellow {
-			&:before {
-				outline: 2px solid $coediting-yellow;
-				transition: 0.2s outline;
-			}
-			.coediting-legend {
-				background: $coediting-yellow;
-			}
-		}
-	}
-
 	// selection style for multiple blocks
 	&.is-multi-selected *::selection {
 		background: transparent;