The team at Big Bite Creative has developed a new website for Amnesty International using Gutenberg, soon to be launched at amnesty.eu. The agency worked in partnership with WordPress.com VIP to provide the London-based human rights organization with the tools to create multiple sites that could be uniquely customized for their editorial needs.

After successfully using Gutenberg to launch a site for an international bank, Big Bite CTO Jason Agnew said his team gained confidence to use the new editor for the Amnesty site. The client approached Bite Bite around the time of WordCamp Europe when Matt Mullenweg unveiled a roadmap for getting a stable Gutenberg release before the end of the year.

“On top of this the Amnesty project suited Gutenberg,” Agnew said. “Their brief mentioned 14 components which could be used to build out multiple sites. I honestly think it would have been difficult to build something that required this level of flexibility with a field manager like Fieldmanager, CMB2 or ACF. Perhaps it would have been possible with page builders like Visual Composer, but these platforms are still figuring out how they will work with the WordPress 5.0.”

Through the use of a combination of prompts, custom blocks, nested blocks, and predefined styles, Big Bite made it possible for even non-technical editorial staff to create and arrange content to build out websites for various outreach locations.

“It’s been fascinating to give the client full control over the site structure compared to the more traditional development of templates,” Agnew said. “We are still in the early stages of launching sites with the new platform, but the client has built up the EU site on their own without much support, which should be going live early October. Now they are in the process building out websites for Mali and Iran, with the goal to launch around 20 sites initially. We’ve had the editorial team describe the experience as fun – that’s from a team who have used WordPress with ACF in the past, which does offer an intuitive UI but still requires a level of training of what fields relate to what pieces of content on the front-end.”

As many others have reported, one of the most challenging things Big Bite encountered in extending Gutenberg was the project’s incomplete documentation.

“We’ve had our challenges, and particularly the Gutenberg documentation is not up to standard, which leads to a lot of time being wasted,” Agnew said. “But I have to say once our team get over the first block or two it wasn’t an issue. It’s important to say that the Gutenberg team Slack have been a great help when we did run into problems. We did discover IE11 support is still a work in progress, for example, copy & paste didn’t work, meta boxes wouldn’t render causing saving issues with posts.”

Agnew said for most issues there isn’t a lot one can do to resolve them apart from waiting for each update as the plugin improves, but it’s something agencies need to account for when working with clients. The Big Bite team also found that Gutenberg compatibility is still an issue for many of the plugins that they looked at using for the project.

“Apart from using Yoast we’ve mainly custom built the theme due to many plugins still requiring UI changes to work well with Gutenberg,” Agnew said. “Probably the most significant feature we wrote was language syndication system.”

Big Bite plans to open source Amnesty International’s full theme, which includes all of the custom blocks. Prior to that they are going to remove all the branding to avoid lots of new sites popping looking like the Amnesty brand. The agency is aiming for publishing the code the same day as WordPress 5.0 is released or earlier if the release is delayed beyond January.

For a closer look at the Amnesty International project, check out Big Bite’s announcement post. The video below was created in partnership with WordPress.com VIP and offers a tour of some of the custom Gutenberg blocks they created for Amnesty.

[youtube https://www.youtube.com/watch?v=OgF5ImDlCTw?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&w=627&h=353]