Das Jahr von Gutenberg von CSS-Tricks. Ende letzten Jahres haben wir dieses Ziel gesetzt. Wir gehen viel schneller als erwartet vor, alle neuen Inhalte werden im Block -Editoraten erstellt, und jetzt ist alles Blockeditor aktiviert. Das hei?t, wenn wir die meisten alten Beitr?ge ?ffnen, sehen wir alles im "klassischen" Block. Es sieht so aus:

Der gesamte Inhalt des Beitrags befindet sich in einem einzigen Block, sodass er den Block -Editor nicht wirklich nutzt. Es ist immer noch "sichtbar", wie ein Blockeditor, aber eher wie ein alter visueller Redakteur, der Tinymce verwendet. Ich habe es nie benutzt, weil es die HTML dazu zwingt, auf eine Weise zu brechen, die ich nicht mag.

Worüber mache ich mir am meisten Sorgen

Das Konvertieren eines klassischen Blocks in einen neuen Block ist so einfach wie die Auswahl eines klassischen Blocks und die Auswahl der Option "Um Konvertieren in Block zu konvertieren".

Wie handelt es sich bei dem Block -Editor mit der Blockierung alter Inhalte, wenn wir dies von der Option Convert To Block tun sollen? Was ist, wenn der Inhalt w?hrend des Konversionsprozesses vollst?ndig zerst?rt wird? K?nnen wir wechseln?

Die Antwort lautet: Es funktioniert ganz gut . Aber ... es gibt immer noch Probleme. Kein "Fehler", sondern ein Fall, in dem unser alter Inhalt benutzerdefinierte HTML enth?lt, die nicht wissen, wie er damit umgeht - geschweige denn, wie er in den gewünschten Block umwandelt. Es gibt einen Weg!

Grundlegende Blockkonvertierung

Dies ist der Ursprung der Idee der "Blockkonvertierung". Alle (na ja, die meisten?) Native Bl?cke haben "und" von "Konvertierungen" aus ". M?glicherweise sind Sie bereits vertraut, wie es sich in der Benutzeroberfl?che verh?lt. Beispielsweise k?nnen Abs?tze in Referenzen umgewandelt und umgekehrt. Hier ist ein Super -Meta -Screenshot über diesen Absatz:

Diese Transformationen sind nicht magisch; Sie sind explizit codiert. Bei der Registrierung eines Blocks geben Sie die Konvertierung an. Angenommen, Sie registrieren Ihren eigenen benutzerdefinierten Codeblock. Sie müssen sicherstellen, dass Sie es konvertieren k?nnen ...

• Von und zu standardm??igen integrierten Codebl?cken und m?glicherweise einigen anderen Bl?cken, die nützlich sein k?nnen.
• Kehren Sie zum integrierten Codeblock zurück.

Es k?nnte so aussehen:

 <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>

Dies sind die Konvertierungen zu und von anderen Bl?cken . Glücklicherweise ist es ein sehr einfacher Block und wir bewegen den Inhalt nur. Komplexere Bl?cke erfordern m?glicherweise mehr Daten, aber ich habe diesen Fall noch nicht behandelt.

Etwas Magischeres: Blockumwandlung aus dem Originalcode blockieren

Hier ist der Wahrheitsmoment des alten Inhalts:

In diesem Fall stammt die Erstellung des Blocks nicht aus anderen Bl?cken, sondern aus dem ursprünglichen Code. Im wahrsten Sinne des Wortes wird HTML betrachtet und Entscheidungen werden darüber getroffen, welche Bl?cke aus HTML -Bl?cken erstellen sollen. Hier leistet der Blockeditor eine so gro?artige Auswahl und kann schief gehen, schlechte Blockauswahlen treffen oder Inhalte brechen.

In unserem alten Inhalt sehen die Codebl?cke ( sehr wichtige Dinge) im Beitrag so aus:

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

Blockieren Sie manchmal die Konvertierungsprozesse diese Bl?cke und konvertieren Sie sie in native Codebl?cke. Aber es gibt einige Probleme:

1. Ich m?chte keine nativen Codebl?cke. Ich m?chte dies in unseren eigenen neuen Codeblock umwandeln (hier gibt es einen Blog -Beitrag).
2. Ich ben?tige einige Informationen in diesen Eigenschaften, um die Einstellungen des neuen Blocks wie den Typ des Codes zu informieren.
3. Die HTML in unserem alten Codeblock ist nicht entkommen , ich brauche es, um nicht stecken zu bleiben.

