TinyMCE per block: Fix Inline inserter (#213)

WordPress · Mar 8, 2017 · 6526487 · 6526487
1 parent 3f4e725
commit 6526487
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 14 deletions.
diff --git a/tinymce-per-block/src/blocks/quote-block/_style.scss b/tinymce-per-block/src/blocks/quote-block/_style.scss
@@ -6,18 +6,15 @@
 	color: inherit;
 	font-weight: 300;
 	font-size: 20px;
-	border-left: 4px solid black;
-	margin-left: -20px;
-	padding-left: 20px;
 	font-style: italic;
 	p {
 		padding: 0;
 		margin: 0;
 	}
 }
 
-.quote-block__cite textarea,
-.quote-block__cite .textarea-mirror {
+.quote-block__cite,
+.quote-block__cite {
 	width: 100%;
 	border: none;
 	font: inherit;
@@ -27,11 +24,10 @@
 	color: $gray-dark-300;
 	font-style: italic;
 	resize: none;
+}
+
+.quote-block__form {
 	border-left: 4px solid black;
 	margin-left: -20px;
 	padding-left: 20px;
-
-	&:focus {
-		outline: 0;
-	}
 }
diff --git a/tinymce-per-block/src/blocks/text-block/form.js b/tinymce-per-block/src/blocks/text-block/form.js
@@ -37,7 +37,7 @@ export default class TextBlockForm extends Component {
 		};
 
 		return (
-			<div>
+			<div className="text-block__form">
 				{ isSelected && <BlockArrangement block={ block } first={ first } last={ last }
 					moveBlockUp={ moveBlockUp } moveBlockDown={ moveBlockDown } /> }
 				{ isSelected &&
@@ -56,10 +56,11 @@ export default class TextBlockForm extends Component {
 					</div>
 				}
 
-				<div className="text-block__form" style={ style } onClick={ select }>
-					{ ! block.content.trim() && ! isSelected && focusConfig &&
-						<InserterButton onAdd={ ( id ) => replace( id ) } />
-					}
+				{ ! block.content.trim() && ! isSelected && focusConfig &&
+					<InserterButton onAdd={ ( id ) => replace( id ) } />
+				}
+
+				<div style={ style } onClick={ select }>
 					<InlineTextBlockForm
 						ref={ this.bindForm }
 						{ ...this.props }