Subscribe2 HTML and Gutenberg

tl;dr
The next version of Subscribe2 HTML is coming with a ‘block’ that will work with the Gutenberg editor project. There may be some useful information below for other plugin developers too.


Back in 2017 the team behind WordPress decided to spend some time developing the editor, noting that it had remained pretty much unchanged for several years while other areas of WordPress developed at a pace, it was deemed in need of some tender loving care. The project was dubbed Gutenberg.

I have been spending some time testing Gutenberg to ensure that Subscribe2 HTML will continue to function when the planned release of WordPress 5.0 (no date for the yet) lands in your update page. The good news is, to date I have not noticed any differences in the way WordPress and Subscribe2 HTML work together despite the massive code differences in the editor background and the significant visual changes you’ll see in the editor.

In the next version of Subscribe2 HTML you will get a Gutenberg ‘block’. The ‘block’ is fundamental to the design and functionality of the Gutenberg editor. And Subscribe2 HTML now has a block to insert the Subscribe2 HTML shortcode and configure parameters from in the editor.

One of the biggest struggles I have was ensuring international users are able to translate the ‘block’ code into their language. The Gutenberg approach is to create a POT file from the Javascript code, convert that to a PHP file and then create a global POT file. The seemed like too many steps to me and also needs the use of a Babel plugin (if this is losing you, well it lost me too!).

I therefore wrote a little more PHP to parse through the Javascript block I wrote to expose all of the i18n strings to a PHP file that then get pulled into the normal POT file. My parsing code, should any other plugin developers find it useful is on GitHub.

You can call the script from the command line:
php -f ./pot-helper.php textdomain output-file.php input-file1.js input-file2.js

Or call it using grunt by including grunt-shell in your package.json file and adding the necessary configuration in your Gruntfile.js.