Creación de bloques Gutenberg personalizados en WooCommerce: Guía completa para desarrolladores

WordPress ha lanzado recientemente @wordpress/scripts paquete npm, que crea un nuevo Desarrollo de WordPressSe proporciona un conjunto de scripts reutilizables. Este artículo detallará cómo utilizar el ES6yJSX responder cantando @wordpress/scripts sostener o abrazarCrear un Gutenberg terrón (de tierra)y lo integra en el WooCommerce Medio.

antes del comienzo (de algo)

Antes de comenzar el desarrollo, debemos configurar algunos entornos de desarrollo necesarios:

• Entorno de desarrollo de WordPress: Asegúrese de que tiene WordPress instalado y en funcionamiento.
• Herramientas de compilación JavaScript (Node/npm): Utilizaremos Reaccione responder cantando JSXy por lo tanto necesitanConfiguración de JavaScript Herramientas de construcción.
• Plugin WooCommerce: Si aún no ha instalado el plugin WooCommerce, debe hacerlo primero.

Cómo construir un tema de WordPress con React

9 de mayo a las 11:44

09510

Paso 1: Crear el directorio de plugins e instalar las dependencias

En primer lugar, es necesario configurar el wp-content/plugins para crear un directorioplug-in (componente de software)catálogo e instale el @wordpress/scripts Paquete.

Los pasos específicos son los siguientes:

1. Creación de un directorio de plug-ins: en wp-content/plugins para crear un archivo llamado miPrimerBloque de la carpeta.
2. Instalación de dependencias: Acceso miPrimerBloque y utilice el npm montaje @wordpress/scripts Paquete:

cd wp-content/plugins
mkdir miPrimerbloque
cd miPrimerBloque
npm init
npm install --save-dev --save-exact @wordpress/scripts

Una vez finalizada la instalación, todos los paquetes de dependencias se guardarán en la carpeta node_modules Catálogo.

Paso 2: Configurar package.json

existe miPrimerBloque abra el directorio paquete.json y añada la siguiente configuración de script:

"scripts": {
  "inicio": "wp-scripts inicio",
  "build": "wp-scripts build"
}

• npm run start: Inicie el servidor de desarrollo y póngalo en modo de escucha para actualizar el código en tiempo real.
• npm run build: Empaquetar el archivo de compilación y prepararlo para su lanzamiento.

Paso 3: Crear un archivo de plugin para registrar el bloque Gutenberg

Necesitamos crear un archivo de plugin donde registrar y cargar nuestros bloques Gutenberg personalizados.

existe miPrimerBloque para crear un directorio miPrimerBloque.php y añada el siguiente código:

