Skip to content

RichText: Add the RichText.Content component to be used in conjunction with RichText #6274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
youknowriad merged 4 commits into from
Apr 23, 2018
Merged

RichText: Add the RichText.Content component to be used in conjunction with RichText #6274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
90852ca
RichText: Add the RichText.Content component to be used in conjunctio…
youknowriad Apr 19, 2018
f89908f
Support tagName and extra props in RichText.Content
youknowriad Apr 20, 2018
9865287
Use RichText.Content in quotes as well
youknowriad Apr 20, 2018
678e52e
Fix unit tests
youknowriad Apr 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blocks/library/audio/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export const settings = {
return (
<figure>
<audio controls="controls" src={ src } />
{ caption && caption.length > 0 && <figcaption>{ caption }</figcaption> }
{ caption && caption.length > 0 && <RichText.Content tagName="figcaption" value={ caption } /> }
</figure>
);
},
Expand Down
21 changes: 15 additions & 6 deletions blocks/library/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,9 +216,14 @@ export const settings = {

return (
<div className={ `align${ align }` }>
<a className={ linkClass } href={ url } title={ title } style={ buttonStyle }>
{ text }
</a>
<RichText.Content
tagName="a"
className={ linkClass }
href={ url }
title={ title }
style={ buttonStyle }
value={ text }
/>
</div>
);
},
Expand All @@ -231,9 +236,13 @@ export const settings = {

return (
<div className={ `align${ align }` } style={ { backgroundColor: color } }>
<a href={ url } title={ title } style={ { color: textColor } }>
{ text }
</a>
<RichText.Content
tagName="a"
href={ url }
title={ title }
style={ { color: textColor } }
value={ text }
/>
</div>
);
},
Expand Down
4 changes: 2 additions & 2 deletions blocks/library/cover-image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export const settings = {
return (
<div className={ classes } style={ style }>
{ title && title.length > 0 && (
<p className="wp-block-cover-image-text">{ title }</p>
<RichText.Content tagName="p" className="wp-block-cover-image-text" value={ title } />
) }
</div>
);
Expand Down Expand Up @@ -264,7 +264,7 @@ export const settings = {

return (
<section className={ classes } style={ style }>
<h2>{ title }</h2>
<RichText.Content tagName="h2" value={ title } />
</section>
);
},
Expand Down
2 changes: 1 addition & 1 deletion blocks/library/embed/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ 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 && <RichText.Content tagName="figcaption" value={ caption } /> }
</figure>
);
},
Expand Down
5 changes: 4 additions & 1 deletion blocks/library/gallery/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -186,7 +187,9 @@ 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 && (
<RichText.Content tagName="figcaption" value={ image.caption } />
) }
</figure>
</li>
);
Expand Down
9 changes: 5 additions & 4 deletions blocks/library/heading/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,12 +168,13 @@ export const settings = {

save( { attributes } ) {
const { align, nodeName, content } = attributes;
const Tag = nodeName.toLowerCase();

return (
<Tag style={ { textAlign: align } } >
{ content }
</Tag>
<RichText.Content
tagName={ nodeName.toLowerCase() }
style={ { textAlign: align } }
value={ content }
/>
);
},
};
5 changes: 3 additions & 2 deletions blocks/library/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -173,7 +174,7 @@ 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 && <RichText.Content tagName="figcaption" value={ caption } /> }
</figure>
);
},
Expand All @@ -197,7 +198,7 @@ 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 && <RichText.Content tagName="figcaption" value={ caption } /> }
</figure>
);
},
Expand Down
8 changes: 3 additions & 5 deletions blocks/library/list/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand Down Expand Up @@ -305,10 +305,8 @@ export const settings = {
save( { attributes } ) {
const { nodeName, values } = attributes;

return createElement(
nodeName.toLowerCase(),
null,
values
return (
<RichText.Content tagName={ nodeName.toLowerCase() } value={ values } />
);
},
};
9 changes: 8 additions & 1 deletion blocks/library/paragraph/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -435,6 +435,13 @@ export const settings = {
textAlign: align,
};

return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
return (
<RichText.Content
tagName="p"
style={ styles }
className={ className ? className : undefined }
value={ content }
/>
);
},
};
2 changes: 1 addition & 1 deletion blocks/library/preformatted/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,6 @@ export const settings = {
save( { attributes } ) {
const { content } = attributes;

return <pre>{ content }</pre>;
return <RichText.Content tagName="pre" value={ content } />;
},
};
16 changes: 4 additions & 12 deletions blocks/library/pullquote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,8 @@ export const settings = {

return (
<blockquote className={ `align${ align }` }>
{ value && value.map( ( paragraph, i ) =>
<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
) }
{ citation && citation.length > 0 && (
<cite>{ citation }</cite>
) }
<RichText.Content value={ toRichTextValue( value ) } />
{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
</blockquote>
);
},
Expand All @@ -146,12 +142,8 @@ export const settings = {

return (
<blockquote className={ `align${ align }` }>
{ value && value.map( ( paragraph, i ) =>
<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
) }
{ citation && citation.length > 0 && (
<footer>{ citation }</footer>
) }
<RichText.Content value={ toRichTextValue( value ) } />
{ citation && citation.length > 0 && <RichText.Content tagName="footer" value={ citation } /> }
</blockquote>
);
},
Expand Down
16 changes: 4 additions & 12 deletions blocks/library/quote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,12 +242,8 @@ export const settings = {
className={ style === 2 ? 'is-large' : '' }
style={ { textAlign: align ? align : null } }
>
{ value.map( ( paragraph, i ) => (
<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
) ) }
{ citation && citation.length > 0 && (
<cite>{ citation }</cite>
) }
<RichText.Content value={ toRichTextValue( value ) } />
{ citation && citation.length > 0 && <RichText.Content tagName="cite" value={ citation } /> }
</blockquote>
);
},
Expand All @@ -271,12 +267,8 @@ export const settings = {
className={ `blocks-quote-style-${ style }` }
style={ { textAlign: align ? align : null } }
>
{ value.map( ( paragraph, i ) => (
<p key={ i }>{ paragraph.children && paragraph.children.props.children }</p>
) ) }
{ citation && citation.length > 0 && (
<footer>{ citation }</footer>
) }
<RichText.Content value={ toRichTextValue( value ) } />
{ citation && citation.length > 0 && <RichText.Content tagName="footer" value={ citation } /> }
</blockquote>
);
},
Expand Down
8 changes: 7 additions & 1 deletion blocks/library/subhead/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@ export const settings = {
save( { attributes, className } ) {
const { content } = attributes;

return <p className={ className }>{ content }</p>;
return (
<RichText.Content
tagName="p"
className={ className }
value={ content }
/>
);
},
};
5 changes: 2 additions & 3 deletions blocks/library/table/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -84,9 +85,7 @@ export const settings = {
save( { attributes } ) {
const { content, align } = attributes;
return (
<table className={ align ? `align${ align }` : null }>
{ content }
</table>
<RichText.Content tagName="table" className={ align ? `align${ align }` : null } value={ content } />
);
},
};
2 changes: 1 addition & 1 deletion blocks/library/text-columns/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ 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>
<RichText.Content tagName="p" value={ content && content[ index ].children } />
</div>
) }
</div>
Expand Down
8 changes: 7 additions & 1 deletion blocks/library/verse/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,12 @@ export const settings = {
},

