Kompilera Sass för flera block med webbpaketet Config

Den här artikeln visar ett exempel på hur du använder Sass-filerna som vi ställer in i artikeln Utöka WordPress Create Block Script-webpack Config med flera block inom samma plugin. Om du inte har läst den artikeln, läs den först.

Den här artikeln är för en äldre version av Create Block Script

Även om teorin fortfarande kan tillämpas, kanske en del av informationen i den här artikeln inte längre är kompatibel med det senaste skapa blockskriptet. Du kan se vår uppdaterade Skapa Block-skriptguide här.

Vi har också en uppdaterad guide om att lägga till ytterligare ingångspunkter till webpack så att du kan skapa flera CSS-filer.

Konfigurera flera block

Som jag nämnde i den föregående artikeln, genom att lägga till Sass-importerna till plugin-indexet kan vi definiera flera block i plugin-programmet, var och en med sina egna editor.scssoch style.scssfiler.

Webpack-konfigurationen som vi har ställt in kommer att ta editor.scssoch style.scss-filerna för varje block och kompilera dem till /editor.cssoch /style.css-filerna i roten av plugin-programmet.

För att prova detta, låt oss flytta filerna /src/index.jsoch /src/scssmappar och till /src/blocks/block-oneoch sedan kopiera detta block till /src/blocks/block-two. Skapa slutligen en ny fil på /src/index.js.

Du bör nu ha följande filstruktur:

• /src

  • /blocks

    • /block-one

      • /scss

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

    • /block-two/

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

Låt oss sedan göra några mindre ändringar /block-twoså att det registreras som ett unikt block. Ändra helt enkelt följande rad i /src/blocks/block-two/index.jsfilen från:

registerBlockType( 'wcltd/wholesome-notes', {

till:

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

och ändra namnet på filen från Wholesome Notestill Wholesome Notes 2:

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

Ändra Sass

In /src/blocks/block-two/scss/editor.scssoch /src/blocks/block-two/scss/style.scssgör några mindre ändringar, så att vi kommer att känna igen ändringarna i de kompilerade filerna.

Låt oss inte heller glömma att ändra klasserna i dessa filer för att använda det nya namnområdet .wp-block-wcltd-wholesome-notes-2.

Här är ändringarna jag gjorde:

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

Inget stort, jag ändrade bara några färger.

Ställa in indexfilen

Låt oss nu redigera filen på /src/blocks/index.js. Vi behöver bara importera de två blocken vi har skapat:

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

Visa resultaten

Låt oss nu köra npm startoch se resultatet av de utmatade filerna.

Filen /editor.cssser ut så här:

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

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

Se hur Sass från editor.scssfilerna i varje block i pluginet har kompilerats till denna enda /editor.cssfil.

Låt oss nu titta på /style.cssfilen:

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

Du kan se att style.scssfilerna för varje block i plugin-programmet har kompilerats till denna enda /style.cssfil.