How to extract blocks from Gutenberg

So Gutenberg, the future of WordPress content editing, allows users to create, add and re-use blocks in posts and pages in a nice UI. These blocks are added in WordPress’ the_content inside HTML-comments to ensure backwards-compatibility. For WP YouTube Lyte I needed to extract information to be able to replace Gutenberg embedded YouTube with Lytes and I took the regex-approach. Ugly but efficient, no?
But what if you need a more failsafe method to extract Gutenberg block-data from a post? I took a hard look at the Gutenberg code and came up with this little proof-of-concept to extract all data in a nice little (or big) array:

add_action('the_content','gutenprint',10,1);
function gutenprint($html) {
  	// check if we need to and can load the Gutenberg PEG parser
  	if ( !class_exists("Gutenberg_PEG_Parser") && file_exists(WP_PLUGIN_DIR."/gutenberg/lib/load.php") ) {
  		include_once(WP_PLUGIN_DIR."/gutenberg/lib/load.php");
	}
  	if ( class_exists("Gutenberg_PEG_Parser") && is_single() ) {
	  // do the actual parsing
	  $parser = new Gutenberg_PEG_Parser;
	  $result = $parser->parse(  _gutenberg_utf8_split( $html ) );
	  // we need to see the HTML, not have it rendered, so applying htmlentities
  	  array_walk_recursive($result,
		function (&$result) { $result = htmlentities($result); }
		);
	  // and dump the array to the screen
	  echo "<h1>Gutenprinter reads:</h1><pre>";
	  var_dump($result);
	  echo "</pre>";
	} else {
	  echo "Not able to load Gutenberg parser, are you sure you have Gutenberg installed?";
	}
  	// remove filter to avoid double output
  	remove_filter('the_content','gutenprint');
  	// and return the HTML
	return $html;
}

I’m not going to use it for WP YouTube Lyte as I consider the overhead not worth it (for now), but who know it could be useful for others?

[heads up] Autoptimize 2.3 coming with new features, last call for testers

With the last release almost 6 months in the past, it’s high time for a new Autoptimize release. And what a release that will be my friends!
Here are the most important features/ improvements (most new options are on a separate tab, “Extra” to keep things organized as seen in the screenshot);

  • Google fonts; remove (not new), but also “combine & link” and “combine and load async” (with webload.js), intelligently preconnecting to Google’s domains to limit performance impact even further
  • Async JS, can be applied to local or 3rd party JS (if local it will be auto-excluded from autoptimization)
  • support to tell browsers to preconnect (= dns lookup + tcp/ip connection + ssl negotiation) to 3rd party domains (depends on browser support, works in Chrome & Firefox)
  • remove WordPress’ Core’s emoji CSS & JS
  • remove (version parameter from) Querystring
  • support to clear cache through WP CLI
  • a significant amount of bugfixes done by some seriously smart people via GitHub (thanks all!!), including a fix for the main bug in AO 2.2.x which saw the HTML minifier go PacMan on spaces in some circumstances

If you want to test AO 2.3, you can download the zipfile from GitHub here. I would love your feedback!
Happy end-of-year to all, who knows we can wrap up AO 2.3 nicely, ribbon and all, for New Years? 🙂

AO extra feature-complete, testers needed

I just committed what I consider the last feature to be added to AO Extra; the optimization of Google Fonts, with the choice between:

  • “remove”
  • “aggregate and link”, where the Google Font CSS might still render-blocking but there will be no “flash of unstyled fonts”)
  • “aggregate and load asynchronous with webfont.js” will not be render-blocking, but might lead to that dreaded “flash of unstyled fonts”

Next step before merging AO Extra with Autoptimize to become AO 2.3; testing. And that’s where I need your help;

  1. Download the AO Extra zip-file from Github
  2. go to Plugins -> Add New -> Upload Plugin
  3. Click “browse” and select the zip-file you downloaded in (1)
  4. Click “Install now”
  5. Click “Activate”
  6. Go to Settings -> Autoptimize -> Extra
  7. Test
  8. Give generic feedback below or file bugs in the projects Github Issues

If all goes well Autoptimize 2.3 could be release before we have to wave 2017 goodbye 🙂

Small experiment; Autoptimize with page cache

So I integrated a page cache (based on KeyCDN Cache Enabler) in Autoptimize, just to see how easy (or difficult) it would be. Turns out it was pretty easy, mostly because Cache Enabler (based on Cachify, which was very popular in Germany until the developer abandoned Cachify) is well-written, simple and efficient. 🙂

No plans to release this though. Or do you think I should?

Loading webfonts just for a title? Switch to SVG instead.

So I wanted to replace a site’s (*) main title which required some fancy font (Courgette!) to be downloaded, by an SVG image.
Here’s what I did;

  1. make a screenshot of the node in Firefox Developer Tools -> Inspector -> select node -> click “screenshot node” in context menu
  2. convert the png-file into svg at http://pngtosvg.com/ result being a 6.93KB file.
  3. optimize the svg at http://petercollingridge.appspot.com/svg-optimiser resulting in a 3.1KB file (see above image) which remains crispy at whatever size.
  4. added the SVG as background image (not inline though, might do that next) and set “visibility” of the logo->a->h3 (which has the title in it as text) to “hidden”
  5. ticked Autoptimize’s “remove Google Fonts”-option (which also removed a slew of other unwanted requests for fonts)

