首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何才能拒绝使用自定义Gutenberg块的旧版本,但保留新版本呢?

如何才能拒绝使用自定义Gutenberg块的旧版本,但保留新版本呢?
EN

WordPress Development用户
提问于 2022-12-01 14:59:56
回答 1查看 243关注 0票数 3

如果已经部署在站点上的自定义块需要更新,我希望这样做不会触发‘这个块有无效的内容’错误。

我发现,通过向registerBlockType函数添加一个不推荐的属性,这是可能的。但是,添加此属性将产生一个新的错误,即:

代码语言:javascript
运行
复制
Your site doesn’t include support for the "toms/first-block" block.
You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.

这是我的代码: index.js

代码语言:javascript
运行
复制
/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
import save from './save';
import metadata from './block.json';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
    /**
     * @see ./edit.js
     */
    edit: Edit,

    /**
     * @see ./save.js
     */
    save,
    deprecated: [
        {
            attributes,

            save( props ) {
                return (
                    <>
                        <h3>{ props.attributes.morecontent }</h3>
                        <p>{props.attributes.content}</p>
                    </>
                );
            },
        },
    ],
} );

edit.js

代码语言:javascript
运行
复制
/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';
import { BlockToolbar } from '@wordpress/block-editor';

const MyBlockToolbar = () => <BlockToolbar />;
/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText, BlockControls } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
export default function Edit(props) {
    const {attributes, setAttributes} = props;
    return (
        <>
        <MyBlockToolbar />
        <RichText
        tagName='h2'
        value={attributes.morecontent}
        onChange={(morecontent)=>setAttributes({morecontent})}
        placeholder = 'Type Content Here'
        />
        <RichText
        tagName='p'
        value={attributes.content}
        onChange={(content)=>setAttributes({content})}
        placeholder = 'Type Content Here'
        />
        </>
    );
}

save.js

代码语言:javascript
运行
复制
/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, RichText } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */
export default function save(props) {
    const {attributes} = props;
    return (
        <>
        <RichText.Content
        tagName='h2'
        value={attributes.morecontent}
        />
        <RichText.Content
        tagName='p'
        value={attributes.content}
        />
        </>
    );
}
EN

回答 1

WordPress Development用户

回答已采纳

发布于 2022-12-01 18:21:30

我犯的错误是,我没有将不推荐块中的属性属性设置为适当的值。我必须在这里指定预期属性,就像我在block.json中所做的那样。如果属性改变了,我会把旧属性放在这里。由于它们没有改变,所以我使用了block.json属性的当前值。

我的固定index.js文件:

代码语言:javascript
运行
复制
/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
import save from './save';
import metadata from './block.json';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
    /**
     * @see ./edit.js
     */
    edit: Edit,

    /**
     * @see ./save.js
     */
    save,
    deprecated: [
        {
            attributes: metadata.attributes,

            save( props ) {
                return (
                    <>
                        <h3>{ props.attributes.morecontent }</h3>
                        <p>{props.attributes.content}</p>
                    </>
                );
            },
        },
    ],
} );
票数 3
EN
页面原文内容由WordPress Development提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://wordpress.stackexchange.com/questions/411736

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档