Elementor — самый популярный конструктор для WordPress и один из самых загружаемых плагинов во всем репозитории плагинов WordPress. У него более 5 миллионов активных установок!

Я помню, как мне нравилось работать с ним, когда он стал популярным. Вы можете изменить все, что захотите, и сразу же увидеть эффект — вы работаете с настоящей страницей, а не с какими-то странными блоками, привет, Visual Composer! И да, я знаю, что они его довольно сильно улучшили, но до сих пор эти блоки у меня перед глазами и то, как я их представила своим клиентам 🙄.

Но Elementor — это совсем другое.. Или нет?

Пока Gutenberg не был представлен в WordPress 5.0 (ноябрь 2018 г.), пользователи имели дело с TinyMCE WISYWIG Editor — текстовым редактором с открытым исходным кодом. Многие пользователи до сих пор продолжают использовать его, поэтому Классический плагин для редактора является одним из наиболее часто устанавливаемых плагинов в репозитории плагинов WordPress.

Это было очень хорошо в течение достаточно долгого времени, но в наши дни людям часто нужно гораздо больше, чем вставить изображение или выделить слово жирным шрифтом. Пользователи хотят иметь возможность создавать сложные страницы с разными блоками, менять их порядок и все это без знаний программирования. Справедливо, я бы сказал! Когда вы используете свой смартфон, вам не нужен разработчик iOS или Android рядом с вами, не так ли? Даже если вы не знаете, как изменить какую-то опцию, вам поможет первая гугл-ссылка.

Итак, что не так с Elementor? Кажется, в нем есть все, что нужно для полноценного редактирования сайта. Почему вы должны использовать Гутенберг, который явно менее мощный?

Прежде всего — Gutenberg является частью WordPress!

И продолжает развиваться. Это было довольно глючно в его первом выпуске, я согласен. И я также был одним из тех людей, которые первым делом установили плагин Classic Editor после начала разработки нового сайта WordPress. Но времена меняются, и теперь это намного проще и удобнее в использовании. И поскольку он уже является частью WordPress, это означает, что разработчики тем и плагинов будут все больше и больше поддерживать Gutenberg в своих продуктах.

Gutenberg производит только те теги, которые вам нужны!

Одна из моих самых любимых особенностей Gutenberg Editor как разработчика — его очень легко поддерживать. Вы когда-нибудь проверяли свою консоль с помощью Elementor?

Вот пример того, что вы получите, разместив только ОДИН абзац:

А вот сравнение с редактором Гутенберга:

Большая разница, да? Это также большая разница для SEO, так как чем меньше на вашей странице элементов, тем меньше она будет иметь размер, а значит, тем быстрее она будет загружаться.

Это также намного проще в обслуживании для разработчиков — вам не нужно использовать гигантскую цепочку CSS для установки новых стилей для элементов, структура вашей страницы остается простой и логичной.

Пользователи ничего не испортят — они могут изменить только то, что им НЕОБХОДИМО изменить.

У Elementor слишком много инструментов. Это пугает неподготовленных пользователей. С одной стороны, они могут изменить с помощью инструментов Elementor все, что я скажу. Не только базовые вещи, такие как отступы, поля, границы и т. д., но и создание анимации, добавление псевдоэлементов (:before и :after), даже добавление пользовательского CSS для элементов.

Но нужно ли им это на самом деле? Если у вас есть какое-то кафе и вы просто хотите изменить пару картинок на своем сайте — вам действительно нужны эти возможности анимации?

Уже есть новый тип «разработчиков» — те, кто может создавать сайты только с помощью Elementor (или других конструкторов). Похоже, Elementor был разработан специально для них. Потому что как только заказчик захочет какой-то дополнительный функционал, который не покрывается блоками Elementor — такие «разработчики» будут беспомощны.

Представьте себе такую ​​картину — у вас на сайте 20 страниц и вы хотите изменить радиус границы с 20px на 0px (сделать их квадратными). Если вы обычный пользователь и не используете глобальные стили (которые, кстати, доступны только в Elementor PRO), вы потратите некоторое время на настройку всех своих кнопок. А если у вас 50 страниц? Сто страниц?

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

Легко расширить существующие блоки!

Хотите добавить новый стиль для блока Gutenberg? Это очень просто:

/**
* Register custom block styles
*/
add_action('init', 'theme_prefix_register_block_styles');
function theme_prefix_register_block_styles() {
  register_block_style('core/heading', [
    'name' => 'title-small',
    'label' => __('Small title', 'theme-slug'),
  ]);
}

Используя хук render_block, вы можете настроить содержимое любого блока в Гутенберге.

Например, давайте добавим класс lazy-load ко всем изображениям из Гутенберга:

/**
* Add custom class for gutenberg images
*/
add_filter( 'render_block', 'theme_prefix_custom_image_class', 10, 2 );
function theme_prefix_custom_image_class( $block_content, $block ) {
  if ( 'core/image' === $block['blockName'] ) {
    $block_content = preg_replace('/wp-image-/', 'lazy-load wp-image-', $block_content);
  }
  
  return $block_content;
}

Я настоятельно рекомендую эту статью из CSS-трюков о блочных фильтрах в Гутенберге — там так много всего, чего вы можете достичь и расширить блоки, как хотите.

Легко создавать новые блоки!

Либо с помощью ACF PRO, либо традиционным методом. Я писал о том, как создать собственный блок Гутенберга с помощью плагина Advanced Custom Fields Pro здесь:



Как и зачем создавать пользовательские блоки Гутенберга в WordPress
Это о том, как создавать сложные настраиваемые блоки в WordPress с различными настройками, индивидуальным дизайном и простотой… среда.com



«Традиционный» способ может показаться немного сложным — вам нужно настроить среду разработки с помощью Node, использовать React для создания панели настроек вашего блока. Но, к счастью, есть пакет для быстрой установки и подготовки всего необходимого для создания пользовательского блока Гутенберга под названием @wordpress/create-block. Итак, все, что вам нужно сделать, это запустить пару команд в своем терминале:

$ npx @wordpress/create-block your-block-name
$ cd your-block-name
$ npm start

Вуаля! Вы все настроили и готовы построить еще один блок Гутенберга 😄.

Узнайте больше о создании блоков Гутенберга через @wordpress/create-block здесь: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/

Заключение

В этом мире нет ничего идеального. Как и Гутенберг. Я могу написать еще одну статью о минусах редактора Гутенберга. Но дело в том, что Гутенберг является частью WordPress. Он развивается и будет развиваться. Не знаю, вытеснит ли он Elementor с рынка (сомневаюсь), но ценным игроком точно станет. Так что копаться в экосистеме Гутенберга — одна из необходимых задач современных разработчиков WordPress.

Если статья оказалась вам полезной — не стесняйтесь хлопать, подписываться и оставлять свои мысли в комментариях 😊

Спасибо за прочтение!
Берегите себя и мир вам!