Tworzenie komponentu niestandardowego

Uwaga: ten przewodnik został zaktualizowany, aby był zgodny z nową specyfikacją elementów niestandardowych w wersji 1. Możesz wyświetlić specyfikację i dowiedzieć się o niej więcej.

Od lipca 2021 r. program Google Web Designer nie będzie obsługiwać nieaktualnych komponentów niestandardowych. Aby je zaktualizować, zapoznaj się z przewodnikiem po uaktualnianiu.

Doświadczeni twórcy stron internetowych potrafią pisać własne komponenty niestandardowe do wykorzystania w programie Google Web Designer, rozszerzając istniejące komponenty lub tworząc nowe od podstaw. Inni użytkownicy mogą instalować komponenty niestandardowe, by dodać do swoich projektów nowe funkcje bez konieczności edytowania kodu.

Prawidłowy pakiet komponentu składa się z pliku ZIP zawierającego plik manifestu JSON. Pakiet może też zawierać inne pliki, takie jak plik JavaScript, który definiuje niestandardowy element HTML, lub inne niezbędne pliki JavaScript i CSS.

1. Definiowanie elementu niestandardowego

Komponenty niestandardowe są implementowane w programie Google Web Designer jako elementy niestandardowe.

Element niestandardowy to typ elementu HTML, który definiuje się za pomocą kodu JavaScript i któremu nadaje się niestandardową nazwę tagu. Po zdefiniowaniu elementu niestandardowego możesz go używać tak samo jak każdego elementu standardowego. Interfejsy DOM API, które współpracują z natywnymi elementami HTML, działają też z elementami niestandardowymi.

Więcej informacji o elementach niestandardowych w specyfikacji HTML znajdziesz w witrynie WHATWG.

Wskazówki dotyczące elementów niestandardowych w programie Google Web Designer:

• Nazwa tagu elementu niestandardowego musi zawierać łącznik (-). Na przykład: x-panel lub expand-button.
• Przestrzeń nazw gwd- jest zajęta przez Google Web Designera i nie można jej używać w elementach niestandardowych.

Zobacz przykład kodu elementu niestandardowego

2. Tworzenie niezbędnych dodatkowych plików JavaScript i CSS

Napisz kod JavaScript i kod CSS, które pozwolą Ci uzyskać pożądane funkcje i odpowiedni styl.

Plików JavaScript i CSS nie trzeba umieszczać w pakiecie ‒ mogą one pochodzić z serwera zewnętrznego. W pliku manifestu JSON uwzględnij odniesienia do plików zewnętrznych.

3.Transpilacja kodu do ES5 (opcjonalnie)

Aby zapewnić maksymalną zgodność z przeglądarkami, zalecamy transpilację kodu komponentu, aby używał składni języka JavaScript w wersji ES5. Dzięki temu zyskasz pewność, że komponent będzie działać prawidłowo w starszych przeglądarkach.

1. Otwórz kompilator JavaScriptu – Babel na https://babeljs.io/repl.
2. W sekcji Presets (Gotowe ustawienia) zaznacz pozycję es2015.
3. Skopiuj kod JavaScript komponentu i wklej go w lewym okienku. W prawym okienku pojawi się kod po kompilacji. Możesz go użyć w komponencie.

4. Tworzenie pliku manifestu JSON dla plików komponentu

Komponenty niestandardowe wymagają pliku manifestu w formacie JSON o nazwie manifest.json, który informuje Google Web Designera o komponencie. Postępuj zgodnie ze schematem przedstawionym poniżej. Właściwości pliku:

• type ‒ wymagana.
• version ‒ wymagana. Przy aktualizowaniu komponentu niestandardowego zwiększaj numer wersji.
• customElementsVersion – wymagana w przypadku nowych komponentów zgodnych ze specyfikacją elementów niestandardowych w wersji 1.
• files ‒ lista innych plików należących do pakietu komponentu niestandardowego.
• externalScripts ‒ pozwala określić zależności zewnętrznego skryptu. Skrypty te są automatycznie dodawane w bloku