See artikkel näitab näidet selle kohta, kuidas kasutada Sassi-faile, mille me seadistame artiklis WordPressi loomisplokk-skripti veebipaketi konfiguratsiooni laiendamine mitme plokiga samas pistikprogrammis. Kui te pole seda artiklit lugenud, lugege see kõigepealt läbi.
See artikkel on mõeldud ploki skripti loomise vanemale versioonile
Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga ühilduda. Meie uuendatud plokiskripti loomise juhendit saate vaadata siit .
Meil on ka värskendatud juhend veebipaketile täiendavate sisenemispunktide lisamise kohta, et saaksite luua mitu CSS-faili.
Mitme ploki seadistamine
Nagu ma eelmises artiklis mainisin, võimaldab Sassi impordi lisamine pistikprogrammi indeksisse määratleda pistikprogrammis mitu plokki, millest igaühel on oma editor.scssja style.scssfailid.
Meie seadistatud veebipaketi konfiguratsioon võtab iga ploki jaoks failid ja ning kompileerib need pistikprogrammi juurtes olevatesse editor.scssja failidesse .style.scss``/editor.css``/style.css
Selle proovimiseks laseme teisaldada failid /src/index.jsja /src/scssfailid ja kaustad asukohta /src/blocks/block-one, seejärel kopeerida see plokk kausta /src/blocks/block-two. Lõpuks looge uus fail aadressil /src/index.js.
Nüüd peaks teil olema järgmine failistruktuur:
-
/src-
/blocks-
/block-one-
/scss/editor.scss/style.scss
/index.js
-
-
/block-two//scss/editor.scss/style.scss
/index.js
/index.js
-
-
Seejärel teeb mõned väikesed muudatused /block-two, et see registreeritaks unikaalse plokina. /src/blocks/block-two/index.jsLihtsalt muutke faili järgmist rida järgmiselt :
registerBlockType( 'wcltd/wholesome-notes', {
kellele:
registerBlockType( 'wcltd/wholesome-notes-2', {
Wholesome Notesja muutke faili nimi nimest Wholesome Notes 2:
title: __(
'Wholesome Notes 2',
'wcltd'
),
Sassi muutmine
Sisse /src/blocks/block-two/scss/editor.scssja /src/blocks/block-two/scss/style.scsstehke mõned väiksemad muudatused, et tunneksime koostatud failides tehtud muudatused ära.
Ärgem unustagem ka nende failide klasse muutmast, et kasutada uut nimeruumi .wp-block-wcltd-wholesome-notes-2.
Siin on minu tehtud muudatused:
/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 midagi suurepärast, lihtsalt vahetasin paar muutunud värvi.
Indeksifaili seadistamine
Nüüd saate faili redigeerida aadressil /src/blocks/index.js. Peame lihtsalt importima kaks loodud plokki:
import './blocks/block-one/index';
import './blocks/block-two/index';
Tulemuste vaatamine
Nüüd käivitame npm startja vaatame väljastatud failide tulemusi.
/editor.cssFail näeb välja selline :
.wp-block-wcltd-wholesome-notes {
border: 1px dotted #f00; }
.wp-block-wcltd-wholesome-notes-2 {
border: 1px dotted #0f0; }
Vaadake, kuidas editor.scssplugina iga ploki failide Sass on sellesse faili kompileeritud /editor.css.
Vaatame nüüd /style.cssfaili:
.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; }
Näete style.scss, et plugina iga ploki failid on kompileeritud sellesse /style.cssfaili.