Your cart is currently empty!
Desarrollar un tema de bloques de WordPress de cero
Algún apuntillo: lo mejor es tener la última versión de node instalada.
Primero crea un tema con el «Create Block Theme» plugin desde cero.
Inicializa npm dentro de la carpeta del tema:
npm init -y
instala las dependencias
npm install --save-dev autoprefixer postcss-cli sass terser chokidar-cli npm-run-all
Crea las carpeta assets con esta estructura:
your-theme/
│
├── assets/
│ ├── scss/
│ │ └── style.scss
│ ├── js/
│ │ └── main.js
│ └── fonts/
│ └── (tus fuentes)
│
├── templates/
├── theme.json
├── functions.php
├── style.css
└── ...
Cambia el package.json
"scripts": {
"build:css": "sass assets/scss/style.scss style.css --no-source-map",
"prefix:css": "postcss style.css --use autoprefixer -o style.css",
"build:js": "terser assets/js/main.js -o assets/js/main.min.js",
"build": "npm run build:css && npm run prefix:css && npm run build:js",
"watch:css": "sass --watch assets/scss/style.scss:style.css",
"watch:js": "chokidar 'assets/js/**/*.js' -c 'npm run build:js'",
"watch": "npm-run-all --parallel watch:css watch:js"
}
Crea tu functions.php
<?php
// functions.php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
function yourtheme_enqueue() {
wp_enqueue_style('yourtheme-style', get_stylesheet_uri());
wp_enqueue_script('yourtheme-scripts', get_template_directory_uri() . '/assets/js/main.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'yourtheme_enqueue');
function yourtheme_enqueue_block_editor_assets() {
wp_enqueue_style('yourtheme-editor-style', get_template_directory_uri() . '/style.css');
}
add_action('enqueue_block_editor_assets', 'yourtheme_enqueue_block_editor_assets');
Algunos comandos:
Para compilar los SCSS y aplicar autoprefixer
npm run build
Para observar cambios en los archivos SCSS y JS (ejecutar al volver al proyecto)
npm run watch
Y cambiar la variable en entornos de desarrollos donde node no está en la ruta común
export PATH=/opt/alt/alt-nodejs22/root/bin:$PATH