Compilando Sass para vários blocos com a configuração do webpack

Este artigo mostra um exemplo de como usar os arquivos Sass que configuramos no artigo Estendendo a configuração do webpack do WordPress Create Block Script com vários blocos dentro do mesmo plugin. Se você não leu esse artigo, leia-o primeiro.

Este artigo é para uma versão mais antiga do Create Block Script

Embora a teoria ainda possa ser aplicada, algumas das informações neste artigo podem não ser mais compatíveis com o script de bloco de criação mais recente. Você pode ver nosso guia de script de criação de bloco atualizado aqui.

Também temos um guia atualizado sobre como adicionar pontos de entrada adicionais ao webpack para que você possa gerar vários arquivos CSS.

Configurando vários blocos

Como mencionei no artigo anterior, adicionar as importações Sass ao índice do plugin nos permite definir vários blocos dentro do plugin, cada um com seus próprios editor.scsse style.scssarquivos.

A configuração do webpack que configuramos pegará os arquivos editor.scsse style.scsspara cada bloco e os compilará nos arquivos /editor.csse /style.cssna raiz do plug-in.

Para experimentar isso, vamos mover os arquivos /src/index.jse /src/scsspastas e para /src/blocks/block-one, depois copie este bloco para /src/blocks/block-two. Por fim, crie um novo arquivo em /src/index.js.

Agora você deve ter a seguinte estrutura de arquivos:

• /src

  • /blocks

    • /block-one

      • /scss

        • /editor.scss
        • /style.scss
      • /index.js

    • /block-two/

      • /scss
        • /editor.scss
        • /style.scss
      • /index.js
    • /index.js

Então vamos fazer algumas pequenas alterações para /block-twoque ele seja registrado como um bloco único. Basta alterar a seguinte linha no /src/blocks/block-two/index.jsarquivo de:

registerBlockType( 'wcltd/wholesome-notes', {

para:

registerBlockType( 'wcltd/wholesome-notes-2', {

e altere o nome do arquivo de Wholesome Notespara Wholesome Notes 2:

    title: __(
        'Wholesome Notes 2',
        'wcltd'
    ),

Alterando o Sass

In /src/blocks/block-two/scss/editor.scsse /src/blocks/block-two/scss/style.scssfaça algumas pequenas alterações, para que reconheçamos as alterações nos arquivos compilados.

Além disso, não vamos esquecer de alterar as classes nesses arquivos para usar o novo namespace .wp-block-wcltd-wholesome-notes-2.

Seguem as alterações que fiz:

/src/blocks/block-two/scss/editor.scss

.wp-block-wcltd-wholesome-notes-2 {
    border: 1px dotted #0f0;
}

/src/blocks/block-two/scss/style.scss

.wp-block-wcltd-wholesome-notes-2 {
    background-color: #fff;
    color: #000;
    padding: 2px;
}

Nada grandioso, apenas mudei algumas cores alteradas.

Configurando o arquivo de índice

Agora vamos editar o arquivo em /src/blocks/index.js. Só precisamos importar os dois blocos que criamos:

import './blocks/block-one/index';
import './blocks/block-two/index';

Visualizando os Resultados

Agora vamos executar npm starte visualizar os resultados dos arquivos de saída.

O /editor.cssarquivo fica assim:

.wp-block-wcltd-wholesome-notes {
  border: 1px dotted #f00; }

.wp-block-wcltd-wholesome-notes-2 {
  border: 1px dotted #0f0; }

Veja como o Sass dos editor.scssarquivos de cada bloco dentro do plugin foi compilado neste único /editor.cssarquivo.

Agora vamos ver o /style.cssarquivo:

.wp-block-wcltd-wholesome-notes {
  background-color: #000;
  color: #fff;
  padding: 2px; }

.wp-block-wcltd-wholesome-notes-2 {
  background-color: #fff;
  color: #000;
  padding: 2px; }

Você pode ver que os style.scssarquivos de cada bloco dentro do plugin foram compilados neste único /style.cssarquivo.