TinyMCE per Block: Adding the align images controls

WordPress · Mar 2, 2017 · ac7bfee · ac7bfee
1 parent 99a6a58
commit ac7bfee
Show file tree

Hide file tree

Showing 20 changed files with 232 additions and 168 deletions.
diff --git a/tinymce-per-block/build/app.js b/tinymce-per-block/build/app.js
diff --git a/tinymce-per-block/index.html b/tinymce-per-block/index.html
@@ -7,7 +7,7 @@
 <body>
 	<div class="editor"></div>
 	<script>
-		window.content = '<!-- wp:heading -->1.0 Is The Loneliest Number<!-- /wp --><!-- wp:quote cite:Jobs -->Design is not just what it looks like and feels like. Design is how it works.<!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp -->\n\n<!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:imagecaption --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp -->';
+		window.content = '<!-- wp:heading -->1.0 Is The Loneliest Number<!-- /wp --><!-- wp:quote cite:Jobs -->Design is not just what it looks like and feels like. Design is how it works.<!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp --><!-- wp:text -->A beautiful thing about Apple is how quickly they obsolete their own products. I imagine this also makes the discipline of getting things out there easier. Like I mentioned before, the longer it’s been since the last release the more pressure there is, but if you know that if your bit of code doesn’t make this version but there’s the +0.1 coming out in 6 weeks, then it’s not that bad. It’s like flights from San Francisco to LA, if you miss one you know there’s another one an hour later so it’s not a big deal. Amazon has done a fantastic job of this with the Kindle as well, with a new model every year.<!-- /wp -->\n\n<!-- wp:text -->I like Apple for the opposite reason: <strong>they’re not afraid of getting a rudimentary 1.0 out into the world</strong>.<!-- /wp --><!-- wp:image --><img src="https://matiasventura.files.wordpress.com/2017/02/blue.png?w=720"><!-- /wp --><!-- wp:paragraph -->Many entrepreneurs idolize Steve Jobs. He’s such a  perfectionist , they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!<!-- /wp -->';
 	</script>
 
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i">

diff --git a/tinymce-per-block/src/assets/stylesheets/main.scss b/tinymce-per-block/src/assets/stylesheets/main.scss
@@ -2,7 +2,6 @@
 @import 'animations';
 @import '~blocks/text-block/style';
 @import '~blocks/image-block/style';
-@import '~blocks/image-caption-block/style';
 @import '~blocks/heading-block/style';
 @import '~blocks/paragraph-block/style';
 @import '~blocks/quote-block/style';

