Compiler Sass pour plusieurs blocs avec la configuration webpack

Cet article montre un exemple d’utilisation des fichiers Sass que nous avons configurés dans l’article Extension de la configuration du pack Web WordPress Create Block Script avec plusieurs blocs dans le même plugin. Si vous n’avez pas lu cet article, lisez-le d’abord.

Cet article concerne une ancienne version du script de création de bloc

Bien que la théorie puisse toujours être appliquée, certaines des informations contenues dans cet article peuvent ne plus être compatibles avec le dernier script de bloc de création. Vous pouvez consulter notre guide de création de script de bloc mis à jour ici.

Nous avons également un guide mis à jour sur l’ajout de points d’entrée supplémentaires au pack Web afin que vous puissiez générer plusieurs fichiers CSS.

Configuration de plusieurs blocs

Comme je l’ai mentionné dans l’article précédent, l’ajout des importations Sass à l’index du plugin nous permet de définir plusieurs blocs dans le plugin, chacun avec ses propres fichiers editor.scsset .style.scss

La configuration Webpack que nous avons configurée prendra les fichiers editor.scsset style.scsspour chaque bloc et le compilera dans les fichiers /editor.csset /style.cssà la racine du plugin.

Pour essayer cela, déplaçons les fichiers /src/index.jset /src/scssdossiers et dans /src/blocks/block-one, puis copiez ce bloc dans /src/blocks/block-two. Créez enfin un nouveau fichier dans /src/index.js.

Vous devriez maintenant avoir la structure de fichiers suivante :

• /src

  • /blocks

    • /block-one

      • /scss

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

    • /block-two/

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

Apportons ensuite quelques modifications mineures à /block-twoafin qu’il soit enregistré en tant que bloc unique. Modifiez simplement la ligne suivante dans le /src/blocks/block-two/index.jsfichier à partir de :

registerBlockType( 'wcltd/wholesome-notes', {

à:

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

et changez le nom du fichier de Wholesome Notesà Wholesome Notes 2:

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

Modifier le Sass

In /src/blocks/block-two/scss/editor.scsset /src/blocks/block-two/scss/style.scssapportez quelques modifications mineures, afin que nous reconnaissions les changements dans les fichiers compilés.

N’oublions pas non plus de modifier les classes de ces fichiers pour utiliser le nouvel espace de noms .wp-block-wcltd-wholesome-notes-2.

Voici les modifications que j’ai apportées :

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

Rien de grand, j’ai juste changé quelques couleurs changées.

Configuration du fichier d’index

Modifions maintenant le fichier en /src/blocks/index.js. Il nous suffit d’importer les deux blocs que nous avons créés :

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

Affichage des résultats

Maintenant, exécutons npm startet visualisons les résultats des fichiers générés.

Le /editor.cssfichier ressemble à ceci :

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

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

Voyez comment les Sass des editor.scssfichiers de chaque bloc du plugin ont été compilés dans ce /editor.cssfichier unique.

Regardons maintenant le /style.cssfichier :

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

Vous pouvez voir que les style.scssfichiers de chaque bloc du plugin ont été compilés dans ce /style.cssfichier unique.