Gutenberg Rabbithole

ACF recently released their much anticipated update which allows for Gutenberg blocks to be easily created with included, related meta-boxes. This has vastly reduced the complexity and time it takes to make custom Gutenberg Blocks.

It’s arguable that developers should try and avoid plugin dependency as much as possible, so should the blocks be created independently of ACF, even though much more time would need to be invested up front?

Whilst it’s clear that ACF makes building the blocks MUCH easier and arguments against can be made, the article below describes the challenges associated with this goal.

Custom development of blocks and markup.

There’s some useful tutorials out there, showing how to build your own Gutenberg Blocks. Here’s some of the resources I uncovered to find out about Gutenberg Block Building:

The authors have done a good job of explaining how to get up and running with your own blocks, what the different parts are and why they’re necessary. I have listed the resources in my opinion of how directly they address building custom blocks for Gutenberg. The LearnWebCode video was concise, accurate & I found it easy to understand. What’s more, there’s a link below the video to the LearnWebCode github account which has a repo of this very lesson.

In particular, I found the process of creating React based Javascript with to be simple and enlightening. I had never made any React code before this tutorial and the Babeljs website made the process easy and fun.

Then ACF came along and cleared all before it. The speed and simplicity of setup when using the plugin was a significant difference from the other techniques outlined above. It’s not just that it’s fast at setting up the blocks but the content and the meta boxes that have to populate the blocks is a breeze to create with ACF as well.

What is ACF?

ACF (Advanced Custom Fields) is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra content fields are more commonly referred to as Custom Fields and can allow you to build website’s faster

Not everyone wants to support a plugin dependency – especially a paid one – but in this case, it saves so much time in creating the blocks we’re going to need, that, at least for the MVP, it’s worthwhile doing.
~ Full disclosure, I have to confess, I do love this plugin. It’s been very useful in building all the meta content boxes’ custom fields for pretty much every WordPress site I’ve ever built. I don’t like using plugins as a rule but I’ve known ACF for years and always found it a worthwhile inclusion.

Now that a solution for the block creation has been found, I can get on with the other parts of my challenge. The blocks included by default are many. If you’re installing WordPress for yourself and playing around with themes and curating content for yourself, there could be a use for many of these blocks but since we’re not in the business of letting clients make design choices, we actually want to restrict what could be put into any given page, to make sure it fits with our markup and the layout of the site. That means turning off, or ‘blacklisting’ all the blocks we don’t want to appear as choices on a given theme. Since we also want our own custom markup on every block, so that we’re catering to a single css styles system, we actually want to remove almost all of the default, out-of-the-box blocks.

This is where the age of Gutenberg becomes an issue. Usually, the shear size of the WordPress community means that there’s lots of articles written to help with almost any subject you’d care to research but Gutenberg is so new and is being applied in all sorts of exciting new ways. It’s very flexible and it has changed a lot about the way WordPress is going to be used in the future. All this, in turn, means that there isn’t the usual number of articles describing the thing you want to find out about, so corroborating the best technique to do something can be a little more time consuming than normal.
~ So hopefully, I can save you some time:

If you’re using WordPress 5.2 or higher, you can toggle the blocks available within the page options. That’s the 3 vertically aligned dots at the top right of your edit page. Toggling blocks on and off on a per article basis doesn’t sound very developer-y though, there’s surely some programming that can be used to achieve the same thing…

This method described by Jason Bahl might be of interest:
~ by his own admission, it’s quite possibly a fragile method – this article’s over a year old now but worth a read in case you come across this method in your own search. However, there may be a better way of tackling this challenge.

Misha Rudrastyh has written a more recent article about a PHP solution for custom block selection. He’s included a very handy list of core blocks you may wish to use (or not). It’s this method that I’ve chosen to be able to add/remove blocks from Custom Post Types and general site content areas.

// remove unwanted default gutenberg blocks

add_filter( 'allowed_block_types', 'llwp_gutenberg_allowed_block_types' );

