RichText: Ensure multiline prop is either "p" or "li" (#10664)

* Ensure multiline prop is either p or li * Make booleans work
WordPress · Oct 17, 2018 · 995dc3c · 995dc3c
1 parent 5780665
commit 995dc3c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 31 deletions.
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
@@ -77,7 +77,7 @@ class PullQuoteEdit extends Component {
 					} ) }>
 					<blockquote style={ blockquoteStyle } className={ blockquoteClasses }>
 						<RichText
-							multiline="p"
+							multiline
 							value={ value }
 							onChange={
 								( nextValue ) => setAttributes( {

diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
@@ -108,7 +108,7 @@ export const settings = {
 		return (
 			<figure className={ figureClass } style={ figureStyles }>
 				<blockquote className={ blockquoteClasses } style={ blockquoteStyle } >
-					<RichText.Content value={ value } multiline="p" />
+					<RichText.Content value={ value } multiline />
 					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 				</blockquote>
 			</figure>
@@ -123,7 +123,7 @@ export const settings = {
 			const { value, citation } = attributes;
 			return (
 				<blockquote>
-					<RichText.Content value={ value } multiline="p" />
+					<RichText.Content value={ value } multiline />
 					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 				</blockquote>
 			);
@@ -146,7 +146,7 @@ export const settings = {
 
 			return (
 				<blockquote className={ `align${ align }` }>
-					<RichText.Content value={ value } />
+					<RichText.Content value={ value } multiline />
 					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
 				</blockquote>
 			);

diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
@@ -105,6 +105,7 @@ export const settings = {
 							} )
 						),
 			},
+
 			{
 				type: 'block',
 				blocks: [ 'core/heading' ],
@@ -151,7 +152,7 @@ export const settings = {
 				</BlockControls>
 				<blockquote className={ className } style={ { textAlign: align } }>
 					<RichText
-						multiline="p"
+						multiline
 						value={ value }
 						onChange={
 							( nextValue ) => setAttributes( {
@@ -191,7 +192,7 @@ export const settings = {
 
 		return (
 			<blockquote style={ { textAlign: align ? align : null } }>
-				<RichText.Content multiline="p" value={ value } />
+				<RichText.Content multiline value={ value } />
 				{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 			</blockquote>
 		);
@@ -234,7 +235,7 @@ export const settings = {
 						className={ style === 2 ? 'is-large' : '' }
 						style={ { textAlign: align ? align : null } }
 					>
-						<RichText.Content multiline="p" value={ value } />
+						<RichText.Content multiline value={ value } />
 						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
 					</blockquote>
 				);
@@ -261,7 +262,7 @@ export const settings = {
 						className={ `blocks-quote-style-${ style }` }
 						style={ { textAlign: align ? align : null } }
 					>
-						<RichText.Content multiline="p" value={ value } />
+						<RichText.Content multiline value={ value } />
 						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
 					</blockquote>
 				);

diff --git a/packages/editor/src/components/rich-text/README.md b/packages/editor/src/components/rich-text/README.md
@@ -27,9 +27,9 @@ Render a rich [`contenteditable` input](https://developer.mozilla.org/en-US/docs
 *Optional.* Placeholder text to show when the field is empty, similar to the
   [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
 
-### `multiline: String`
+### `multiline: Boolean | String`
 
-*Optional.* By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to `p` to create new paragraphs on <kbd>Enter</kbd>.
+*Optional.* By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on <kbd>Enter</kbd>.
 
 ### `onSplit( before: Array|String, after: Array|String, ...blocks: Object ): Function`
 

diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -76,6 +76,10 @@ export class RichText extends Component {
 	constructor( { value, onReplace, multiline } ) {
 		super( ...arguments );
 
+		if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
+			this.multilineTag = multiline === true ? 'p' : multiline;
+		}
+
 		this.onInit = this.onInit.bind( this );
 		this.getSettings = this.getSettings.bind( this );
 		this.onSetup = this.onSetup.bind( this );
@@ -104,7 +108,11 @@ export class RichText extends Component {
 
 		this.savedContent = value;
 		this.containerRef = createRef();
-		this.patterns = getPatterns( { onReplace, multiline, valueToFormat: this.valueToFormat } );
+		this.patterns = getPatterns( {
+			onReplace,
+			multilineTag: this.multilineTag,
+			valueToFormat: this.valueToFormat,
+		} );
 		this.enterPatterns = getBlockTransforms( 'from' ).filter( ( { type, trigger } ) =>
 			type === 'pattern' && trigger === 'enter'
 		);
@@ -141,7 +149,7 @@ export class RichText extends Component {
 	getSettings( settings ) {
 		settings = {
 			...settings,
-			forced_root_block: this.props.multiline || false,
+			forced_root_block: this.multilineTag || false,
 			// Allow TinyMCE to keep one undo level for comparing changes.
 			// Prevent it otherwise from accumulating any history.
 			custom_undo_redo_levels: 1,
@@ -229,13 +237,12 @@ export class RichText extends Component {
 	}
 
 	createRecord() {
-		const { multiline } = this.props;
 		const range = window.getSelection().getRangeAt( 0 );
 
 		return create( {
 			element: this.editableRef,
 			range,
-			multilineTag: multiline,
+			multilineTag: this.multilineTag,
 			removeNode: ( node ) => node.getAttribute( 'data-mce-bogus' ) === 'all',
 			unwrapNode: ( node ) => !! node.getAttribute( 'data-mce-bogus' ),
 			removeAttribute: ( attribute ) => attribute.indexOf( 'data-mce-' ) === 0,
@@ -244,9 +251,7 @@ export class RichText extends Component {
 	}
 
 	applyRecord( record ) {
-		const { multiline } = this.props;
-
-		apply( record, this.editableRef, multiline );
+		apply( record, this.editableRef, this.multilineTag );
 	}
 
 	isEmpty() {
@@ -613,7 +618,7 @@ export class RichText extends Component {
 				}
 			}
 
-			if ( this.props.multiline ) {
+			if ( this.multilineTag ) {
 				const record = this.getRecord();
 
 				if ( this.props.onSplit && isEmptyLine( record ) ) {
@@ -797,20 +802,18 @@ export class RichText extends Component {
 	}
 
 	formatToValue( value ) {
-		const { format, multiline } = this.props;
-
 		// Handle deprecated `children` and `node` sources.
 		if ( Array.isArray( value ) ) {
 			return create( {
 				html: children.toHTML( value ),
-				multilineTag: multiline,
+				multilineTag: this.multilineTag,
 			} );
 		}
 
-		if ( format === 'string' ) {
+		if ( this.props.format === 'string' ) {
 			return create( {
 				html: value,
-				multilineTag: multiline,
+				multilineTag: this.multilineTag,
 			} );
 		}
 
@@ -824,15 +827,13 @@ export class RichText extends Component {
 	}
 
 	valueToFormat( { formats, text } ) {
-		const { format, multiline } = this.props;
-
 		// Handle deprecated `children` and `node` sources.
 		if ( this.usedDeprecatedChildrenSource ) {
-			return children.fromDOM( unstableToDom( { formats, text }, multiline ).body.childNodes );
+			return children.fromDOM( unstableToDom( { formats, text }, this.multilineTag ).body.childNodes );
 		}
 
-		if ( format === 'string' ) {
-			return toHTMLString( { formats, text }, multiline );
+		if ( this.props.format === 'string' ) {
+			return toHTMLString( { formats, text }, this.multilineTag );
 		}
 
 		return { formats, text };
@@ -848,12 +849,12 @@ export class RichText extends Component {
 			inlineToolbar = false,
 			formattingControls,
 			placeholder,
-			multiline: MultilineTag,
 			keepPlaceholderOnFocus = false,
 			isSelected,
 			autocompleters,
 		} = this.props;
 
+		const MultilineTag = this.multilineTag;
 		const ariaProps = pickAriaProps( this.props );
 
 		// Generating a key that includes `tagName` ensures that if the tag
@@ -920,7 +921,7 @@ export class RichText extends Component {
 								key={ key }
 								onPaste={ this.onPaste }
 								onInput={ this.onInput }
-								multilineTag={ MultilineTag }
+								multilineTag={ this.multilineTag }
 								setRef={ this.setRef }
 							/>
 							{ isPlaceholderVisible &&
@@ -991,8 +992,13 @@ const RichTextContainer = compose( [
 	withSafeTimeout,
 ] )( RichText );
 
-RichTextContainer.Content = ( { value, tagName: Tag, multiline: MultilineTag, ...props } ) => {
+RichTextContainer.Content = ( { value, tagName: Tag, multiline, ...props } ) => {
 	let html = value;
+	let MultilineTag;
+
+	if ( multiline === true || multiline === 'p' || multiline === 'li' ) {
+		MultilineTag = multiline === true ? 'p' : multiline;
+	}
 
 	// Handle deprecated `children` and `node` sources.
 	if ( Array.isArray( value ) ) {