Как мюнхенская игровая студия использует WordPress и Gutenberg для создания своего веб-сайта

Mimimi, отмеченная наградами игровая студия из Мюнхена, запустила новый веб-сайт WordPress, на котором представлен интересный пример использования Гутенберга в дикой природе. Хотя вы, возможно, не сможете сказать это с внешнего интерфейса, за кулисами новый блочный редактор дополняет макет пользовательскими блоками, позволяя команде Mimimi легко обновлять различные разделы своего веб-сайта.

Luehrsen Heinrich, местное рекламное агентство, создало сайт с пользовательской темой и семью блоками, адаптированными к требованиям редактирования команды Mimimi.

«Общая задача состояла в том, чтобы создать элегантный веб-сайт, который очень легко и быстро поддерживать и который, возможно, позже получит раздел блога/новостей», — сказал Хендрик Люэрсен, генеральный директор Luehrsen Heinrich. «Мы знали, что у нашего клиента есть удивительно творческие и технически подкованные люди, которые доверяют нам. Это вселило в нас уверенность в том, что мы приступим к работе с Гутенбергом».

На сайте используется фоновый блок, который позволяет редакторам создавать различные фоновые узоры и волнистые разделители. Люэрсен сказал, что он работает с «внутренними блоками», похожими на столбцы, поэтому может содержать любой другой блок.

На сайте также есть настраиваемый блок Discord, который динамически извлекает некоторые настройки для отображения набора пользователей из Discord, которые Mimimi использует для внутреннего общения. В блоке отображается обновленный состав команды. Блоки социальных сетей и игр позволяют редакторам легко обновлять текст и изображения с уже установленным макетом.

«Я почти уверен, что мы могли бы сделать такой же макет примерно на 80%, объединив столбцы, абзацы и изображения, но мы не хотели, чтобы наш клиент возился, как в MS Word, когда вы пытаетесь разместить изображение», — сказал Люрсен. . «Поэтому создание простого блока макета было логичной вещью».

На веб-сайте Mimimi также используется настраиваемый блок регистрации Mailchimp и настраиваемый блок-разделитель, который обеспечивает большую гибкость и отзывчивость точек останова.

«В целом мы (и наши клиенты) очень довольны результатом», — сказал Люрсен. «Мы можем видеть будущее WordPress с этим блочным редактором. Но до того момента, когда нам действительно больше нечего будет сглаживать, предстоит пройти еще очень долгий путь. Есть определенные вещи, которые еще требуют много работы».

С точки зрения разработки Люэрсен сказал, что его команда все еще борется со стилями бэкенда для редактора, и из-за этого стили внешнего интерфейса и бэкенда сильно различаются. Они также еще не нашли удобный и стабильный способ применения глобальных стилей к редактору Gutenberg. Помимо этих нерешенных вопросов, агентство получило удовольствие от работы с новым редактором и вскоре запустит еще один продукт на странице Гутенберга для другого круга клиентов.

Опыт Mimimi Games с Gutenberg: редакторы ценят концепцию блоков, но все еще сталкиваются с проблемами юзабилити

Йоханнес Рот, генеральный директор Mimimi Games, сказал, что его команда использовала WordPress в прошлом и считает Гутенберг важным улучшением для редактирования контента.

«Мне очень нравится, честное слово!» — сказал Рот. «Намного проще разобраться в настройке страницы и настроить ее. Если редактор Gutenberg получит несколько улучшений пользовательского интерфейса, я определенно увижу, что это новый уровень техники для поддержки страниц. Но, зная, что он еще не выпущен официально, с моей точки зрения, он был очень надежным и простым для понимания».

Рот сказал, что его команда ценит настройку блоков, возможность реорганизации контента, наличие небольших фрагментов контента для работы и наличие настраиваемых параметров для каждого блока.

«С странными панелями инструментов меньше отвлекающих факторов, и основное внимание уделяется контенту», — сказал Рот. «Это также больше похоже на то, как мы должны думать об отделении части форматирования и оформления от контента, а также о настройке надлежащих страниц для оптимизации SEO».

Рот определил две вещи, которых команде Mimimi не хватает в предыдущем редакторе:

• Нажатие Tab для отступа маркированного списка и Shift Tab для реверса
• Использование ctrl+a для быстрого выделения всего текста внутри блока (иногда выделяется вся страница, что не помогает).

«Самая большая проблема с удобством использования до сих пор заключалась в сочетании блоков и столбцов, что иногда очень затрудняло нажатие значка «…», потому что зоны наведения мыши складываются», — сказал Рот.

Включение рассказчиков в современный Интернет: почему Люэрсен Генрих совершил скачок в развитии Гутенберга в качестве агентства

Люэрсен сказал, что его агентство решило сесть на поезд Гутенберга в прошлом году на WordCamp Europe после того, как отказалось от своих собственных идей по созданию нового конструктора страниц.

«За один или два месяца до WCEU в Париже мы работали над концепцией и альфа-версией нашей собственной системы компоновщика страниц, которая была пугающе похожа на блочный подход», — сказал Люрсен. «Эти вопросы и ответы Мэтта заставили нас быстро понять, что наш проект уже устарел. Нам повезло, что мы довольно быстро прошли через пять стадий горя (должно быть, этот пост о структурированных данных был «торгом»). Мы изменили наши приоритеты и начали работать с Гутенбергом в конце октября или ноября 2017 года».

Luehrsen Heinrich — это небольшое агентство, состоящее всего из четырех человек, которые по-разному связаны с Гутенбергом. Люэрсен является активным участником проекта, отправив свой первый PR на рождественские каникулы. В команде также есть разработчик, который знает создание блоков от и до, дизайнер, который разрабатывает UX и стиль своих блоков, и менеджер проекта, который работает с клиентами над их требованиями к редактированию Gutenberg.

Люэрсен сказал, что участие в Gutenberg очень помогло в создании обучающих блоков, несмотря на то, что у него не было опыта работы с React и ES6.

«Работа с Гутенбергом, участие в проекте и получение немедленных отзывов от замечательной команды Гутенберга очень помогли нам в запуске нашего процесса», — сказал Люрсен. «Наш текущий процесс создания блоков в значительной степени основан на работе, проделанной Гэри, Адамом, Матиасом и всеми остальными, возможно, за исключением того, что мы используем LESS внутри, а не SCSS. Но от структуры папок до процесса сборки и структурирования файла мы стараемся максимально точно следовать стилю репозитория Gutenberg, поскольку это упрощает отладку и поиск проблем».

После успешного перехода к созданию нового веб-сайта Mimimi Games на базе Gutenberg команда Люэрсена готова создать больше клиентских сайтов с помощью нового редактора. Он видит в этом способ улучшить взаимодействие с пользователем по более выгодной для клиента цене.

«Наши клиенты разделяют наше убеждение, что рассказывание историй в современной сети — это гораздо больше, чем просто написание текста, — сказал Люрсен. «TinyMCE как редактор «Rich Text» проделал потрясающую работу, но, тем не менее, объединение различных типов мультимедиа в связную историю было беспорядком с метабоксами, шорткодами, а иногда для тизеров вам даже приходилось покидать экран редактирования. Гутенберг сочетает все это красиво, ненавязчиво. И, как всегда: если вы можете быстрее достичь хорошего результата, сэкономленное время — это то, что клиент, по сути, покупает».