WPTavern: How a Munich-based Game Studio is Using WordPress and Gutenberg to Power Its Website

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.

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.

“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.”

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…

Source: WordPress

WPTavern: Gutenberg 3.6 Adds New Icons for All Core Blocks

Gutenberg 3.6 was released today, featuring a design overhaul for the core icons in the block inserter. The blocks now use Material icons, which offer more options than the Dashicons. This update also improves the icons for the core embeds, which now display the corresponding icon for each embed service.

Gutenberg testers logged an issue regarding the limitations of Dashicons last year, citing the small number available, the inadequacy of their size, and the generic substitutions for embed service icons. The Gutenberg team closed the ticket, saying there was no sign in testing that showed the icons to be a problem and that potential contributors would need to “revisit with evidence” if they wanted to re-open the issue.

It’s not clear whether the team received the evidence or testing required to make this change but the icons become problematic in other ways. As the community started extending Gutenberg, block icon duplication became a problem, due to the limited number of Dashicons available.

“We really need block icons to move away from using dashicons as soon as possible,” Gutenberg technical lead Matías Ventura said in another discussion on a proposed solution. “We are already seeing plugins adding blocks where the icon overlap is very high just because of the limited icons set, which reduces clarity for users very drastically.”

Switching to Material icons solves this problem, ensuring there are unique icons for each block. The inserter design has also been updated as part of this overhaul. Previously, icons appeared with a grey background, as seen below:

The old design suddenly looks rather dated in comparison to Gutenberg’s 3.6 update, which allows for more whitespace around the icons:

The new embed icons are also greatly improved from previous versions of the plugin:

“The new icons aim to encourage people creating their own blocks to supply their own SVG,” Ventura said. “The hope is to make sure we can avoid multiple cases of duplicated icons diminishing the overall ability to quickly scan blocks.”

Ventura said Gutenberg will retain the ability to specify a Dashicon slug in the Block API but he encourages developers to “supply custom SVGs (or draw from the material icon pool) as much as possible.”

Gutenberg 3.6 also adds several new keyboard shortcuts, including inserting a new block before/after the current block, toggling the inspector settings, removing a block, and displaying a new modal help menu. The modal can be launched from the Settings button at the top of the editor and users can scroll through all available shortcuts.

This release also fixes many bugs that users have reported. Gutenberg will now open a new preview window if the prior window has been closed. It will also bring the preview tab to the front when clicking the preview button. Version 3.6 fixes several usability issues that testers found with the permalink UI. Check out the release post for the full list of all the fixes and changes included in 3.6.

Gutenberg 3.6 was released today, featuring a design overhaul for the core icons in the block inserter. The blocks now use Material icons, which offer more options than the Dashicons. This update also improves the icons for the core embeds, which now display the corresponding icon for each embed service. Gutenberg testers logged an issue regarding the limitations of Dashicons last year, citing the small number available, the inadequacy of their size, and the generic substitutions for embed service icons. The Gutenberg team closed the ticket, saying there was no sign in testing that showed the icons to be a…

Source: WordPress

WPTavern: WordPress.com Boots Sandy Hook Conspiracy Theory Sites, Bans Malicious Publication of Unauthorized Images of Minors

WordPress.com came under fire this week for hosting a site with conspiracy theories claiming the Sandy Hook Elementary School shooting was a hoax. The New York Times published an article titled “This Company Keeps Lies About Sandy Hook on the Web,” setting off a hailstorm of angry posts on social media that demanded Automattic take action.

“Posting conspiracy theories or untrue content is not banned from WordPress.com, and unfortunately this is one of those situations,” Automattic told the New York Times in a statement. “It is a truly awful situation, and we are sympathetic to the Pozner family.”

Leonard Pozner, father of Sandy Hook Elementary shooting victim Noah Pozner, claims that images of his son were being misused on a WordPress.com-hosted site where the author denied the tragedy and called his son a crisis actor. He filed copyright infringement claims on the images used on the conspiracy site in an attempt to get the content removed.

