如果已经部署在站点上的自定义块需要更新,我希望这样做不会触发‘这个块有无效的内容’错误。
我发现,通过向registerBlockType函数添加一个不推荐的属性,这是可能的。但是,添加此属性将产生一个新的错误,即:
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
/**
* 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
/**
* 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
/**
* 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}
/>
</>
);
}
发布于 2022-12-01 18:21:30
我犯的错误是,我没有将不推荐块中的属性属性设置为适当的值。我必须在这里指定预期属性,就像我在block.json中所做的那样。如果属性改变了,我会把旧属性放在这里。由于它们没有改变,所以我使用了block.json属性的当前值。
我的固定index.js文件:
/**
* 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>
</>
);
},
},
],
} );
https://wordpress.stackexchange.com/questions/411736
复制相似问题