RichText: Add the RichText.Content component to be used in conjunctio…

…n with RichText

blocks/library/audio/index.js

@@ -169,7 +169,11 @@ export const settings = {
 		return (
 			<figure>
 				<audio controls="controls" src={ src } />
-				{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
+				{ caption && caption.length > 0 && (
+					<figcaption>
+						<RichText.Content>{ caption }</RichText.Content>
+					</figcaption>
+				) }
 			</figure>
 		);
 	},

blocks/library/button/index.js

@@ -217,7 +217,7 @@ export const settings = {
 		return (
 			<div className={ `align${ align }` }>
 				<a className={ linkClass } href={ url } title={ title } style={ buttonStyle }>
-					{ text }
+					<RichText.Content>{ text }</RichText.Content>
 				</a>
 			</div>
 		);
@@ -232,7 +232,7 @@ export const settings = {
 			return (
 				<div className={ `align${ align }` } style={ { backgroundColor: color } }>
 					<a href={ url } title={ title } style={ { color: textColor } }>
-						{ text }
+						<RichText.Content>{ text }</RichText.Content>
 					</a>
 				</div>
 			);

blocks/library/cover-image/index.js

@@ -233,7 +233,9 @@ export const settings = {
 		return (
 			<div className={ classes } style={ style }>
 				{ title && title.length > 0 && (
-					<p className="wp-block-cover-image-text">{ title }</p>
+					<p className="wp-block-cover-image-text">
+						<RichText.Content>{ title }</RichText.Content>
+					</p>
 				) }
 			</div>
 		);
@@ -264,7 +266,9 @@ export const settings = {
 
 			return (
 				<section className={ classes } style={ style }>
-					<h2>{ title }</h2>
+					<h2>
+						<RichText.Content>{ title }</RichText.Content>
+					</h2>
 				</section>
 			);
 		},

blocks/library/embed/index.js

@@ -250,7 +250,11 @@ function getEmbedBlockSettings( { title, description, icon, category = 'embed',
 			return (
 				<figure className={ embedClassName }>
 					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
-					{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
+					{ caption && caption.length > 0 && (
+						<figcaption>
+							<RichText.Content>{ caption }</RichText.Content>
+						</figcaption>
+					) }
 				</figure>
 			);
 		},

blocks/library/gallery/index.js

@@ -15,6 +15,7 @@ import { mediaUpload } from '@wordpress/utils';
 import './editor.scss';
 import './style.scss';
 import { createBlock } from '../../api';
+import RichText from '../../rich-text';
 import { default as GalleryBlock, defaultColumnsNumber } from './block';
 
 const blockAttributes = {
@@ -186,7 +187,11 @@ export const settings = {
 						<li key={ image.id || image.url } className="blocks-gallery-item">
 							<figure>
 								{ href ? <a href={ href }>{ img }</a> : img }
-								{ image.caption && image.caption.length > 0 && <figcaption>{ image.caption }</figcaption> }
+								{ image.caption && image.caption.length > 0 && (
+									<figcaption>
+										<RichText.Content>{ image.caption }</RichText.Content>
+									</figcaption>
+								) }
 							</figure>
 						</li>
 					);

blocks/library/heading/index.js

@@ -172,7 +172,7 @@ export const settings = {
 
 		return (
 			<Tag style={ { textAlign: align } } >
-				{ content }
+				<RichText.Content>{ content }</RichText.Content>
 			</Tag>
 		);
 	},

blocks/library/image/index.js

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import './style.scss';
 import './editor.scss';
 import { createBlock, getBlockAttributes, getBlockType } from '../../api';
+import RichText from '../../rich-text';
 import ImageBlock from './block';
 
 export const name = 'core/image';
@@ -173,7 +174,11 @@ export const settings = {
 		return (
 			<figure className={ align ? `align${ align }` : null }>
 				{ href ? <a href={ href }>{ image }</a> : image }
-				{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
+				{ caption && caption.length > 0 && (
+					<figcaption>
+						<RichText.Content>{ caption }</RichText.Content>
+					</figcaption>
+				) }
 			</figure>
 		);
 	},
@@ -197,7 +202,11 @@ export const settings = {
 				return (
 					<figure className={ align ? `align${ align }` : null } style={ figureStyle }>
 						{ href ? <a href={ href }>{ image }</a> : image }
-						{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
+						{ caption && caption.length > 0 && (
+							<figcaption>
+								<RichText.Content>{ caption }</RichText.Content>
+							</figcaption>
+						) }
 					</figure>
 				);
 			},

blocks/library/list/index.js

@@ -6,7 +6,7 @@ import { find, compact, get, initial, last, isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createElement, Fragment } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -304,11 +304,12 @@ export const settings = {
 
 	save( { attributes } ) {
 		const { nodeName, values } = attributes;
+		const Tag = nodeName.toLowerCase();
 
-		return createElement(
-			nodeName.toLowerCase(),
-			null,
-			values
+		return (
+			<Tag>
+				<RichText.Content>{ values }</RichText.Content>
+			</Tag>
 		);
 	},
 };

blocks/library/paragraph/index.js

@@ -435,6 +435,10 @@ export const settings = {
 			textAlign: align,
 		};
 
-		return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
+		return (
+			<p style={ styles } className={ className ? className : undefined }>
+				<RichText.Content>{ content }</RichText.Content>
+			</p>
+		);
 	},
 };

blocks/library/preformatted/index.js

@@ -79,6 +79,6 @@ export const settings = {
 	save( { attributes } ) {
 		const { content } = attributes;
 
-		return <pre>{ content }</pre>;
+		return <pre><RichText.Content>{ content }</RichText.Content></pre>;
 	},
 };

blocks/library/pullquote/index.js

@@ -125,7 +125,7 @@ export const settings = {
 					<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
 				) }
 				{ citation && citation.length > 0 && (
-					<cite>{ citation }</cite>
+					<cite><RichText.Content>{ citation }</RichText.Content></cite>
 				) }
 			</blockquote>
 		);
@@ -150,7 +150,7 @@ export const settings = {
 						<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
 					) }
 					{ citation && citation.length > 0 && (
-						<footer>{ citation }</footer>
+						<footer><RichText.Content>{ citation }</RichText.Content></footer>
 					) }
 				</blockquote>
 			);

blocks/library/quote/index.js

@@ -246,7 +246,9 @@ export const settings = {
 					<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
 				) ) }
 				{ citation && citation.length > 0 && (
-					<cite>{ citation }</cite>
+					<cite>
+						<RichText.Content>{ citation }</RichText.Content>
+					</cite>
 				) }
 			</blockquote>
 		);
@@ -275,7 +277,9 @@ export const settings = {
 							<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
 						) ) }
 						{ citation && citation.length > 0 && (
-							<footer>{ citation }</footer>
+							<footer>
+								<RichText.Content>{ citation }</RichText.Content>
+							</footer>
 						) }
 					</blockquote>
 				);

