To nie będzie kolejny wpis o tym jak zacząć tworzenie nowych bloków w Wordpressie za pomocą create-guten-block. Dla mnie osobiście przełączanie się pomiędzy wtyczką a motywem, między webpackiem a gulpem byłoby nieco uciążliwe. Zapragnąłem mieć wszystko w jednym miejscu.

I tak zaczęło się poszukiwanie rozwiązań, które nie dawały mi 100% satysfakcji, gdyż nie były stabilne. Za to bardzo obiecująca jest poniższa konfiguracja. Ale od początku…

Celem jaki sobie postawiłem, było umożliwienie tworzenia bloków Gutenberga w dowolnym motywie i utworzenie przy tym stabilnego środowiska developerskiego. Podszedłem do tego, jak to w przypadku historyka, jako badacz, a nie ekspert. Istotą problemu, z jakim musiałem się zmierzyć to umożliwienie pisania kodu w JSX przy jednoczesnej kompilacji go do standardu ES5. Najpierw były nieudane próby z gulpem. Potem idąc torem create-guten-block próbowałem stworzyć motyw w oparciu o webpack. Też bezskutecznie. Działał zbyt wolno. Okazało się, że idealnym rozwiązaniem dla mnie było połączenie gulpa z webpackiem.

Ale zaraz. Jak tworzyć bloki w motywie? Przecież wszyscy rekomendują tworzenie wtyczki. A czy nie fajnie byłoby mieć wszystko w jednym? Do zrobienia tej konfiguracji pomogło mi właśnie narzędzie create-guten-block.

Przekształcając funkcję i umieszczając ją do pliku functions.php. Umożliwia ona rejestrację zarówno wynikowego skryptu (app.js) jak i styli.

wp_enqueue_script( 'wp-api' );
// Register block editor script for backend.
wp_enqueue_script(
	'blocks-js', // Handle.
	get_template_directory_uri() . '/dist/app.js',
	array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
	null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
	true // Enqueue the script in the footer.
);


function blocks_assets() {
	// Styles.
	wp_enqueue_style(
		'blocks-css', // Handle.
		get_template_directory_uri() . '/blocks.css',
		array( 'wp-editor', 'wp-edit-blocks' ) // Dependency to include the CSS after it.
		// filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
	);
}
// Hook: Frontend assets.
add_action( 'enqueue_block_assets', 'blocks_assets' );



register_block_type(
	'cgb/block-lub-blocks', array(

		// Enqueue blocks.build.js in the editor only.
		'editor_script' => 'blocks-js',
		'style' => 'blocks-css',
    'editor_style' => 'blocks-css',

	)
);

Następnie musimy zainstalować w folderze naszego motywu potrzebne paczki. Tworzymy package.json:

{
    "name": "wp-lubstarterdev",
    "version": "1.0.0",
    "description": "Lubstarter Dev Theme Sass Compiler",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "Biuro REKLAMA",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/plugin-proposal-class-properties": "^7.7.4",
        "@babel/plugin-syntax-dynamic-import": "^7.7.4",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-react": "^7.0.0",
        "@fortawesome/fontawesome-free": "^5.9.0",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.0.6",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "bootstrap": "^4.3.1",
        "browser-sync": "^2.26.7",
        "del": "^3.0.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^5.0.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect-php": "^1.0.2",
        "gulp-cssnano": "^2.1.3",
        "gulp-jshint": "^2.1.0",
        "gulp-open": "^3.0.1",
        "gulp-ruby-sass": "^3.0.0",
        "gulp-sort": "^2.0.0",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-uglify": "^3.0.2",
        "gulp-util": "^3.0.8",
        "gulp-zip": "^4.2.0",
        "node-bin-setup": "^1.0.6",
        "popper.js": "^1.14.7",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-router-dom": "^5.1.2",
        "run-sequence": "^2.2.1",
        "sequence": "^3.0.0",
        "webpack": "^4.41.2",
        "webpack-stream": "^5.2.1"
    },
    "dependencies": {
        "@fancyapps/fancybox": "^3.5.6",
        "animate.css": "^3.7.0",
        "axios": "^0.19.0",
        "jquery": "^3.4.1",
        "jshint": "^2.10.1",
        "owl.carousel": "^2.3.4",
        "rellax": "^1.8.0",
        "wow.js": "^1.2.2"
    }
}

Następnie za pomocą wiersza poleceń wpisujemy:

npm install

i klikamy ENTER.

Teraz pora na konfigurację pliku gulpfile.js:

'use strict';

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    cssnano = require('gulp-cssnano'),
    sass = require('gulp-ruby-sass'),
    sort = require('gulp-sort'),
    runSequence = require('run-sequence'),
    connect = require('gulp-connect-php'),
    sourcemaps = require('gulp-sourcemaps'),
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    webpack = require('webpack'),
    webpackStream = require('webpack-stream'),
    browserSync = require('browser-sync').create();


var supported = [
    'last 2 versions',
    'safari >= 8',
    'ie >= 10',
    'ff >= 20',
    'ios 6',
    'android 4'
];

var build_files = [
    '**',
    '!node_modules',
    '!node_modules/**',
    '!build',
    '!build/**',
    '!src',
    '!src/**',
    '!.git',
    '!.git/**',
    '!package.json',
    '!.gitignore',
    '!gulpfile.js',
    '!.editorconfig',
    '!.jshintrc'
];


