Sassin kääntäminen useille lohkoille verkkopaketin Config avulla

Tämä artikkeli näyttää esimerkin Sass-tiedostojen käytöstä, jotka määritimme artikkelissa WordPressin Luo Block Script -verkkopaketin kokoonpanon laajentaminen useilla lohkoilla saman laajennuksen sisällä. Jos et ole lukenut tätä artikkelia, lue se ensin.

Tämä artikkeli koskee Luo lohkokomentosarjan vanhempaa versiota

Vaikka teoriaa voidaan edelleen soveltaa, jotkin tämän artikkelin tiedoista eivät ehkä ole enää yhteensopivia uusimman luontilohkokomentosarjan kanssa. Voit tarkastella päivitettyä Luo Block Script -oppaamme täältä.

Meillä on myös päivitetty opas lisätulopisteiden lisäämisestä verkkopakettiin, jotta voit luoda useita CSS-tiedostoja.

Useiden lohkojen määrittäminen

Kuten mainitsin edellisessä artikkelissa, Sass-tuontien lisääminen laajennuksen hakemistoon antaa meille mahdollisuuden määrittää laajennuksen sisällä useita lohkoja, joista jokaisella on omat editor.scsstiedostonsa style.scss.

Asentamamme verkkopaketin konfiguraatio ottaa editor.scssja style.scss-tiedostot jokaiselle lohkolle ja kokoaa ne laajennuksen juuressa oleviin /editor.cssja tiedostoihin./style.css

Voit kokeilla tätä siirtämällä tiedostot /src/index.jsja /src/scss-tiedostot ja kansiot -kansioon ja /src/blocks/block-onekopioimalla sitten tämän lohkon kansioon /src/blocks/block-two. Luo lopuksi uusi tiedosto osoitteessa /src/index.js.

Sinulla pitäisi nyt olla seuraava tiedostorakenne:

• /src

  • /blocks

    • /block-one

      • /scss

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

    • /block-two/

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

Sitten tehdään pieniä muutoksia, /block-twojotta se rekisteröidään yksilöiväksi lohkoksi. Muuta vain seuraava /src/blocks/block-two/index.jstiedoston rivi:

registerBlockType( 'wcltd/wholesome-notes', {

vastaanottajalle:

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

ja muuta tiedoston nimi nimestä Wholesome Notes:Wholesome Notes 2

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

Sassin muuttaminen

Sisään /src/blocks/block-two/scss/editor.scssja /src/blocks/block-two/scss/style.scsstee joitain pieniä muutoksia, jotta voimme tunnistaa muutokset koottuissa tiedostoissa.

Älä myöskään unohda muuttaa näiden tiedostojen luokkia käyttämään uutta nimiavaruutta .wp-block-wcltd-wholesome-notes-2.

Tässä tekemäni muutokset:

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

Ei mitään mahtavaa, vaihdoin vain muutaman värin.

Hakemistotiedoston määrittäminen

Nyt voidaan muokata tiedostoa osoitteessa /src/blocks/index.js. Meidän tarvitsee vain tuoda kaksi luomamme lohkoa:

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

Tulosten katselu

Suoritetaan nyt npm startja tarkastellaan tulostettujen tiedostojen tuloksia.

Tiedosto /editor.cssnäyttää tältä:

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

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

editor.scssKatso, kuinka liitännäisen kunkin lohkon tiedostojen Sass on käännetty tähän yhteen /editor.csstiedostoon.

Katsotaan nyt /style.csstiedostoa:

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

Voit nähdä, että style.scssliitännäisen jokaisen lohkon tiedostot on käännetty tähän yhteen /style.csstiedostoon.