Adding HTML to the end of every post with the Block Editor

Question

I'm converting my posts over to use the new Block Editor. In the past I added an icon to the end of every post to act as a signature and marker saying the article is over (like print magazines do).

I did it like this:

// Add Signature Image at End of Posts
add_filter('the_content','td_add_signature', 1);
function td_add_signature($text) {
  global $post;
  if(($post->post_type == 'post')) 
  $text .= '<span class="icon"></span>';
  return $text;
}

That would insert the 'span class=icon' right after the final period, before the closing paragraph tag.

Now, with the new Block Editor, it adds it after the final closing paragraph tag.

So my question is, does anyone know a way to locate the final paragraph of the_content and then inject this HTML inside the 'block?' I'm assuming I might have to locate the last paragraph somehow, explode it or just string_replace the last closing p tag with the "HTML + p tag."

I'm simply not that good at PHP and am not sure how to "locate" the last paragraph in the_content.

I realize this can be done with jQuery easily but I'd much rather do it with a functions.php function and have it correct in the markup server-side. I could also create a custom "Last Paragraph" block that adds it for me, which is kind of goofy.

Thanks for any help or insight. It's my first question and post!

Answer 1

So from a WordPress conceptual point of view, I like the idea of it being a block better. Without it being a block you have some of a post's content in the database, and some being injected here. It sounds fine for this case but would be prone to cause you headaches later down if some of your requirements changed.

That being said, I think you could do this just by looking for the last html tag in the_content and injecting your icon's HTML in front of it. So it's a little more complicated than just appending it like you were.

To show the concept:

$text = "<div><p><div>text</div></p><p>text 2</p></div>";

//Find the position in the string of the last closing HTML tag, i.e. </ 
$last_tag = strrpos( $text, "</" );

//Insert your HTML at that position, with an extra argument of 0 indicating you don't want to replace any of the original, just insert
echo substr_replace( $text, '<span class="icon"></span>', $last_tag, 0 );

//Results in <div><p><div>text</div></p><p>text 2</p><span class="icon"></span></div>

In your case the $text variable would instead be passed into the function:

// Add Signature Image at End of Posts
add_filter('the_content','td_add_signature', 1);
function td_add_signature($text) {
  global $post;
  if(($post->post_type == 'post')) {
      $last_tag = strrpos( $text, "</" );
      $text = substr_replace( $text, '<span class="icon"></span>', $last_tag, 0 );
  }
  return $text;
}

Answer 2

Use a little CSS trickery to workaround the image location naturally coming after the last paragraph, instead of before its close. Make the last paragraph inline, and insert the image after it. Something like (in style.css)

.content p:last-of-type {
     display: inline;
 }

.content p:last-of-type:after {
     content: url(site/path/to/image);
 }