Automattic examined the images and determined that there was nothing illegal about their use on the site. The company sent Pozner a reply that said, “because we believe this to be fair use of the material, we will not be removing it at this time.”

In the New York Times article, Automattic admits its insensitivity in handling the situation, apologizing to the family, but said the posts in question “are not violating any current user guidelines, or copyright law.”

“The pain that the family has suffered is very real and if tied to the contents of sites we host, we want to have policies to address that,” Automattic told the New York Times.

WordPress.com Updates it Privacy Policy, Banning Malicious Publication of Unauthorized, Identifying Images of Minors

After consulting with the Internet Archive’s Wayback Machine, it appears WordPress.com has quietly updated its privacy policy, which now includes unauthorized images of minors on the list of things the platform considers private information. The previous policy appears below:

The updated policy adds “the malicious publication of unauthorized, identifying images of minors” to that list.

Searching Twitter for discussion surrounding Sandy Hook conspiracy sites turns up a slew of tweets calling on people to boycott WordPress.com and other Automattic products. However, there are also responses on the other end of the spectrum, with Sandy Hook conspiracy theorist supporters retweeting a user who claims that WordPress.com has shut down his site.

Minutes ago this morning, I discovered that WordPress has unilaterally and without warning shut down Fellowship of the Minds for alleged violations of “Terms of Service”. I will explore finding another server for FOTM. Please pray for America.

— Eowyn (@DrEowyn) August 14, 2018

WordPress just suspended my interim blog The Fundamental Option as well. That blog has been active for only the past 2 days, so what possible “terms of service” could have have violated? It’s war, folks. America is entering into very dark days. Be prepared.

— Eowyn (@DrEowyn) August 15, 2018

The site in question (fellowshipofminds.com) appears to have been removed, along with an interim site the author created following the first suspension. A number of other related sites have also recently been removed. These events are outlined in a post on memoryholeblog.org, a site maintained by James F. Tracy, a former professor of journalism and media who became known for his research questioning the Sandy Hook Elementary School massacre and Boston Marathon bombing. Tracy’s blog was also removed from WordPress.com in 2016 for violation of Automattic’s Terms of Service.

Automattic did not detail specific infractions in either case of removal. It’s not clear whether the site referenced in the New York Times article was removed for a new offense or a previous one. The removals seem to have coincided with WordPress.com’s updated privacy policy, but Automattic’s PR department has not responded to a request for comment on the matter.

“As with Automattic’s treatment of MHB, FOTM’s disappearance strongly suggests how WordPress.com’s policies are being tailored to placate outside parties whose foremost interest is in stifling political speech on potential high crimes, and how in this instance such poorly-founded grounds for censorship have triumphed over free speech,” Tracy said.

Historically, Automattic has been a stalwart defender of free speech on the web. It’s outlined as part of the WordPress.com’s User Guidelines:

WordPress.com strongly believes in freedom of speech. We have a vast audience spread across many cultures, countries and backgrounds with varying values and our service is designed to let users freely express any ideas and opinions without us censoring or endorsing them.

It’s not clear whether Automattic changed its policy in response to this situation or whether this situation revealed holes in it that the company wanted to improve. In either case, the policy change seems to have enabled Automattic to do what outraged onlookers wanted them to do, except outside of the emotional mandate issued by the New York Times.

Without the new privacy policy in place, removal of a site based on offensive material constitutes censorship. Automattic had already determined that the post using the child’s image, while distasteful and offensive, was fair use for the material. The image had likely already been used thousands of times by news organizations with a different narrative attached to it that is more in alignment with the majority’s view of the tragedy.

As it is a private company, Automattic’s terms of service do not have to reflect the full freedom of speech allowed by the law. However, the company has always upheld its reputation in the past as an uncompromising defender of its users when presented with requests for censorship.

