diff --git a/tinymce-per-block/index.html b/tinymce-per-block/index.html index 8747e70c3beda2..e8ad515b68a152 100644 --- a/tinymce-per-block/index.html +++ b/tinymce-per-block/index.html @@ -7,7 +7,7 @@
diff --git a/tinymce-per-block/src/assets/stylesheets/main.scss b/tinymce-per-block/src/assets/stylesheets/main.scss index 500adbb2a6b725..62715fcaf35d66 100644 --- 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 new file mode 100644 index 00000000000000..bfd49b970ab90b --- /dev/null +++ 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 new file mode 100644 index 00000000000000..c822b1848b8b48 --- /dev/null +++ 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: '', + endText: '', + rawContent: '' + right + '', + children: [ { + type: 'Text', + value: right + } ] + } ); + }; + + return ( +
+ +
+ setAttributes( { caption: value } ) } + placeholder="Enter a caption" + /> +
+
+ ); + } +} diff --git a/tinymce-per-block/src/blocks/image-caption-block/index.js b/tinymce-per-block/src/blocks/image-caption-block/index.js new file mode 100644 index 00000000000000..2821ee3f20d5a3 --- /dev/null +++ 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 index 1e14e3522234fc..6c932743f6b4eb 100644 --- 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 index 42fd11912d9937..c754d58733a599 100644 --- 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: '', + endText: '', + rawContent: '' + right + '', + children: [ { + type: 'Text', + value: right + } ] + } ); + }; return (
@@ -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 index 329223d4bf206c..b22041b8b47314 100644 --- 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 index 287ba6453a02c6..8b56e3e0b8e651 100644 --- 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';