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 }Le recomendaría usar Variaciones de bloque en lugar de Estilos de bloque. Al crear una variación, puede asignar valores de atributos.
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 }El nombre del estilo de bloque seleccionado como se define en sus estilos[{...}] está disponible en la función edit() como className :
edit({ attributes, setAttributes, className}) { console.log(className); ... } Sugeriría que si desea reordenar los elementos en función de 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úrese de guardar blockProps en save() para que se aplique 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 al <div> será .wp-block-myblock-name .is-style-my-style-1