In this post we’ll create a log-out mutation in GraphQL, and a custom React Hook to utilise it. I’ll be using Apollo Client to make the actual API calls.
I could have tried using a serverless database such as FaunaDB, but I chose WordPress because of familiarity, what it gives you for free, and it’s flexibility when combined with WP GraphQL. I did however need to build a login system. To do this I created a GraphQL login endpoint, and handled user sessions using Cookies.
I've been experimenting with Docker as an alternative to Vagrant (and VVV) for WordPress development.
I had looked into Docker in the past, but given how easy Vagrant and VVV were, I was in no hurry to switch. VVV still is awesome (there is an excellent getting started guide here), but since settling on Vagrant, the tools and ecosystem around Docker have significantly improved.
Mainly to satisfy my own curiosity, but also hoping to use less system resources (since I currently code on a Macbook Air) I finally gave Docker a fair chance. I wanted to share some of the things I’ve learned over the past week whilst switching.
Range Inputs are HTML elements which let users select a numeric value between a specified minimum and maximum value. They support single values by default.
As part of the WooCommerce Blocks project we’ve been working on converting WooCommerce widgets to Gutenberg blocks. One of those happens to be a price slider which currently uses jQuery UI. For blocks we’re using React.
Rather than use a library, we were really keen to use native range inputs to keep our dependencies to a minimum, and so the range inputs were semantic and keyboard accessible. Our idea was to overlay 2 range sliders to form a single component. I’d like to share some of my findings.
When the WooCommerce checkout is processed it requires that gateways return an array (which is then converted into JSON) telling the checkout whether or not it was successful. It’s been this way since v1. Here is a basic example from the PayPal gateway:
The above for example returns a successful response and tells the checkout to redirect the user to the URL provided.
In 2.4+ this was made more strict in that the response must be valid JSON. Anything else in the response (such as HTML, notices or whitespace) will invalidate this JSON and you may see an error along the lines of:
SyntaxError: Unexpected token
WooThemes own gateways have all been tested for 2.4, however, we’ve seen some less-supported gateways break due to returning invalid content.
I’ve seen a few vocal users complaining about this recently on the forums (some even feeling the need to attack me personally, thanks guys) and thought it best to post a few steps on how you can narrow down the issue.
First off its always best to rule out your plugins and theme by disabling them, even though a lot of users seem to ignore this step. It is only temporary and helps narrow down the issue. Much better than shouting at me on WordPress.org.
Lets assume this does not narrow down the issue for a moment. How would you know if content is being output? The answer is in your browser console.
Lets simulate an error. In the paypal gateway, just before the array is returned I’ll add:
trigger_error( 'Uh oh' );
This triggers the error as expected:
Now lets try to debug this like someone who does not know where the error is coming from.
In Chrome, go to View > Developer > Javascript Console whilst viewing the checkout.
Now trigger the error again.
After the error is shown, in the console go to the Network tab and click XHR:
In the list you’re see one which looks like this: ?wc-ajax=checkout. Click on that and go to the response tab:
Notice in my above example, there is the notice. This invalidates the JSON.
A valid JSON response {starts and ends with a bracket} – if there is an error, white space or content before or after those brackets, that is your issue.
In some cases the error will be obvious and allow you to patch or disable the cause.
Today I did a talk at WordCamp Netherlands on user onboarding for WordPress plugins. This was my first ever WordCamp talk and it was an interesting, but nerve-wracking, experience. My slides for the presentation are below. Thanks to everyone who attended, and I hope it was useful.!
By now you’ve probably heard the news that Automattic (A8c) acquired WooThemes, where I was working as a developer for 3 years. July 1st I officially became an Automattician.
The weeks leading up to the acquisition were surreal; full of questions, a few awkward moments (it was top secret after all) but exciting nevertheless, and I was happy to be invited along with several others to New York to meet fellow Automatticiansand be there for that bombshell of an announcement.
If acquisition were inevitable, I’m genuinelyrelieved thatit was Automattic showing the interest. WooThemes and Automattic are very similar culturally and have similar aspirations. I know the team and products are going to be well looked after, and all the people I have met so far from A8c have been really friendly. So far my day to day activities have changed very little and everything feels completely natural.
Automattic has a strict policy that employees cannot have paid side projects, whether client or product work. For Mike to stay at Automattic, he had to figure out what the future of WP Job Manager would be.
A8c expressed interest in acquiring the plugin and we came to an agreement which was a huge relief for me as I wanted to ensure whomever took over would actually look after the plugin and its users.
Anything was an option, including making WPJM free or selling it to a third party, but I’m glad we came to the solution we did. Since WPJM is part of Automattic now there’s no real or perceived conflict to the continuing work on it or revenue from it.
– Matt Mullenweg
Backed by A8c I think the project has a bright future. I’m still working on the dev side and I imagine more hands will be added in the coming months to keep things moving.
Looking ahead, I’m excited to continue and focus my attention on WooCommerce. Up until now we’ve had a tiny team (of ~4 developers) and it’s done fantastically well, but with more resources and people at our disposal who knows what we can achieve. We’ve already had some new people come over on rotation and its great to get fresh eyes on all of the projects and extensions.
Overall, I think that my move to Automattic, and consequential winding down of side projects, is going to have a positive impact on my life in general. I already have more free time, and things will be even better now that I don’t need to deal with tedious accounting and VAT returns for my businesses. I was even able to enjoy a vacation without the worry of supporting my products which I’ve not been able to do for years. It felt great.
And of course I may be able to blog a little more often 🙂
p.s. Please consider working with us – we’re always looking for talented devs and support staff!