0
133
ViewsAgregar bloque interno con atributos al hacer clic en Wordpress Gutenberg Editor
Estoy creando un bloque de gutenberg con bloques internos. En este caso, el bloque nativo core/cover . Luego agrego tres bloques internos con la variable TEMPLATE y los cargo en <InnerBlocks ...>
Mi problema es que cuando agrega otro bloque de portada a través del editor, no tiene los valores predeterminados de bloque interno que innerBlockPresets . Por lo que puedo decir, allowedBlocks no permite atributos.
Tengo que usar el bloque de cobertura nativo para esto. ¿Como puedo resolver esto?
- WordPress 5.9
- base creada con
@wordpress/create-block
editar.js
import {useBlockProps, InnerBlocks} from '@wordpress/block-editor'; export default function Edit(}) { const blockProps = useBlockProps(); const ALLOWED_BLOCKS = ['core/cover']; const innerBlockPresets = {'className': 'is-awesome', 'align': 'full'}; const TEMPLATE = [['core/cover', innerBlockPresets], ['core/cover', innerBlockPresets], ['core/cover', innerBlockPresets]]; return ( <div {...blockProps}> <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} template={TEMPLATE} renderAppender={() => <InnerBlocks.ButtonBlockAppender/>} /> </div> ); }1 answers
Answer question0
Una posible solución podría ser registrar una variación de bloque de core/cover , por ejemplo:
índice.js
wp.blocks.registerBlockVariation('core/cover', { name: 'cover-variation', title: 'Cover Variation', icon: 'star-filled', attributes: { className: 'is-awesome', align: 'full' } }); Esto le permite tener un conjunto predefinido de atributos. A continuación, si ALLOWED_BLOCKS en InnerBlocks contiene core/cover , solo se pueden agregar core/cover y su cover-variation (o cualquier otra variación de cobertura), por ejemplo:
editar.js
import { __ } from '@wordpress/i18n'; import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; export default function Edit() { const ALLOWED_BLOCKS = ['core/cover']; const TEMPLATE = [ ['core/cover', { className: 'is-awesome', align: 'full' }]]; return ( <div {...useBlockProps()}> <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} template={TEMPLATE} /> </div> ); } 
Un problema que encontré con este enfoque es que la variación no se puede configurar en TEMPLATE , ya que la variación del bloque se registra después del bloque principal, pero es demasiado tarde para la validación de la plantilla de InnerBlock. Si intenta esto, la validación de la plantilla de InnerBlock devuelve " indefinido " cuando usa una variación de bloque y no se procesa. Entonces, para evitar este problema, en TEMPLATE , establezca las mismas propiedades que su variación.