 Спасибо, здравствуйте. Сегодня мы поговорим о Гуттенберг, нашем опыте работы с ним, о достижениях и перспективах. Забегая на перед, скажу, мы полностью довольны полученным результатом. Немного истории. Давайте вернемся в прошлое, в 2017 год, когда Гуттенберг плагин впервые анонсировали на WorldCamp Europe 2017. Я хорошо помню свою реакцию на это событие. Она была, ну, наконец-то. Я давно работаю с WordPress и классическим редактором. Еще в далеком 2012 году такие плагины, как Visual Composer и Content Editor, пытались внедрить блочную структуру WordPress. Потом появилось множество других решений. Они быстро набирали популярность. И потребность визуально редактирования нельзя было продолжать не замечать. Мир постоянно меняется, и WordPress должен быть диптим к изменениям, чтобы оставаться лидером. Я уверен, что команде нелегко далось такое решение. Для меня WordPress всегда был примером консерватизма, стабильности и простоты. Я рад, что они пошли на этот шаг. Уже в 2018 гуттенберг включают FEDRO вместе с релизом WordPress 5, несмотря на критику сообщества. А в 2019-м было анонсирована дорожная карта, 9 проектов на 2019 год. В нее вошли создание блока навигации, портирование существующих виджетов в блоке, создание библиотеки блоков на WordPress.org и другие приоритетные задачи. Однако так ли все хорошо на самом деле? На слайде вы видите количество установок гуттенберг планина. 200 тысяч активных установок, к сожалению, нам ни о чем не говорит, так как редактор уже встроен WordPress. Более интересная цифра, 5 миллионов. Это количество сайтов, которые предпочли остаться с классическим редактором. Сюда также входят и те, кто использует другой визуальный редактор. Сообщество и пользователи с третьей гуттенберг неоднозначно. Люди боятся перемен, не хотят что-то менять и изучать новое. На слайде показан скриншот страницы отзывов о гуттенберг. Большая часть из них негативные. Я не понимаю этих людей. Мой опыт работы с новым редактором и результат, который мы достигли, говорят совершенно о противоположной оценке. Альтернатива. Будет некоррект и мне упомянуть про альтернативные решения. Многие из них пользуются большой популярностью и даже идут на шаг впереди по функциональности. Я не буду сравнивать или навязывать вам с выточку зрения. Я покажу вам возможности, а выбора останется за вами. Когда год назад перед нами встал вопрос. Хорошо, вот мы, вот гуттенберг и что дальше. Мы приняли решение, что мы либо плывем в одной лодке, либо можем оказаться за бортом. Почему? Чтобы оставаться лидером, компания должна внедрять инновации. Постоянные доработки и улучшения недостаточны. Необходимые кардинальные изменения. Гуттенберг это не очередной визуальный редактор. Гуттенберг это показатель того, что ворот презаготовки изменениям. После выхода ворот пресс 5 такие лидеры как Jetpack, WooCommerce Yost и другие оптимизировали свои продукты и решения под новый редактор. Команда Automatic добавила его поддержку в Desktop и мобильное приложение. Произошла коллаборация сообщества для достижения общих целей. Это замечательно. Только за последний год количество контрибьюторов плагина выросло с 200 до практически 500 человек. Создавая новый сайт или блог на WordPress вы получите прекрасный инструмент прямо из коробки. Вы всегда будете уверены в удобстве, стабильности и полной поддержки. Если действительно в прошлом году Гуттенберг был готов на 10 процентов, а в этом году на 20, то представьте, какие перспективы нас ждут в будущем. Наверное многие помнят эту страницу. Она изначально была построена в редактор и демонстрировала новые подходы создания контента. Вот текста напрямую в область редактирования, перемещение блоков, возможность растянуть блок на всю ширину сайта. Это было что-то новое и необычное. А использование комментарии для хранения служебной информации действительно инновационным. Однако новые возможности требовали от нас и нового подхода в создание тем. Гуттенберг, как и многие редакторы, используют блокную структуру. Вы можете добавить переместители, кастомизировать блок, и для этого не нужно много знаний. Блоки стали хорошей заменой устаревшим шоткодом и позволили сфокусировать внимание на создание сайта. Однако мы понимали, что нашим пользователям необходимо немного больше возможностей, немного больше блоков. Так появился Гетвит Плагин и наша первая Гуттенберг тема. Спасибо команде WordPress, которая предоставила все необходимое для старта, включая примеры API и инструменты. Оба продукта доступны на WordPress.org. Вы можете легко опробовать их действия или использовать для своих проектов. Гетвит Плагин это коллекция из 34 дополнительных блоков. На данный момент это одна из самых больших коллекций. В нее входят слайдеры, гугл карты, контакт форма Instagram видео и множество других простых и сложных элементов. Все то, что мы привыкли видеть на современном сайте. Гуттенберг редактор гармонично вписался в интерфейс WordPress. Ребята постоянно добавляют какие-то улучшения, чтобы работать в нем было еще более удобно. После нескольких недель знакомства он стал родным и привычным и другим редактором совершенно не хотелось возвращаться. В гетвит блоках мы старались максимально следовать ключевым с концептом и принципом Гуттенберг. Пользователи используют единый интерфейс. Все на сайте редактируется напрямую. Создание контента должно оставаться интуитивно понятным. Блоки не должны быть перегружены настройками. Мы не концентрировали свое внимание на излишние стилизации, оставив ее разработчикам. Даже в таких сложных по структуре блоках как слайдер, прямое редактирование мы вынесли на первое место. Следуя принципу иерархии нам удалось разбить его на более мелкие блоки и использовать встроенные изображения заголовок и парахров как основу. Еще одним примером блокной структуры является элемент персона. В данном случае мы использовали созданный ранее блок социальных иконок, который идеально подошел для решения задачи. Как видите любой блок может быть разбит на более мелкие, что позволяет ускорить и унифицировать процесс разработки. Создав я писал блок один раз, он легко может стать частью большего блока, шаблона или виджета. Другой удобной функцией Gutenberg является трансформация блоков. Вы можете трансформировать заголовок в параграм и наоборот. Изображение в галерею или как показано на слайде список недавних постов в карусель. Это удобно, позволяет экспериментировать, чтобы найти оптимальное представление, создаваемым вами контента. В идее ответпладения мы не остановились на статических блоках. Мы также позаботились об удобном выводе пользовательских типов данных. Вы можете выбрать какие посты или постайпы показать, отфильтровать их и их вывод указав категории, теди или другие таксиономии. У вас также есть возможность создать шаблон вывода каждого поста. В гетветпладине мы сделали заготовки из самых популярных шаблонов, чтобы вам было легче начать. Всем нравится достигать цели, прикладывая минимальное количество усилий, чтобы процесс создания сайта для пользователя стал более простым, мы создали библиотеку шаблонов, которые являются хорошей отправной точкой. Выбрав необходимый шаблон, вам остается лишь заменить контент на собственный. И как результат всего вышасказанного, на слайде вы видите одну из наших тем для бронирования апартаментов. Она полностью создана под Гуттенберг и собрана на гетветблоках. Логика бронирования и вывод реализованный через собственный пладин, он также интегрирован с новым редактором. Гуттенберг объединил два наших продукта в едином интерфейсе. Удобным, понятным и доступным для наших пользователей. Прекрасно, не правда ли? В скором времени, навигационное меню также будет редактироваться визуально, совместно с другими элементами сайта. На слайде вы видите пример блока меню. Данная и следующая функция пока находится в разработке. Однако уже сейчас вы можете попробовать их в действии. Как я говорил ранее, фаза два разработки Гуттенберг идет полным ходом, и одним из направлений является перенос всех существующих виджетов в блоке. Также ведутся эксперименты по созданию динамических виджет зон. Как только эту опцию включат в WordPress, вы сможете легко портировать все ваши блоки. С самого начала редактор блоков создавался для того, чтобы быть чем-то больше, чем просто редактор контента. Фаза два переносит Гуттенберг не только в другие части сайта, такие как меню и виджеты, но и к полному редактированию, включая header и footer. В приведенном на слайде примере каждый элемент на странице состоит из блоков, и может напрямую редактироваться пользователем. Полное визуальное редактирование в едином интерфейсе с использованием блоков может коренным образом изменить подход к созданию и дизайну сайтов. После всего сказанного я уверен, что аудитория этого зала может разделить на две группы тех, кто верит Гуттенберг и тех, кто боится в этом признаться. Спасибо. Ну что, хочу сказать большое спасибо за доклад, но как бы я знал Гуттенберг, но вот насчет вашей темы и плагина, первая мысль была, как жаль, что я не знал этого раньше. Сколько он мог приметь? Ну у меня вот по поводу Гуттенберга есть такая боль, с которой я сталкивался. И, может быть, вы знаете ее решение, что вот, грубо говоря, есть набор блоков, и есть какие-то пост-тайпы. И получается, что у меня все эти блоки доступны во всех пост-тайпах. Это боль, потому что мне, например, в блоге, не нужны какие-то виды виджетов. В каком-то, допустим, лендинг пейдж пост-тайпе, они нужны. Как вы знаете, какой-то рецепт, как это все разделить, чтобы все этой каши не было доступно в разных пост-тайпах. На вопросы это основная боль, почему мне не очень комфортно использовать Гуттенберг. Спасибо за вопрос, но я его не очень... Перефразирую. Вот у вас есть 34 ваших блогов. Вопрос, как сделать, чтобы на каком-то определенном типе контента, например, новостях были не все 34, а 10. Возможно ли это? Чтобы клиент, который добавляет контент, он не запихнул, что-то не испортил дизайн, потому что новости должны выглядеть, ну, эвент. В эвенте, например, должен быть какой-то картиночка, какая-то дата, какой-то везивых полей, все. Там не должно быть карусель, не должно быть каких-то релейтет или еще чего-то, а они все доступны и это делает страшно неудобным работу с Гуттенбергом для простых пользователей, потому что им вывалятся огромные список и они могут напутать что-то и поломать тем самым нашу задумку красивую. То есть, вы хотите ограничить вашего пользователя от добавления лишних блоков, правильно? Да, не вообще, а как бы в определенных пост-тайпах, в одном пост-тайпе доступен один сет блоков, в другом пост-тайпе доступен другой сет блоков, они могут как-то пересекаться, но это для того, чтобы клиентов, в конце концов, им нельзя. Гуттенберг, он хорош тем, что у нас масса настроек, у нас марш со всего, но, как бы, это риск. Чем больше настроек, тем больше возможности поломать все, но не квалифицированно пользовать, вы это понимаете? Да, конечно, спасибо за вопрос. Изначально его можно разделить на две части. Первое, это то, что любой блок можно дективировать, эта опция находится в настройках Гуттенберга, то есть можно на всем сайт дективировать не нужны вам блоки, а если именно в конкретном каком-то пост-тайпе, то, к сожалению, реализации дективации конкретных блоков на PHP нет, но есть реализация дективации блоков на JS, то есть вам придется просто написать небольшой код, который при запуске конкретного пост-тайпа выполнится и, скажем так, конфильтрует блоки те, которые не нужны, то есть решение есть на самом деле. Я ответил на ваш вопрос. Да, на PHP этого решения нет, к сожалению, все блоки загружаются при старте страницы, они все прописаны и категоризированы в Ява-скрипте, и это неудобно, но решение только на Ява-скрипте существует данного вопроса. Добрый день. У меня есть один такой маленький вопрос, спасибо вам за доклад, как вы создавали все вот эти вот наберы блоки с помощью ofpali, либо с помощью реакта JS? Да, это чистый реакт, реакта JS. Если это статистический блок, да, это реакта JS, TML, CSS, это динамический блок, а кастом пост-тайп, посты последние, то это еще и PHP, конечно. Привет, спасибо за доклад. Очень круто на самом деле, это неожиданно, что у нас появляются такие плагины. У меня вопрос по переспользуемым компонентам, reusable items, в Гутенберге есть такая возможность, в принципе, что-то переспользовать. Я писала тоже Гутенберг блок, и вот там, получается, у нас для Гутенберга есть возможность делать темплейты. То, что ты говорил, что можно переспользовать, например, параграф, картинку и так далее. Я бы хотела переспользовать, например, только параграф и только reusable items, но, к сожалению, я этого не нашла. То есть, можно ли ограничить темплейт только reusable items? Приходилось ли с этим сталкиваться? Да, конечно, например, в том же примере блока Persona, он лимитирован этими виджетами, блоками, которые мы видим. Будет видно мышку. Это социклонки, это изображение, это хиддинг, это заголовок, это параграф и контентерия, скажем так. То есть, при создании блока есть параметр темплейт, где можно указать, какие блоки могут быть использованы. Более того, если я правильно помню, то можно даже лимитировать, может ли пользователь с ними взаимодействовать. То есть, либо они будут перемещать и добавлять. То есть, при создании блока вы видите либо темплейт, который вы наполняете контентом. То есть, выбирайте изображение, ссылки на соцсети, заголовок, подзаголовок и описание, например, человека данным кейсом. Либо вы можете переместить соцсиклонки ниже или поднять заголовок выше. Да-да, я просто говорю о том случае, когда у меня уже, например, сама Persona, у меня есть, например, страница со всеми персонами. И мне на другой странице нужно переиспользовать ту же Persona, абсолютно ничего в ней не меняю, а просто выбрать ее из списка. Как вот без объявления отдельного пост-стайпа для конкретной Persona, а просто вот как блок Gutenberg, можно ли это осуществить? Приходилось ли вот такое делать? Ну, сохранить как reusable items, да, а вот потом переиспользовать еще один блок, создать Gutenberg, у которого есть только список reusable items. Потому что мне кажется, что с этим есть какая-то проблема, у них даже в API нет документации, по сути, вот конкретно вывода reusable items. На самом деле вложенность у них хорошо реализована. То есть, может быть, я не очень понимаю ваш вопрос. Давай, может, на брейке. Так, кто еще? Я уточню один страниц. Вот в данном примере, это не Photoshop, это реальный пример. То есть страница создана из трех колонов, которые ставлен в блок Persona. Если мне нужно эту страницу дублировать на другой странице, я просто не очень понимаю суть вопроса. То есть, как минимум, я могу объединить это в группу и перенести. Я не очень понимаю суть вопроса, честно говоря. Хорошо, возможно, я выйду с нашим программистом. Здравствуйте. Спасибо за доклад. Я хотел вот такой вопрос уточнить. Что с CSS? В Gutenberg боль это отдельный CSS-код с жуткими селекторами в back-end, грубо говоря, и отдельная стилизация на front-end. И эти блоки, точнее, CSS его можно как-то подключать отдельно, только если на странице есть данный блок, то есть разделять. Или я должен в теме застилить все возможные блоки и в back-end, и на front-end. Как с CSS-ом быть? Я его могу как-то на компоненты разбивать для отдельного блока, отдельный CSS или как? Спасибо за вопрос. На самом деле, мы с этой задачей решали в среди этого года, когда мы решили, что реально 34 блока — это много и какие у вас скриптатки стилей. Нам удалось решить очень стично. Нам удалось загружать у вас скрипт только там, где необходимо. То есть только там, где используется блок. Если ни один блок не используется на сцене, то GetItLagin'а ни один я вас не подтрузится. К сожалению, CSS-ом так не получилось, потому что если мы использовали тот же подход, то он выводился после стилей темы. А это не является верным, потому что тогда мы не даем возможности разработчику как-то перестилизировать наши плоти. Поэтому, к сожалению, CSS-ом Владина загружается постоянно. Но там его немного, там его 160 килобайт. Можно меньше. Вопрос насчет перепределения html-разметки. Как это сделать из темы? Да, спасибо. Я почему-то выпустил этот нюанс в своей презентации. Наверное, не думал, что это будет интересно. Если говорить про наши блоки, то какая-то часть из них нельзя перепределить в теме. Какую-то часть можно. В чем это обословлено? Обословлено тем, как блок выводится на страницу. Гутенбер поддерживает как статические и динамические блоки. Статика это вот вы добавили картинку, сгенерировался ImageTag и он там живет всю жизнь, пока вы не поменяете это изображение. Динамические блоки такие, например, как CustomPostType, Вывод CustomPostType, Вывод POSTов. То есть то, что может измениться. Даже любой статический блок может быть, скажем так, построен не только в браузере, да, я вас криптом. Но и может быть выполнен запрос на селвер, откуда вернется разметка необходимая. Единственное, что это неудобно, потому что Гутенбер акцентирует свое внимание на RealTimeFeedback, да, то есть как бы вы поменяли что-то, вы тут же видите результат, вам не нужно ждать RequestResponse, RequestResponse и так далее. Вот, в нашем пладине некоторые блоки существуют как бы тамплеты для них и вы в своей теме можете перепределить. То есть при загрузке плагина, при рендере страницы, плагин посмотрит, если у вас в теме перепределенные, да, а с темой львы водоблока, если есть он будет использовать ваш, если нет, он будет использовать внутренний. Вот в данном примере, например, нужно постоянно, да, получать свежие данные, вот мы меняем категорию, мы меняем, какие продукты в укомерс получать. Дет запрос на сервер и разметка возвращается, и это можно перепределить всеми, да, но не все. Саш, такой вопрос, если какие-то более упрощенные плюсы Гутенберга, которые бы, например, мог в понедельник своему клиенту сказать, что вот мы сегодня отказываемся от Vizual Composer, Divi Elementor и берем Гутенберг, потому что это там, не знаю, быстро, потому что сайт там будет более сиаптимизирован и так далее, потому что, ну, я видел презентации, были его какие-то факты приведены, но это более техническое такое, да, там он с коробки, он с WordPress'ом идет, клиенту в принципе все равно, как он идет. Если у вас может какой-то набор, который мы можем использовать, потому что я, например, с клиентом уже полгода пытаюсь перейти на Гутенберг, и у нас это очень медленно и непонятно, вот так. Действительно, Гутенберг был инновацией, то есть, реально, как бы, я с WordPress'ом давно, и классический редактор Тени МСЕ, то есть, как бы, это было десятками лет, они не хотели, то есть, у них не было идей, ничего поменять, и действительно, два года назад они приняли это решение, это супер, потому что они начинают постепенно переходить к полному, да, то есть, у них был кастомайзер, был навигационной меню, отдельно редактировалось, контент постоянно набирался в посте, да, то есть, человека было тяжело поднять, там тайдл в кастомайзере, логотип в кастомайзере, какие-то виджеты в виджет зонах, там и так далее. Вот сейчас они взяли курс на полное редактирование, ну как бы не то, что на фронтенде, они никогда не уйдут на фронтент, они останутся в Dashboard'е, но то, что все элементы будут редактироваться, ну я почему-то в этом уверен, то есть, и если говорить о будущем, например, 5-10 лет, то начав сегодня, уже в будущем вы останетесь как бы в тренде. То есть, основной аргумент, что это игра в долгую на период, и пока он мало чем отличается от других визуальных редакторов? Ну вот Мэд заявил, что он был готов на 10%, хотя для меня он был готов на 80%. В этом году он готов на 20%. То есть, вот эти все примеры, что показывал, редактирование меню, редактирование виджетов, хедров, утра, и все, пока эксперименты, как отдельные планины, вы можете поставить это попробовать, но как бы это пока не паблик, да, даже вот в самом Гутенгберхе они не очень часто релизят с WordPress, то есть, как бы там уже в Гутенгберпладе не можно калонтиры сайзить, а WordPress до сих пор это все статическое осталось. Очень много внимания на WorldCamp, и в Брелине выделялась мультиазычность, они хотят в будущем сделать WordPress и front-end, и back-end полностью мультиазычным. То есть, я так понимаю, они хотят упростить, точнее, подъедут с рынка WPML и другие планины периода. То есть, как бы, например, вы сейчас будете использовать другое решение, это окей, да, но представьте, что через три года, допустим, WordPress становится мультиазычным, вы на Гутенгберпладе не нужно делать, у вас все из коробки работает. Удобно? Спасибо. Спасибо большое за доклад. У меня такой вопрос, а как разработчику жить с Гутенбергом? Ну, то есть суть в том, что, допустим, есть какой-то проект, и тебе как разработчику надо как-то, ну, не знаю, может есть какая-то документация, по которой я должен понимать, как мне строить HTML, CSS, и чтобы я не поломал этот Гутенберг или он не поломал маисти или и так далее. То есть, это чистая замена всяких visual-композеров, или это можно юзать как-то с проектом, который, ну, в котором есть фронтендер, и как бы он делается не только из садминки. Вы пробовали? Ну, у меня был клиент один, который вот хотел Гутенберг, но у него было куча хотела, которые нельзя было сделать через Гутенберг. Либо я не нашел, как это сделать, потому что, ну, типа, чтобы понимать весь объем того, что может делать Гутенберг, это надо как минимум прочитать небольшую документацию, а может и большую. И на самом деле мне приходилось писать и переделывать, переопределять стили и так далее. То есть, я не сильно понял, как с ним выжить. То, что вы попробовали, это уже хорошо. Вы один из тех людей, которые боятся перемены. Нет, на самом деле, я не боюсь перемен. Просто, ну, типа, есть какие-то документации, по которым... Да, есть хэнбук, да, простите, я перебил вас. Ну, вот вопрос в суть в том, что как бы есть какие-то документации и туториалы, мануалы, не знаю, по которым можно понять, типа, как мне работать с этим Гутенбергом на уровне кода, а не только в админке. Смотрите, уже есть большое количество готовых блоков. Да, то есть, если вы являетесь именно разработчиком какого-то решения и вам нужно что-то добавить, то вы можете обратиться на тот же WordPress.org и воспользоваться бесплатным либо другим плагином. В планах вообще, если верить WordPress, да, community, то они планируют возможность даже, ну, не нужно плагин устанавливать, то есть, будь директория блоков, вы в поиске написали, например, Instagram, он вам выдал мне какие блоки есть Instagram, вы нажали добавить и все, у вас на странице Instagram, то есть, прямая установка из директории блоков. Это если легко. Если вам нужно какой-то кастом, конечно, есть Handbook, есть татериалы, то есть, как бы, мы ж, как бы, и 34 блока, на самом деле, там 42, просто некоторые мелкие типа, title, фишер дымы, я просто их не упоминал. Мы их создали, то есть, по этим всем примерам. В принципе, доступны все контролы, аппи доступно, можно получить все, все, что необходимо. Я понял, ну, суть, я так понимаю, все-таки, в том, что оно больше заменяет именно в Visual всякие композеры, но если типа, сайт довольно-таки будет не динамично изменяться, то есть, будет какой-то стандарт, ну, типа, я не знаю, допустим, дизайн есть, ну, когда есть дизайн, верстка и уже готовый проект. Здесь, я так понимаю, дизайн, он как бы, либо его нет, либо он как-то, уже вместе с разработкой происходит, ну то есть, если есть какой-то изначальный дизайн и Gutenberg не подходит под этот дизайн, то есть, он не может прям отобразить этот дизайн, как дизайн он нарисовал, то я так понимаю, типа, ну, где-то есть смысл использовать именно Gutenberg, где-то есть смысл его вообще не использовать. Почему Гутенберг не сможет отобразить что-то, что вы придумали, то есть, я вот этого не понимаю. Ну мне интересно, Гутенберг, он может вообще любой дизайн отобразить, вот может ли дизайн? Он отображает блоки, у вас есть возможность даже подменить вывод, у вас есть админка, да, то есть, то, что вы видите при реактировании поста и фронт-энд, вы можете в админке показать все, что угодно, хоть пустой блок серый фон, на фронт-энд это будет что-то динамическое и невероятное. То есть, в принципе, любой дизайн, который дизайн нарисует, должен отобразить? Да, конечно, не думаешь, что там проблема. 5 колонок он сможет скоро вывезти. Спасибо.