Crie um bloco Gutenberg personalizado – Parte 7: crie seus próprios componentes personalizados

Até agora, nesta série de tutoriais, escrevemos todo o código dentro registerBlockType()da editfunção do. É totalmente possível e geralmente recomendado atribuir a edição a um componente separado. Ao fazer isso, podemos utilizar funcionalidades como o estado do componente e os métodos do ciclo de vida. Também é muito mais limpo, legível e fornece código reutilizável!

Se você não estiver familiarizado com a criação de componentes do React ou quais são os métodos de estado e ciclo de vida, recomendo ler primeiro o guia oficial do React sobre este tópico.

Definindo um componente de classe paraedit

Você pode definir um componente como uma função ou uma classe. Com um componente de classe, você pode usar funcionalidades como, por exemplo, métodos de estado e ciclo de vida. No entanto, nas versões mais recentes do React (16+), você pode usar ganchos do React para simular métodos de estado e ciclo de vida dentro de componentes de função. Mas neste tutorial vamos nos concentrar na criação de um componente de classe. O que criamos até agora nesta série, "inline" em registerBlockType()for edite save, são componentes de função.

Para definir um componente de classe, estendemos o WordPress’ Component(no wp.elementpacote), exatamente como você estenderia um componente de classe para React.Component.

Tenha em mente que seu componente de classe deve incluir a função render(). E por causa de como o Javascript funciona sua classe deve ser definida antes de sua registerBlockType()chamada (escreva seu componente de classe primeiro no arquivo, e mantenha registerBlockType()depois dele. Mais adiante neste post vamos aprender como separar componentes em arquivos separados, exportar e incluir eles).

Resumindo, assim:

Os adereços de editsão aplicados automaticamente ao nosso componente. Não esqueça que um componente de classe que você precisa referenciar adereços com this.props. É comum no núcleo do WordPress Gutenberg usar componentes separados para as editfunções, pois eles geralmente contêm muito mais código. A savefunção muitas vezes pode ser deixada a registerBlockType()menos que contenha muito código também.

Ao fazer isso, agora você pode escrever seu componente como faria com o React. Você pode adicionar funções, construtores, métodos de estado e de ciclo de vida.

Este é o código que acabamos na última etapa, convertido em um componente de classe:

Se você desestruturado attributese setAttributesde props como fizemos, tudo o que você precisa mudar ao passar para um componente de classe separado é mudar uma linha; #9de propspara this.props. Todo o código funcionará como antes, sem corrigir mais nada. Essa é a beleza da desestruturação. Se você não desestruturar e se referir props.attributesdiretamente, por exemplo, você precisaria adicionar this.na frente de todas as referências individuais attributese em todos os setAttributeslugares.

Vamos começar a fazer coisas que agora podemos fazer com um componente de classe!

Definindo funções ethis

Concedido, sim, você pode definir funções de dentro do editcomponente de função, antes de chamar return. Mas, pessoalmente, sempre preferi separar a funcionalidade pela lógica. Acho melhor separar funções para fins lógicos e outros fora da função responsável por renderizar a saída. Algumas pessoas também preferem chamar funções em eventos, em vez de fazê-las inline como fizemos até agora (setAttributes()por onChangeexemplo).

A partir de agora, nosso código tem duas coisas que podem ser benéficas para mudar para funções; InspectorControlse BlockControls. Isso reduzirá nosso returnconsideravelmente e tornará nosso código mais fácil de ler.

Definimos duas funções que retornam o InspectorControlsbloco inteiro e o BlockControlsbloco inteiro. Usando as funções de seta (functionName =() => { ... }) temos acesso total thispara obter adereços. Se você não fez a última parte da etapa 1 – configurando o Babel com as sintaxes mais recentes, você receberá erros de compilação. Você teria que recorrer à criação de um construtor e vinculação thispara cada função. Você pode ler mais sobre manipulação thisno início da página de FAQ do React.

Lembre-se também que por estarmos em uma classe agora você precisa chamar todas as suas funções com this.na frente.

Observe que excluí o conteúdo real de InspectorControlse BlockControlspara manter o código mais curto. Nada em seu código precisa mudar.

Também estamos utilizando o fato de que a returninstrução também pode retornar um array. Tudo no array será renderizado normalmente na ordem em que estiver. Isso facilita a chamada de funções diretamente dentro da returninstrução.

Obviamente, você também pode definir métodos de ciclo de vida, como componentDidMount(). Não há diferença em fazer isso nos componentes do Gutenberg do que no React.