diff --git a/tinymce-per-block/src/blocks/image-block/_style.scss b/tinymce-per-block/src/blocks/image-block/_style.scss
@@ -1,4 +1,50 @@
-.image-block__display {
-	display: block;
-	max-width: 100%;
+.image-caption-block {
+	position: relative;
+
+	&.align-full-width {
+		margin-left: calc(50% - 50vw);
+		width: 100vw;
+		max-width: none;
+		padding-left: 0;
+		padding-right: 0;
+
+		img {
+			width: 100%;
+		}
+	}
+
+	&.align-left {
+		float: left;
+		width: 340px;
+		z-index: 1;
+	}
+
+	&.align-right {
+		float: right;
+		width: 340px;
+		z-index: 1;
+	}
+
+
+	.image-caption-block__display {
+		display: block;
+		max-width: 100%;
+	}
+
+	.image-caption-block__caption textarea,
+	.image-caption-block__caption .textarea-mirror {
+		margin-top: 10px;
+		width: 100%;
+		border: none;
+		font: inherit;
+		font-family: "Merriweather", serif;
+		font-weight: 300;
+		font-size: 14px;
+		color: $gray-dark-300;
+		resize: none;
+
+		&:focus {
+			outline: 0;
+		}
+	}
 }
diff --git a/tinymce-per-block/src/blocks/image-block/form.js b/tinymce-per-block/src/blocks/image-block/form.js
@@ -3,6 +3,16 @@
  */
 import { createElement, Component } from 'wp-elements';
 import { find } from 'lodash';
+import {
+	ImageNoAlignIcon,
+	ImageAlignRightIcon,
+	ImageAlignLeftIcon,
+	ImageFullWidthIcon
+} from 'dashicons';
+import classNames from 'classnames';
+
+import { EnhancedInputComponent } from 'wp-blocks';
+import BlockArrangement from 'controls/block-arrangement';
 
 export default class ImageBlockForm extends Component {
 
@@ -11,24 +21,90 @@ export default class ImageBlockForm extends Component {
 	}
 
 	focus( position ) {
-		if ( position !== 0 ) {
-			this.props.moveUp();
-		} else {
-			this.props.moveDown();
-		}
+		this.caption.focus( position );
 	}
 
+	bindCaption = ( ref ) => {
+		this.caption = ref;
+	}
+
+	setImageAlignment = ( id ) => () => {
+		this.props.setAttributes( { align: id } );
+	};
+
 	render() {
-		const { block: { children } } = this.props;
+		const { block, setAttributes, moveDown, moveUp, remove, appendBlock, isFocused } = this.props;
+		const { attrs, children } = block;
 		const image = find( children, ( { name } ) => 'img' === name );
 		if ( ! image ) {
 			return null;
 		}
+		const caption = attrs.caption || '';
+		const removePrevious = () => {
+			if ( ! caption ) {
+				remove();
+			}
+		};
+		const splitValue = ( left, right ) => {
+			setAttributes( { caption: left } );
+			appendBlock( {
+				type: 'WP_Block',
+				blockType: 'paragraph',
+				attrs: {},
+				startText: '<!-- wp:paragraph -->',
+				endText: '<!-- /wp -->',
+				rawContent: '<!-- wp:paragraph -->' + right + '<!-- /wp -->',
+				children: [ {
+					type: 'Text',
+					value: right
+				} ]
+			} );
+		};
+		const imageAlignments = [
+			{ id: 'no-align', icon: ImageNoAlignIcon },
+			{ id: 'align-left', icon: ImageAlignLeftIcon },
+			{ id: 'align-right', icon: ImageAlignRightIcon },
+			{ id: 'align-full-width', icon: ImageFullWidthIcon },
+		];
+		const alignValue = attrs.align || 'no-align';
 
 		return (
-			<img
-				src={ image.attrs.src }
-				className="image-block__display" />
+			<div className={ classNames( 'image-caption-block', alignValue ) }>
+				{ isFocused && <BlockArrangement block={ block } /> }
+				{ isFocused &&
+					<div className="block-list__block-controls">
+						<div className="block-list__block-controls-group">
+							{ imageAlignments.map( ( { id, icon: Icon } ) =>
+								<button
+									key={ id }
+									onClick={ this.setImageAlignment( id ) }
+									className={ classNames( 'block-list__block-control', {
+										'is-selected': alignValue === id
+									} ) }
+								>
+									<Icon />
+								</button>
+							) }
+						</div>
+					</div>
+				}
+				<img
+					src={ image.attrs.src }
+					className="image-caption-block__display"
+				/>
+				<div className="image-caption-block__caption">
+					<EnhancedInputComponent
+						ref={ this.bindCaption }
+						moveUp={ moveUp }
+						removePrevious={ removePrevious }
+						moveDown={ moveDown }
+						splitValue={ splitValue }
+						value={ caption }
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						placeholder="Enter a caption"
+					/>
+				</div>
+			</div>
 		);
 	}
 }
diff --git a/tinymce-per-block/src/blocks/image-caption-block/_style.scss b/tinymce-per-block/src/blocks/image-caption-block/_style.scss
diff --git a/tinymce-per-block/src/blocks/image-caption-block/form.js b/tinymce-per-block/src/blocks/image-caption-block/form.js
diff --git a/tinymce-per-block/src/blocks/image-caption-block/index.js b/tinymce-per-block/src/blocks/image-caption-block/index.js
diff --git a/tinymce-per-block/src/blocks/paragraph-block/form.js b/tinymce-per-block/src/blocks/paragraph-block/form.js
@@ -5,6 +5,7 @@ import { createElement, Component } from 'wp-elements';
 
 import EditableFormatToolbar from 'controls/editable-format-toolbar';
 import AlignmentToolbar from 'controls/alignment-toolbar';
+import BlockArrangement from 'controls/block-arrangement';
 import InlineTextBlockForm from '../inline-text-block/form';
 
 export default class ParagraphBlockForm extends Component {
@@ -35,6 +36,7 @@ export default class ParagraphBlockForm extends Component {
 
 		return (
 			<div>
+				{ isFocused && <BlockArrangement block={ block } /> }
 				{ isFocused &&
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">

diff --git a/tinymce-per-block/src/blocks/quote-block/form.js b/tinymce-per-block/src/blocks/quote-block/form.js
@@ -6,6 +6,7 @@ import { createElement, Component } from 'wp-elements';
 import { EditableComponent, EnhancedInputComponent } from 'wp-blocks';
 import { serialize } from 'serializers/block';
 import EditableFormatToolbar from 'controls/editable-format-toolbar';
+import BlockArrangement from 'controls/block-arrangement';
 
 export default class QuoteBlockForm extends Component {
 	bindContent = ( ref ) => {
@@ -79,6 +80,7 @@ export default class QuoteBlockForm extends Component {
 
 		return (
 			<div>
+				{ isFocused && <BlockArrangement block={ block } /> }
 				{ isFocused &&
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">

diff --git a/tinymce-per-block/src/blocks/text-block/form.js b/tinymce-per-block/src/blocks/text-block/form.js
@@ -7,6 +7,7 @@ import { EditableComponent } from 'wp-blocks';
 import { serialize } from 'serializers/block';
 import AlignmentToolbar from 'controls/alignment-toolbar';
 import EditableFormatToolbar from 'controls/editable-format-toolbar';
+import BlockArrangement from 'controls/block-arrangement';
 
 export default class TextBlockForm extends Component {
 	focus( position ) {
@@ -60,6 +61,7 @@ export default class TextBlockForm extends Component {
 
 		return (
 			<div>
+				{ isFocused && <BlockArrangement block={ block } /> }
 				{ isFocused && (
 					<div className="block-list__block-controls">
 						<div className="block-list__block-controls-group">

diff --git a/tinymce-per-block/src/controls/block-arrangement.js b/tinymce-per-block/src/controls/block-arrangement.js
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { createElement } from 'wp-elements';
+import { getBlock } from 'wp-blocks';
+import { ArrowDownAlt2Icon, ArrowUpAlt2Icon } from 'dashicons';
+
+export default function BlockArrangement( { block } ) {
+	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">
+					<ArrowUpAlt2Icon />
+				</button>
+				<button className="block-list__block-arrange-control">
+					<ArrowDownAlt2Icon />
+				</button>
+			</div>
+			{ Icon && (
+				<div className="block-list__type-controls">
+					<button className="block-list__block-arrange-control">
+						<Icon />
+					</button>
+				</div>
+			) }
+		</div>
+	);
+}
diff --git a/tinymce-per-block/src/external/dashicons/icons/image-align-left.js b/tinymce-per-block/src/external/dashicons/icons/image-align-left.js
@@ -0,0 +1,7 @@
+/**
+ * External dependencies
+ */
+import { createElement } from 'wp-elements';
+
+// This is a gridicon
+export default () => <svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M3 5h18v2H3V5zm0 14h18v-2H3v2zm0-4h8V9H3v6zm10 0h8v-2h-8v2zm0-4h8V9h-8v2z"></path></g></svg>;
diff --git a/tinymce-per-block/src/external/dashicons/icons/image-align-right.js b/tinymce-per-block/src/external/dashicons/icons/image-align-right.js
@@ -0,0 +1,7 @@
+/**
+ * External dependencies
+ */
+import { createElement } from 'wp-elements';
+
+// This is a gridicon
+export default () => <svg className="dashicon" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g><path d="M21 7H3V5h18v2zm0 10H3v2h18v-2zm0-8h-8v6h8V9zm-10 4H3v2h8v-2zm0-4H3v2h8V9z"></path></g></svg>;