O editor e o lugar do bloco

Cada Página tem um ou mais blocos HTML. Um bloco é um HTML seu, inteiro: o <head>, o CSS, o <body> e o JavaScript. Ele roda isolado, na caixa (veja A caixa).

Pôr um bloco

Na árvore, passe o mouse na linha da Página e clique no + (Adicionar bloco HTML); ou o mesmo item no menu da linha (⋯); ou o + no alto do painel da Página. O bloco novo:

• se chama Bloco HTML N e vai para o fim da Página;
• ocupa a largura toda (12 de 12 colunas);
• aparece selecionado, com o painel do bloco aberto.

Um bloco vazio aparece no canvas como uma área tracejada.

O painel do bloco

• Nome: de 1 a 120 caracteres. Vazio, aparece "Dê um nome ao bloco."
• HTML: o editor de código, que ocupa o resto do painel.

Cada letra que você escreve muda o bloco no canvas na hora; o salvar vem na pausa (veja Salvar).

O editor de código

• Cores para o HTML e para o CSS e o JavaScript dentro dele, e números de linha.
• Erros de sintaxe: um sublinhado e um ponto na margem. Ctrl + Shift + M abre a lista dos erros, e F8 vai ao próximo. É só a sintaxe: um erro que só aparece quando o script roda não se vê aqui. Teste no "ver".
• Buscar: Ctrl + F (no Mac, Cmd + F) com o foco no editor. Enter vai ao próximo, Shift + Enter ao anterior, Esc fecha.
• Desfazer: com o foco no editor, Ctrl + Z desfaz o que você escreveu nele. Fora dele, desfaz o passo do construtor.
• Sair do editor pelo teclado: Esc e depois Tab (o Tab sozinho recua a linha).
• Tela cheia: o ícone ao lado do Formatar. O editor ocupa a tela abaixo do alto do construtor; Esc volta.

Formatar

O botão Formatar, acima do editor, arruma a indentação do HTML, do CSS e do JavaScript (pelo Prettier). Um Ctrl + Z no editor desfaz a formatação inteira.

Se o HTML tem um erro que impede a formatação, aparece "Não foi possível formatar · linha N", e nada muda: corrija a linha N e formate de novo.

O lugar do bloco na Página

A Página tem uma grade de 12 colunas. Cada bloco começa numa coluna e ocupa algumas delas. Os blocos seguem a ordem da Página: um bloco fica na mesma linha do anterior se começa depois de onde o anterior acaba; senão, abre uma linha embaixo. A altura de cada bloco é a do conteúdo dele, e a linha tem a altura do mais alto.

Com a Página ou um bloco dela selecionado, as 12 colunas aparecem de leve no canvas.

Para	Faça
Mudar a largura	Arraste a alça da direita ou da esquerda do bloco selecionado. Embaixo dele aparece quantas colunas ocupa (8/12).
Mudar a coluna	Arraste o bloco selecionado para o lado.
Mudar a ordem	Arraste o bloco selecionado para cima ou para baixo.
Pelo teclado	Com o bloco selecionado e o foco no canvas: ← e → mudam a coluna; Shift + ←/→, a largura; ↑ e ↓, a ordem.
Desistir de um arrasto	Esc, antes de soltar.

Exemplo: dois blocos lado a lado, um formulário com 8 colunas e um resumo com 4, são o primeiro com coluna 1 e 8 de 12 e o segundo com coluna 9 e 4 de 12.

Tablet e Celular

Numa Página de 768 ou de 390, os blocos ficam um embaixo do outro, na largura toda, como num celular. As colunas que você escolheu ficam guardadas e voltam se a Página voltar a uma largura maior.

Levar um bloco a outra Página

Na árvore, arraste a linha do bloco para uma linha de outra Página (ele vai para o fim dela) ou para a linha de um bloco de outra Página (ele entra antes dele). Pelo teclado, com o foco na linha do bloco, Alt + ↑ e Alt + ↓ o levam um lugar, passando de uma Página para a outra. O bloco vai inteiro, com o nome, o HTML e as colunas.

Excluir um bloco

Com o bloco selecionado, Delete (com o foco no canvas), o ícone de excluir no painel ou o Excluir do menu da linha na árvore. Aparece "Bloco excluído." com Desfazer; o Ctrl + Z também o traz de volta.

Uma Página, um bloco

Uma Página de um bloco só é, no "ver" e no app, a janela inteira: o bloco tem a altura da tela e rola sozinho, como um site. Um cabeçalho fixo fica no alto, e um modal abre no meio da tela. Numa Página de vários blocos, ela cresce com eles, e cada bloco só desenha dentro do próprio retângulo. Veja A altura da tela.