Fix: Display HTML in titles of latest posts block.#13622
Fix: Display HTML in titles of latest posts block.#13622jorgefilipecosta merged 1 commit intomasterfrom
Conversation
| { displayPosts.map( ( post, i ) => | ||
| <li key={ i }> | ||
| <a href={ post.link } target="_blank">{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)' ) }</a> | ||
| <RichText.Content |
There was a problem hiding this comment.
I’m not certain that RichText.Content is a perfect fit here. It looks like all you need is to wrap the title with RawText component from element package.
There was a problem hiding this comment.
Hi @gziolo we don't have a RawText component in the element package but I assumed you wanted to refer the RawHTML component and I updated the code to use it.
c2c1f8d to
4b0a4bd
Compare
29f00e6 to
54f7420
Compare
| '<li><a href="%1$s">%2$s</a>', | ||
| esc_url( get_permalink( $post ) ), | ||
| esc_html( $title ) | ||
| $title |
There was a problem hiding this comment.
Is it safe? This is also used to render it on the frontend.
There was a problem hiding this comment.
Is it safe? This is also used to render it on the frontend.
I think it's good to be prudent of, but in this instance I believe it's okay, given the following security consideration notes:
https://codex.wordpress.org/Function_Reference/the_title#Security_considerations
There was a problem hiding this comment.
Thanks for sharing. That makes this code completely valid.
| <RawHTML> | ||
| { | ||
| post.title.rendered.trim() || | ||
| __( '(Untitled)' ) |
There was a problem hiding this comment.
Depending whether we consider translation as trusted strings†, it would be unsafe to allow this to be inserted in RawHTML
If the latter is unavoidable, and since translations should not be considered trusted strings, be sure to sanitize the result before echoing.
https://codex.wordpress.org/I18n_for_WordPress_Developers#HTML
† I've heard conflicting reports that they are "safe". In this case, it seems easy enough to just consider whether the title exists before deciding to output as RawHTML.
{
post.title.rendered.trim() ?
<RawHTML>{ post.title.rendered }</RawHTML> :
__( '(Untitled)' )
}| '<li><a href="%1$s">%2$s</a>', | ||
| esc_url( get_permalink( $post ) ), | ||
| esc_html( $title ) | ||
| $title |
There was a problem hiding this comment.
Is it safe? This is also used to render it on the frontend.
I think it's good to be prudent of, but in this instance I believe it's okay, given the following security consideration notes:
https://codex.wordpress.org/Function_Reference/the_title#Security_considerations
gziolo
left a comment
There was a problem hiding this comment.
This code looks good. I would suggest addressing the comment from @aduth https://github.com/WordPress/gutenberg/pull/13622/files#r257818347 before merging.
Thanks for working on this tricky issue 🙇
54f7420 to
cc2bd02
Compare
| </li> | ||
| ) } | ||
| { displayPosts.map( ( post, i ) => { | ||
| const titleTrimmed = post.title.rendered.trim(); |

Description
Fixes: #13603
This PR makes sure if the title of a post contains HTML tags, the HTML tags are rendered correctly in the frontend and in the editor of latest posts block.
How has this been tested?
Create a new post write "Hello World!" in the title.
Publish the post.
Create another post add the latest posts block there. Verify the HTML in the title of the post we created before is correctly displayed in the block.
Publish the post verify the HTML is also correctly displayed on the frontend.