企业官网建设流程全解析

在构建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 ( <>