列块内的自定义古腾堡块更新问题

Question

我正在制作定制古腾堡卡块
当我将卡片块放入另一个块（如列）中时，我在选择和更新它时遇到问题
该视频显示了列块内的卡块 - 当您单击它时很难访问它。
当自定义块不在另一个块内时，更新它不会出现问题，正如您在视频中看到的那样
https://www.loom.com/share/4688eaa3d0114faa84b92b4776d3e645?sid=d667f54a-7dde-48d3-9512-5a8aa079b07f

这是编辑代码：

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 (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Settings', 'copyright-date-block' ) }>
                    <MediaUpload
                        onSelect={(media) => {
                            setAttributes({
                                imageTitle: media.title,
                                imageFilename: media.filename,
                                imageUrl: media.url,
                            });
                        }}
                        multiple={false}
                        allowedTypes={ ['image'] }
                        render={ ( { open } ) => (
                            <Button onClick={ open }>Open Media Library</Button>
                        ) }
                    />
                </PanelBody>
            </InspectorControls>
            <div
                { ...useBlockProps() }
                className="card"
                style={{ backgroundImage: `url(${imageUrl})`}}
            >
                <div className="card__overlay"></div>
                <div className="card__content">
                    <RichText
                        tagName="h3"
                        className="card__title"
                        identifier="title"
                        value={ title }
                        allowedFormats={ [ 'core/bold' ] } // Allow the content to be made bold or italic, but do not allow othe formatting options
                        onChange={ ( value ) => setAttributes( { title: value } ) }
                        placeholder={ __( 'Title...' ) }
                    />
                    <RichText
                        tagName="p"
                        className="card__body"
                        identifier="body"
                        value={ body }
                        allowedFormats={[]} // Allow the content to be made bold or italic, but do not allow othe formatting options
                        onChange={ ( value ) => setAttributes( { body: value } ) }
                        placeholder={ __( 'Body...' ) }
                    />
                    <InnerBlocks
                        allowedBlocks={['core/button']}
                    />
                </div>
            </div>
        </>
    );

Answer 1

你似乎在这个钩子之外还有

useBlockProps()

和额外的道具：

<div
  { ...useBlockProps() }
  className="card"
  style={{ backgroundImage: `url(${imageUrl})`}}
>

您的

className

将覆盖

className

提供的任何

useBlockProps()

值，可能会导致不良行为。

相反，请考虑将道具合并到将由

useBlockProps()

发出的道具中，方法是首先将它们作为对象传递到

useBlockProps()

：

const blockProps = useBlockProps({
  className: 'card',
  style: {
    backgroundImage: `url(${imageUrl})`,
  },
});

// …

<div { ...blockProps}>