es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Bloque BlockList de Gutenberg: el filtro del bloque control se renderiza varias veces.

02 Aug, 2023 Programación

No tengo ni idea de por qué Gutenberg renderiza mi BlockControl agregado 3 veces, y también a otros componentes, que no son ‘core/paragraph’.
Mi código:

const filter_text_highlight_color = createHigherOrderComponent( (BlockListBlock) => {
    return (props) => {

            if (props.name === 'core/paragraph') {

                const startEditing = () => {
                    console.log('¡Hola!');
                }

                return ([


                    <blocklistblock {...props}=""></blocklistblock>,
                    <blockcontrols>
                        <toolbarbutton name="link" icon="text-page" title="{" __('resaltar="" texto')="" }="" onclick="{" startediting="" }=""></toolbarbutton>
                    </blockcontrols>,


                ])

            } else {

                return (
                    <blocklistblock {...props}=""></blocklistblock>
                )
            }
    }
}, 'filter_text_highlight_color'
); 

addFilter(
    'editor.BlockListBlock',
    'bwwpcode/text-highlight-color',
    filter_text_highlight_color,
)

Agradecería cualquier sugerencia sobre por qué esto está sucediendo y cómo solucionarlo.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Es posible que el BlockControl se esté renderizando varias veces debido al uso de createHigherOrderComponent. Esta función crea un Componente de Orden Superior (HOC) que puede envolver a otros componentes, por lo tanto, es posible que el BlockControl se esté aplicando a componentes distintos de ‘core/paragraph’.

    Una posible solución es añadir una comprobación adicional para asegurarse de que el BlockControl solo se aplique al componente ‘core/paragraph’, de la siguiente manera:

    if (props.name === 'core/paragraph' && !props.isSelected) {
    // código para renderizar el BlockControl
} else {
    // código para renderizar solo el componente envuelto
}

    La propiedad isSelected es añadida por Gutenberg y puede ser utilizada para comprobar si el bloque actual está seleccionado, lo cual ayuda a prevenir que se rendericen múltiples BlockControls.

    Otra posibilidad es que pueda haber plugins o código conflictivos que estén causando este problema. Valdría la pena desactivar otros plugins o probar el código en una instalación nueva de WordPress para confirmar si este es el caso.

Comments are closed.