Construtor e estado de uso

Vamos tentar implementar o estado em nosso componente. Tenha em mente que o estado é apenas algo armazenado temporariamente em nosso componente de classe e não é salvo em nenhum lugar – como em atributos. É apenas para manter o controle – bem – do estado do seu componente. Os usos comuns de state são usar state como um sinalizador de status enquanto aguarda o retorno de uma chamada assíncrona, mantendo a pontuação de algo temporário antes de salvá-lo em um atributo ou implementando "modos de visualização/edição" do bloco.

Você se refere ao estado e ao estado de atualização assim como no React; com this.statee setState(). Normalmente você inicializaria o estado no construtor. E quanto a definir um construtor – é exatamente como no React – não esqueça de passar propse fazer super(props)também. Resumidamente:

class FirstBlockEdit extends Component {
    constructor(props) {
        super(props);
 
        this.state = {
            example: 1
        }
    }
 
    render() {
        this.setState({ example: 2 });
        console.log(this.state.example);
        ...

Alternador de edição/visualização do modo de bloco

Vamos usar o que aprendemos na etapa anterior em Barras de ferramentas para criar um “alterador de modo" para nosso bloco. Implementamos uma barra de ferramentas com um botão que alterna o estado entre o modo de visualização e edição. No modo de edição, o bloco obtém os dois componentes RichText como de costume. Mas ao mudar para o modo de visualização, desativamos a edição e renderizamos a saída do bloco.

Primeiro criamos um construtor e configuramos o estado com uma propriedade booleana; editModeque começa como true. O super(props)é necessário ao definir um construtor em um componente React baseado em classe.

class FirstBlockEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: true
        }
    }
    ...

Em nossa função de saída das barras de ferramentas, alteramos o botão personalizado que criamos anteriormente (que apenas console.logalgo ao clicar nele). Em sua onClickprop nós chamamos setState()e negamos o editModevalor booleano atual. Para facilitar a compreensão do usuário, alternamos também entre o ícone e o rótulo do botão. Por exemplo, quando o modo de visualização está ativo, o botão mostra o rótulo “Editar” e um ícone de lápis que é comumente aceito como edição.

E, finalmente, dentro do método render principal do nosso bloco, podemos fazer o que quisermos. Esta parte é realmente com você – você faz o mesmo que fizemos com o rótulo e o ícone no botão acima. Adicionamos dois blocos de saída, um if this.state.editModeis true(que devem ser os componentes editáveis ​​usuais RichText) e outro se for false.

Como exemplo estou usando dois componentes do WordPress de wp.components; Placeholdere Disabledpara o modo de visualização. O Placeholdercomponente coloca seu bloco em uma bela caixa cinza que deixa bem claro que não é editável. Tenha em mente que ele vem anexado com estilo, portanto, se você deseja uma visualização perfeita, isso pode não ser para você. E eu também envolvo tudo dentro de um Disabledcomponente que torna tudo dentro de uneditable, unclicable e unrragable. Esta é a nossa nova render()função em nosso componente:

Também estou usando um componente Fragment( wp.elementpacote) que é o mesmo que React.Fragment. Se você não estiver familiarizado com ele, nós encapsulamos a saída dentro dele quando não queremos adicionar wrappers HTML extras desnecessários. Em React tudo deve ter um nó raiz. Quando o modo de edição está ativo (line #13) nós produzimos dois RichTextcomponentes um após o outro, então precisamos de um nó raiz ao redor deles.

Quando o modo de pré-visualização está ativo (line #29), nós produzimos os valores dos dois RichTextcomponentes. Como fazemos em save, usamos RichText.Contentpara retornar seus valores em vez do pequeno editor.

O componente Placeholdervem em estilo flexível e como padrão com linha de direção flexível. Fornecer trueno prop o isColumnLayoutaltera para a coluna de direção flexível (para que tudo seja empilhado). Mas, como mencionado anteriormente – você pode querer pular este componente e gerar sua visualização exatamente como seria no frontend.

E com isso temos um seletor de visualização/edição do modo de bloco. Obviamente, você pode ajustar o conteúdo do “modo de edição” para mostrar, por exemplo, entradas de controle ou outros enfeites.

Você pode criar quantos componentes quiser, você não está limitado a apenas ter um para a editfunção! Basta criar mais componentes e incluí-los em uma returninstrução. Essa é a ideia do React, na verdade – construir pedaços de código encapsulados, possivelmente cada um manipulando seu próprio estado e combiná-los para fazer UIs complexas.