CSS- ??? Gutenberg? ?. ?? ?? ???? ??? ??????. ??? ???? ?? ??? ???? ??? ?? ??? ???? Block Editor1?? ???? ?? ?? ?? ?? ???? ???????. ??? ???? ??? ???? ?? "???"???? ?? ?? ? ? ????. ??? ?? ????.

???? ?? ??? ?? ??? ???? ??? ?? ???? ????? ????. ?? ????? ??? "???"??? 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。當(dāng)匹配時(shí)，轉(zhuǎn)換運(yùn)行，我可以返回一個(gè)`createBlock` 調(diào)用，該調(diào)用傳入我使用JavaScript 從節(jié)點(diǎn)中提取的數(shù)據(jù)和內(nèi)容。</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>???……</h3>


<p>??????? ??. ??? ??? ???? ??? ??? ??????. ??? HTML, ?? ?? ?? ?? ?? ? ???? ??? ?? ???? ???? ?? ??? ?????.</p>



<p>?? ?? ?? ???? ?? ???? ??? ??? ??????? ????. ???? ???? ???? ???? ?? ????. ?? Justin Tadlock? ?? ??? ???.</p>



<blockquote><p>?? ???? ???? ????. WordPress? ?? ???? ??? ???? ?? ???? ??? ?? ????. WordPress? ?? ???? ?? ?? ?? ??? ? ?? ??? ?? ????.</p></blockquote>



<p>?? ??? ????. ?? ???? ????? ??? ??? ?? ??? ?? ?????.</p>




<ol><li>??? ? ??? ????? "Gutenberg"? ? ?? ???? ?? ? ????. Gutenberg ????? ??? ??? ???? ??? ? ????. ????? ????? ???? ?? ? "?? ???"?? ?????.</li></ol>

? ??? WordPress ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!