In a recent post on Techdirt, Automattic general counsel Paul Sieminski and Holly Hogan detail how WordPress.com handles its role in managing intermediary liability when the company receives complaints regarding defamatory content:

Making online hosts and other intermediaries like WordPress.com liable for the allegedly defamatory content posted by users is often criticized for burdening hosts and stifling innovation. But intermediary liability isn’t just bad for online hosts. It’s also terrible for online speech. The looming possibility of writing a large check incentivizes hosts like Automattic to do one thing when we first receive a complaint about content: Remove it. That decision may legally protect the host, but it doesn’t protect users or their online speech.

That article explains the level of nuance involved in handling complaints and the costs associated with protecting its users’ freedom of speech. Automattic’s counsel concludes with an observation that “leaving such important decisions to the discretion of Internet hosts is misplaced and tilts the balance in favor of silencing often legitimate voices.”

WordPress.com is a Host for Websites, Not a Social Media Silo

WordPress.com’s platform is distinct from social networks in that it is not a social media silo. It acts more as a host and cannot have one-off shutdowns of sites anytime there is a public outcry.

“WordPress.com is much closer to being a common carrier than Facebook and other social media,” Dan Kennedy, associate professor at Northeastern University’s school of Journalism, said in response to the NYT article. “That difference really doesn’t get highlighted here.”

Self-hosted WordPress (.org) user and data journalist Matt Stiles also commented on the distinction, and followed up with me privately, identifying WordPress.com as “a free-speech sidewalk for the Internet.”

“WordPress.com needs to make clear to the public that it’s a host, not a place that controls — through algorithms or other curation, and revenue — content,” Stiles said. “I am NOT a supporter of sites like this. I just want WordPress to thrive as an open-source tool and as an important paid host for web sites. I’m also worried about WordPress.com having to make arbitrary decisions about content. It’s tough to define hate speech. We know it when we see it, but I worry about censorship on private platforms.”

Dave Winer also commented that the article failed to capture the distinction of WordPress.com as a host for websites:

WordPress.com isn’t like the others, it isn’t a silo, so banning him from that service will not necessarily have any affect on the presence of his site. He will be able to export his site, set up his own server, point the DNS entry at that server, and proceed on the open web and it will appear to outside viewers as if nothing happened. This will be the end of the discussion, unless the anti-speech advocates try to exert pressure on the open web. There they will find there is no CEO, no corporate headquarters, no shareholders afraid of losing value, none of the usual pressure points.

This particular situation regarding the Sandy Hook conspiracy site seems to have hit a nerve due to the fact that there are children involved. Despite WordPress.com’s quick privacy policy change in this instance, Automattic is still a rare outlier among publishing companies when it comes to support of free speech on the web. Media outlets and tech companies are increasingly clamoring for offensive content to be removed, instead of taking a principled stand against censorship.

Today more than 200 newspapers, including the New York Times, are coordinating to publish editorials calling out President Trump’s characterization of the press as the “enemy of the people.” Corporate-owned news media is ready to decry attacks on free speech, but do they really believe in it when it counts? That freedom isn’t predicated on whether the speech is true or unoffensive to readers.

Calling out a free speech platform like WordPress.com, without any distinction for its vital role in enabling journalists across the globe, is a coercive attempt to exact a desired result. What WordPress.com has done is groundbreaking in democratizing publishing and enabling bloggers to break news on their own sites.

The New York Times raking WordPress.com over the coals for its refusal to censor its users is an egregious double standard. A publication cannot call for free speech for itself while eating up the rights of everyone else they don’t agree with. Principles aren’t principles if they only serve you when they are convenient.

Forcing the censorship of offensive speech may feel like swift justice in the short term, but it weakens the fabric of a free society. Let discerning readers make up their own minds when they come across sites disseminating conspiracy theories. Although it may be an unpopular stance, the tragic nature of this particular offense cannot bypass the principles that underpin our basic freedoms.

