How I bypassed Gutenberg’s messy block problem

How I bypassed Gutenberg’s messy block problem

Migrating to WordPress Gutenberg broke my galleries. I was using some custom code and intercepts not just to restyle the way images were being presented, but also to change aspects of their behaviour. While the “Classic” editor preserved my existing gallery designs, anything new was broken and defaulted to the one provided by the platform.

This wasn’t just about styling though. I’d changed behaviour to match what I wanted to achieve in terms of presentation of my images and SEO. In particular, the default behaviour for Gutenberg’s “gallery block” is to open images in their own attachment pages, something I’d worked hard to remove from my site.

10 lines of code becomes a complicated “Custom Block”

In pre-Gutenberg days I achieved this with about 10 lines of code buried in the functions.php file. It filtered the gallery, pulled out the images, worked up my special blend of HTML and dropped it on the page.

With Gutenberg, each time I approached the problem I was told I needed to create a “new block” that would do what I wanted. Nice idea, but doesn’t that break the idea there is form and there is content? Wouldn’t it create content that was tied to a specific form?

Custom blocks create all kinds of issues down the line for migrations and major redesigns. As nice and flexible as they sound, they’re a form of custom code. The more custom code you have in your CMS, the higher your maintenance costs and the more difficult migrations become.

Avoiding the custom block trap

The trick is not to create a custom gallery block, but to get Gutenberg to change the presentation before it reaches the browser. This turned out not to be as easy as the 10-odd lines of code I had before. There are supposed to be functions to help pull out specific block types, although I’ll be damned if I could get them to work.

My solution (for now at least) is to intercept the code in the page. It’s a clunky fix, but one that will give me some hooks once Gutenberg starts settling down and I can invest more time in some deeper learning.

The step-by-step guide to breaking form and content

The first step was to remove the_content(). In its place, I intercepted the content using get_the_content(). This gives me the raw stuff coming out of the backend database before Gutenberg has had a chance to mangle it.

Next it’s breaking down the code into blocks. The easy way of doing this is to look for the comment “<!– /wp:” as this tells you where a block ends. You can then build an array of content blocks.

Cycling through the array of blocks, I went looking for “wp:gallery”. This is part of the opening comment that tells Gutenberg what kind of content block is coming up. Grabbing hold of the array element with this in gives you the gallery content block.

Alongside the gallery in the comments are the IDs of the images that it includes. A little bit of stripping out gets these into a string that can be exploded into an array so each ID can be picked up and worked with. Working with them just requires cycling the array of IDs, picking up the data that’s needed and reworking it into the HTML and JavaScript format required for your own custom gallery.

When you’re done, echo your custom code and don’t forget to echo the code from the blocks that weren’t galleries.

Be gentle with my temporary WordPress hack

I know there are die hard WordPress developers currently screaming at the screen and tearing their hair out. The cries will vary from “just use a custom block” to “no, you can use [amazing function] instead”. For now this works and once I find [amazing function] I’ll incorporate it.

As for blocks – no thanks. I spent over a week on a CMS project working out the mapping from various bits of custom content hacks because “the default behaviour wasn’t quite right”. Half a dozen different approaches that wasted thousands of pounds in consulting and development fees because no one thought to focus on separating form and content at the outset.

I won’t make that mistake again.

Is this of use?

For what it’s worth, this is a cut down shell you can use to attack your content…

$parse_content = explode(“<!– /wp:”, get_the_content());

foreach ($parse_content as $content_line) {

            if ( strpos($content_line, “wp:gallery”) !== false) {

                        $temp_array = substr($content_line, strpos($content_line,'[‘)+1);

                        $temp_array = substr($temp_array, 0, strpos($temp_array, “]”));

                        $ids = explode(“,”,$temp_array);

                        foreach ($ids as $the_image) {

                                    // Do your thing here and don’t forget to echo

                                    }

                        }

             else {

                        echo “<!– /wp:” . $content_line; 

                        }

            }

About Ross A Hall

I'm a freelance graphic designer and webmaster, working with small and growing businesses. For a chat about how I could help you drop me a line.

Follow me on social:

twitterinstagrampinterestlinkedin

Share...

How I bypassed Gutenberg’s messy block problem

Next