Lately I’ve been working on a WordPress Gutenberg plugin. The official WordPress documentation has always been a bit hit and miss due to them changing things so frequently but it’s been good for getting the initial plugin development environment setup. Unfortunately, within an hour of development I stumbled into my first big problem; several of the controls do not seem to exist!

ComboboxControl and the Flex Controls are the two that I wanted to use and despite being covered in the docs they are not actually included with the built in Gutenberg. If you try to use them the block will fail with the dreaded generic error:

"This block has encountered an error and cannot be previewed"

In the browser console you will see the following error:

wordpress react Warning: React.createElement: type is invalid -- expected a string

The solution is quite simple; install the Gutenberg plugin! The one that is bundled with WordPress is an older version. The main Gutenberg plugin project is very active and frequently updated:

That should solve most of your missing component problems. I actually got double unlucky as this latest Gutenberg version still does not include the ComboboxControl but I suspect that is due to some big changes they have been making to it which are covered in this pull request.

Today I was dabbling with the WordPress plugin builder and the first step is to run npx @wordpress/create-block which seems fairly straight forward except on Windows if you have a space in your username. For example, if your Windows username is “David Millington” then you will be blasted with a page of errors that look like this:

Error: EPERM: operation not permitted, mkdir 'C:\Users\David' TypeError: Cannot read property 'get' of undefined at errorHandler (C:\Users\David Millington\AppData\Roaming\npm\node_modules\npx\node_modules\npm\lib\utils\error-handler.js:213:18)
Error: EEXIST: file already exists, mkdir 'C:\Users\David' TypeError: Cannot read property 'get' of undefined at errorHandler (C:\Users\David Millington\AppData\Roaming\npm\node_modules\npx\node_modules\npm\lib\utils\error-handler.js:213:18)

Super intuitive.

The problem is that npx is tripping up when it’s trying to write to the npm cache directory due to it failing to parse the space in the username correctly.

The fix is quite simple.

  • Open a PowerShell window and CD C:\Users
  • cmd /c dir /x
  • You should see the short version of your username directory like DAVIDM~1
  • Make a note of that and then open your npm config file. For me that was C:\Users\David Milligton\.npmrc
  • Duplicate the line similar to this one:
  • ; cache=C:\Users\David Milligton\AppData\Roaming\npm-cache
  • With the new line you made, remove the ; from the start and replace the username with the short version you got earlier on:
  • cache=C:\Users\DAVIDM~1\AppData\Roaming\npm-cache
  • Save the config file

Now if I run npx @wordpress/create-block it works as expected and the real work can begin!

I’ve been using the Members plugin on a client’s WordPress site to define custom roles. It’s been working great except for one thing; the authors dropdown on the Gutenberg document editor does not show anyone who has a custom role.

I had a look around and found several posts that suggested using the the wp_dropdown_users_args filter which worked for the Quick Edit author dropdown but not for the main document editor. In fact I couldn’t find anybody with a solution for that since Gutenberg was introduced. I managed to suss it out for myself and thought I’d share the code for anyone stuck in a similar situation. The following goes inside functions.php. Make sure to replace “custom_role_one” and “custom_role_two” with your actual role names.

// Handles the Quick Edit authors dropdown
function display_custom_roles_in_author_dropdown($query_args, $r)
{
	if (isset($r['name']) && ($r['name'] === 'post_author_override' || $r['name'] === 'post_author')) {
		if (isset($query_args['who'])) {
			unset($query_args['who']);
        }
        $query_args['role__in'] = ['administrator', 'author', 'editor', 'custom_role_one', 'custom_role_two'];
    }
    return $query_args;
}
add_filter('wp_dropdown_users_args', 'display_custom_roles_in_author_dropdown', 10, 2);

// Handles the Gutenberg document editor authors dropdown
function display_custom_roles_in_gutenberg_author_dropdown($prepared_args, $request = null)
{
	if (isset($prepared_args['who']) && $prepared_args['who'] === 'authors') {
		unset($prepared_args['who']);
		$prepared_args['role__in'] = ['administrator', 'author', 'editor', 'custom_role_one', 'custom_role_two'];
	}
    return $prepared_args;
}
add_filter('rest_user_query', 'display_custom_roles_in_gutenberg_author_dropdown', 10, 2);

Recently I’ve been working on a new project as part of a development team. After a recent Git merge I found that I was unable to save any changes on WordPress posts and pages. I logged out of the site and cleared cache but then found I was unable to login. When I entered my details and submitted the form all that would happen is that I would be redirected back to the login page.

I read about several possible reasons for this and tried out several of the fixes but nothing worked. I put my Sherlock cap on and started checking the commits. It turns out the culprit had been hidden away in an old branch that only recently got committed.

It was inside the .htaccess file:

php_value upload_max_filesize 20MB
php_value post_max_size 25MB
php_value memory_limit 30MB
php_value max_execution_time 90

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Did you spot it? Kudos if you did! The culprit was the three PHP values that specify MB. PHP expects those to just say M as specified in the shorthand byte value note. After removing those naughty B’s I was able to login and save updates again. Here’s the working version:

php_value upload_max_filesize 20M
php_value post_max_size 25M
php_value memory_limit 30M
php_value max_execution_time 90

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

When trying to run my Laravel/PHPUnit integration tests I received this error:

ReflectionException: Class config does not exist

It is one of those vague error messages that can be triggered by a lot of different problems and none of the many solutions to these common issues worked for me. In the end the solution came down to some detective work.

I use the setUp() and tearDown() method. What was going wrong was that I did the parent::tearDown() before the rest of the cleanup. So a case of trying to use data after it has been torn down. The following is how it should be setup:

public function setUp(): void
{
   parent::setUp(); // Must be first
   // Your own setup
}
public function tearDown(): void
{
   // Your own teardown MUST come before down the parent::tearDown
   parent::tearDown(); // Must be last
} 

I run Windows 10 with a 3 monitor setup and occasional I get the problem that one of my open program will show up in the taskbar but if I click to focus on nothing will seem to happen. If I do alt-tab I will see it in the list with the thumbnail showing just a title bar and buttons with no visible area below it. Even if I select that then nothing will appear.

What has been happening is that programs have somehow become resized to the point they are not visible!

The trick to get them back to normal is:

  • Select the program in the taskbar so it has focus
  • Press alt-space
  • Select Maximise from the menu that opens
  • The program will appear full screen (you’re not done yet!)
  • Drag the title bar to make it a smaller window
  • It will return to being a floating title bar with no content so now you can drag the bottom right corner of that to expand it again
  • That’s all there is to it

Firefox has been driving me crazy for months now as the “back” action seems to trigger at random and return to the previous page, losing whatever I was working on. I use a Wacom Bamboo tablet pen but I have disabled the touch gestures on the pad. Somehow it still seems that the normal pen cursor is enough to trigger the gestures although it is not 100% reproducible. Tonight I have finally exercised the gremlin which turns out to be down to Firefox having built in gesture support enabled as default. To turn off the problem gestures is simple:

  • In the address bar type: about:config
  • In the Search filter type: gesture
  • Double click “browser.gesture.swipe.left” and delete the default value “Browser:BackOrBackDuplicate”, just leave it blank
  • Do the same for any of the other string type entries that are bugging you, I cleared them all
  • Changes are automatically saved as you make them
  • Close the page and you are done
  • If you change your mind later on you can return to the same page/filter and right click each modified row and choose Reset which will return it to the default value

I ran into a problem with Bitbucket recently and it took a bit of trial and error to work out a solution so I thought I’d share it to help save any other programmers from smashing their heads into their keyboards!  If you are using a Bitbucket Git repo on Windows with submodules and an SSH key and you run into a “Permission Denied (publickey)” error after running:

git clone --recursive git@bitbucket.org:your-account/your-repo-name.git

The solution is pretty simple.  Regenerate your SSH key WITHOUT a passphrase.  It seems to be a Windows issue with passing the auth details to the submodule clone commands.

Today is a double celebration; my web development company Nine Three Limited celebrated it’s 9th year of business on May 1st 2018 and my shiny new personal website is finally live!  My personal site fell into disuse over the last few years as my life took a big downward turn and I didn’t feel like sharing those dark days with the world but I have been fighting hard to overcome the challenges and the latest part of that journey involves me looking for a new job and I figure nobody would want to hire a web dev whose personal website was so outdated! 😅

The new site is fully responsive with a customised Bootstrap 4 layout.  I wrote a new WordPress plugin which uses the Node-Vibrant library to pick colors from the background images so I could have a dynamic theme engine which is something I’ve wanted to do for ages.  I’m very pleased with the result.  The theme selection is stored for one hour and then a new random one is picked.  You can also use the button in the bottom right to pick one sooner than that.  Another big change is that I have reworked the curriculum vitae page to separate my past “jobs” from my past “projects” as I found this was confusing recruiters.  I’ve covered a lot of work projects over the last 15 years but most of them have gone offline so now the new site is complete I can start going back over the projects and uploading screenshots for them. If you click on a project then it will expand so you can read more about it.  The data for each is fetched from the backend via Ajax so the initial page loads quickly and only spends time downloading the data for the projects you are interested in.

I still have to setup the old personal projects page for things like the Stargate Simulator and the Blade Runner Game Installer but those will come with time. Nothing has been lost, I just need to port them over to the new site format.  If you need any of the old projects before I have had time to put them live then drop a comment on this post and I’ll do what I can to help you out.

I am back.

It takes a lot of effort not to be free

— Randall Becker, The Man in the High Castle