WordPress.com came under fire this week for hosting a site with conspiracy theories claiming the Sandy Hook Elementary School shooting was a hoax. The New York Times published an article titled “This Company Keeps Lies About Sandy Hook on the Web,” setting off a hailstorm of angry posts on social media that demanded Automattic take action. “Posting conspiracy theories or untrue content is not banned from WordPress.com, and unfortunately this is one of those situations,” Automattic told the New York Times in a statement. “It is a truly awful situation, and we are sympathetic to the Pozner family.” Leonard Pozner,…

Source: WordPress

WPTavern: Yoast SEO 8.0 Introduces Gutenberg Sidebar Integration, Revamps Classic Editor Meta Box

Yoast SEO 8.0, featuring the plugin’s first pass at integrating with the Gutenberg interface. This major update also revamps the classic editor’s meta box for those who do not have the Gutenberg plugin installed.

In the past, the Yoast SEO meta box was displayed below the post editor. In the Gutenberg UI, the meta box has been redesigned to fit in the sidebar. Those testing Gutenberg will also temporarily find an additional meta box below the post, as the Yoast team has not yet added all optimizations to both yet. In the future, users will have the option to choose between the two.

The updated design displays individual optimizations in collapsible panels with colored smiley face indicators for feedback at a glance. The snippet preview and social previews feature can still be found in the meta box below the post editor. They will be integrated more tightly into the Gutenberg UI in a future round of updates.

image credit: Yoast SEO

Yoast SEO 8.0 also brings some of the meta box UI improvements to the one displayed in the classic editor. It organizes all of the Yoast SEO tools into collapsible panels for a look that is cleaner than the tabs found in the previous UI.

Version 8.0 is the first step towards Gutenberg integration. The Yoast SEO team is working on using modals to display previews for snippets and social posts from the sidebar so the interface isn’t split across two meta boxes. Users will eventually have the option to toggle either meta box display option into view, including those who are using the classic editor. The team is also working on allowing users to create blocks with the correct structured data automatically attached for things like books, recipes, products, and other specific content types.

WordPress.org has a handful of popular SEO plugins and Yoast SEO is currently leading the pack when it comes to integration with the Gutenberg UI. In a recent support thread, All in One SEO Pack creator Michael Torbert said his plugin is “compatible with Gutenberg and will be getting new features to work with it in time.” Torbert doesn’t have full Gutenberg integration assigned to a milestone on GitHub yet.

The SEO Framework, another SEO plugin growing in popularity, appears to be in the same boat if GitHub activity is any indication. The plugin’s author, Sybre Waaijer, has discussed the possibility of inserting the meta box into the Gutenberg sidebar, similar to the Yoast implementation.

Yoast SEO 8.0, featuring the plugin’s first pass at integrating with the Gutenberg interface. This major update also revamps the classic editor’s meta box for those who do not have the Gutenberg plugin installed. In the past, the Yoast SEO meta box was displayed below the post editor. In the Gutenberg UI, the meta box has been redesigned to fit in the sidebar. Those testing Gutenberg will also temporarily find an additional meta box below the post, as the Yoast team has not yet added all optimizations to both yet. In the future, users will have the option to choose…

Source: WordPress

WPTavern: Sami Keijonen’s Foxland Themes and Plugins are Now Available for Free

WordPress theme designer and developer Sami Keijonen has made all of his theme and plugin products at Foxland available for free. Keijonen’s WordPress.org-hosted themes are active on more than 10,000 websites.

During the past three years he began taking on more client work, which gave him less time for theme building and maintenance. Last month he accepted a front-end engineer position at 10up that is keeping him busy.

Fans might remember Keijonen’s Mina Olen Free WordPress Theme Experiment when he made the theme available for free on GitHub to see if potential customers would be inspired to purchase after being able to test drive the theme on their own sites. At that time he said he struggled to support his theme shop, because the business aspect of it wasn’t one of his strengths.