blocks/library/subhead/index.js

@@ -78,6 +78,10 @@ export const settings = {
 	save( { attributes, className } ) {
 		const { content } = attributes;
 
-		return <p className={ className }>{ content }</p>;
+		return (
+			<p className={ className }>
+				<RichText.Content>{ content }</RichText.Content>
+			</p>
+		);
 	},
 };

blocks/library/table/index.js

@@ -16,6 +16,7 @@ import './style.scss';
 import TableBlock from './table-block';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import RichText from '../../rich-text';
 
 export const name = 'core/table';
 
@@ -85,7 +86,7 @@ export const settings = {
 		const { content, align } = attributes;
 		return (
 			<table className={ align ? `align${ align }` : null }>
-				{ content }
+				<RichText.Content>{ content }</RichText.Content>
 			</table>
 		);
 	},

blocks/library/text-columns/index.js

@@ -122,7 +122,11 @@ export const settings = {
 			<div className={ `align${ width } columns-${ columns }` }>
 				{ times( columns, ( index ) =>
 					<div className="wp-block-column" key={ `column-${ index }` }>
-						<p>{ content && content[ index ].children }</p>
+						<p>
+							<RichText.Content>
+								{ content && content[ index ].children }
+							</RichText.Content>
+						</p>
 					</div>
 				) }
 			</div>

blocks/library/verse/index.js

@@ -70,6 +70,10 @@ export const settings = {
 	},
 
 	save( { attributes, className } ) {
-		return <pre className={ className }>{ attributes.content }</pre>;
+		return (
+			<pre className={ className }>
+				<RichText.Content>{ attributes.content }</RichText.Content>
+			</pre>
+		);
 	},
 };