Ich habe hier nicht alle Antworten, weil es sich um einen sich entwickelnden Prozess handelt, aber ich habe einige Blockkonvertierungen implementiert, die jetzt sehr gut laufen. So sieht die "rohe" Konvertierung (im Gegensatz zur "Block" -Wendelung) aus:

 <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>

Die isMatch -Funktion wird auf jedem HTML -Knoten ausgeführt, den sie findet. Dies ist also eine gro?artige Gelegenheit, um aus der Funktion true zurückzukehren, wenn Sie sie ben?tigen. Beachten Sie, dass ich im obigen Code besonders nach etwas suche, das aussieht, das aussieht

<code>的HTML。當(dāng)匹配時(shí)，轉(zhuǎn)換運(yùn)行，我可以返回一個(gè)`createBlock` 調(diào)用，該調(diào)用傳入我使用JavaScript 從節(jié)點(diǎn)中提取的數(shù)據(jù)和內(nèi)容。</code> Ein weiteres Beispiel: URL einfügen


<p>Die "rohe" Umwandlung erfolgt nicht nur, wenn Sie "in Block konvertieren". Dies geschieht auch, wenn Sie den Inhalt in den Block -Editor einfügen. Sie haben dies vielleicht schon einmal erlebt. Nehmen wir an, Sie haben einige Tabellenmarkups von irgendwoher kopiert und in den Block -Editor eingefügt - es k?nnte als Tabelle eingefügt werden. Die YouTube -URL kann in die Einbettung eingefügt werden. Diese Art von Dingen ist, warum kopieren/einfügen aus Word -Dokumenten usw. tendenziell so gut mit dem Blockeditor.</p>



<p>Angenommen, Sie m?chten ein besonderes Verhalten durchführen, wenn Sie eine URL eines Typs in den Editor einfügen. So verwende ich einen benutzerdefinierten Codepen -Einbettungsblock. Ich hoffe, dass wenn die URL von CodePen.io eingefügt wird, sie diesen benutzerdefinierten Block anstelle der Standardeinbettung verwendet.</p>



<p>Hier ist eine "From" -Werte, die so aussieht:</p>



{
  Typ: "roh",
  Priorit?t: 8, // h?here Zahl, um die Standardeinstellung zu übertreffen
  Ismatch: (Knoten) =>
    node.nodename === "p" &&
    node.innertext.startswith ("https://codepen.io/"),

  Transformation: Funktion (Knoten) {
    return createBlock ("CP/Codepen-Gutenberg-embed-Block", {{
      Penurl: Node.InNeText,
      Penid: getPenid (Node.Innertext), // Helferfunktion
    });
  },
}


<h3>Also……</h3>


<p>Ist es chaotisch? Etwas. Aber es ist m?chtig und erfüllt Ihre Bedürfnisse. Wenn Sie eine alte Website mit viel benutzerdefinierten HTML, kurzer Code und mehr haben, ist es der einzige Ausweg, in die Blockkonvertierung zu gehen.</p>



<p>Ich bin froh, das zu beherrschen, da ich den Block -Editor im Moment wirklich mag. Es ist eine Freude, Inhalte damit zu schreiben und zu bauen. Mir gef?llt, was Justin Tadlock sagt:</p>



<blockquote><p>Das Blocksystem wird nicht verschwinden. WordPress ist über die Bühne hinausgegangen, in der wir den Blockeditor als separate Entit?t behandeln sollten. Es ist ein wesentlicher Bestandteil von WordPress und wird schlie?lich mehr Bereiche au?erhalb von Bearbeitungsbildschirmen berühren.</p></blockquote>



<p>Es wird immer existieren. Es ist der Schlüssel, um den Block -Editor zu umarmen und ihn zu unseren Wünschen zu machen.</p>




<ol><li>Warum nennen wir es? "Gutenberg" scheint nicht mehr geeignet zu sein. Es fühlt sich an, als würde es verblassen, auch wenn seine Entwicklung immer noch im Gutenberg -Plugin liegt. Ich denke, ich würde es einfach einen "Block -Editor" nennen, es sei denn, es bezieht sich speziell auf das Plugin.</li></ol>

Das obige ist der detaillierte Inhalt vonWordPress -Block verwandelt sich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!