function llwp_gutenberg_allowed_block_types( $allowed_blocks ) {

    $allowed_blocks = array(









    return $allowed_blocks;


The first six items of the array are the core out-of-the-box blocks that we want to keep. The last is the first test block, made with ACF. Naming convention is important to show the blocks that you want. If it’s a core block, start the definition with core/, start ACF built blocks with acf/.

Full Width Gutenberg Blocks

Selecting blocks that break out of the css content wrapper are one of the exciting aspects of this technology. There’s more on preparing to add the full width aspect to your theme found here:

To support full width with ACF built blocks, add 'align' => array( 'wide', 'full' ) to the attributes list . Here’s what the code looks like in full for the definition of my first test block:

// ACF gutenberg blocks testing
 add_action('acf/init', 'my_acf_init');
 function my_acf_init() {
 // check function exists
 if( function_exists('acf_register_block') ) {
     // register a testimonial block
         'name'              => 'testimonial',
         'title'             => __('Testimonial'),             
         'description'       => __('ACF testimonial block.'),
         'render_callback'   => 'testimonial_block_render_callback',
         'category'          => 'formatting',
         'icon'              => 'admin-comments',
         'keywords'          => array( 'testimonial', 'quote' ),
         'align'             => array( 'wide', 'full' )

One page to rule them all? (maybe this goes in a later article about the wider challenge of building the sites we’re after?)

Nerdy note: If TYPO3 happens to be your weapon of choice for the majority of your sites. It has a built-in configuration language (typoscript) which means that configuration meta-data about clients, such as ‘strap-line’, address & contact details, google analytics and API codes/keys all have a natural place in the setup.ts document in the root of every site. It would surely be a good idea to have something similar in WordPress. So the plan is to make a theme options page to support the basic meta-data, that’s useful site-wide and doesn’t have one specific page that’s an obvious home for it. Typically containing everything you’d normally find in the root typoscript docs…

Inspire day at Hangleton Primary

I’ve been asked, as a dad of one of the students, to talk about what I do to the pupils at Hangleton Primary School in Hove. Here are some thoughts on the message I’d like to get across.

Find a job you love and you’ll never have to work a day in your life.

Confucius (allegedly)

Whoever really said it first, the idea is sound. Another way I’ve seen this said is in the life-guidance writing, Desiderata:

Keep interested in your own career, however humble; it is a real possession in the changing fortunes of time.

Max Ehrmann ~ 1927

We’re lucky enough to live in a society that will look after those who can’t look after themselves. If you can’t work, you will be supported by the state. But a career path is much, much more than just putting food on the table. There are, of course times when we work to sustain ourselves but those lucky enough to work in the fields they enjoy will have a valuable (if abstract) possession in their skills that no misfortune can remove.


Like riding a bike, you never unlearn a skill that you’ve learned. It may be years from one use of the skill to the next but you’ll never forget it and may well be glad to have as many skills as possible.

Follow your interests

When I was at school and they asked the question, “what do you want to be when you grow up?” many of the girls in the class answered that they wanted to be a hairdresser, many of the boys answered that they wanted to be a stuntman. I think the reality is, no one really knew what they wanted to do for a living at that early stage.

I still don’t know what I want to be when I grow up , perhaps I never will!

There will be some subjects that you enjoy more than others. It may be because you’re better at them but more likely that you’re better at them because they stimulate you. Our school and career systems channel us into specific areas of learning – they do this for good reason but the other skills that might fall along the way may be useful to you later in life. ~ We no longer live in a world where you can get a job at 16 and still be sure you’ll be working in the same industry when you’re ready to retire. Being prepared for more than one career path is going to be beneficial, adding more than an extra ‘string to your bow’ will reap dividends in the end.

My Journey

My favourite subjects at school were mostly the practical arts: CDT, Art, Pottery, Music… and I loved my sports and extra school clubs like canoeing and the CCF. They’re still my favourite subjects and they’ve plotted the course of my career for the most part but not everyone can make a living by painting or crafts.

It doesn’t matter what degree you get, but that you get a degree.

Mr Harwood, (chemistry teacher, careers adviser Reigate GS)

I didn’t rate Mr Harwood’s chemistry lessons – maybe because I never had much of an affinity for learning Chemistry – but this piece of advice has always stayed with me. I think, what Mr Harwood meant was that, provided you embrace the challenge, higher education is less about being taught a subject and more about learning to teach yourself – that’s why people say, “what are you reading?” when asking about others’ time at university. Being awarded a degree, shows the world that you are capable of teaching yourself to a level acceptable to a university. If you can learn one subject, you can learn another… and another – the only constraint is your time.

Study at university if you can – it will teach you far more than the subject you choose to study

I had to take the opportunity of going to university whilst in the right age window and the choices I made at school mapped out the pathway I would take in my late teens and early twenties. I took Geography at GCSE and enjoyed the ‘physical’ side of that enough to take an A-level in Geology. Geology class was taught by an inspirational teacher called Roger Birch at Collyer’s 6th form college in Horsham. Out of 13 class members in my yeargroup, 10 of them went on to do Geology degrees (was that all because of the field trips?).

I studied Geology at The University of Birmingham and loved it – even the early lectures and the late lab sessions but I knew I wasn’t interested in a job in the typical fields a geology graduate goes into. For one thing, I was really into my music at this stage, so after I graduated (no one can take my degree away now I’ve got it) I tried to make a go of things with my band. Spent a couple of years doing local jobs, like driving and a position with a local animal charity but these jobs were purely as a means to earn money to survive. I was living with my parents and needed very little in the way of money and my interests laid firmly in the musical realm.

The band never worked out but as chance would have it ( – and chance favours the prepared) I was successful with an open audition for a percussion show called STOMP.

What a life!

STOMP was a wonderful job for a young and single person, well paid for theatre and immensely enjoyable. After several years though, my body was well worn and the life of touring around the world from one hotel to another was wearing too. I longed for my own toaster, or to have a bowl of cereal when I became hungry at night, instead of having to go out and buy all my food from restaurants and takeaways.

My work in London had included a few different bands. Each of them required its own promotion which invariably meant its own website. Since I didn’t start work until 6pm every day, I took the opportunity to teach myself some web design, during the day, while everyone else was at work. Enter Macromedia Dreamweaver 2004.

Building in code – work with your hands

By the late 00’s I was married and had stopped touring with the show, opting instead to ‘sit down’ in the London production. I had my long, lost cereal and a toaster all of my own but I had climbed to the limit of my career path in the industry, by being rehearsal director and lead in the show. I was tired, ageing and frankly, getting bored. I knew it was time for a change.

Changing career path

I’m an extraordinarily lucky person. By marriage, I was entitled to emigrate to the USA and try my hand at a new career. We arrived in California in June 2008 and I was ‘forced’ to open a company with my wife as the registered owner, so I could work and start getting paid.

After some time freelancing with various web technologies, I was awarded an informal position at a local marketing agency. I gained experience in various projects until my wife got pregnant and wanted to be closer to her family in Louisiana.

Medical insurance then meant I had to get an employed position, instead of a self-employed one, and so began my second career as a web designer/developer.

I’ve worked for marketing agencies and advertising agencies and even returned to work for the company my wife had to start back in California all those years ago.

After 10 years in the USA, we returned home to the UK and I needed local employment here but the learning hasn’t stopped. I’ve gone from what I would describe as a web developer, to a back-end web developer. Meaning I get to do the things I enjoy most about building in code.

I now work for a local web development agency, building the functionality of websites and servers, without having to worry too much about making them look attractive – that’s the job of the front-end developers…

I see this job as having plenty of scope for growth. You’ll never learn all there is to learn, of course but you will need to keep growing your knowledge and experience in order to stay interested in your career. Back end development and sys-admin are subjects I can happily learn about for years to come and be paid to use my experience and detective skills to solve web problems. I’ll easily remain interested and employable for another decade or more, by which time, provided I make it that far, I’ll be thinking about the next life transition, the final career of retirement.

All the way along, I’ve been lucky enough to do things because I chose to.
– Of course there are days where you don’t want to go to work, and jobs at work that you don’t want to do, because you don’t enjoy them for whatever reason. And of course, those jobs still need to be done. Get through them and try to find something enjoyable about them. Even your dream career will have its weaknesses. If you follow your interests enthusiastically enough though, people will notice and likely, before too long, you too will be able to say you’re not ‘working’ for a living, because you’re doing something you love to do.

Maybe by then, I’ll know what I want to be!


In my talk to the school kids, I was able to suggest the scratch educational programming interface to the children and they seemed familiar with it already. Here’s a link to a similar technology by google called blockly – – this platform is particularly interesting because it shows the code behind the behaviours which are built in the graphical builder.

I’ve been asked if I would go back and do a workshop with the kids on coding. One day, with a little preparation, I think it could be a great idea.

Domain Practise

The difficulty with learning about domains and apache configuration is that ideally, it has to be done in the real world. It’s not possible to properly emulate the world wide web on a n internal machine – but we can make a hybrid!

In times past, we’ve had great ideas which we’ve acted on quickly to secure the right domain – it’s often the first port of call for many a branding ideation session. Of course, not all of those ideas come to fruition and this can leave many domains, sitting, parked and wasting their potential, somewhat.

Hosting is a necessary expense for a website accessible to the web but need not be an expense when it comes to training. An internal VM can be used instead. As long as the VM has a known IP and you don’t need to see your site outside of its network, you’ll be able to use it.

Setting up the VM

My colleague Mike setup the VMs here at LiquidLight. If you want to follow along with how he did it, he made an excellent write up of it here. After this setup we had a bare VM with the minimal software.

Provisioning the VM to act as a server can be approached in myriad ways. Server setup is beyond the scope of this article and can vary considerably dependant on your requirements and distribution but if you liked Mike’s write up of creating the VM on Xen, you could find details on setting up a server in Mike’s next article, so I’ll link to that here for a concise write up.

How does DNS work?

DNS (Domain Name System) can be thought of like a phone book of all the world’s websites. Rather than remembering the IP address of each and every site you want to visit, you remember the name and the name is stored in a database on the DNS with its corresponding IP address.

To look up the IP address from the name, your browser checks on 4 caches to find the relevant IP:

  • The browser cache itself – all the sites you’ve visited previously are stored within the cache for a defined period.
  • If unsuccessful, the browser checks the OS cache/hosts file – the OS has its own cached list of domains.
  • If not successful with the above, the browser would communicate with the router that maintains its’ own cache of DNS records.
  • Finally, If all these local lookups fail, the browser would move on to the ISP. ISPs retain their own cache of DNS but if they don’t have the relevant domain, they call on a domain server further and further up the line until they find the correct domain, (at which point, all other devices in the chain update their cache with the correct IP for that domain).

About IP addresses

Usually, a website will have a domain name that looks something like this; e.g.’s IP is – and if I put this IP into my browser, I get the google home/search page. This should be true, whether I’m on my home network, in an internet cafe, or on my network at work.
Your home network may be configured for an IP address like or is more commonly seen in business computer networks than in home networks – Like, it’s an internal IP and can only be reached from inside your network.

If you were creating a site you wanted to be reachable on the web, you would point a domain at the hosting server’s IP, the IP lookup would go through the above process of checking caches and return the external, public IP of the web host.

In this exercise, there was no need for the site to be seen outside of the ‘home network’ and so, no need to rent any hosting server space from a web host.

A VM was created and assigned an IP of and a spare domain had an ‘A’ name added and pointed to

(The “Hello World” message on this site won’t be viewable by anyone outside this internal network and the IP may not even exist to the computer this article is being read on but its reachable from this office and hence can be used to practice setting up domains on this local network, without incurring charges from a web host. – thrifty!)

What were the pain points?

Symptom: can’t to ssh into the server

I had dome something wrong in setting it up and now had to trouble shoot ssh connection before I could diagnose any issue at all.
The VM I was trying to reach was called ‘jeremyvm’ and it was installed on our internal server called ‘Phantom’. I could reach the VM from Phantom with the following command: sudo xl console jeremyvm

Once inside the VM, I could use sudo su - to become root and start troubleshooting what was and wasn’t working.

It was helpful at this point to know that using the command ssh -v increased the verbosity of the error reporting and ssh -vv increased another step. I could have put another v on the end to get a third level of error report verbosity but I’d found the cause by then.

Was it listening on port 22? ~ Yes but I still couldn’t connect to the VM via SSH.
Was SSH being blocked by a firewall? ~ Yes! Here’s the commands that singled me out:

## SSH ##
for i in; do
  iptables -A INPUT -p tcp --dport 22 --src $i -j ACCEPT
iptables -A INPUT -p tcp --dport 22 -j DROP

The above is part of the iptables settings to block SSH requests from computers outside of our IP address (the office). The line for i in; do means that for the stated IP address, do the following.

You can see, on the next line, the word ACCEPT, so if I’m coming from the right IP address, I should be accepted onto the server as an SSH connection.

The problem was, the machines inside the network see the local IP addresses instead of the external IP addresses, hence it looked to the internal iptables like I was trying to connect to the network from an IP that wasn’t but

Solution: Unblock the relevant IPs

IP tables commands are added to every server we configure to block unwanted traffic from doing sneaky, hacky things but we’re already protected by a firewall here so, the above problem was unnecessary as well as unusual. I commented out the lines that were blocking my IP with a # and left it at that.

Symptom: the browser refused connection;
Solution: It turned out Apache wasn’t runningstart apache.

Although I’d set apache to run the previous day, I hadn’t put a provision on the machine to make sure Apache was started at bootup. Our VMs backup, update and reboot overnight, so the next day, when I came back to configure the rest of the setup, Apache wasn’t running. This question, answered on StackOverflow gives more detail as to how to set Apache to run at boot. Although there are differences based on distribution, essentially, every solution involves making a symbolic link from /etc/init.d/ to the appropriate run-level folder in /etc/.

Symptom: URL showed ~ A redirect loop.

It seems like by this stage, apache was running and when the request hit the right place, it has tried to fulfil its objective and forwarded to the right place. However, there’s a line in the Apache config file that takes care of redirecting and I’d missed something here.

My simple Apache config file looked a bit like this:

### Primary domain name ###

### Document root ###
VirtualDocumentRoot /var/www/

    ### Logs ###
    CustomLog /var/log/apache2/ combined
    ErrorLog /var/log/apache2/
    LogLevel error

    ### Admninistrator ###

    <Directory /var/www/>

            ### Rewrite rules ###
            RewriteEngine On
            RewriteBase /

            ### Restrict domain access ###
            RewriteCond %{HTTP_HOST} !^www\$ [NC]
            RewriteRule ^(.*)$$1 [L,R=301]


The part I had misconfigured was here:
RewriteRule ^(.*)$$1 [L,R=301]

Solution: Correct the RewriteRule to read:
RewriteRule ^(.*)$$1 [L,R=301]

The addition of http:// on the beginning of the domain stopped the infinite redirect because it was a clear demarcation of the domain, vs the directory structure within the site. You can have many /directories within one another but if you’ve got two slashes, there’s a lot less ambiguity about where the domain ends and the directory structure begins.

On a previous exercise, I had failed to enable the site I was trying to setup (i.e. failed to setup a symlink between a file in /etc/apache2/sites-enabled/ and /etc/apache2/sites-available/, so I made sure I had this site enabled with the command a2ensite /etc/apache2/sites-available/

Once this command was complete, I had a domain name, with an ‘A record’ pointed at my internal IP;,
I had an apache config file enabled on the VM at that address /etc/apache2/sites-available/
and I had an index.html file with “Hello World” content at the place I was sending the request:
### Document root ###
VirtualDocumentRoot /var/www/

Now, when I go to the domain name in my browser, I see “Hello World” in all its basic glory.


“Practise makes better” – You may be familiar with the phrase ‘practise makes perfect’ but you’ll get better at whatever you practise, whether it’s good or bad technique. Practise the wrong thing and you’ll get better at implementing things that way. So it’s important to synthesise an environment as close as possible to real production when training or practising, especially when it comes to domains and apache config.

Rather than investing in new domain names and hosting packages to practise on, you can use any domain, perhaps a spare, unused, speculatory one and an internal VM set up to be a server on your local network.

Next steps, configure some subdomains with more apache config files for this VM, to test your prowess with a digital curve ball…