Estoy tratando de crear un bloque personalizado algo básico que crea un control deslizante basado en los bloques internos/anidados del elemento. Al usar React Slick, me encontré con un problema en el que TODOS los bloques internos se envuelven en una sola etiqueta dentro del elemento deslizante inicializado. Esto significa que, sin importar cuántos bloques internos agregue, solo hay una sola diapositiva dentro del elemento deslizante pulido.
Aquí hay una captura de pantalla de lo que está sucediendo:
He resaltado para mostrarle cómo los elementos de los bloques internos (dos bloques de párrafo básicos) se combinan en una sola diapositiva.
Aquí está mi edit.js:
import { __ } from '@wordpress/i18n';
import React from "react";
import Slider from "react-slick";
import {
InnerBlocks,
useBlockProps,
useInnerBlocksProps,
InspectorControls
} from '@wordpress/block-editor';
import {
PanelBody,
PanelRow,
} from '@wordpress/components';
import './editor.scss';
import classnames from 'classnames';
export default function Edit(props) {
const blockProps = useBlockProps( {
className: classnames( {
'slider': true
} )
} );
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
templateInsertUpdatesSelection: true
} );
return (
<>
<InspectorControls key="1">
<PanelBody title={ __( 'Slides' ) }>
<PanelRow>
<fieldset>
Test
</fieldset>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...innerBlocksProps }>
<Slider { ...settings }>
{ children }
</Slider>
</div>
</>
);
}
Mi instinto me dice que esto podría tener algo que ver con el momento en que se procesan los bloques internos, pero soy un poco novato cuando se trata de construir bloques personalizados. Puede alguien dirigirme en la direccion correcta? Realmente lo apreciaría. ¡Gracias!
.