Observação: este guia foi atualizado de acordo com a nova especificação Custom Elements v1. Veja a especificação (em inglês) e saiba mais sobre essas diretrizes.
Desde julho de 2021, componentes personalizados desatualizados não são mais compatíveis com o Google Web Designer. Para atualizar seus componentes personalizados, consulte o guia de upgrade.
Os desenvolvedores de Web mais experientes podem criar os próprios componentes personalizados para o Google Web Designer ampliando os existentes ou criando versões totalmente novas. Outros usuários podem instalar esses componentes personalizados para adicionar recursos a projetos sem editar nenhum código.
Um pacote de componentes válido tem um arquivo ZIP que inclui um arquivo de manifesto JSON. O pacote também pode incluir, por exemplo, um arquivo JavaScript que define um elemento HTML personalizado ou outros arquivos JavaScript e CSS necessários.
1. Definir um elemento personalizado
Os componentes personalizados são implementados no Google Web Designer como elementos personalizados.
Um elemento personalizado é um tipo de elemento HTML definido com um código JavaScript e que recebe um nome de tag personalizado. Depois de definir um elemento personalizado, você pode usá-lo como qualquer elemento padrão. As APIs do Modelo de objeto de documentos (DOM) que funcionam com elementos HTML nativos também podem ser usadas com elementos personalizados.
Saiba mais sobre os elementos personalizados na especificação HTML WHATWG (link em inglês).
Siga estas diretrizes para elementos personalizados no Google Web Designer:
- O nome da tag para elementos personalizados precisa ter um hífen (
-), como ox-panelou oexpand-button. - O namespace
gwd-é reivindicado pelo Google Web Designer e não pode ser usado nos elementos personalizados.
Veja um exemplo de código de elemento personalizado
2. Criar qualquer arquivo JavaScript e CSS adicional necessário
Escreva o JavaScript e o CSS que fornecem a funcionalidade e o estilo escolhidos por você.
É possível veicular arquivos JavaScript e CSS a partir de um servidor externo, em vez de incluir esses arquivos no pacote. Inclua referências a arquivos externos no manifesto JSON.
3. Transpilar o código para ES5 (opcional)
Para compatibilidade máxima do navegador, recomendamos que você transpile o código do componente para usar a sintaxe ES5 do JavaScript. Isso ajuda a garantir que seu componente seja executado corretamente em navegadores mais antigos.
- Acesse o Babel, um compilador de JavaScript, em https://babeljs.io/repl (em inglês).
- Na seção Presets, selecione es2015.
- Copie e cole o código JavaScript do componente no painel à esquerda. No painel à direita, você verá uma versão convertida do código que pode ser usada para seu componente.
4. Criar um manifesto JSON dos arquivos de componentes
Os componentes personalizados exigem um arquivo de manifesto no formato JSON chamado manifest.json que informa ao Google Web Designer sobre o componente. Siga o esquema detalhado abaixo. As propriedades importantes incluem:
type: é obrigatória.version: é obrigatória. Aumente o número da versão sempre que atualizar um componente personalizado.customElementsVersion: é obrigatória para novos componentes, de acordo com a especificação Custom Elements v1.files: lista outros arquivos incluídos no pacote de componentes personalizados.externalScripts: especifica dependências de script externas. Esses scripts são adicionados automaticamente em um bloco