It’s easy to get lost in all the competition in the WordPress theme industry, especially when major players have more money to drop on advertising and support staff. The days of building a beautiful theme and selling it without any kind of marketing are long gone. Prospective theme developers have to be ready to embrace the challenges of competing in a much wider market in 2018.

“Foxland isn’t a gold mine,” Keijonen said in his announcement. “Foxland brings about 3,000 to 4,000 Euros per year, which is OK but my goal was 10,000 euros.”

Customers appreciated Keijonen’s attention to detail, accessibility, and performance. Respected WordPress theme author Tung Do said Keijonen’s themes are “great examples of best practices.” Many of them also include support for popular plugins.

For example, Checathlon, one of his best works, is active on foxland.fi. It offers built-in styles for Easy Digital Downloads (including product and account pages), Custom Content Portfolio, and Jetpack (testimonials, portfolio, and email subscription widget).

The Foxland collection includes several beautiful minimalist free themes with previously-pro versions that enable additional Customizer settings, page templates, and widgets. All of Keijonen’s custom plugins (created to accompany the themes) are also available for free.

The Foxland shop has cancelled all the recurring subscriptions but will continue to support existing purchases up to a year from the purchase date. Keijonen said he will maintain most of the old themes and plugins with small updates coming in the future but plans to deprecate some as well.

The landscape of WordPress theming is about to change quite a bit when Gutenberg is merged into core. Keijonen said he plans to embrace these changes by creating new free themes with Gutenberg support, built on more modern code.

WordPress theme designer and developer Sami Keijonen has made all of his theme and plugin products at Foxland available for free. Keijonen’s WordPress.org-hosted themes are active on more than 10,000 websites. During the past three years he began taking on more client work, which gave him less time for theme building and maintenance. Last month he accepted a front-end engineer position at 10up that is keeping him busy. Fans might remember Keijonen’s Mina Olen Free WordPress Theme Experiment when he made the theme available for free on GitHub to see if potential customers would be inspired to purchase after being…

Source: WordPress

WPTavern: New BackYourStack Tool Drives Financial Support for Open Source Projects

Open Collective launched in 2017 as a new organization that helps groups raise funds and manage them transparently. The service is now widely used by many open source projects. Webpack, one of the first major Open Collective success stories, was able to fund its first full-time developer through the service and is now operating on an estimated annual budget of $331,471. The San Francisco WordPress meetup (WPSFO) is one example of a WordPress group that successfully uses the service to receive sponsorships that help cover expenses for events.

Open Collective has launched a new tool called BackYourStack that helps people and organizations become aware of projects they use that need funding. The tool scans GitHub accounts (for individuals and organizations) and identifies projects that have already set up accounts on Open Collective. The tool shows all detected dependencies and the repositories where they are used.

Here are a few sample results you get from scanning the WordPress GitHub account:

The results display where project is used, the number of full-time maintainers, progress to reach the next goal, and a few organizations that are already backing the project. Open Collective also allows backers to support multiple dependences in bulk via a lump sum as an alternative to backing each project individually.

Not every open source project listed on Open Collective will have the need to fund salaries and events, but even a small yearly budget can reduce out-of-pocket costs for open source maintainers for things like hosting and promotional costs. Many widely used open source projects go without funding because users are not aware of their needs. BackYourStack helps people and organizations make a direct connection to the projects they depend on.

Open Collective launched in 2017 as a new organization that helps groups raise funds and manage them transparently. The service is now widely used by many open source projects. Webpack, one of the first major Open Collective success stories, was able to fund its first full-time developer through the service and is now operating on an estimated annual budget of $331,471. The San Francisco WordPress meetup (WPSFO) is one example of a WordPress group that successfully uses the service to receive sponsorships that help cover expenses for events. Open Collective has launched a new tool called BackYourStack that helps people…

Source: WordPress