반응형
구텐베르크에 블록을 '수동'(프로그래밍 방식으로) 삽입하려면?
Gutenberg의 API는 잘 알려져 있지 않기 때문에 어떻게 블록을 만들고 포스트에 추가하는지를 알 수 없습니다.
제가 찾은 것은wp.blocks.createBlock('core/paragraph', {content: "blabla"});
예쁜 블록 오브젝트를 반환하지만 게시물에 콘텐츠를 추가하지는 않습니다.
버튼을 클릭하는 것만으로, 커스텀 컨텐츠를 포함한 심플한 문단을 삽입하고 싶습니다.
var content = "Test content";
var el = wp.element.createElement;
var name = 'core/paragraph';
// var name = 'core/html';
insertedBlock = wp.blocks.createBlock(name, {
content: content,
});
wp.data.dispatch('core/editor').insertBlocks(insertedBlock);
이 소스 코드가 https://github.com/WordPress/gutenberg/blob/master/editor/components/inserter/index.js에 도움이 될 수 있습니다.
부품의 파일 끝을 봅니다.
onInsertBlock: ( item ) => {
const { insertionPoint, selectedBlock } = ownProps;
const { index, rootUID, layout } = insertionPoint;
const { name, initialAttributes } = item;
const insertedBlock = createBlock( name, { ...initialAttributes, layout } );
if ( selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) {
return dispatch( 'core/editor' ).replaceBlocks( selectedBlock.uid, insertedBlock );
}
return dispatch( 'core/editor' ).insertBlock( insertedBlock, index, rootUID );
},
좀 더 구체적으로 말하면
return dispatch( 'core/editor' ).insertBlock( insertedBlock, index, rootUID );
희망은 여러분이 성취하고 싶은 것과 같은 일을 하고 있기 때문에 여러분의 문제를 알아내는 데 도움을 줍니다.
언급URL : https://stackoverflow.com/questions/50065834/how-to-manually-programmatically-insert-a-block-in-gutenberg
반응형
'programing' 카테고리의 다른 글
TypeScript의 '확장'과 '실장'의 차이점은 무엇입니까? (0) | 2023.04.06 |
---|---|
커스텀 디렉티브의 ng-change 구현 방법 (0) | 2023.04.06 |
Angular 템플릿의 인라인 로직JS (0) | 2023.04.06 |
woocommerce_update_product 액션– 제품 업데이트마다 한 번만 실행 (0) | 2023.04.06 |
슬라이더가 표시되지 않음: setREVStartSize가 정의되지 않았습니다. (0) | 2023.04.06 |