WordPress 블록 변환

CSS- 트릭의 Gutenberg의 해. 작년 말에 우리는이 목표를 설정했습니다. 우리는 예상보다 훨씬 빠르게 진행되고 있으며 모든 새로운 컨텐츠가 Block Editor¹에서 생성되며 이제 모든 것이 블록 편집기를 활성화했습니다. 이것은 대부분의 오래된 게시물을 열면 "클래식"블록에서 모든 것을 볼 수 있습니다. 다음과 같이 보입니다.

게시물의 전체 내용은 단일 블록에 있으므로 실제로 블록 편집기를 활용하지는 않습니다. 블록 편집기처럼 여전히 "가시적"이지만 Tinymce를 사용하는 오래된 비주얼 편집기와 비슷합니다. 나는 HTML이 내가 좋아하지 않는 방식으로 깨지도록 강요하기 때문에 그것을 사용한 적이 없습니다.

내가 가장 걱정하는 것

클래식 블록을 새 블록으로 변환하는 것은 클래식 블록을 선택하고 "블록으로 변환"옵션을 선택하는 것만 큼 간단합니다.

블록 편집기는 변환에서 블록 옵션으로이를 수행하도록 지시 할 때 이전 컨텐츠의 차단을 어떻게 처리합니까? 전환 과정에서 콘텐츠가 완전히 파괴되면 어떻게됩니까? 전환 할 수 있습니까 ?

대답은 : 그것은 꽤 잘합니다 . 그러나… 여전히 문제가 있습니다. "오류"가 아니라 이전 컨텐츠에 사용자 정의 HTML이 포함 된 경우,이를 처리하는 방법을 모르는 경우 - 원하는 블록으로 변환하는 방법은 물론입니다. 방법이 있습니다!

기본 블록 변환

이것이 "블록 변환"이라는 아이디어의 기원입니다. 모든 (음, 대부분?) 기본 블록에는 "To"및 "From"변환이 있습니다. UI에서 어떻게 행동하는지에 이미 익숙 할 수 있습니다. 예를 들어, 단락은 참조로 변환 될 수 있으며 그 반대도 마찬가지입니다. 다음은이 단락에 대한 슈퍼 메타 스크린 샷입니다.

이러한 변형은 마법이 아닙니다. 그들은 명시 적으로 인코딩됩니다. 블록을 등록 할 때 변환을 지정합니다. 자신의 사용자 정의 코드 블록을 등록하고 있다고 가정하십시오. 변환 할 수 있는지 확인해야합니다 ...

• 기본 내장 코드 블록 및 유용한 다른 블록 에서 기본적으로 유용 할 수 있습니다.
• 내장 코드 블록으로 돌아갑니다 .

다음과 같이 보일 수 있습니다.

 <code>registerBlockType("my/code-block", { title: __("My Code Block"), ... transforms: { from: [ { type: "block", priority: 7, blocks: ["core/code", "core/paragraph", "core/preformatted"], transform: function (attributes) { return createBlock("my/code-block", { content: attributes.content, }); }, }, ], to: [ { type: "block", blocks: ["core/code"], transform: ({ content }) => createBlock("core/code", { content }), }, ], ...</code>

이들은 다른 블록으로의 전환입니다. 다행히도, 그것은 매우 간단한 블록이며 우리는 단지 콘텐츠를 옮기고 있습니다. 더 복잡한 블록에는 더 많은 데이터를 전달해야 할 수도 있지만 아직이 경우를 처리하지 않았습니다.

더 마법 같은 것 : 원본 코드에서 전환을 차단합니다

이전 콘텐츠의 진실 순간은 다음과 같습니다.

이 경우 블록 생성은 다른 블록이 아니라 원래 코드에서 나옵니다. 말 그대로 HTML을보고 HTML 블록에서 생성 할 블록에 대한 결정이 내려지고 있습니다. 이곳은 블록 편집기가 선택의 훌륭한 작업을 수행하고 상황이 잘못되거나 잘못된 블록 선택을하거나 콘텐츠를 중단하는 곳입니다.

이전 내용에서는 게시물의 코드 블록 ( 매우 중요한 것)이 다음과 같습니다.

 <code><code markup="tt">let html = `</code></code> `;;

차단 변환 프로세스는 이러한 블록을 기본 코드 블록으로 변환합니다. 그러나 몇 가지 문제가 있습니다.

1. 기본 코드 블록을 원하지 않습니다. 이것을 우리 자신의 새로운 코드 블록으로 변환하고 싶습니다 (여기에 블로그 게시물이 있습니다).
2. 코드 유형과 같은 새 블록의 설정에 알리려면이 속성의 정보가 필요합니다.
3. 오래된 코드 블록의 HTML은 빠져 나가지 않으므로 갇히지 않아야합니다.

진화하는 프로세스이기 때문에 여기에 모든 답변이 없지만 지금은 잘 작동하는 블록 변환을 구현했습니다. "블록"변환과는 달리 "원시"변환이 다음과 같습니다.

 <code>registerBlockType("my/code-block", { title: __("My Code Block"), // ... transforms: { from: [ { type: "block", priority: 7, // ... }, { type: "raw", priority: 8, isMatch: (node) => node.nodeName === "PRE" && node.children.length === 1 && node.firstChild.nodeName === "CODE", transform: function (node) { let pre = node; let code = node.querySelector("code"); let codeType = "html"; if (pre.classList.contains("language-css")) { codeType = "css"; } if (pre.getAttribute("rel") === "CSS") { codeType = "css"; } if (pre.classList.contains("language-javascript")) { codeType = "javascript"; } if (code.classList.contains("language-javascript")) { codeType = "javascript"; } // ... other data wrangling... return createBlock("csstricks/code-block", { content: code.innerHTML, codeType: codeType, }); }, }, ], to: [ // ... ], // ... }</code>

isMatch 함수는 찾은 모든 HTML 노드에서 실행되므로 필요한 경우 기능에서 true 반환 할 수있는 좋은 기회입니다. 위의 코드에서 특히 보이는 것을 찾고 있습니다.

<code>的HTML。当匹配时，转换运行，我可以返回一个`createBlock` 调用，该调用传入我使用JavaScript 从节点中提取的数据和内容。</code> 또 다른 예 : 페이스트 URL


<p>"원시"변환은 "블록으로 변환"할 때만 발생하지 않습니다. 이것은 컨텐츠를 블록 편집기에 붙여 넣을 때 발생합니다. 당신은 전에 이것을 경험했을 것입니다. 어딘가에서 테이블 마크 업을 복사하여 블록 편집기에 붙여 넣었다고 가정 해 봅시다. 테이블로 붙여 넣을 수 있습니다. YouTube URL은 임베드에 붙여 넣을 수 있습니다. 이런 종류의 일은 Word 문서 등의 복사/붙여 넣기가 블록 편집기와 잘 작동하는 이유입니다.</p>



<p>어떤 유형의 URL을 편집기에 붙여 넣을 때 특별한 행동을 수행한다고 가정 해 봅시다. 이것이 내가 사용자 정의 CodePen Embed Block을 사용하는 방법입니다. Codepen.io URL이 붙여 넣으면 기본 임베드 대신이 사용자 정의 블록을 사용하기를 바랍니다.</p>



<p>다음은 다음과 같은 것처럼 보이는 "From"변환입니다.</p>



{
  유형 : "RAW",
  우선 순위 : 8, // 기본값을 이길 수있는 숫자
  ismatch : (노드) =>
    node.nodename === "p"&&
    node.innertext.startswith ( "https://codepen.io/"),

  변환 : 함수 (노드) {
    Return CreateBlock ( "CP/Codepen-Gutenberg-embed-Block", {
      Penurl : node.innertext,
      PANID : getPenid (node.innertext), // 헬퍼 함수
    });
  },
}


<h3 id="그래서">그래서……</h3>


<p>지저분합니까? 무엇. 그러나 그것은 강력하고 당신의 요구를 충족시킵니다. 맞춤형 HTML, 짧은 코드 등이 많은 이전 웹 사이트가 있다면 블록 전환으로 들어가는 것이 유일한 방법입니다.</p>



<p>나는 지금 블록 편집기를 정말 좋아하기 때문에 이것을 마스터하게되어 기쁩니다. 그것으로 콘텐츠를 작성하고 구축하는 것이 기쁩니다. 나는 Justin Tadlock의 말이 마음에 듭니다.</p>



<blockquote><p>블록 시스템은 사라지지 않습니다. WordPress는 블록 편집기를 별도의 엔티티로 취급 해야하는 단계를 넘어 섰습니다. WordPress의 필수 부분이며 결국 편집 화면 이외의 더 많은 영역에 닿을 것입니다.</p></blockquote>



<p>항상 존재할 것입니다. 블록 편집기를 받아들이고 우리의 소원에 맞게 만드는 것이 중요합니다.</p>




<ol><li>우리는 왜 그것을 부르나요? "Gutenberg"는 더 이상 적합하지 않은 것 같습니다. Gutenberg 플러그인에 개발이 여전히 있더라도 사라질 것 같습니다. 플러그인을 구체적으로 언급하지 않는 한 "블록 편집기"라고 불렀습니다.</li></ol>

위 내용은 WordPress 블록 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!