// Defining base paths
var basePaths = {
    js: './js/',
    node: './node_modules/',
    dev: './src/',
    css: './css/'
};



gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: "localhost/blocks",
        browser: "google chrome"
    });

});

gulp.task('webpacks', function () {
    return gulp.src('blocks/src/app.js')
        .pipe(webpackStream({
            config: require('./app.config.js'),
            watch: true
        }))
        .pipe(gulp.dest('dist/'))
        .pipe(browserSync.stream())

});

gulp.task('sass', () =>
    sass('src/sass/**/*.scss', { sourcemap: true })
        .pipe(autoprefixer())
        .on('error', sass.logError)
        .pipe(sourcemaps.write())
        .pipe(cssnano({
            autoprefixer: { browsers: supported, add: true }
        }))
        .pipe(sourcemaps.write('maps', {
            includeContent: false,
            sourceRoot: 'src/sass'
        }))
        .pipe(gulp.dest('./'))
        .pipe(browserSync.stream()) 
);




 
gulp.task('watch', function () {
    gulp.watch('src/sass/**/*.scss', gulp.series('sass'));
    gulp.watch('blocks/src/**/*.js', gulp.series('webpacks'));
    gulp.watch('**/*.php').on('change', function () {
        browserSync.reload();
    });
});


gulp.task('copy-assets', function () {
    var stream = gulp.src(basePaths.node + 'bootstrap/dist/js/**/*.js')
        .pipe(gulp.dest(basePaths.js + 'bootstrap'));
    gulp.src(basePaths.node + 'bootstrap/dist/css/**/*.css')
        .pipe(gulp.dest(basePaths.css + 'bootstrap'));
    return stream;

});

gulp.task('copyfonts', function () {
    var stream = gulp.src(basePaths.node + '@fortawesome/fontawesome-free/webfonts/**/*.{ttf,woff,woff2,eof,svg}')
        .pipe(gulp.dest('./fonts/fontawesome'));
    gulp.src(basePaths.node + '@fortawesome/fontawesome-free/css/**/*.css')
        .pipe(gulp.dest(basePaths.css + 'fontawesome'));
    return stream;
});

gulp.task('copypopper', function () {
    var stream = gulp.src(basePaths.node + 'popper.js/dist/umd/popper.min.js')
        .pipe(gulp.dest('./js'));

    gulp.src(basePaths.node + 'popper.js/dist/umd/popper.js')
        .pipe(gulp.dest('./js'));
    return stream;
});

gulp.task('owl', function () {
    var stream = gulp.src(basePaths.node + 'owl.carousel/dist/owl.carousel.min.js')
        .pipe(gulp.dest('./js'));

    gulp.src(basePaths.node + 'owl.carousel/dist/assets/owl.carousel.min.css')
        .pipe(gulp.dest('./css'));
    return stream;
});
gulp.task('animate', function () {
    var stream = gulp.src(basePaths.node + 'animate.css/animate.min.css')
        .pipe(gulp.dest('./css'));
    return stream;
});

gulp.task('rellax', function () {
    var stream = gulp.src(basePaths.node + 'rellax/rellax.min.js')
        .pipe(gulp.dest('./js'));
    return stream;
});

gulp.task('wow', function () {
    var stream = gulp.src(basePaths.node + 'wow.js/dist/wow.min.js')
        .pipe(gulp.dest('./js'));
    return stream;
});

gulp.task('fancybox', function () {
    var stream = gulp.src(basePaths.node + '@fancyapps/fancybox/dist/jquery.fancybox.min.js')
        .pipe(gulp.dest('./js'));

    gulp.src(basePaths.node + '@fancyapps/fancybox/dist/jquery.fancybox.min.css')
        .pipe(gulp.dest('./css'));
    return stream;
});


var defl = gulp.parallel(['sass', 'webpacks', 'watch', 'browser-sync']);
var ini = gulp.parallel(['copy-assets', 'copyfonts', 'copypopper', 'animate', 'wow', 'owl', 'rellax', 'fancybox']);

gulp.task(defl);
gulp.task('default', defl);
gulp.task(ini);
gulp.task('init', ini);

Jak widać w kopilacji z JSX do ES5 pomagają takie pluginy jak webpack i webpack-stream, które „łączą się” z plikiem app.config.js i dają wynikowy kod ES5 w dist/app.js, przy jednoczesnym podglądzie poprawności kodu (watch). W moim motywie bloki Gutenberga w JSX tworzę w folderze „blocks”. O jego strukturze napiszę w niedalekiej przyszłości.

A właśnie. Aby wszystko zadziałało, musimy jeszcze utworzyć wspomniany app.config.js. To tam dzieje się ta MAGIA.

module.exports = {
    output: {
        filename: 'app.js',
    },
    module: {
        
        rules: [
             
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env',
                        '@babel/preset-react'],
                    plugins: [
                        "@babel/plugin-syntax-dynamic-import",
                        "@babel/plugin-proposal-class-properties"
                    ]
                },
                
            },
        ],
    }, 
    watch: true
}; 

To jest nic innego jak część kofiguracji webpacka. W nazwie dałem app, tak dla zmyłki 🙂

Oczywiście przy konfiguracji swoich motywów, musicie wziąć pod uwagę strukturę folderów. Ja bazowałem na motywie twenty sixteen. Rozwiązanie jest w fazie testów. Liczę też na waszą pomoc i wskazówki.