Примечание. Это руководство обновлено в соответствии с новой спецификацией пользовательских элементов версии 1. Вы можете ознакомиться со спецификацией и получить дополнительную информацию о ней.
С июля 2021 г. в Google Web Designer прекращается поддержка устаревших пользовательских компонентов. Чтобы обновить пользовательские компоненты, ознакомьтесь с этим руководством.
Опытные веб-разработчики могут использовать в Google Web Designer пользовательские компоненты, расширяя функционал существующих или создавая новые с нуля. Другие пользователи могут устанавливать пользовательские компоненты, чтобы добавлять новые функции в свои проекты, не редактируя код.
Пакет компонента представляет собой ZIP-архив с файлом манифеста в формате JSON. Пакет также может включать другие файлы, в том числе файл JavaScript, определяющий пользовательский элемент HTML, и любые другие необходимые файлы JavaScript и CSS.
1. Определение пользовательского элемента
Пользовательские компоненты реализованы в Google Web Designer как пользовательские элементы.
Пользовательский элемент – это элемент HTML, который вы определяете с помощью кода JavaScript и которому присваиваете название тега. Определив пользовательский элемент, вы можете использовать его так же, как и стандартный. DOM API, работающие с нативными элементами HTML, работают и с пользовательскими.
Дополнительная информация о пользовательских элементах доступна в спецификации HTML на сайте WHATWG.
При добавлении пользовательских элементов в Google Web Designer соблюдайте следующие правила:
- Название тега для пользовательского элемента должно содержать дефис (
-), напримерx-panelилиexpand-button. - Пространство имен
gwd-закреплено за Google Web Designer и недоступно для пользовательских элементов.
Пример кода пользовательского элемента
2. Создание дополнительных файлов JavaScript и CSS
Создайте файлы JavaScript и CSS, которые описывают функции и стиль пользовательского компонента.
Можно использовать файлы JavaScript и CSS с внешних серверов, не включая их в пакет. Добавьте ссылки на эти файлы в манифест в формате JSON.
3. Транспиляция кода в ES5 (необязательно)
Транспилируйте код компонента, чтобы использовать синтаксис JavaScript стандарта ES5. Благодаря этому компонент будет правильно работать в более старых браузерах.
- Откройте Babel (транспайлер JavaScript) на странице https://babeljs.io/repl.
- В разделе Шаблоны выберите es2015.
- Вставьте код JavaScript компонента в поле слева. В поле справа появится транспилированная версия кода, которую можно использовать для компонента.
4. Создание манифеста файлов компонента в формате JSON
Создайте файл манифеста в формате JSON с названием manifest.json, который предоставит Google Web Designer информацию о пользовательском компоненте. Следуйте описанному ниже набору атрибутов. Обратите внимание на следующие свойства:
type– обязательное поле.version– обязательное поле. Обновляя пользовательский компонент, увеличивайте номер версии.customElementsVersion– обязательное поле для новых компонентов, соответствующих спецификации пользовательских элементов версии 1.files– укажите другие файлы, которые входят в состав пакета пользовательского компонента.externalScripts– укажите связанные внешние скрипты. Эти скрипты автоматически добавятся в блок