save( { attributes, className } ) {
return <pre className={ className }>{ attributes.content }</pre>;
return (
<RichText.Content
tagName="pre"
className={ className }
value={ attributes.content }
/>
);
},
};
2 changes: 1 addition & 1 deletion blocks/library/video/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ 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 && <RichText.Content tagName="figcaption" value={ caption } /> }
Copy link
Member

@ellatrix ellatrix Apr 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just wondering, but would it be good to incorporate the empty check in RichText.Content? This seems to be a common pattern. Even if the block registration has no such check, I don't think there are any cases where it makes sense to render an empty element in save context.

Copy link
Contributor Author

@youknowriad youknowriad Apr 23, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm on the fence here because I wonder if it's possible sometimes to render the container tag without its content ( like an empty list item or something). Let's keep it as is for now.

</figure>
);
},
Expand Down
17 changes: 16 additions & 1 deletion blocks/rich-text/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -95,6 +100,12 @@ wp.blocks.registerBlockType( /* ... */, {
}
} );
},

save: function() {
return wp.element.createElement( wp.blocks.RichText.Content, {
tagName: 'h2', value: props.attributes.content
} );
}
} );
```
{% ESNext %}
Expand Down Expand Up @@ -122,6 +133,10 @@ registerBlockType( /* ... */, {
/>
);
},

save( { attributes } ) {
return <RichText.Content tagName="h2" value={ attributes.content } />;
}
} );
```
{% end %}
{% end %}
24 changes: 22 additions & 2 deletions blocks/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -876,7 +876,7 @@ RichText.defaultProps = {
format: 'element',
};

export default compose( [
const RichTextContainer = compose( [
Copy link
Member

@aduth aduth Apr 19, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we just reassign RichText here? RichText = compose( [ ] )( RichText );

Copy link
Contributor Author

@youknowriad youknowriad Apr 20, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was not possible because we use the inner RichText in unit tests.

withBlockEditContext,
withSelect( ( select, { isSelected, blockEditContext } ) => {
const { isViewportMatch = identity } = select( 'core/viewport' ) || {};
Expand All @@ -888,3 +888,23 @@ export default compose( [
} ),
withSafeTimeout,
] )( RichText );

RichTextContainer.Content = ( { value, format = 'element', tagName: Tag, ...props } ) => {
let children;
switch ( format ) {
case 'string':
children = <RawHTML>{ value }</RawHTML>;
break;
default:
children = value;
break;
}

if ( Tag ) {
return <Tag { ...props }>{ children }</Tag>;
}

return children;
};

export default RichTextContainer;
Loading