Category Archives: lang:en

Blogposts on blog.futtta.be in English (mostly because these posts are republished in a non-Dutch-speaking context).

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?

Of bugs, inconsistencies and tag soup in (future) core

In general i rarely bother looking into WordPress core code or what’s on the horizon. The last month or so however I came across 3 problems that were due to core. 1. Shortly after pushing Autoptimize 2.3.x out, a subset of users started complaining about a flood of “cachebuster”-requests bringing their site to a crawl. It turned out all of them were using Redis or Memcached and that due to a longstanding bug in WordPress core Autoptimize did not get the correct version-string from the database, triggering the update-procedure over and over, purging and then preloading the cache. A workaround -involving a transient featuring my wife and daughter- was introduced to prevent this, but “oh my gawd” what an ugly old WordPress core bug that is! Can someone please get this fixed? 2. A couple of users of WP YouTube Lyte noticed their browsers complaining about unbalanced tags in the Lyte HTML output (which is part of the_content). It took me a lot of time to come to the conclusion that WordPress core’s wpautop was messing things up severely due to the noscript and meta-tags in Lyte’s output. As wpautop has no filters or actions to alter the way it works, I ended up disabling wpautop when lyte’s were found in the_content. 3. My last encounter was with the ghost of WordPress Yet-to-come; Gutenberg … To allow WP YouTube Lyte to turn Gutenberg embedded YouTube’s into Lyte’s, it turned out I had to dive into the tag soup that Gutenberg adds as HTML-comments to the_content. I have yet to find documented functions to extract the information the smart way, so regexes to the rescue. But any plugin that hooks into the_content better be aware that Gutenberg (as part of WordPress 5.0) will potentially mess things up severely. Although I cursed and sighed and I am now complaining, I felt great relief when having fixed/ worked around these issues. But working in the context of a large and successful open source software project and depending on it’s quality can sometimes almost be a pain as much as it is a joy. Almost … ;-)

Autoptimize 2.3, the Happy New Year release

I just released Autoptimize 2.3.0, the Happy New Year release. As described here earlier it has some significant extra optimizations to help you improve your site’s performance even more for 2018:
  • new: optimize Google fonts with “combine & link” and “combine and load async” (with webload.js), intelligently preconnecting to Google’s domains to limit performance impact even further
  • new: Async JS, can be applied to local or 3rd party JS (if local it will be auto-excluded from autoptimization)
  • new: 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)
  • new: remove WordPress’ Core’s emoji CSS & JS
  • new: remove (version parameter from) Querystring
  • new: support to clear cache through WP CLI thanks to junaidbhura
  • lots of bugfixes and small improvements done by some seriously smart people via GitHub (thanks all!!), including a fix for AO 2.2 which saw the HTML minifier go PacMan on spaces in some circumstances.
Enjoy! :;-)

[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 :-)