Merge pull request #668 from WordPress/add/editable-inline

Add "inline" prop to Editable component

blocks/components/editable/index.js

@@ -320,7 +320,16 @@ export default class Editable extends wp.element.Component {
 	}
 
 	render() {
-		const { tagName, style, value, focus, className, showAlignments = false, formattingControls } = this.props;
+		const {
+			tagName,
+			style,
+			value,
+			focus,
+			className,
+			showAlignments = false,
+			inline,
+			formattingControls
+		} = this.props;
 		const classes = classnames( 'blocks-editable', className );
 
 		// Generating a key that includes `tagName` ensures that if the tag
@@ -335,6 +344,9 @@ export default class Editable extends wp.element.Component {
 				style={ style }
 				className={ classes }
 				defaultValue={ value }
+				settings={ {
+					forced_root_block: inline ? false : 'p'
+				} }
 				key={ key } />
 		);
 

blocks/components/editable/style.scss

@@ -26,10 +26,7 @@ figcaption.blocks-editable {
 	margin-top: 0.5em;
 	color: $dark-gray-100;
 	text-align: center;
-
-	p {
-		font-size: $default-font-size;
-	}
+	font-size: $default-font-size;
 }
 
 

blocks/components/editable/tinymce.js

@@ -21,6 +21,8 @@ export default class TinyMCE extends wp.element.Component {
 	}
 
 	initialize() {
+		const { settings, focus } = this.props;
+
 		tinymce.init( {
 			target: this.editorNode,
 			theme: false,
@@ -35,10 +37,11 @@ export default class TinyMCE extends wp.element.Component {
 			},
 			formats: {
 				strikethrough: { inline: 'del' }
-			}
+			},
+			...settings
 		} );
 
-		if ( this.props.focus ) {
+		if ( focus ) {
 			this.editorNode.focus();
 		}
 	}

blocks/library/button/index.js

@@ -74,6 +74,7 @@ registerBlock( 'core/button', {
 					value={ text }
 					onFocus={ setFocus }
 					onChange={ ( value ) => setAttributes( { text: value } ) }
+					inline
 				/>
 				{ focus &&
 					<form

blocks/library/embed/index.js

@@ -55,7 +55,9 @@ registerBlock( 'core/embed', {
 						value={ caption }
 						focus={ focus }
 						onFocus={ setFocus }
-						onChange={ ( value ) => setAttributes( { caption: value } ) } />
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						inline
+					/>
 				) : null }
 			</figure>
 		);

blocks/library/heading/index.js

@@ -104,6 +104,7 @@ registerBlock( 'core/heading', {
 				onFocus={ setFocus }
 				onChange={ ( value ) => setAttributes( { content: value } ) }
 				onMerge={ mergeWithPrevious }
+				inline
 			/>
 		);
 	},

blocks/library/image/index.js

@@ -101,7 +101,9 @@ registerBlock( 'core/image', {
 						value={ caption }
 						focus={ focus }
 						onFocus={ setFocus }
-						onChange={ ( value ) => setAttributes( { caption: value } ) } />
+						onChange={ ( value ) => setAttributes( { caption: value } ) }
+						inline
+					/>
 				) : null }
 			</figure>
 		);

blocks/library/quote/index.js

@@ -121,18 +121,18 @@ registerBlock( 'core/quote', {
 					showAlignments
 				/>
 				{ ( citation || !! focus ) && (
-					<footer>
-						<Editable
-							value={ citation }
-							onChange={
-								( nextCitation ) => setAttributes( {
-									citation: nextCitation
-								} )
-							}
-							focus={ focusedEditable === 'citation' ? focus : null }
-							onFocus={ () => setFocus( { editable: 'citation' } ) }
-						/>
-					</footer>
+					<Editable
+						tagName="footer"
+						value={ citation }
+						onChange={
+							( nextCitation ) => setAttributes( {
+								citation: nextCitation
+							} )
+						}
+						focus={ focusedEditable === 'citation' ? focus : null }
+						onFocus={ () => setFocus( { editable: 'citation' } ) }
+						inline
+					/>
 				) }
 			</blockquote>
 		);

post-content.js

@@ -74,7 +74,7 @@ window._wpGutenbergPost = {
 			'<!-- /wp:core/text -->',
 
 			'<!-- wp:core/quote style="1" -->',
-			'<blockquote class="blocks-quote-style-1"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><footer><p>Matt Mullenweg, 2017</p></footer></blockquote>',
+			'<blockquote class="blocks-quote-style-1"><p>The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.</p><footer>Matt Mullenweg, 2017</footer></blockquote>',
 			'<!-- /wp:core/quote -->',
 
 			'<!-- wp:core/text -->',
@@ -86,7 +86,7 @@ window._wpGutenbergPost = {
 			'<!-- /wp:core/text -->',
 
 			'<!-- wp:core/quote style="2" -->',
-			'<blockquote class="blocks-quote-style-2"><p>There is no greater agony than bearing an untold story inside you.</p><footer><p>Maya Angelou</p></footer></blockquote>',
+			'<blockquote class="blocks-quote-style-2"><p>There is no greater agony than bearing an untold story inside you.</p><footer>Maya Angelou</footer></blockquote>',
 			'<!-- /wp:core/quote -->',
 
 			'<!-- wp:core/separator -->',