Как я могу убрать опцию H1 из редактора Гутенберг?

На чтение 4 мин Опубликовано 02.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Пошаговая инструкция по удалению H1 из редактора Gutenberg
Проверка корректности
Заключение

Вопрос или проблема

Как я могу удалить H1 из редактора Gutenberg, чтобы пользователи моей CMS не использовали его в заголовках или в основном контенте? Нам это необходимо для соответствия требованиям ADA.

Gutenberg не предоставляет возможность удалить определенные уровни заголовков из интерфейса редактора. Но я думаю, вы можете обойти это с помощью немного пользовательского кода (как PHP, так и некоторого JavaScript). Если вам это интересно, попробуйте следующее. Добавьте этот пользовательский фрагмент кода в файл function.php вашей темы.

function remove_h1_from_editor() {
    wp_enqueue_script(
        'remove-h1',
        get_template_directory_uri() . '/js/remove-h1.js',
        array('wp-blocks', 'wp-dom-ready', 'wp-edit-post')
    );
}
add_action('enqueue_block_editor_assets', 'remove_h1_from_editor');

Затем создайте файл JavaScript в вашей теме (в моем примере кода он находится по адресу /js/remove-h1.js) и добавьте следующий код:

wp.domReady(() => {
    wp.blocks.unregisterBlockStyle('core/heading', 'h1');
});

Я это не тестировал, но это должно работать. Если это не работает в вашей теме, попробуйте настроить код соответственно.

Мое решение — добавить это в css нашего редактора, чтобы наши редакторы видели предупреждение в редакторе и могли действовать соответственно:

h1:not(.wp-block-post-title)::after {
  content: "использование H1 нарушает доступность";
  color: red;
  font-size: 1rem;
}

Ответ или решение

Убрать возможность использования заголовка H1 в редакторе Gutenberg — это важный шаг для обеспечения доступности (ADA compliance) вашего контент-менеджмента. К сожалению, Gutenberg не предоставляет встроенного механизма для удаления определённых уровней заголовков из интерфейса редактора. Тем не менее, мы можем применить индивидуальные решения с использованием PHP и JavaScript.

Пошаговая инструкция по удалению H1 из редактора Gutenberg

Добавление PHP-кода
Вам нужно вставить следующий код в файл functions.php вашей темы. Этот код зарегистрирует специальный JavaScript-файл, который будет загружаться в редакторе.
```
function remove_h1_from_editor() {
   wp_enqueue_script(
       'remove-h1',
       get_template_directory_uri() . '/js/remove-h1.js',
       array('wp-blocks', 'wp-dom-ready', 'wp-edit-post')
   );
}
add_action('enqueue_block_editor_assets', 'remove_h1_from_editor');
```
В этом коде мы создаём функцию remove_h1_from_editor, которая подключает скрипт remove-h1.js. Убедитесь, что файл находится в директории /js/ вашей темы.
Создание JavaScript-файла
Теперь вам нужно создать файл remove-h1.js в указанной директории и добавить в него следующий код:
```
wp.domReady(() => {
   wp.blocks.unregisterBlockStyle('core/heading', 'h1');
});
```
Этот код будет ждать готовности редактора и затем заблокирует стиль заголовка H1, препятствуя его использованию в редакторе.
Добавление CSS-уведомления (необязательно)
Чтобы дополнительно предупредить редакторов о том, что использование H1 может повлиять на доступность, вы можете добавить следующее CSS-правило в файл стилей вашего редактора:
```
h1:not(.wp-block-post-title)::after {
   content: "Использование H1 нарушает доступность";
   color: red;
   font-size: 1rem;
}
```
Это правило добавит текстовое уведомление после каждого H1, введённого редакторами.

Проверка корректности

После выполнения этих шагов, вам следует проверить, корректно ли работает данный функционал. Для этого войдите в редактор Gutenberg и убедитесь, что заголовок H1 в выпадающем меню стилей заголовка отсутствует.

Заключение

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

Если возникнут сложности или скрипт не будет работать должным образом, попробуйте настроить код с учётом вашей темы и конфигурации. Помните, что доступность контента — это не только техническая задача, но и вопрос ответственности перед пользователями.

Таким образом, ваше стремление к ADA compliance будет подкреплено конкретными шагами, способствующими созданию инклюзивного цифрового пространства.