В этом руководстве я покажу как добавить свою произвольную кнопку в редактор блоков вордпресс 5.0. А именно: кнопку в RichText редактор (Gutenberg редактор)

В 1-й части мы рассмотрели его анатомию - это простой редактор с кнопками. Вверху содержится BlockToolbar, а уже в нём элементы внутреннего форматирования (inline formatting).

Сейчас там 4-ре кнопки: выделение жирным, курсивом, ссылка и перечеркнутый текст. Вот как это выглядит сейчас:

Но мы добавим нужную кнопку выделяющую однострочный код - <code>. И получится так:

А поняв принцип - вы сможете добавлять любые свои кнопки в гутенберг редактор: хоть в span оборачивать и выделать цветом, хоть тег small, sub, sup. Всё будет в ваших руках.

Добавление кнопки - тоже работа с js кодом. Но никаких регистраций блока не потребуется - на стороне php все будет очень просто.

Поехали!

Какие бы стандартные блоки не давал новый WordPress редактор блоков (Gutenberg) в комплекте - но под каждый сайт требуются не стандартные блоки, а кастомные. Можно конечно под проект стилизовать имеющиеся - просто подкорректировав их стили. Но мы пойдем дорогой трудной, дорогой не прямой...

Навыки, необходимые для этого урока:
  Понимание API WordPress
  Умение написания простого плагина вордпресс
  Базовые знания php и js

     В этом уроке:
        Создадим свой первый блок:

Gutenberg в wordpress - как работать? Здесь и найдёте ответ!
Как я и обещал - первые блоки мы будем создавать без особых инструментов для этого, и без специально настроенного окружения. Если вы работаете в IDE - отлично. Но если юзаете блокнот в клеточку типа notepad++ или его младшего собрата sublime - на первое время хватит и их.
Также примеры будут на ES5, никакого ESNext или JSX. Что это и как это - мы разобрали в прошлом уроке. Создать простой блок можно и без них. Главное - уловить концепцию написания блока. Простые шаги, чтобы в js-файле его зашевелить под гутенберг (блочный редактор вордпресс).

Этот урок будет целостным и законченным. Этакий Hello World.

Плагин Gutenberg (гутенберг) развивался пару лет, и вот в WordPress 5.0 он был внесен в ядро движка. Сейчас отдельно плагин продолжает развиваться: будет работа над 2-й и 3-й фазой редактора - за пределами контента записи и миграция виджетов, кастомайзера, меню - под единый механизм.

В этой серии уроков я расскажу как создавать блоки к гутенберг редактору. Или к редактору блоков вордпресс. Но пока грань еще не стёрта, будем использовать кодовое имя "Гутенберг"

2 августа 2018 вышел WordPress v.4.9.8
Это было автоматическое обновление, после которого администраторы сайтов увидели призыв попробовать Gutenberg:

Так что же, спустя 3 недели, поменялось?
Возрос ли интерес к нему или наоборот - негатива много стало?
В этой заметке и рассмотрим этот вопрос.

Gutenberg - новый визуальный редактор, который появится в WordPress v5.0.
Первую бету, 5-го вордпресс, ожидают в конце августа. Самое время готовить сани - подумал я и начал изучать работу с ним.

Спустя время я задался вопросом:
А с какими браузерами заявлена работа?
Поддерживает ли он работу через Internet Explorer?
Если "Да", то какая версия?

Т.к. в интернете были мануалы работы с ним как на ES5 так и на ES6 - я немного засомневался по поводу ES6. Глянув таблицу совместимости ECMAScript 6 - я увидел что с IE11 он совместим почти никак.
Чуть поискав, я нашел подробную таблицу совместимости с IE11 - тут печально: