Ten artykuł pokazuje przykład, jak korzystać z plików Sass, które skonfigurowaliśmy w artykule Rozszerzanie konfiguracji webpacka WordPress Create Block Script o wiele bloków w tej samej wtyczce. Jeśli nie czytałeś tego artykułu, przeczytaj go najpierw.
Ten artykuł dotyczy starszej wersji skryptu tworzenia bloku
Chociaż teorię można nadal zastosować, niektóre informacje zawarte w tym artykule mogą nie być już zgodne z najnowszym skryptem tworzenia bloku. Tutaj możesz zapoznać się z naszym zaktualizowanym przewodnikiem tworzenia skryptów blokowych.
Mamy również zaktualizowany przewodnik dotyczący dodawania dodatkowych punktów wejścia do pakietu internetowego, dzięki czemu można wygenerować wiele plików CSS.
Konfigurowanie wielu bloków
editor.scssJak wspomniałem w poprzednim artykule, dodanie importów Sass do indeksu wtyczki pozwala nam zdefiniować wiele bloków we wtyczce, każdy z własnymi style.scssplikami.
Konfiguracja webpacka, którą skonfigurowaliśmy, pobierze pliki editor.scssi style.scssdla każdego bloku i skompiluje je do plików /editor.cssi /style.cssw katalogu głównym wtyczki.
Aby to wypróbować, przenieś /src/index.jsi /src/scsspliki i foldery do /src/blocks/block-one, a następnie skopiuj ten blok do /src/blocks/block-two. Na koniec utwórz nowy plik pod adresem /src/index.js.
Powinieneś mieć teraz następującą strukturę plików:
-
/src-
/blocks-
/block-one-
/scss/editor.scss/style.scss
/index.js
-
-
/block-two//scss/editor.scss/style.scss
/index.js
/index.js
-
-
Następnie dokonajmy drobnych zmian, aby /block-twozostał zarejestrowany jako unikalny blok. Po prostu zmień następujący wiersz w /src/blocks/block-two/index.jspliku z:
registerBlockType( 'wcltd/wholesome-notes', {
do:
registerBlockType( 'wcltd/wholesome-notes-2', {
i zmień nazwę pliku z Wholesome Notesna Wholesome Notes 2:
title: __(
'Wholesome Notes 2',
'wcltd'
),
Zmiana Sassa
W /src/blocks/block-two/scss/editor.scssi /src/blocks/block-two/scss/style.scsswprowadź kilka drobnych poprawek, dzięki którym rozpoznamy zmiany w skompilowanych plikach.
Nie zapomnij też zmienić klas w tych plikach tak, aby używały nowej przestrzeni nazw .wp-block-wcltd-wholesome-notes-2.
Oto poprawki, które wprowadziłem:
/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;
}
Nic wielkiego, po prostu zmieniłem kilka zmienionych kolorów.
Konfigurowanie pliku indeksu
Teraz edytujmy plik w /src/blocks/index.js. Musimy tylko zaimportować dwa utworzone przez nas bloki:
import './blocks/block-one/index';
import './blocks/block-two/index';
Przeglądanie wyników
Teraz uruchommy npm starti przejrzyjmy wyniki wygenerowanych plików.
Plik /editor.csswygląda tak:
.wp-block-wcltd-wholesome-notes {
border: 1px dotted #f00; }
.wp-block-wcltd-wholesome-notes-2 {
border: 1px dotted #0f0; }
Zobacz, jak Sass z editor.scssplików każdego bloku we wtyczce został skompilowany do tego pojedynczego /editor.csspliku.
Teraz spójrzmy na /style.cssplik:
.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; }
Możesz zobaczyć, że style.scsspliki każdego bloku we wtyczce zostały skompilowane w ten pojedynczy /style.cssplik.