Screen-Shot-2018-08-19-at-8.51.49-PM How a Munich-based Game Studio is Using WordPress and Gutenberg to Power Its Website design tips

Mimimi, an award-winning game studio based in Munich, has launched a new WordPress website that provides an interesting case study of Gutenberg in the wild. Although you may not be able to tell from the frontend, behind the scenes the new block-based editor is powering the layout with custom blocks, allowing the Mimimi team to easily update various sections of their website.

Luehrsen Heinrich, a local ad agency, built the site with a custom theme and seven blocks tailored to support the Mimimi team’s editing requirements.

“The general task was to create an elegant website that is very easy and fast to maintain and that will maybe later get a blog/news section,” Hendrik Luehrsen, CEO of Luehrsen Heinrich, said. “We knew our client has some amazingly creative and tech savvy people who trusted us. That made us confident to go into Gutenberg.”

The site uses a background block that enables editors to create different background patterns and wavy separators. Luehrsen said it works with ‘InnerBlocks’, similar to columns, so it can host any other block.

Bildschirmfoto-2018-08-19-um-00.37.07 How a Munich-based Game Studio is Using WordPress and Gutenberg to Power Its Website design tips

The site also has a custom Discord block that dynamically fetches some settings to display a set of users from Discord, which Mimimi uses for internal communication. The block displays an updated team roster. Social media and game blocks enable editors to easily update text and images with the layout already set.

Bildschirmfoto-2018-08-19-um-00.38.55-e1534729837643 How a Munich-based Game Studio is Using WordPress and Gutenberg to Power Its Website design tips

“I am pretty sure we could do the same layout to about 80% by combining columns, paragraphs, and images, but we didn’t want our client to fiddle around like in MS Word when you try to place an image,” Luehrsen said. “So creating a simple layout block was a logical thing.”

Mimimi’s website also uses a custom Mailchimp signup block and a custom spacer block that offers more flexibility and responsive breakpoints.

“All in all we (and our clients) are very happy with the result,” Luehrsen said. “We can see the future of WordPress ahead with this block based editor. But there is still a very long way to go until we really have nothing to smooth out anymore. There are certain things, that still require a lot of work.”

From a development perspective, Luehrsen said his team still struggles with the backend styles for the editor and that frontend and backend styles differ wildly because of that. They also haven’t yet found a maintainable, stable way of applying global styles to the Gutenberg editor. Other than those outstanding issues, the agency has enjoyed building for the new editor and has another Gutenberg-page product launching soon for a different set of clients.

Mimimi Games’ Gutenberg Experience: Editors Appreciate the Block Concept but Still Encounter Usability Issues

Johannes Roth, CEO of Mimimi Games, said his team has used WordPress in the past and sees Gutenberg as a major improvement for editing content.

“I absolutely love it, honestly!” Roth said. “It’s so much easier to understand the setup of the page and to customize it. If the Gutenberg editor gets a few user experience improvements, I definitely see it being the new state of the art for maintaining pages. But knowing that it’s still not officially released, it has been super robust and easy to understand from my point of view.”

Roth said his team appreciates the block setup, the ability to reorganize content, having small chunks of content to work on, and having custom tailored options per block.

“There are fewer distractions with weird toolbars and the focus is on content,” Roth said. “It also more closely resembles how we should think about splitting the formatting and decoration part from the content, as well as setting up proper pages for SEO friendliness.”

Roth identified two things that the Mimimi team misses from the previous editor:

  • Pressing tab to indent bullet lists and shift tab to reverse
  • Using ctrl+a to quickly select all text inside a block (it sometimes selects the whole page, which doesn’t help).

“The biggest issue with usability so far has been the combination of blocks and columns, which sometimes makes it really hard to hit the ‘…’ icon because the mouseover zones get stacked,” Roth said.

Enabling Storytellers on the Modern Web: Why Luehrsen Heinrich Took the Leap into Gutenberg Development as an Agency

Luehrsen said his agency decided to board the Gutenberg train last year at WordCamp Europe, after ditching their own ideas for creating a new page builder.

“One or two months before WCEU in Paris, we were sitting on a concept and an alpha version of our own page builder system that was frighteningly similar to the block based approach,” Luehrsen said. “That Q&A by Matt made us quickly realize that our project was already obsolete. We were lucky that we went pretty quickly through the five stages of grief (this post on structured data must have been “bargaining”). We reordered our priorities and started working with and on Gutenberg in the end of October or November of 2017.”

Luehrsen Heinrich is a small agency of just four people who are all involved with Gutenberg in different ways. Luehrsen is an active contributor on the project, submitting his first PR over the Christmas holidays. The team also has a developer who knows block creation inside and out, a designer who designs the UX and style of their blocks, and a project manager who works with the clients on their Gutenberg editing requirements.

Luehrsen said being a Gutenberg contributor helped immensely with learning block creation, despite having no prior experience with React and ES6.

“Working with Gutenberg, contributing to the project and getting immediate feedback from the amazing Gutenberg team, helped us a lot in bootstrapping our process,” Luehrsen said. “Our current block creation process builds heavily on the work Gary, Adam, Matias, and all the others have done, maybe with the exception that we are using LESS internally, and not SCSS. But from folder structure, to the build process, to the structuring of the file, we try to follow the Gutenberg repo style as closely as possible, as that makes debugging and finding issues very easy.”

After successfully making the jump to build Mimimi Games’ new Gutenberg-powered website, Luehrsen’s team is on board for building more client sites with the new editor. He sees it as a way to deliver a better user experience at a better value for the client.

“Our clients share our belief that storytelling in the modern web is much more than just writing text,” Luehrsen said. “TinyMCE as a ‘Rich Text’ editor did an amazing job, but still, combining different types of media to a coherent story was a mess with metaboxes, shortcodes, and sometimes for teasers you even had to leave the edit screen. Gutenberg combines all of this in a nice, unobtrusive way. And, as always: If you can get to a good result in a faster way, that time saved is what the client is essentially buying.”