Add image with caption block (#155)

WordPress · Mar 1, 2017 · e0542af · e0542af
1 parent a7e203b
commit e0542af
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 6 deletions.
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 -->';
+		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 -->';
 	</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,6 +2,7 @@
 @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-caption-block/_style.scss b/tinymce-per-block/src/blocks/image-caption-block/_style.scss
@@ -0,0 +1,22 @@
+.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-caption-block/form.js b/tinymce-per-block/src/blocks/image-caption-block/form.js
@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { createElement, Component } from 'wp-elements';
+import { find } from 'lodash';
+import { EnhancedInputComponent } from 'wp-blocks';
+
+export default class ImageBlockForm extends Component {
+
+	merge() {
+		this.props.remove();
+	}
+
+	focus( position ) {
+		this.caption.focus( position );
+	}
+
+	bindCaption = ( ref ) => {
+		this.caption = ref;
+	}
+
+	render() {
+		const { block: { attrs, children }, setAttributes, moveDown, moveUp, remove, appendBlock } = this.props;
+		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
+				} ]
+			} );
+		};
+
+		return (
+			<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/index.js b/tinymce-per-block/src/blocks/image-caption-block/index.js
@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { registerBlock } from 'wp-blocks';
+import { FormatImageIcon } from 'dashicons';
+
+/**
+ * Internal dependencies
+ */
+import form from './form';
+
+registerBlock( 'imagecaption', {
+	title: 'Image With Caption',
+	icon: FormatImageIcon,
+	form
+} );
diff --git a/tinymce-per-block/src/blocks/quote-block/_style.scss b/tinymce-per-block/src/blocks/quote-block/_style.scss
@@ -17,13 +17,13 @@
 }
 
 .quote-block__cite textarea,
-.quote-block__content .textarea-mirror {
+.quote-block__cite .textarea-mirror {
 	width: 100%;
 	border: none;
 	font: inherit;
 	font-family: "Merriweather", serif;
 	font-weight: 300;
-	font-size: 12px;
+	font-size: 14px;
 	color: $gray-dark-300;
 	font-style: italic;
 	resize: none;

diff --git a/tinymce-per-block/src/blocks/quote-block/form.js b/tinymce-per-block/src/blocks/quote-block/form.js
@@ -44,12 +44,27 @@ export default class QuoteBlockForm extends Component {
 
 	moveToContent = () => {
 		this.content.focus();
-	}
+	};
 
 	render() {
-		const { block, setChildren, setAttributes, moveUp, moveDown, remove, mergeWithPrevious } = this.props;
+		const { block, setChildren, setAttributes, moveUp, moveDown, remove, mergeWithPrevious, appendBlock } = this.props;
 		const { children } = block;
 		const cite = block.attrs.cite || '';
+		const splitValue = ( left, right ) => {
+			setAttributes( { cite: left } );
+			appendBlock( {
+				type: 'WP_Block',
+				blockType: 'paragraph',
+				attrs: {},
+				startText: '<!-- wp:paragraph -->',
+				endText: '<!-- /wp -->',
+				rawContent: '<!-- wp:paragraph -->' + right + '<!-- /wp -->',
+				children: [ {
+					type: 'Text',
+					value: right
+				} ]
+			} );
+		};
 
 		return (
 			<div className="quote-block__form">
@@ -72,6 +87,7 @@ export default class QuoteBlockForm extends Component {
 						removePrevious={ this.moveToContent }
 						moveDown={ moveDown }
 						value={ cite }
+						splitValue={ splitValue }
 						onChange={ ( value ) => setAttributes( { cite: value } ) }
 						placeholder="Enter a cite"
 					/>

diff --git a/tinymce-per-block/src/external/wp-blocks/editable/index.js b/tinymce-per-block/src/external/wp-blocks/editable/index.js
@@ -23,7 +23,7 @@ function initialize( node, inline, onSetup ) {
 	};
 
 	if ( inline ) {
-		config.valid_elements = 'p,br,b,i,strong,em';
+		config.valid_elements = '#p,br,b,i,strong,em';
 	}
 
 	tinymce.init( config );

diff --git a/tinymce-per-block/src/index.js b/tinymce-per-block/src/index.js
@@ -14,6 +14,7 @@ import { getBlock } from 'wp-blocks';
 import 'assets/stylesheets/main.scss';
 import 'blocks/text-block';
 import 'blocks/image-block';
+import 'blocks/image-caption-block';
 import 'blocks/heading-block';
 import 'blocks/paragraph-block';
 import 'blocks/quote-block';