WordPressでグーテンベルクエディターのブロックコンポーネントを実装しようとしています。そこで、たとえばWordpress自体が提供するcolumnsコンポーネントにも使用されるInnerBlocks
コンポーネントを使用したいと思います。
コンポーネントの使用を開始しようとすると、フロントエンドで常に同じエラーが発生します。
コンソールに次のメッセージが表示されます。
TypeError: Cannot read property 'getEditedPostAttribute' of undefined
at script.build.js?ver=1:27811
at getNextMergeProps (script.build.js?ver=1:103469)
at new ComponentWithSelect (script.build.js?ver=1:103487)
at zf (react-dom.min.js?ver=16.6.3:69)
at Mf (react-dom.min.js?ver=16.6.3:87)
at ph (react-dom.min.js?ver=16.6.3:98)
at eg (react-dom.min.js?ver=16.6.3:125)
at fg (react-dom.min.js?ver=16.6.3:126)
at wc (react-dom.min.js?ver=16.6.3:138)
at fa (react-dom.min.js?ver=16.6.3:137)
私はここのこのドキュメントに従ってそれを同様に実装しました:
const {registerBlockType} = wp.blocks;
const {InspectorControls, RichText, MediaUpload} = wp.editor;
import {TextControl} from '@wordpress/components';
import {InnerBlocks} from '@wordpress/block-editor';
let blockStyle = {
marginTop: "25px",
marginBottom: "25px;"
};
registerBlockType('myself/test-component', {
title: 'Test component',
icon: 'editor-insertmore',
category: 'common',
attributes: {
title: {
type: 'string'
}
},
edit(props) {
const {setAttributes, attributes} = props;
function setTitle(changes) {
setAttributes({
title: changes
})
}
return (
<div style={blockStyle}>
<TextControl
placeholder="Titel"
value={attributes.title}
onChange={setTitle}
/>
<InnerBlocks
templateLock={false}
renderAppender={(
() => <InnerBlocks.ButtonBlockAppender/>
)}
/>
</div>
)
},
save(props) {
const {attributes, className} = props;
return (
<div style={blockStyle}>
<InnerBlocks.Content/>
</div>
);
}
});
私の質問は今、この問題を抱えている他の誰かがいますか、またはこのコンポーネントを機能させるにはどうすればよいですか?
だから私は自分でエラーを見つけました。ソースscript.build.js
をもう一度確認したところ、次の行が見つかりました
var _select2 = select('core/editor'),
getEditedPostAttribute = _select2.getEditedPostAttribute;
@ wordpress / block-editorパッケージのみを使用しました。そこで、次のパッケージをscript.jsファイルに追加して、再度実行しました。
npm install @wordpress/editor
script.jsで
import {InnerBlocks} from "@wordpress/editor";
エラーはなくなりましたが、残念ながら新しいエラーが発生しました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加