Learning Vue.js as a WordPress Developer Part 3 – Markdown and WordPress embeds


This post is part of a series called “Learning Vue.js as a WordPress Developer”

The new block based editor in WordPress is pretty amazing. I greatly enjoy using it when writing blog posts. That said there is something refreshing about writing markdown with a simple textarea. That’s what I’ll be covering here as I continue this Vue.js series for WordPress developers.

Markdown with Parsedown

Parsedown is a zero dependence PHP script which gives us markdown without any hassle. The idea here is to write and save markdown on the frontend using Vue.js yet have PHP do the heavy work of translating markdown into useable HTML. Before I get into how this all works together, here is preview of it in action. This is taken from CaptainCore, my WordPress management toolkit.

Video Thumbnail
CaptainCore Markdown Edit Preview

To break this down let’s start off with some basic Vue.js code using Vuetify and a single method addNewProcess() . It’s a textarea which submits the Javascript object new_process to WordPress via Axios.

<div id="app">
  <v-textarea 
    label="Description"
    v-model="new_process.description"
    auto-grow
    persistent-hint
    hint="Steps to accomplish this process. Markdown enabled."  :value="new_process.description"
   ></v-textfield>
  <v-btn @click="addNewProcess()">
    Add New Process
  </v-btn>
</div>
<script>
new Vue({
	el: '#app',
	data: {
		processes: [],
		new_process: { description: "" },
	},
	methods: {
		addNewProcess() {
			self = this;
			var data = {
				action: 'captaincore_ajax',
				command: 'newProcess',
				value: this.new_process
			};
			axios.post( ajaxurl, Qs.stringify( data ) )
				.then( response => {
			        self.processes.unshift( response.data );
				    self.new_process = { description: "" };
				})
				.catch( error => console.log( error ) );
		},
	},
});
</script>

Generating posts and storing data with Advanced Custom Field.

On the PHP side we take in the submitted data with wp_ajax_. Here is where we do all of the hard work. First we generate a new custom post using wp_insert_post and assign the custom fields using ACF’s update_field. We also prepare to send the data back to the browser but first we use Parsedown to convert the markdown to html output.

add_action( 'wp_ajax_captaincore_ajax', 'captaincore_ajax_action_callback' );

function captaincore_ajax_action_callback() {
	global $wpdb; // this is how you get access to the database
	$cmd = $_POST['command'];

	if ( $cmd == 'newProcess' ) {

		$process = (object) $value;

		// Create post object
		$new_process = array(
			'post_status' => 'publish',
			'post_type'   => 'captcore_process',
			'post_author' => get_current_user_id(),
		);

		// Insert the post into the database
		$process_id = wp_insert_post( $new_process );

		update_field( 'description', $process->description, $process_id );

		// Prepare to send back
		$process     = get_post( $process_id );
		$Parsedown   = new Parsedown();
		$description = $Parsedown->text( get_field("description", $process->ID ) );
        
		$process_added = (object) [
			"id"              => $process->ID,
			"created_at"      => $process->post_date,
			"description"     => $description,
			"description_raw" => get_field( 'description', $process->ID),
		];

		echo json_encode( $process_added );
	}

	wp_die(); // this is required to terminate immediately and return a proper response

}

Enhancing markdown with autoembed

Markdown alone is quite powerful. However one thing I miss is WordPress’ automatic embeds. This lets you paste a video link on a line by itself and translate it into a playable video on the frontend. To pull this off we simply need to a few lines of PHP to the above example right before Parsedown runs. This will take the raw markdown code and run it through WordPress’ automatic embeds then pass to the Parsedown.

// Prepare to send back
$description = $GLOBALS['wp_embed']->autoembed( get_field("description", $process->ID ) ) ;
$Parsedown   = new Parsedown();
$description = $Parsedown->text( $description );

Extending these ideas into a full markdown editor.

What I covered a few basic ideas extending this into a fully functional markdown editor will need additional coding. There will be PHP functions and Javascript methods necessary for handling listing, viewing and editing. I’m not going to cover all of that here however you’ll welcome to take a peak at CaptainCore’s code. That would be a good started point.

References

  • Parsedown
  • Original post by SeedProd “How to Enable WordPress Embeds on Custom Fields” no longer available. See cached copy.