Text_Diff – Show differences between two strings

The diff view of revisions is not only a thing for admins but also for guests. Imagine the client can view the differences he made as a visual control. This is a fun and easy way for visitors to verify their changes.

How text diff works in the frontend

Simple side-by-side view

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 );

Simple as that.

The smaller inline view

A bit smaller but maybe confusing is the inline view. This is better in responsive modes as the side-by-side mode is drawn within a table. Within the inline mode new words are blue highlighted and deleted ones were stroke through like this:

Source code

Lorem ipsum DOLOR sit amet, consectetur adipisicing elit. Very nicedifferent and simpleline! A new line.
<?php

function inline_diff( $before, $after ) {
  if ( ! class_exists( 'WP_Text_Diff_Renderer_Table', false ) ) {
    require( ABSPATH . WPINC . '/wp-diff.php' );
  }

  // Normalize EOL characters and strip duplicate whitespace.
  $before = normalize_whitespace( $before );
  $after  = normalize_whitespace( $after );

  // Generate diff
  $text_diff = new Text_Diff(
    explode( "\n", $before ),
    explode( "\n", $after )
  );

  // Show changes inline
  $renderer = new WP_Text_Diff_Renderer_inline();

  return $renderer->render( $text_diff );
}

echo inline_diff( $old, $new );

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. 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.