TinyMCE per block: Disable arrow buttons for moving blocks when neces…

…sary (#210)
WordPress · Mar 8, 2017 · 5037e59 · 5037e59
1 parent be75517
commit 5037e59
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 94 deletions.
diff --git a/tinymce-per-block/build/app.js b/tinymce-per-block/build/app.js
diff --git a/tinymce-per-block/src/assets/stylesheets/main.scss b/tinymce-per-block/src/assets/stylesheets/main.scss
@@ -10,6 +10,7 @@
 @import '~external/dashicons/style';
 @import '~renderers/block/block-list/style';
 @import '~renderers/html/html-editor/style';
+@import '~controls/block-arrangement/style';
 @import '~controls/editable-format-toolbar/style';
 @import '~controls/transform-block-toolbar/style';
 @import '~inserter/style';

diff --git a/tinymce-per-block/src/blocks/embed-block/form.js b/tinymce-per-block/src/blocks/embed-block/form.js
@@ -23,8 +23,8 @@ export default class EmbedBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected, change, moveCursorUp, moveCursorDown,
-			remove, focusConfig, focus, moveBlockUp, moveBlockDown, appendBlock, unselect } = this.props;
+		const { block, isSelected, change, moveCursorUp, moveCursorDown, first, last,
+			remove, focusConfig, focus, moveBlockUp, moveBlockDown, appendBlock, select, unselect } = this.props;
 
 		const removePrevious = () => {
 			if ( ! block.url ) {
@@ -43,7 +43,7 @@ export default class EmbedBlockForm extends Component {
 
 		return (
 			<div className={ classNames( 'embed-block', block.align ) }>
-				{ isSelected && <BlockArrangement block={ block }
+				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
 					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">
@@ -52,46 +52,49 @@ export default class EmbedBlockForm extends Component {
 						</div>
 					</div>
 				}
-				{ ! block.url &&
-					<div className="embed-block__form">
-						<div className="embed-block__title">
-							<CloudOutline /> Embed URL
-						</div>
-						<EnhancedInputComponent
-							ref={ this.bindInput }
-							moveCursorUp={ moveCursorUp }
-							removePrevious={ removePrevious }
-							moveCursorDown={ moveCursorDown }
-							value={ block.url }
-							onChange={ ( value ) => change( { url: value } ) }
-							focusConfig={ focusConfig }
-							onFocusChange={ ( config ) => focus( config ) }
-							placeholder="Paste URL to embed here..."
-						/>
-					</div>
-				}
-				{ block.url &&
-					<div className="embed-block__content">
-						<div dangerouslySetInnerHTML={ { __html: html } } />
-						<div className="embed-block__caption">
+
+				<div onClick={ select }>
+					{ ! block.url &&
+						<div className="embed-block__form">
+							<div className="embed-block__title">
+								<CloudOutline /> Embed URL
+							</div>
 							<EnhancedInputComponent
-								ref={ this.bindCaption }
+								ref={ this.bindInput }
 								moveCursorUp={ moveCursorUp }
 								removePrevious={ removePrevious }
 								moveCursorDown={ moveCursorDown }
-								splitValue={ splitValue }
-								value={ block.caption }
-								onChange={ ( value ) => {
-									change( { caption: value } );
-									unselect();
-								} }
-								placeholder="Write caption"
+								value={ block.url }
+								onChange={ ( value ) => change( { url: value } ) }
 								focusConfig={ focusConfig }
-								onFocusChange={ focus }
+								onFocusChange={ ( config ) => focus( config ) }
+								placeholder="Paste URL to embed here..."
 							/>
 						</div>
-					</div>
-				}
+					}
+					{ block.url &&
+						<div className="embed-block__content">
+							<div dangerouslySetInnerHTML={ { __html: html } } />
+							<div className="embed-block__caption">
+								<EnhancedInputComponent
+									ref={ this.bindCaption }
+									moveCursorUp={ moveCursorUp }
+									removePrevious={ removePrevious }
+									moveCursorDown={ moveCursorDown }
+									splitValue={ splitValue }
+									value={ block.caption }
+									onChange={ ( value ) => {
+										change( { caption: value } );
+										unselect();
+									} }
+									placeholder="Write caption"
+									focusConfig={ focusConfig }
+									onFocusChange={ focus }
+								/>
+							</div>
+						</div>
+					}
+				</div>
 			</div>
 		);
 	}

diff --git a/tinymce-per-block/src/blocks/heading-block/form.js b/tinymce-per-block/src/blocks/heading-block/form.js
@@ -33,7 +33,7 @@ export default class HeadingBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected, moveBlockUp, moveBlockDown, select, transform } = this.props;
+		const { block, isSelected, moveBlockUp, moveBlockDown, select, transform, first, last } = this.props;
 		const sizes = [
 			{ id: 'h1', icon: EditorHeading1Icon },
 			{ id: 'h2', icon: EditorHeading2Icon },
@@ -42,7 +42,7 @@ export default class HeadingBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block }
+				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
 					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected && (
 					<div className="block-list__block-controls">

diff --git a/tinymce-per-block/src/blocks/html-block/form.js b/tinymce-per-block/src/blocks/html-block/form.js
@@ -39,7 +39,7 @@ export default class HtmlBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected, change, moveCursorUp, moveCursorDown, appendBlock,
+		const { block, isSelected, change, moveCursorUp, moveCursorDown, appendBlock, first, last,
 			mergeWithPrevious, remove, focusConfig, focus, moveBlockUp, moveBlockDown, select, unselect } = this.props;
 		const splitValue = ( left, right ) => {
 			change( { content: left } );
@@ -59,7 +59,7 @@ export default class HtmlBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block }
+				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
 					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected && (
 					<div className="block-list__block-controls">

diff --git a/tinymce-per-block/src/blocks/image-block/form.js b/tinymce-per-block/src/blocks/image-block/form.js
@@ -19,7 +19,7 @@ export default class ImageBlockForm extends Component {
 	};
 
 	render() {
-		const { block, change, moveCursorDown, moveCursorUp, remove, appendBlock,
+		const { block, change, moveCursorDown, moveCursorUp, remove, appendBlock, first, last,
 			isSelected, focusConfig, focus, moveBlockUp, moveBlockDown, select, unselect } = this.props;
 		const removePrevious = () => {
 			if ( ! block.caption ) {
@@ -36,7 +36,7 @@ export default class ImageBlockForm extends Component {
 
 		return (
 			<div className={ classNames( 'image-block__form', block.align ) }>
-				{ isSelected && <BlockArrangement block={ block }
+				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
 					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">

diff --git a/tinymce-per-block/src/blocks/quote-block/form.js b/tinymce-per-block/src/blocks/quote-block/form.js
@@ -59,7 +59,7 @@ export default class QuoteBlockForm extends Component {
 	};
 
 	render() {
-		const { block, change, moveCursorUp, moveCursorDown, remove,
+		const { block, change, moveCursorUp, moveCursorDown, remove, first, last,
 			mergeWithPrevious, appendBlock, isSelected, focusConfig, focus,
 			moveBlockUp, moveBlockDown, select, unselect, transform } = this.props;
 		const splitValue = ( left, right ) => {
@@ -76,7 +76,7 @@ export default class QuoteBlockForm extends Component {
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block }
+				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
 					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">

diff --git a/tinymce-per-block/src/blocks/text-block/form.js b/tinymce-per-block/src/blocks/text-block/form.js
@@ -29,15 +29,16 @@ export default class TextBlockForm extends Component {
 	};
 
 	render() {
-		const { block, isSelected, focusConfig, moveBlockUp, moveBlockDown, replace, select, transform } = this.props;
+		const { block, isSelected, focusConfig, moveBlockUp, moveBlockDown,
+			replace, select, transform, first, last } = this.props;
 		const selectedTextAlign = block.align || 'left';
 		const style = {
 			textAlign: selectedTextAlign
 		};
 
 		return (
 			<div>
-				{ isSelected && <BlockArrangement block={ block }
+				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
 					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
 					<div className="block-list__block-controls">

diff --git a/...r-block/src/controls/block-arrangement.js → ...k/src/controls/block-arrangement/index.js b/...r-block/src/controls/block-arrangement.js → ...k/src/controls/block-arrangement/index.js
@@ -4,18 +4,25 @@
 import { createElement } from 'wp-elements';
 import { getBlock } from 'wp-blocks';
 import { ArrowDownAlt2Icon, ArrowUpAlt2Icon } from 'dashicons';
+import classNames from 'classnames';
 
-export default function BlockArrangement( { block, moveBlockUp, moveBlockDown } ) {
+export default function BlockArrangement( { block, moveBlockUp, moveBlockDown, first, last } ) {
 	const blockDefinition = getBlock( block.blockType );
 	const Icon = blockDefinition.icon;
 
 	return (
 		<div className="block-list__block-arrangement">
 			<div className="block-list__movement-controls">
-				<button className="block-list__block-arrange-control" onClick={ moveBlockUp }>
+				<button
+					className={ classNames( 'block-list__block-arrange-control', { 'is-disabled': first } ) }
+					onClick={ moveBlockUp }
+				>
 					<ArrowUpAlt2Icon />
 				</button>
-				<button className="block-list__block-arrange-control" onClick={ moveBlockDown }>
+				<button
+					className={ classNames( 'block-list__block-arrange-control', { 'is-disabled': last } ) }
+					onClick={ moveBlockDown }
+				>
 					<ArrowDownAlt2Icon />
 				</button>
 			</div>

diff --git a/tinymce-per-block/src/controls/block-arrangement/style.scss b/tinymce-per-block/src/controls/block-arrangement/style.scss
@@ -0,0 +1,32 @@
+.block-list__block-arrangement {
+	@include animate_fade;
+	position: absolute;
+	top: 10px;
+	left: -65px;
+	display: flex;
+	align-items: center;
+}
+
+.block-list__type-controls {
+	margin-left: 0.6rem;
+}
+
+.block-list__block-arrange-control {
+	display: block;
+	padding: 0;
+	border: none;
+	outline: none;
+	background: none;
+	color: $gray-dark-300;
+	cursor: pointer;
+
+	&.is-disabled {
+		color: $gray-light;
+	}
+
+	.dashicon {
+		display: block;
+		height: 20px;
+		width: 20px;
+	}
+}
diff --git a/tinymce-per-block/src/controls/transform-block-toolbar/style.scss b/tinymce-per-block/src/controls/transform-block-toolbar/style.scss
@@ -9,7 +9,7 @@
 	.transform-block-toolbar__arrow {
 		display: inline-block;
 		vertical-align: middle;
-		border: 6px dashed $gray-dark-900;
+		border: 6px dashed #6d7882;
 		height: 0;
 		line-height: 0;
 		width: 0;

diff --git a/tinymce-per-block/src/renderers/block/block-list/_style.scss b/tinymce-per-block/src/renderers/block/block-list/_style.scss
@@ -82,32 +82,3 @@
 		height: 24px;
 	}
 }
-
-.block-list__block-arrangement {
-	@include animate_fade;
-	position: absolute;
-	top: 10px;
-	left: -65px;
-	display: flex;
-	align-items: center;
-}
-
-.block-list__type-controls {
-	margin-left: 0.6rem;
-}
-
-.block-list__block-arrange-control {
-	display: block;
-	padding: 0;
-	border: none;
-	outline: none;
-	background: none;
-	color: $gray-dark-300;
-	cursor: pointer;
-
-	.dashicon {
-		display: block;
-		height: 20px;
-		width: 20px;
-	}
-}
diff --git a/tinymce-per-block/src/renderers/block/block-list/block.js b/tinymce-per-block/src/renderers/block/block-list/block.js
@@ -19,7 +19,7 @@ export default class BlockListBlock extends Component {
 	}
 
 	render() {
-		const { block, isSelected, focusConfig } = this.props;
+		const { block, isSelected, focusConfig, first, last } = this.props;
 		const blockDefinition = getBlock( block.blockType );
 		if ( ! blockDefinition ) {
 			return null;
@@ -122,6 +122,8 @@ export default class BlockListBlock extends Component {
 					{ ...state }
 					isSelected={ isSelected }
 					focusConfig={ focusConfig }
+					first={ first }
+					last={ last }
 				/>
 			</div>
 		);

diff --git a/tinymce-per-block/src/renderers/block/block-list/index.js b/tinymce-per-block/src/renderers/block/block-list/index.js
@@ -238,7 +238,10 @@ class BlockList extends Component {
 								isSelected={ selectedUID === block.uid }
 								focusConfig={ isFocused ? focusConfig : null }
 								executeCommand={ ( command ) => this.executeCommand( block.uid, command ) }
-								block={ block } />
+								block={ block }
+								first={ index === 0 }
+								last={ index === content.length - 1 }
+							/>
 						);
 					} ) }
 				</div>