(*) The site is my wife’s boeken-jagers.be which is an offspring of her successful “De Boekenjagers” Facebook group where people hide books for others to find (hunt) and share info about that. 27 000 members and counting, proud of my Veerleken!

Whatever you do, don’t lie (when naming files)

So since Autoptimize 2.0.0 got released half a year ago, minified files are not re-minified any more, which can yield important performance-gains. Or that, at least, is the goal. But as checking if a file is minified is non-trivial, AO reverts to a simpler check; does the filename indicate the file is minified. So for example whatever-min.js and thisone_too.min.css would be considered minified and will simply be aggregated, whereas not_minified.js would get minified. Mr Clay’s Minify (which is used by WP Minify, BWP Minify and W3 Total Cache and of which the core minification components are in Autoptimize as well) applies the same logic.
But apparently plugins often lie about their JS and CSS, with some files claiming to be minified which clearly are not and with some files (even WordPress core files) being minified but not having the min-suffix in the name. It’s obvious that lying like that is kind of stupid: saying your files is minified when in fact it is not, offers you no advantages. Not confirming your file is minified in the name when it is, saves you 4 characters in the filename, but I suspect you were just being lazy, sloppy or tired, no?
So, ladies and gentlemen, can we agree on the following:

  1. Ideally you ship your plugin/ theme with minified JS & CSS.
  2. If your files are minified, you confirm that in the filename by adding the “.min”-suffix and minification plugins will skip them.
  3. If your files are not minified, you don’t include the “.min”-suffix in the filename, allowing for those minification plugins tot minify them.

For a more detailed overview of how to responsibly load minified JS/ CSS in WordPress, I’ll happily point you to Matt Cromwell’s excellent article on the subject.

Fun with EDD; showing EUR price in USD (and vice versa)

I was playing around with Easy Digital Downloads (because this) and I choose EUR as currency, but I wanted the price to be also displayed in USD. Obviously there’s a premium add-on for that, but as I don’t want to purchase stuff just yet, I concocted an alternative myself. Here’s the resulting snippet of code that shows the price in USD for shops with EUR currency and shows the price in EUR when the shop is in USD;

add_action("plugins_loaded","edd_curconv_init");
function edd_curconv_init() {
	$curpos = edd_get_option( 'currency_position', 'before' );
	$curcur = strtolower(edd_get_currency());
  	if (in_array($curcur, array("eur","usd"))) {
	  $filtername="edd_".$curcur."_currency_filter_".$curpos;
	  add_filter($filtername, "edd_eur_dollar_conv",10,3);
	}
}
function edd_eur_dollar_conv($formatted, $currency, $price) {
  $rate=1.13;
  if ($currency === "EUR") {
	$outprice = $price * $rate;
	$outrate = "USD";
  } else if ($currency === "USD") {
	$outprice = $price / $rate;
	$outrate = "EUR";
  }
  if (!empty($outprice)) {
	$out = " ( ~ ".edd_currency_filter(round($outprice,2),$outrate).")";
	$formatted.=$out;
  }
  return $formatted;
}

This obviously lacks the features and robustness of that Currency Converter add-on, so (don’t) use (unless) at your own risk.

Quick KeyCDN’s Cache Enabler test

cache enablerCache Enabler – WordPress Cache is a new page caching kid on the WordPress plugin block by the Switzerland-based KeyCDN. It’s based in part on Cachify (which has a strong user-base in Germany) but seems less complex/ flexible. What makes it unique though, is it that it allows one to serve pages with WEBP images (which are not supported by Safari, MS IE/ Edge or Firefox) instead of JPEG’s to browsers that support WEBP. To be able to do that, you’ll need to also install Optimus, an image optimization plugin that plugs into a freemium service by KeyCDN (you’ll need a premium account to convert to WEBP though).
I did some tests with Cache Enabler and it works great together with Autoptimize out of the box, especially after the latest release (1.1.0) which also hooks into AO’s autoptimize_action_cachepurged action to clear Cache Enabler’s cache if AO’s get purged (to avoid having pages in cache the refer to deleted autoptimized CSS/ JS-files).
Just not sure I agree with this text on the plugin’s settings page;

Avoid […] concatenation of your assets to benefit from parallelism of HTTP/2.

because based on previous tests by smarter people than me concatenation of assets can still make (a lot of) sense, even when on HTTP/2 🙂

The optimism of a pull request

I was getting old yesterday,with pessimism taking over. But then there’s that Git pull request on your open source project, from an Argentinian developer you don’t know at all. And you discuss the idea and together you build on it, step by step and the merged result is an enrichment not only for your little software-project, but also for you personally. Because it reminds you that too is the web; a place where people collaborate for nothing but the selfless desire to improve things. Thanks for reminding me Pablo!