Группы Gutenberg Разработка

2 декабря 2019 в 17:36

Автор: Владимир Otshelnik-Fm

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

Для разработчика часто требуется быстро получить имя блока (новый редактор блоков WordPress или Gutenberg) для фильтра, использования в зависимостях и т.д.

В этой статье вы найдёте полный список блоков ядра WordPress и сможете с лёгкостью найти самостоятельно имя любого блока добавляемого сторонними плагинами.

Возможно со временем список ядра поменяется - там ведётся постоянная работа и блоки добавляются. Но общие принципы поиска наименования блока вы узнаете из этой статьи.

Содержание:

1. Что значит "имя блока"?
2. Список имён WordPress блоков
   • Common blocks - Основные блоки:
   • Formatting - Форматирование
   • Layout - Элементы разметки
   • Widgets - Виджеты
   • Embeds - Вставки
3. Как самостоятельно посмотреть имя блока
4. Получаем список всех блоков на JS в консоли
5. Посчитаем кол-во блоков на JS в консоли
6. Выведем таблицу блоков на JS в консоли

Что значит "имя блока"?

Имя блока - уникальное наименование блока, позволяющее обратиться к нему через php функции и фильтры или через js.
Так как вордпресс ставит во главу блоков будущее платформы WordPress и чтобы не запутаться (исключить конфликт имени блока) в предстоящей массе блоков от лица сторонних разработчиков, при регистрации блоков следует следующее соглашение:
namespace/block-name

т.е. имя плагина и имя блока. А в ядре WP будет core/block-name

Пространство имён - отличный способ внести ясность к чему (к кому) принадлежит блок и его название.

Список имён WordPress блоков

Список представлен по категориям блоков WordPress.

Common blocks - Основные блоки:

core/paragraph

core/image

core/heading

core/gallery

core/list

core/quote

core/audio

core/cover

core/file

core/video

Formatting - Форматирование:

core/preformatted

core/code

core/freeform

core/html

core/pullquote

core/table

core/verse

Layout - Элементы разметки:

core/button

core/columns

core/media-text

core/more

core/nextpage

core/separator

core/spacer

core/group

Widgets - Виджеты:

core/shortcode

core/archives

core/categories

core/latest-comments

core/latest-posts

core/calendar

core/rss

core/search

core/tag-cloud

Embeds - Вставки:

Большая группа - её namespaces отличается: core-embed

core/embed
core-embed/twitter
core-embed/youtube
core-embed/facebook
core-embed/instagram
core-embed/wordpress
core-embed/soundcloud
core-embed/spotify
core-embed/flickr
core-embed/vimeo
core-embed/animoto
core-embed/cloudup
core-embed/collegehumor
core-embed/dailymotion
core-embed/funnyordie
core-embed/hulu
core-embed/imgur
core-embed/issuu
core-embed/kickstarter
core-embed/meetup-com
core-embed/mixcloud
core-embed/photobucket
core-embed/polldaddy
core-embed/reddit
core-embed/reverbnation
core-embed/screencast
core-embed/scribd
core-embed/slideshare
core-embed/smugmug
core-embed/speaker
core-embed/ted
core-embed/tumblr
core-embed/videopress
core-embed/wordpress-tv

Как самостоятельно посмотреть имя блока

Чтобы посмотреть имя блока - достаточно вставить его в редактор, нажать F12 и "Инспектировать" или в браузере правой кнопкой - "Исследовать элемент".
Возможно по dom-дереву чуток верх к родителю подняться нужно будет.

Вот я на примере спойлера вижу название его блока в атрибуте data-type:
otfm/little-spoiler

- инспектируем нужный блок и находим нужный нам атрибут.

Получаем список всех блоков на JS в консоли

Открываете любую запись - главное чтобы у вас был редактор блоков.
В консоль браузера (F12) вписываете следующее:

wp.blocks.getBlockTypes().forEach( function( blockType ){ console.log( blockType.name ); });

- получаете список всех блоков что есть в этом типе записей

- длинный список получился 🙂

Посчитаем кол-во блоков на JS в консоли

- аналогично предыдущему сниппету - выполняем в консоли:

wp.blocks.getBlockTypes().length;

- получаем число, кол-во блоков в редакторе.

Выведем таблицу блоков на JS в консоли

- выполняем в консоли, как и выше примеры:

console.table( wp.blocks.getBlockTypes() );

- мы получаем таблицу:

- она содержит имя, ключи и прочие данные зарегистрированных блоков.

Вот такой получился список блоков. В следующих записях он нам пригодится - т.к. пару интересностей с ними я вам покажу.