좋아, 나는 이것을 조금 가지고 놀고 있었고 다음과 같은주의 사항으로 갤러리 블록의 출력을 변경했습니다.
- 미리보기가 출력과 일치하지 않습니다. 나는 이것이 가능하다고 생각하지만 조금 더 관련이있는 것으로 보입니다.
- 블록이 컨텐츠를 구문 분석하고 편집 가능하게 유지하려면 출력에 특정 클래스 및 마크 업이 필요합니다. 이 클래스에는 처리해야 할 프런트 엔드 스타일이 있습니다. 블록이 어떻게하는지 필터링하는 방법이 있는지 확실하지 않습니다. 가능하다면 테마 또는 플러그인이 비활성화 될 때 갤러리 블록이 손상되었다는 것을 의미하는 것이 좋지 않을 수도 있습니다. 완전히 새로운 블록은 아마도 이것이 필요한 상황에 갈 수있는 방법 일 것입니다.
- 이 단계에서 이미지 크기가 어떻게 작동하는지 잘 모르겠습니다.
- 사용 된 JavaScript 후크 방법은 최종 릴리스에서 관련이 없을 수 있습니다. 구텐베르크는
@wordpress/hooks코어에서 어떤 후크 시스템을 사용할 것인지에 대한 논의를 진행하고있다 .
- 블록의 출력은 짧은 코드 나 메타가 아닌 HTML로 저장되므로 기존 갤러리의 출력을 편집하지 않고 수정할 수 없습니다.
가장 먼저해야 할 일은 스크립트를 등록하는 것입니다. 이 작업 wp_enqueue_scripts()은 enqueue_block_editor_assets후크로 수행됩니다.
스크립트에는 wp-blocks스크립트가 종속성으로 있어야합니다 . 에디터에 거의 이미로드되어 있지만 의존성으로 설정하면 스크립트보다 먼저로드됩니다.
function wpse_298225_enqueue_block_assets() {
wp_enqueue_script(
'wpse-298225-gallery-block',
get_theme_file_uri( 'block.js' ),
['wp-blocks']
);
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );
블록의 출력을위한 HTML은 블록의 save()방법으로 처리됩니다 . 이 파일 에서 갤러리 블록을 볼 수 있습니다 .
이 단계에서 (2018 년 3 월) 구텐베르크는 블록 저장 방법에 대한 필터를 지원합니다 blocks.getSaveElement. 다음과 같이 JavaScript로 후크를 추가 할 수 있습니다.
wp.hooks.addFilter(
'blocks.getSaveElement',
'wpse-298225',
wpse298225GallerySaveElement
)
첫 번째 인수는 후크 이름이고 두 번째 인수는 네임 스페이스이며 마지막 인수는 콜백 함수입니다.
save()블록 의 메소드를 대체하기 때문에 새로운 요소를 반환해야합니다. 그러나 이것은 반환해야 할 일반적인 HTML 요소가 아닙니다. React 요소 를 반환해야합니다 .
원래 블록의 save()방법을 보면 JSX입니다. 구텐베르크가 기본적으로 사용하는 리 액트는 요소 렌더링을 지원합니다. 이에 대한 자세한 내용은 이 기사 를 참조하십시오 .
JSX에는 일반적으로 빌드 단계가 필요하지만이 예제에서는 빌드 단계를 소개하지 않으므로 JSX없이 요소를 작성하는 방법이 필요합니다. React는 이것을 제공합니다 createElement(). WordPress는이 형식과 다른 반응 기능에 대한 래퍼를 형식으로 제공 wp.element합니다. 그래서 createElement()우리는 사용 wp.element.createElement()합니다.
콜백 함수에서 blocks.getSaveElement우리는 다음을 얻습니다.
element 블록에 의해 생성 된 원래 요소.blockType 사용중인 블록을 나타내는 객체입니다.attributes블록 인스턴스의 속성. 이 예에서는 갤러리의 이미지와 열 수와 같은 설정이 포함됩니다.
따라서 콜백 함수는 다음을 수행해야합니다.
- 비 블록 갤러리의 원래 요소를 반환합니다.
- 속성, 특히 이미지를 가져 와서 갤러리를 나타내는 새 React 요소를 만듭니다.
다음은 ul클래스가있는 각 이미지 에 대해 그리고 이미지 URL로 설정된 이미지마다 클래스, my-gallery및을 사용 하여 a 를 출력하는 완전한 예제입니다 .limy-gallery-itemimgsrc
function wpse298225GallerySaveElement( element, blockType, attributes ) {
if ( blockType.name !== 'core/gallery' ) {
return element;
}
var newElement = wp.element.createElement(
'ul',
{
'className': 'wp-block-gallery my-gallery',
},
attributes.images.map(
function( image ) {
return wp.element.createElement(
'li',
{
'className': 'blocks-gallery-item my-gallery-item',
},
wp.element.createElement(
'img',
{
'src': image.url,
}
)
)
}
)
)
return newElement
}
참고할 사항 :
- 원본 갤러리 블록은을 찾아 이미지를 찾으
ul.wp-block-gallery .blocks-gallery-item므로이 마크 업과 해당 클래스는 블록을 편집하는 데 필요합니다. 이 마크 업은 기본 스타일에도 사용됩니다.
attributes.images.map각 이미지를 반복하고 하위 요소의 배열을 기본 요소의 내용으로 반환합니다. 이 요소들 안에는 이미지 자체를위한 또 다른 자식 요소가 있습니다.