wp_text_diff – Highlight text changes as visual control

The wp_text_diff view of revisions is not only a thing for admins but also for guests. Imagine the client can view the differences he made in a form as a visual control. This is a funny and easy way for visitors to verify their changes. Read the more up to date and famous one afterwards!
WordPress 4.7: Custom bulk actions, Theme inheritance and more
Open in new tab for later

How wp_text_diff can work in the frontend

Scanning bigger texts or a lot of form fields for changes can be very disturbing and hard the bigger the content gets. There is a way to guide the user and help him with reviews about changes.

Every admin knows that revisions show changes side by side supported by colors. It is a simple and well formatted way to compare or verify changes. The following diff view is a result of only three lines of code.

Source code

Lorem ipsum sit amet, Lorem ipsum DOLOR sit amet,
consectetur adipisicing elit. consectetur adipisicing elit.
Very nice and simple! Very different line!
  A new line.
<?php

// load "wo_text_diff" function
require_once ABSPATH . WPINC . '/pluggable.php';

// enqueue revision style from admin
wp_enqueue_style( 'revisions', admin_url( 'css' ) . 'revisions.css' );

// show diff to user
echo wp_text_diff( $old, $new );

As simple as that.

Next level of visual inspection for forms

Some might like the visual control to verify their changes. This is often used for sensitive data to ask the submitter once again if he really really really likes to do those changes. The wp_text_diff can cover that too and give a nice clean up picture of all changes:

Source code

Your name
PreviousYour changes
HannahLucy
Degree
PreviousYour changes
Bachelor
Are you sure about this?
<?php

// These are the internal fields with the public labels
$form_fields = [
  'name'   => __( 'Your name' ),
  'gender' => __( 'Gender' ),
  'degree' => __( 'Degree' )
];

// show each form field side by side
foreach ( $form_fields as $form_field => $title ) {
  // let WordPress calculate the text difference
  $diff = wp_text_diff(
    $old[ $form_field ],
    $new[ $form_field ],
    [
      // Show some titles to explain the table
      'title'       => $title,
      'title_left'  => __( 'Previous' ),
      'title_right' => __( 'Your changes' )
    ]
  );

  // fix column problem - WordPress adds them :/
  echo strtr(
    $diff,
    [
      '<td></td>'       => '',
      '<td>&nbsp;</td>' => '',
      "colspan='4'"   => 'colspan="2"',
    ]
  );
}

?>

<div class="center">
  Are you sure about this?
  <br>
  <button>Yes</button>
  <button>No</button>
</div>

You might have noticed that there is a field “gender” which isn’t shown in the output. This is because it didn’t change. Investigate the wp_text_diff function and see how it can be done. Or visit the general Text_Diff site in the link below.

Another thing is that WordPress returns an invalid HTML for the table which needs to be corrected. Sorry for the few extra lines in the strtr but without them the diff view wouldn’t be as nice as shown above.

There are more things to know about the diff view. It can be changed to an inline view which fits much better for responsiveness. Read on how to use the Text_Diff framework here:

Text_Diff – Show differences between two strings

Conclusion

Showing only the submitted data feels old-fashioned. A diff view side-by-side is a modernfancy … nice way and looks good. Hopefully the user understands what is happening there and how to read this diff. Because in that way it is very simple to spot the changes and make reviews on bigger texts easier. Feel free to enhance it even more via CSS and let me know in the comments what you designed. I like to see what the next level of visual checks looks like.

Leave a Reply

Your email address will not be published. Required fields are marked *