Как закрепить для встраивания видео

Содержание

Вопрос или проблема
Ответ или решение
Теория
Пример
Применение
Заключение

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

Как я могу создать якорную ссылку от текста Test к встроенному контенту? Я попытался добавить id="03T" внутрь div в блоке комментария с встраиванием. Однако, когда я это делаю, я не могу увидеть блок встраивания в визуальном редакторе.

<!-- wp:paragraph -->
<p><a href="#03T" data-type="internal" data-id="#03T">Test</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Videos</h2>
<!-- /wp:heading -->

<!-- wp:embed {"url":"https://player.vimeo.com/video/25323516?","type":"video","providerNameSlug":"vimeo","responsive":true,"className":"wp-embed-aspect-4-3 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper" id="03T">

</div></figure>
<!-- /wp:embed -->

Есть ли какие-либо идеи о том, что можно исправить, чтобы вставить якорную ссылку и увидеть её видимой в визуальном редакторе?

Редактирование сырого HTML не сработает, в худшем случае это приведет к тому, что при повторном открытии в редакторе будет нарушена проверка блока, и ваши изменения будут автоматически заменены.

Вместо этого используйте anchor в расширенной панели. Поскольку HTML встраивания обычно приходит от третьей стороны через OEmbed, вы можете обернуть блок встраивания в блок группы и присвоить якорь блоку группы.

Например:

Учтите, что “группа блоков” — это просто стандартный блок типа группа, который поставляется с ядром. Существует несколько способов создания таких блоков, но они просто содержат другие элементы и могут быть найдены в вставщике блоков. Любой блок, содержащий другие элементы/имеющий потомков и имеющий возможность добавить атрибут якоря, также подойдет. Например, блоки Колонок, обложки, и т.д., но блоки группы являются самыми простыми и наименее навязчивыми:

Запомните, при строительстве из кубиков LEGO вы не берете резец, чтобы вырезать желаемую форму в кубике, вы строите желаемое из множества маленьких блоков. Блоки WP такие же, не модифицируйте блоки, объединяйте и используйте их как строительные кирпичики для создания того, что вам действительно нужно.

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

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

Теория

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

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

Особенность работы с встраиваемыми блоками заключается в том, что они часто генерируются автоматически с помощью сторонних сервисов (например, OEmbed для различных видео-хостингов). Это может привести к трудностям при попытке редактирования их свойств напрямую в HTML, и в случае ошибки блок может не пройти валидацию в редакторе.

Пример

Рассмотрим пример попытки создания якорной ссылки на Vimeo-видео, представленное в виде встраиваемого блока:

<!-- wp:paragraph -->
<p><a href="#03T" data-type="internal" data-id="#03T">Test</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Videos</h2>
<!-- /wp:heading -->

<!-- wp:embed {"url":"https://player.vimeo.com/video/25323516?","type":"video","providerNameSlug":"vimeo","responsive":true,"className":"wp-embed-aspect-4-3 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper" id="03T">

</div></figure>
<!-- /wp:embed -->

Здесь пользователь пытается добавить якорь id="03T" к встраиваемому видео, чтобы ссылка «Test» могла направлять пользователей к этому элементу. Однако проблема заключается в том, что при таком подходе сам встраиваемый блок может быть скрыт в визуальном редакторе из-за нарушенного синтаксиса или других ограничений.

Применение

Для решения данной проблемы рекомендуется использовать метод обертки встраиваемого блока в групповой блок. Данный подход позволяет использовать возможности WordPress для добавления якорей без нарушения функциональности блока. Вот как это можно реализовать:

Создание и настройка группового блока:
- Шаг 1: Откройте редактор блоков WordPress.
- Шаг 2: Создайте новый групповой блок. Это можно сделать, выбрав блок типа «Группа» в панели вставки блоков.
- Шаг 3: Перетащите ваш текущий встраиваемый видео блок внутрь созданного группового блока.
- Шаг 4: Перейдите в свойства группового блока и под расширенными опциями укажите якорь, например, 03T.
Создание ссылки для навигации:
- Используйте следующий код для создания ссылки, которая будет вести к групповому блоку:
```

<p><a href="#03T" data-type="internal" data-id="#03T">Test</a></p>

```
Проверка работы:
- Сохраните изменения и перейдите на фронтенд вашего сайта, чтобы убедиться в правильной работе якорной ссылки. При нажатии на «Test» вы должны быть направлены непосредственно к вашему видео.

Заключение

Используя групповые блоки как обертки для встраиваемых элементов, вы сможете избежать множества проблем, связанных с редактированием HTML-кода и сохранением целостности блоков в редакторе WordPress. Это метод более гибкий, нежели прямое вмешательство в исходный код, и позволяет поддерживать структуру страницы в актуальном и понятном состоянии. В итоге, такой подход не только обеспечивает корректную работу якорных ссылок, но и делает интерфейс более удобным для дальнейших изменений и дополнений.