Compilación de Sass para múltiples bloques con la configuración del paquete web

Este artículo muestra un ejemplo de cómo usar los archivos Sass que configuramos en el artículo Extender la configuración del paquete web WordPress Create Block Script con múltiples bloques dentro del mismo complemento. Si no ha leído ese artículo, léalo primero.

Este artículo es para una versión anterior de Create Block Script

Aunque la teoría aún se puede aplicar, es posible que parte de la información de este artículo ya no sea compatible con el último script de creación de bloques. Puede ver nuestra guía actualizada de creación de secuencias de comandos de bloques aquí.

También tenemos una guía actualizada sobre cómo agregar puntos de entrada adicionales al paquete web para que pueda generar múltiples archivos CSS.

Configuración de varios bloques

Como mencioné en el artículo anterior, agregar las importaciones de Sass al índice del complemento nos permite definir múltiples bloques dentro del complemento, cada uno con sus propios editor.scssarchivos style.scss.

La configuración del paquete web que hemos configurado tomará los archivos editor.scssy style.scsspara cada bloque y los compilará en los archivos /editor.cssy /style.cssen la raíz del complemento.

Para probar esto, mueva los archivos /src/index.jsy /src/scsscarpetas a /src/blocks/block-one, luego copie este bloque a /src/blocks/block-two. Finalmente crea un nuevo archivo en /src/index.js.

Ahora debería tener la siguiente estructura de archivos:

• /src

  • /blocks

    • /block-one

      • /scss

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

    • /block-two/

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

Luego, hagamos algunos cambios menores para /block-twoque se registre como un bloque único. Simplemente modifique la siguiente línea en el /src/blocks/block-two/index.jsarchivo de:

registerBlockType( 'wcltd/wholesome-notes', {

a:

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

y cambiar el nombre del archivo de Wholesome Notesa Wholesome Notes 2:

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

Alterando el Sass

En /src/blocks/block-two/scss/editor.scssy /src/blocks/block-two/scss/style.scsshaga algunas modificaciones menores, para que reconozcamos los cambios en los archivos compilados.

Además, no olvidemos modificar las clases en esos archivos para usar el nuevo espacio de nombres .wp-block-wcltd-wholesome-notes-2.

Aquí están las modificaciones que hice:

/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, solo cambié algunos colores cambiados.

Configuración del archivo de índice

Ahora vamos a editar el archivo en /src/blocks/index.js. Solo necesitamos importar los dos bloques que hemos creado:

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

Ver los resultados

Ahora ejecutemos npm starty veamos los resultados de los archivos generados.

El /editor.cssarchivo se ve así:

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

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

Vea cómo el Sass de los editor.scssarchivos de cada bloque dentro del complemento se ha compilado en este único /editor.cssarchivo.

Ahora veamos el /style.cssarchivo:

.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; }

Puede ver que los style.scssarchivos de cada bloque dentro del complemento se han compilado en este único /style.cssarchivo.