구텐베르크 커스텀 배너 블록 페이지 제목 사용

구텐베르크 커스텀 배너 블록 페이지 제목 사용

구텐베르크용 커스텀 배너 이미지 블록을 작성했습니다만, 편집이 끝날 때까지 페이지 제목을 현재의 배너 텍스트 플레이스 홀더로 사용할 수 있는지 알고 싶습니다.

내 편집 기능은

 return [
            el('div', {className:'header-banner'},
                el(
                    element.Fragment,
                    null,
                    controls,
                    el( "div",{
                        className: 'banner-image',
                        style: { backgroundImage: 'url('+attributes.mediaURL+')' }
                    },
                    attributes.title || isSelected ?  el(RichText, {
                            key: 'editable',
                            tagName: "h1",
                            className: "banner-title",
                            //Can i add the page title in here if it is avaiable??
                            //placeholder: i18n.__('Write title…'),
                            value: attributes.title,
                            onChange: function onChange(value) {
                                return props.setAttributes({ title: value });
                            },
                            inlineToolbar: true
                        }) : null 

                    )
                )
            )//header-banner
        ];    

감사합니다:)

Gutenberg는 Redux를 추상화한 wp.data를 사용하여 현재 에디터 상태를 저장합니다.제목(또는 기타 100개 이상의 값)을 얻으려면core/editor데이터 스토어Gutenberg는 getEditedPostAttribute를 사용하여 투고 속성을 쉽게 취득할 수 있습니다.

검색 대상을 파악하면 타이틀을 쉽게 얻을 수 있습니다.

const { select } = wp.data;
const title = select("core/editor").getEditedPostAttribute( 'title' );

그건 먹히는데 반응이 없어요.투고 제목이 바뀌면title새로운 값이 반영되지 않습니다.그건 좀 실망스럽네요.

에디터 타이틀의 변경을 반영하려면 , 다음의 변경에 귀를 기울일 필요가 있습니다.core/editor데이터 스토어여기에는 몇 가지 방법이 있습니다.

한 가지 해결책은 간단한 변경 핸들러 함수를 정의하고 이를 데이터스토어 업데이트에 등록하는 것입니다.

const { select } = wp.data;

function logTitle() {
  const title = select("core/editor").getEditedPostAttribute( 'title' );
  console.log("Editor Title:", title);
}
subscribe(logTitle);

그것은 어느 때라도 발사될 것이다. wp.data스토어 값이 갱신됩니다.이것은 자주 발생합니다.

구텐베르크가 허가한 데이터 스토어 값 포함 방법은 고차 컴포넌트를 사용하여 값을 직접 포함시키는 것입니다.

const GetTitle = props => <div>{props.title}</div>;

const selectTitle = withSelect(select => ({
  title: select("core/editor").getEditedPostAttribute( 'title' )
}));
const PostTitle = selectTitle(GetTitle);

그런 다음 블록 출력에 a를 포함합니다.<PostTitle />jsx 태그네스트된 콜백이나 다른 변경 핸들러보다 훨씬 깨끗합니다.

고차 컴포넌트는 따라가기가 어려울 수 있습니다.간단히 설명하면 기존 컴포넌트를 랩하고 일부 데이터를 생성한 다음 새 데이터가 소품으로 전달된 컴포넌트의 복사본을 반환하는 것입니다.이를 통해 논리와 프레젠테이션이 분리되고 유지보수가 용이해집니다.

GetTitle단순합니다. 단지 작은 컴포넌트일 뿐입니다.props오브젝트에 제목 키를 붙이고 html을 몇 개 뱉습니다.

withSelect함수 생성자 또는 장식자입니다.함수 인수를 받아들여 컴포넌트를 필요로 하는 새로운 함수를 반환합니다.일반적으로 반환된 함수는 즉시 호출되지만(IIFE의 일종)selectTitle변수입니다.새 함수는 제목을 포함하는 개체를 생성합니다. 이 개체는 전달되는 모든 구성 요소에 소품으로 전달됩니다.withSelect됩니다.데이터스토어가 갱신될 때마다 마법으로 호출됩니다.

마내입니다.PostTitle of contains of contains contains of of of의 함수 결과가 .selectTitle생성된 소품으로 미리 채워진 구성요소입니다. 이 컴포넌트를 수 .<PostTitle />태그. 편집기 데이터 저장소를 업데이트할 때마다 상위 구성 요소가 새 데이터를 반영합니다.

@joemaller, 좋은 답변 감사합니다.

는 '보다 낫다'를 사용해서 주는 예입니다.withSelect() edit registerBlockType()

title소품을 통해서요.

사용자가 투고/페이지 제목을 편집하면 구성요소의 소품이 변경되므로 구성요소가 새 제목으로 다시 렌더링됩니다.이것에 의해, 「실시간」으로 갱신할 수 있습니다.

import { withSelect } from '@wordpress/data'

...

edit: withSelect(
  ( select ) => {
    return {
      title: select( 'core/editor' ).getEditedPostAttribute( 'title' ),
    }
  } )( props => {
    return (
      <div>{ props.title }</div>
    )
} ),

언급URL : https://stackoverflow.com/questions/51674293/use-page-title-in-gutenberg-custom-banner-block