Aaron Eaton

Archives for December 2017

Counting Gutenberg Blocks

by Leave a Comment

This week I was tasked with performing a quick audit on an existing client site for WordPress 5.0 compatibility. The site had already made use of Gutenberg so we were curious just how many blocks were in use.

For those of you who don’t know, Gutenberg blocks are stored in the `post_content` field and look something like this:

<!-- wp:paragraph {"align":"center"} -->
<p>Now, this is a story all about how My life got flipped-turned upside down And I'd like to take a minute Just sit right there I'll tell you how I became the prince of a town called Bel Air
<!-- /wp:paragraph -->

Now, since every block begins with the same pattern, `<!– wp:`

Now, since every block begins with the same pattern, <!--wp:, we now have something we can target in a SQL query. The trick is to count the number of times that pattern occurs in each post_content field.

After a lot of research and consulting my amazing colleagues over at WebDevStudios I finally landed on a query that will get a count of every Gutenberg block published on your site. Here it is:

SELECT 
    SUM( LENGTH( REPLACE ( post_content, "<!-- wp:", "}") ) - LENGTH( REPLACE ( post_content, "<!-- wp:", "" ) ) ) AS block_count
FROM wp_posts
WHERE post_status = 'publish';

Just copypasta that query into your favorite MySQL client (or the cli if you’re hardcore) and you should see the magic number.

Simple Local Servers

by Leave a Comment

When testing many facets of the OptinMonster embed code I find myself needing a clean & quick HTML page on almost a daily basis. For most tasks throwing some code into JSFiddle will do, but testing some of our more advanced targeting rules becomes onerous, if not impossible.

In comes a great little NPM package serve from the team over at Zeit that gives you a bare-bones web server from the terminal.

So without further ado, my process:

Install the package

> npm i -g serve

Create the necessary files

I first create a new temporary directory and add an index.html file.

> mkdir om-test && cd om-test
> touch index.html

Add the HTML

I then place some boilerplate HTML in index.html along with the OptinMonster embed code.

<html>
<head><title>OptinMonster Test</title></head>
<body>
    <h1>I'm OptinMonster Testing Rick!</h1>
    <!-- OptinMonster embed code goes here -->
</body>
</html>

Start the server

Back in the terminal and in the temporary directory, start the server with server ..

Screenshot of the local server running in the terminal

Once you see “Serving!” your page is ready to go!

View the page

You can now see the test page at http://localhost:5000.

That’s it.