Category: Programming

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

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.

The project I’m working on today allows users to type their own filenames. The actual file extension is added afterwards by my system. I needed to check that the filename itself is valid for Windows so I came up with this:

var file_name:String = ” #DOG!”£$%^&*()_+{}~@:?><|¬`-=[]#’;/.,”;

// Remove chars not allowed in Windows filename / : * ? ” < > |
file_name = file_name.replace(/[~\/:*?”<>|]/g, “”);

// Trim leading and trailing whitespace.
file_name = file_name.replace(/^s+|s+$/gs, “”);

// traces #DOG!£$%^&()_+{}@¬`-=[]#’;.,
trace(file_name);

Although it looks like crap that is still a valid file name. So then my system automatically appends the custom file extension that I’m using. I’m clearly not a regexp wizard but the above seems to work for me. Could probably combine the two but I’m not fussed for now. I got the trim regexp from the comments in this post.

Another option would of been to use the TextFields restrict property which will prevent them from typing or pasting in any of the illegal characters. In hind-site I’ll probably switch to using that as it will be less confusing for the user:

this.my_textfield.restrict = “^\\/:*?”<>|”;

So the long awaited third and final release of my Stargate Atlantis Computer Simulator is out today. I worked like a dog all this week to finish it off in time for New Years. All the files are up on sourceforge now and the new site has been updated. Might do some more work in the future but for now I’m closing this chapter of my life.

Project Started: Tuesday 9th November 2004 23:44
Project Completed: Saturday 1st January 2011 08:32
Over 20,007 Lines of code.

Keep the lights on. I’ll be back.

So I started work on my first two Facebook applications this week. They are both Flash Christmas games I’m making for Creative Lynx Ltd. They designed and planned them and I’m putting the mechanics into place. When we started testing both the apps certain people where getting an error message popping up in their virus scanners:

Error: Permission denied for <[Server Path Edited Out]> (document.domain has not been set) to call method Location.toString on <[Server Path Edited Out]> (document.domain=<[Server Path Edited Out]>).

Took a while of searching before I got to the solution. It seems to be down to the crossdomain.xml file we’re using on the server. The whole thing including the solution is written about here on Perone’s Programming Pad. In case the page ever goes down I’m making a copy of the before and after XML files that are used to sort this out.

Here’s the XML file as it stood when we were having the problem:

<cross-domain-policy>
<site-control permitted-cross-domain-policies="all" />
<allow-access-from domain="*" />
</cross-domain-policy>

Here’s the XML file that fixes the problem:

<cross-domain-policy>
<site-control permitted-cross-domain-policies="all" />
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*" />
</cross-domain-policy>

He talks about it showing up in Firefox’s error console. I’m guessing that Trend Antivirus is keeping an eye on the error console and flagging it up due to that. All the people that reported the problem work in the same office and have a network install of Trend i.e. they are all using the same version.

I use Flash CS5 and FlashDevelop. Never got into the Flex Eclipse malarky. Don’t really have the chance since all my clients use the Flash IDE. I like the Flash IDE as it’s convenient for quick graphical mock ups whilst at the same time allowing me to incorporate complex code written externally with FlashDevelop.

So now I’ve justified why I do what I do why am I writing this? Well sometimes there are things in Flex that the Flash IDE can’t do on it’s own. Luckily most of the Flex classes are just that, classes. I’ve found that the majority of the time you can use them in Flash IDE based projects with no problems. Occasionally I have run into walls where certain Flex SWC files are needed and that’s when you’re in real trouble since the Flash IDE chokes when it tries to load those. Luckily the Flex SOAP loading classes don’t fall into that area and are actually quite easy to use.

Continue reading “SOAP Web Service With Flash CS5 And The Flex SDK”

b2evolution uses a base tag to help with its template system. This is fine in modern browsers but depending on how the base tag is written IE6 may refuse to show the site at all, even going to the point of giving the user a popup warning dialogue. The fix is quite simple and I’ve implemented it in the past for both Joomla and CMS Made Simple. Now it’s time for the b2evolution version.

Continue reading “b2evolution Base Tag Issue”