blocks/library/video/index.js

@@ -194,7 +194,11 @@ export const settings = {
 
 			<figure className={ align ? `align${ align }` : null }>
 				{ src && <video controls src={ src } /> }
-				{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
+				{ caption && caption.length > 0 && (
+					<figcaption>
+						<RichText.Content>{ caption }</RichText.Content>
+					</figcaption>
+				) }
 			</figure>
 		);
 	},

blocks/rich-text/README.md

@@ -69,6 +69,11 @@ a traditional `input` field, usually when the user exits the field.
 
 *Optional.* A list of autocompleters to use instead of the default.
 
+## RichText.Content
+
+When using RichText in the edit function of blocks, the usage of `RichText.Content` is recommended in the save function of your blocks to save the correct HTML.
+
+
 ## Example
 
 {% codetabs %}
@@ -95,6 +100,12 @@ wp.blocks.registerBlockType( /* ... */, {
 			}
 		} );
 	},
+
+	save: function() {
+		return wp.element.createElement( 'h2, {},
+			wp.element.createElement( wp.blocks.RichText.Content, {}, props.attributes.content )
+		);
+	}
 } );
 ```
 {% ESNext %}
@@ -122,6 +133,14 @@ registerBlockType( /* ... */, {
 			/>
 		);
 	},
+
+	save( { attributes } ) {
+		return (
+			<h2>
+				<RichText.Content>{attributes.content}</RichText.Content>
+			</h2>
+		);
+	}
 } );
 ```
-{% end %}
+{% end %}

blocks/rich-text/index.js

@@ -18,7 +18,7 @@ import 'element-closest';
 /**
  * WordPress dependencies
  */
-import { Component, Fragment, compose } from '@wordpress/element';
+import { Component, Fragment, compose, RawHTML } from '@wordpress/element';
 import { keycodes, createBlobURL, isHorizontalEdge, getRectangleFromRange, getScrollContainer } from '@wordpress/utils';
 import { withSafeTimeout, Slot } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
@@ -876,7 +876,7 @@ RichText.defaultProps = {
 	format: 'element',
 };
 
-export default compose( [
+const RichTextContainer = compose( [
 	withBlockEditContext,
 	withSelect( ( select, { isSelected, blockEditContext } ) => {
 		const { isViewportMatch = identity } = select( 'core/viewport' ) || {};
@@ -888,3 +888,14 @@ export default compose( [
 	} ),
 	withSafeTimeout,
 ] )( RichText );
+
+RichTextContainer.Content = ( { children, format = 'element' } ) => {
+	switch ( format ) {
+		case 'string':
+			return <RawHTML>{ children }</RawHTML>;
+		default:
+			return children;
+	}
+};
+
+export default RichTextContainer;

docs/blocks/block-controls-toolbars-and-inspector.md

@@ -79,7 +79,9 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-04', {
 		var content = props.attributes.content,
 			alignment = props.attributes.alignment;
 
-		return el( 'p', { className: props.className, style: { textAlign: alignment } }, content );
+		return el( 'p', { className: props.className, style: { textAlign: alignment } },
+			el( RichText.Content, {}, content )
+		);
 	},
 } );
 ```
@@ -143,13 +145,17 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
 	save( { attributes, className } ) {
 		const { content, alignment } = attributes;
 
-		return <p className={ className } style={ { textAlign: alignment } }>{ content }</p>;
+		return (
+			<p className={ className } style={ { textAlign: alignment } }>
+				<RichText.Content>{ content }</RichText.Content>
+			</p>
+		);
 	},
 } );
 ```
 {% end %}
 
-Note that `BlockControls` is only visible when the block is currently selected. 
+Note that `BlockControls` is only visible when the block is currently selected.
 
 ## Inspector