在构建WordPress网站时,Gutenberg编辑器的自定义块功能为开发者提供了极大的灵活性。然而,在使用自定义块时,可能会遇到一些特定的问题,尤其是当这些块嵌套在其他块内部时。本文将详细讨论如何解决自定义卡片块在嵌套中的选择和更新问题。
问题背景
当我在一个Gutenberg自定义卡片块中嵌套了另一个块(如列块)时,我发现很难选择和更新这个卡片块。具体来说,点击卡片块时,选择框会出现重叠或无法正确响应的问题。这在卡片块独立使用时不会发生。
实例展示
假设我们有一个卡片块,它包含一个背景图片、标题、正文和一个按钮:
import { __ } from '@wordpress/i18n'; import { InnerBlocks, RichText, MediaUpload, InspectorControls, useBlockProps } from '@wordpress/block-editor'; import { Button, PanelBody } from '@wordpress/components'; import './editor.scss'; export default function Edit( { attributes, setAttributes } ) { const { imageTitle, imageUrl, imageAlt, imageFilename, title, body } = attributes; return ( <>