Compilazione di Sass per blocchi multipli con il webpack Config

Questo articolo mostra un esempio di come utilizzare i file Sass che abbiamo configurato nell’articolo Estendere la configurazione del webpack di WordPress Create Block Script con più blocchi all’interno dello stesso plugin. Se non hai letto quell’articolo, per favore leggilo prima.

Questo articolo è per una versione precedente di Crea script di blocco

Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere più compatibili con l’ultimo script create block. È possibile visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui.

Abbiamo anche una guida aggiornata sull’aggiunta di punti di ingresso aggiuntivi al webpack in modo da poter generare più file CSS.

Configurazione di più blocchi

Come ho accennato nell’articolo precedente, l’aggiunta delle importazioni Sass all’indice del plugin ci permette di definire più blocchi all’interno del plugin, ognuno con i propri editor.scsse style.scssfile.

La configurazione del webpack che abbiamo impostato prenderà i file editor.scsse style.scssper ogni blocco e lo compilerà nei file /editor.csse /style.cssnella radice del plugin.

Per provarlo, spostiamo i file /src/index.jse e le /src/scsscartelle in /src/blocks/block-one, quindi copiamo questo blocco in /src/blocks/block-two. Infine crea un nuovo file in /src/index.js.

Ora dovresti avere la seguente struttura di file:

• /src

  • /blocks

    • /block-one

      • /scss

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

    • /block-two/

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

Quindi apportiamo alcune modifiche minori in /block-twomodo che sia registrato come blocco univoco. Modifica semplicemente la seguente riga nel /src/blocks/block-two/index.jsfile da:

registerBlockType( 'wcltd/wholesome-notes', {

a:

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

e cambia il nome del file da Wholesome Notesa Wholesome Notes 2:

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

Alterare il Sass

In /src/blocks/block-two/scss/editor.scsse /src/blocks/block-two/scss/style.scssapportare alcune modifiche minori, in modo da riconoscere le modifiche nei file compilati.

Inoltre, non dimentichiamo di modificare le classi in quei file per utilizzare il nuovo spazio dei nomi .wp-block-wcltd-wholesome-notes-2.

Ecco le modifiche che ho apportato:

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

Niente di grandioso, ho solo cambiato alcuni colori cambiati.

Configurazione del file indice

Ora modifichiamo il file in /src/blocks/index.js. Non ci resta che importare i due blocchi che abbiamo creato:

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

Visualizzazione dei risultati

Ora eseguiamo npm starte vediamo i risultati dei file prodotti.

Il /editor.cssfile si presenta così:

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

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

Guarda come i Sass dai editor.scssfile di ogni blocco all’interno del plugin sono stati compilati in questo singolo /editor.cssfile.

Ora diamo un’occhiata al /style.cssfile:

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

Puoi vedere che i style.scssfile di ogni blocco all’interno del plugin sono stati compilati in questo singolo /style.cssfile.