This post is part of a series called “Learning Vue.js as a WordPress Developer”
- Part 1 – Getting Started
- Part 2 – Structured PHP, Rest API and Axios
- Part 3 – Markdown and WordPress Embeds
- Part 4 – Authenticated Rest API
- Part 5 – Decoupled Page Template
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.
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.