Tahun Gutenberg CSS-Tricks. Pada akhir tahun lepas, kami menetapkan matlamat ini. Kami sedang maju jauh lebih cepat daripada yang dijangkakan, semua kandungan baru dicipta dalam editor blok1, dan kini semuanya mempunyai editor blok yang didayakan. Ini bermakna apabila kita membuka sebahagian besar jawatan lama kita melihat segala -galanya di blok "klasik". Nampaknya ini:

Seluruh kandungan jawatan berada dalam satu blok, jadi ia tidak benar -benar memanfaatkan editor blok. Ia masih "kelihatan", seperti editor blok, tetapi lebih seperti editor visual lama menggunakan Tinymce. Saya tidak pernah menggunakannya kerana ia memaksa HTML untuk memecahkan cara yang saya tidak suka.

Apa yang paling saya bimbangkan

Menukar blok klasik ke blok baru adalah semudah memilih blok klasik dan memilih pilihan "Convert to Block".

Bagaimanakah editor blok mengendalikan menyekat kandungan lama apabila kita memberitahu ia untuk melakukan ini dari pilihan penukaran ke blok? Bagaimana jika kandungan itu dimusnahkan sepenuhnya semasa proses penukaran? Bolehkah kita menukar?

Jawapannya ialah: Ia cukup baik . Tetapi ... masih ada masalah. Bukan "ralat", tetapi satu kes di mana kandungan lama kami mengandungi HTML tersuai, yang tidak tahu bagaimana untuk menanganinya - apalagi cara menukarnya ke blok yang kami inginkan. Ada cara!

Penukaran Blok Asas

Inilah asal usul idea "penukaran blok". Semua (baik, paling banyak?) Blok asli mempunyai "untuk" dan "dari" penukaran. Anda mungkin sudah biasa dengan bagaimana ia berkelakuan dalam UI. Sebagai contoh, perenggan boleh ditukar kepada rujukan dan sebaliknya. Berikut adalah tangkapan skrin meta super mengenai perenggan ini:

Transformasi ini tidak ajaib; Mereka dikodkan secara eksplisit. Apabila mendaftarkan blok, anda menentukan penukaran. Katakan anda mendaftarkan blok kod tersuai anda sendiri. Anda perlu pastikan anda boleh menukarnya ...

• Dari dan ke blok kod terbina dalam lalai, dan mungkin beberapa blok lain yang mungkin berguna.
• Kembali ke blok kod terbina dalam.

Mungkin kelihatan seperti ini:

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

Ini adalah penukaran ke dan dari blok lain . Nasib baik, ia adalah blok yang sangat mudah dan kami hanya menggerakkan kandungan di sekitar. Blok yang lebih kompleks mungkin memerlukan lebih banyak data, tetapi saya belum mengendalikan kes ini lagi.

Sesuatu yang lebih ajaib: penukaran blok dari kod asal

Inilah momen kebenaran kandungan lama:

Dalam kes ini, penciptaan blok bukan dari blok lain, tetapi dari kod asal. Secara harfiah, HTML sedang dilihat dan keputusan dibuat mengenai blok mana yang hendak dibuat dari blok HTML. Di sinilah editor blok melakukan pekerjaan yang hebat, dan di mana perkara boleh salah, membuat pilihan blok yang buruk, atau memecahkan kandungan.

Dalam kandungan lama kami, blok kod (perkara yang sangat penting ) dalam jawatan kelihatan seperti ini:

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

Kadang -kadang blok penukaran memproses blok ini, menukarnya ke dalam blok kod asli. Tetapi ada beberapa masalah:

1. Saya tidak mahu blok kod asli. Saya mahu menukarnya ke blok kod baru kami sendiri (terdapat catatan blog di sini).
2. Saya memerlukan beberapa maklumat dalam sifat -sifat ini untuk memaklumkan tetapan blok baru, seperti jenis kod.
3. HTML dalam blok kod lama kami tidak melarikan diri , saya memerlukannya untuk tidak terjebak.

Saya tidak mempunyai semua jawapan di sini kerana ia adalah proses yang berkembang, tetapi saya telah melaksanakan beberapa penukaran blok yang berjalan dengan baik sekarang. Inilah penukaran "mentah" (yang bertentangan dengan penukaran "blok") seperti:

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

Fungsi isMatch berjalan pada setiap nod HTML yang ditemui, jadi ini adalah peluang yang baik untuk true dari fungsi jika anda memerlukannya. Perhatikan bahawa dalam kod di atas, saya sangat mencari sesuatu yang kelihatan seperti

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


<p>Penukaran "mentah" tidak hanya berlaku apabila anda "menukar ke blok". Ini juga berlaku apabila anda menampal kandungan ke dalam editor blok. Anda mungkin pernah mengalami ini sebelum ini. Katakan anda menyalin beberapa markup meja dari suatu tempat dan menyisipkannya ke dalam editor blok - ia mungkin disisipkan sebagai meja. URL YouTube boleh disisipkan ke dalam embed. Perkara semacam ini adalah mengapa salinan/tampal dari dokumen perkataan, dan lain -lain cenderung berfungsi dengan baik dengan editor blok.</p>



<p>Katakan anda ingin melakukan beberapa tingkah laku khas apabila anda menampal URL beberapa jenis ke dalam editor. Inilah cara saya menggunakan blok embed codepen tersuai. Saya harap jika URL CodePen.io disisipkan, ia akan menggunakan blok tersuai ini dan bukannya enen lalai.</p>



<p>Berikut adalah penukaran "dari" yang kelihatan seperti ini:</p>



{
  Taip: "mentah",
  Keutamaan: 8, // Nombor yang lebih tinggi untuk mengalahkan lalai
  IsMatch: (nod) =>
    node.nodename === "P" &&
    node.innertext.startswith ("https://codepen.io/"),

  transform: fungsi (nod) {
    Kembali CreateBlock ("CP/Codepen-Gutenberg-embed-block", {
      Penurl: node.innertext,
      Penid: getPenid (node.innertext), // fungsi penolong
    });
  },
}


<h3>Jadi ……</h3>


<p>Adakah ia tidak kemas? Sesuatu. Tetapi ia berkuasa dan memenuhi keperluan anda. Jika anda mempunyai laman web lama dengan banyak HTML tersuai, kod pendek, dan banyak lagi, maka masuk ke penukaran blok adalah satu -satunya jalan keluar.</p>



<p>Saya gembira untuk menguasai ini, kerana saya sangat menyukai editor blok sekarang. Dengan senang hati menulis dan membina kandungan dengannya. Saya suka apa yang dikatakan Justin Tadlock:</p>



<blockquote><p>Sistem blok tidak akan hilang. WordPress telah melampaui panggung di mana kita harus merawat editor blok sebagai entiti yang berasingan. Ia adalah bahagian penting dari WordPress dan akhirnya akan menyentuh lebih banyak kawasan di luar skrin penyuntingan.</p></blockquote>



<p>Ia akan sentiasa wujud. Ia adalah kunci untuk merangkul editor blok dan menjadikannya sesuai dengan kehendak kami.</p>




<ol><li>Mengapa kita memanggilnya? "Gutenberg" nampaknya tidak lagi sesuai. Rasanya seperti ia akan hilang, walaupun perkembangannya masih dalam plugin Gutenberg. Saya fikir saya hanya menyebutnya sebagai "editor blok" kecuali secara khusus merujuk kepada plugin.</li></ol>

Atas ialah kandungan terperinci Blok WordPress berubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!