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

Список названий всех WordPress блоков. Как получить имя блока (Gutenberg)

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

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

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


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

Имя блока - уникальное наименование блока, позволяющее обратиться к нему через 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

Пример поиска имени блока

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

Комментариев нет

Оставьте комментарий

Авторизация
*
*
Регистрация
*
*
*
Настоящим подтверждаю, что я ознакомлен и согласен с условиями политики конфиденциальности
Генерация пароля
Закрыть