WordPress Gutenberg obtiene estilos de bloque de useBlockProps

2 minutos de lectura

Estoy agregando estilos al registrar mi bloque:

styles: [
   { name: "my-style-1", label: "Style Name" }
   { name: "my-style-2", label: "Style Name 2" }
],

En la función editar () y guardar (), ¿cómo puedo ver qué estilo/nombre de clase se seleccionó?

Intenté por ejemplo:

edit( { attributes, setAttributes, styles } ) {
    const blockProps = useBlockProps();
    const { quote, name, title } = attributes;

    console.log(styles);
    console.log(blockProps.styles);

    ...

Pero devuelve indefinido.

Necesito usar los estilos para las condiciones, por ejemplo…

if (style == 'my-style-1') {
   // do something if style 1 was selected
}

El nombre del estilo de bloque seleccionado como se define en su estilos[{…}] está disponible en el edit() funcionan como className:

edit({ attributes, setAttributes, className}) {
    console.log(className);
    ...
}

Sugeriría que si desea reordenar elementos según su estilo, cree estilos de bloque y use CSS flexbox para administrar el reordenamiento, por ejemplo display:flex para su contenedor div y order: ... para los elementos secundarios (como <img> y <p>). Mediante el uso de estilos, cuando se guarda el contenido, el marcado HTML subyacente no cambia, por lo que no se produce el temido error de “validación de bloque” (además, se obtiene una vista previa del estilo en el Editor). Asegúrate de guardar blockProps en el save() por lo que se aplica la clase seleccionada, por ejemplo:

edit({ attributes, setAttributes, className }) {
    const blockProps = useBlockProps();
    console.log(className);

    return (
        <div {...blockProps}>
            <h2>Hello</h2><img />
        </div>
    );
},
save({ attributes }) {
    const blockProps = useBlockProps.save();
    return (<div {...blockProps}><h2>Hello</h2><img /></div>)
}

La clase generada aplicada a la <div> estarán .wp-block-myblock-name .is-style-my-style-1

Te recomendaría usar Variaciones de bloque en lugar de Estilos de bloque. Al crear una variación, puede asignar valores de atributo.

Por ejemplo:

índice.php

registerBlockType('xy/yourBlock', {
  title: 'xy',
  description: 'xy',
  attributes: {
    quote: {
      type: 'string'
    },
    name: {
      type: 'string'
    },
    title: {
      type: 'string'
    },
    style: {
      type: 'string'
    }
  },
  variations: [
    {
        name: 'my-style-1',
        isDefault: true,
        title: 'Style Name',
        attributes: { style: 'my-style-1' },
        scope: 'transform',
    },
    {
        name: 'my-style-2',
        title: 'Style Name 2',
        attributes: { style: 'my-style-2' },
        scope: 'transform',
    },
  ],
})

Con alcance: ‘transformar’ puede seleccionar su variación en la configuración del bloque en el lado derecho. Una vez que se selecciona una variación, puede acceder a ella en su archivo de edición y guardado como cualquier otro atributo.

edit( { attributes, setAttributes } ) {
    const { quote, name, title, style } = attributes;

    console.log(style);

    if (style == 'my-style-1') {
      // do something if style 1 was selected
    }

  • ¡Gracias por la respuesta! No estoy seguro de si este es el enfoque correcto. Las variaciones de bloque parecen crear múltiples bloques que tienen diferentes configuraciones de panel de control. Estoy tratando de crear diferentes estilos simples para el mismo bloque. Por ejemplo, un estilo donde una imagen está debajo del texto, otro estilo donde la imagen está arriba del texto. Esto parece ser mejor con los estilos porque también se pueden previsualizar.

    – CiberJ

    18 oct 2021 a las 16:06


¿Ha sido útil esta solución?