<?php
/*
Nombre del plugin: myFirst-block
Autor: webkul
*/
function miPrimer_bloque() {
    $styleURI = plugin_dir_url( __FILE__ ) . '/src/style.css' ;
    // Ponga en cola los estilos
    wp_enqueue_style(
        'myFirst-block-style'.
        $styleURI
    );

    // Registre el archivo JavaScript (build/index.js)
    wp_register_script(
        'miPrimerBloque-Script'.
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    // Registrar estilos del editor
    wp_register_style(
        'miPrimer-bloque-editor-estilo'.
        plugins_url( 'src/editor.css', __FILE__ )
    );

    // Registrar el bloque
    register_block_type( 'miBloquePersonalizado/miPrimerBloque', array(
        'editor_script' => 'myFirst-block-script',
        'editor_style' => 'myFirst-block-editor-style',
    ) );
}
add_action( 'init', 'miPrimer_bloque' );

El código hace lo siguiente:

• Cargue estilos personalizados y archivos JavaScript.
• Inscríbase en un nuevo bloque Gutenberg.

Paso 4: Escribir código JavaScript Bloque de registro

A continuación, es necesario añadir el miPrimerBloque/src/index.js para escribir el código JavaScript para registrar nuestro bloque Gutenberg. En primer lugar, cree el archivo src/index.js y añada lo siguiente:

import { registerBlockType } from '@wordpress/blocks' ;
import { RichText } from '@wordpress/editor-de-bloques' ;

// Registrar el primer bloque personalizado
registerBlockType( 'miBloquePersonalizado/mi-primer-bloque', {
    title: 'Mi primer bloque personalizado',
    icono: 'smiley',
    categoría: 'común',
    atributos: {
        contenido: {
            tipo: 'cadena',
            fuente: 'html',
            selector: 'p',
        },
    },
    editar: (props) => {
        const { attributes: { content }, setAttributes } = props.

        const onChangeContent = (nuevoContenido) => {
            setAttributes({ contenido: nuevoContenido });
        };

        devolver (
            

                <TextoRico 
                    tagName="p" 
                    valor={ contenido } 
                    onChange={ onCambioContenido } 
                    placeholder="Por favor, introduzca el contenido"
                />
            

        );
    },
    guardar: (props) => {
        devolver (
            

                <RichText.Content tagName="p" value={props.attributes.content} />
            

        );
    }
});

Paso 5: Añadir archivo de estilo

También necesitamos definir los estilos para el bloque Gutenberg. Cree dos archivos CSS:src/editor.css para los estilos en el editor.src/style.css Estilos utilizados para la presentación del front-end.

1. Estilos del editor (src/editor.css)::

.mi-primer-bloque {
    color: azul;
    color de fondo: #f0f0f0;
    acolchado: 20px;
}

2. Estilo front-end (src/style.css)::

.mi-primer-bloque {
    color: verde;
    acolchado: 20px;
    color de fondo: #e0e0;
}

Paso 6: Construir y ejecutar

Una vez creados todos los archivos, utilice la siguiente orden para iniciar el servidor de desarrollo:

npm run start

Este comando añadirá un nuevo comando al src/index.js Construye y actualiza automáticamente los archivos a medida que cambian build/index.js archivo. Ahora su bloque Gutenberg personalizado debería estar listo para usarse en el editor.

Paso 7: Otras ampliaciones funcionales (opcional)

También puede crear bloques Gutenberg más complejos. Por ejemplo, podemos crear un bloque de componente de tarjeta que permita a los usuarios añadir imágenes, pies de foto y descripciones. Utilizando el componente useBlockProps responder cantando InnerBlocks API que permite añadir otros bloques dentro del bloque tarjeta.

A continuación se muestra un ejemplo de un bloque de componentes de tarjeta simple:

import { registerBlockType } from '@wordpress/blocks' ;
import { MediaUpload, RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor' ;

registerBlockType( 'miBloquePersonalizado/bloque-tarjeta', {
    title: 'Componente de la tarjeta',
    icono: 'grid-view',
    categoría: 'widgets',
    atributos: {
        título: { tipo: 'cadena' },
        descripción: { tipo: 'cadena' },
        imageUrl: { tipo: 'cadena' },
    },
    editar: (props) => {
        const { attributes, setAttributes } = props;
        const blockProps = useBlockProps();

        devolver (
            

                <MediaUpload
                    onSelect={(media) => setAttributes({ imageUrl: media.url })}
                    render={({ open }) => (
                        Seleccionar imagen
                    )}
                />
                <TextoRico
                    tagName="h3"
                    value={attributes.title}
                    onChange={(nuevoTitulo) => setAttributes({ titulo: nuevoTitulo })}
                    placeholder="Título"
                />
                <TextoRico
                    tagName="p"
                    value={attributes.description}
                    onChange={(nuevaDescripción) => setAttributes({ descripción: nuevaDescripción })}
                    placeholder="Descripción"
                />
                <InnerBlocks />
            

        );
    },
    guardar: (props) => {
        const { attributes } = props;
        devolver (
            

                
                <RichText.Content tagName="h3" value={attributes.title} />
                <RichText.Content tagName="p" value={attributes.description} />
                <InnerBlocks.Content />
            

        );
    }
});

resúmenes

Con los pasos anteriores, creamos un sencillo bloque personalizado de Gutenberg y añadimos el elementoadelantar parte de algoy estilos del editor. Puede ampliar aún más la funcionalidad del bloque según sea necesario, como admitir más elementos dentro del bloque, añadir controles personalizados, etc.