Developer Diaries – WP and Ajax, React Bundle-Size Woes, and Email for File, Misc Plugin Updates

People have noticed I’ve been a bit quiet. I haven’t posted much on Twitter, and I finally found a topic satire worthy on WP Notices. I’m going to keep that domain up as long as I can afford it. The trick with satire is to offend some people, but not everyone. We’ll see how it goes 🙂

WordPress and Ajax Re-brands as Membership Site

After some headbanging on what to do with my WordPress and Ajax site. I started it as a temporary source to host my WordPress and Ajax 3rd Edition book. I basically re-wrote the entire thing and ran into a brick wall when it came to how to get it in e-book and book format that made sense to people in the age of the Internet.

I thought about it for quite a while, but decided to just make WordPress and Ajax into a tutorial (series-based) site where members can preview content or support the site monetarily based on the series that are and will be written.

I have created two membership levels: All Access and Preview. All Access will cost $10 a month unless canceled. Preview is free, but will have dripped content and have 14 days to read all of the content. I don’t anticipate that All Access will have any traction until I have more content, so it again is a chicken-and-egg scenario. Hopefully in time I can look back and see the site succeed in the long-run, but I’ll need to have some really good content to make sure that happens.

For now, you can visit wpandajax.com and see the result of me moving away from Beaver Builder to GeneratePress and Gutenberg. I’m in block-plugin hell, and that’s another rant for another day, but for the most part, the site is feature complete.

React Bundle-Size Woes and Email for File

I ran into a brick wall with my secret project Email for File. I went out of my way to create this beautiful tab-based monstrosity that used React Router and did some fancy license and integration validation. However, when in deploy mode, the size of the entire package was well over 500 kb. This is a no-go for distributing a React app.

Furthermore, the solutions I found called for splitting the React app into chunks and dynamically loading the correct scripts as they are needed. Some hacky situations called for loading the JavaScript remotely and injecting the scripts into the DOM via an eval. I was like, no.

I eventually got chunks to work, but they don’t exactly operate well within the WordPress plugin sphere. Everything is assumed to be at the / path. You can change this in webpack, but it still wouldn’t account for the dynamic nature of folders in WordPress and the plugin directory. For example, it tried to access chunks at /wp-admin/ when my plugin was at wp-content/plugins/email-for-file-mr.

My react knowledge stretched, I decided to go drastic and forego my beautiful UI I created and opt for a more WordPress-standard look/appearance.

To get around the bundle size limitation, I decided to do a few things:

• Have a base JS file with common and re-usable components.
• Load WordPress’ version of React and use that instead.
• Have a JavaScript file for each view (to simulate loading the files into chunks).

That seemed to work. My plugin header weighs in at 3 kb. The rest of the integrations weigh in at ~50 kb each. Problem mostly solved.

For those curious of the underlying code, here is an example:

Enqueue WordPress Assets

First, we have to enqueue a script with various WordPress dependencies.

/**
 * Register script for base JS file (contains several heavy components).
 */
wp_register_script(
	'email_for_file_common',
	Functions::get_plugin_url( '/dist/common.js' ),
	array( 'wp-i18n', 'wp-components', 'wp-element' ),
	Functions::get_plugin_version(),
	true
);Code language: PHP (php)

wp-i18n

The wp-i18n dependency allows you to translate your strings in JavaScript.

For example:

let __ = wp.i18n.__;
let _n = wp.i18n._n;Code language: JavaScript (javascript)

And then to allow translations:

{__("Akismet Spam Protection", "email-for-file-mr")}Code language: JavaScript (javascript)

wp-components

The dependency of wp-components allows you to access various WordPress components. For example, here’s me grabbing the Toggle control.

const { ToggleControl } = wp.components;Code language: JavaScript (javascript)

wp-element

Probably the neatest dependency is wp-element. It allows you to access React helpers and even ReactDOM functionality.

Here’s an example:

const { Component, Fragment, render } = wp.element;Code language: JavaScript (javascript)

Instead of using ReactDOOM, you can use the render helper.

render(<Akismet />, document.querySelector("#eff-akismet"));Code language: JavaScript (javascript)

Loading a Base File

As mentioned before, I created a JS file to hold the common components. I decided to go against a best practice of not populating a global variable since I plan on some add-ons that can share the components.

import React from "react";

export { default as Button } from "./Button";
export { default as FAIcon } from "./FAIcon";
export { default as Logo } from "./Logo";
export { default as Status } from "./Status";
Code language: JavaScript (javascript)

And the file that allows all the magic to happen:

window.mremailforfile = {
	Components: require('../components'),
}Code language: JavaScript (javascript)

So in other components, I can do something like this:

const { Status, FAIcon} = window.mremailforfile.Components;Code language: JavaScript (javascript)

Email for File

What started as a simple concept of protecting a page by email has morphed into an email-collection tool. The goal is to have someone send a link to a newsletter or have valuable content and someone can enter an email address to access the content.

Since this is ripe for abuse, I am integrating Akismet and reCAPTCHA protection.

I may have bit off more than I can chew on this project, but I’m learning a lot, so even if the project isn’t ultimately successful, at least I got something out of it.

WordPress Plugin Updates

Custom Query Blocks

The little plugin that could has crossed 900+ installs. I’m honestly not sure why it keeps on trucking, but I suppose people are getting some use out of it.

Simple Comment Editing

Simple Comment Editing has been dropping in popularity, which is a bit depressing. It’s the best comment editing plugin out there, but unfortunately, as more bloggers decide to forego comments, the plugin just isn’t catching on the way I imagined.

Conclusion

I’m still here. Still attempting to go out strong. We’ll see how it goes from here-on-out.

Thanks for reading.