Butang Styling dalam Tema Blok WordPress

Ciri -ciri baru yang diperkenalkan dalam WordPress 6.1 memberikan kawalan untuk menggunakan bayang -bayang secara langsung di editor blok dan editor tapak UI, dan artikel ini akan menyelam ke dalam butang gaya dalam tema blok WordPress, terutamanya dengan fail

. theme.json

Mengapa pilih butang? Ini adalah soalan yang baik, mari kita mulakan di sini.

pelbagai jenis butang

Dalam konteks Editor Blok WordPress, kita perlu membezakan antara dua jenis butang:

subblocks dalam blok butang.
1. Butang
bersarang di dalam blok lain (contohnya, blok borang komen artikel).

Jika kita menambah kedua -dua blok ini ke templat, mereka mempunyai penampilan yang sama secara lalai.

tetapi tandanya sangat berbeza:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

kita dapat melihat bahawa nama tag HTML berbeza. Ia adalah nama kelas biasa -

dan .wp-block-button - yang memastikan gaya konsisten kedua -dua butang. .wp-element-button

Jika kita menulis CSS, kita akan menyasarkan kedua -dua kelas ini. Tetapi seperti yang kita semua tahu, tema blok WordPress mempunyai kaedah pengurusan gaya yang berbeza, iaitu, melalui

fail. theme.json

Jadi, bagaimana anda menentukan gaya butang dalam

tanpa menulis CSS sebenar? Mari kita lakukan bersama. theme.json

Buat gaya asas

adalah satu set corak berstruktur yang ditulis dalam bentuk atribut: pasangan nilai. Atribut peringkat atas dipanggil "bahagian", dan kami akan menggunakan bahagian theme.json. Di sinilah semua arahan gaya terletak. styles

kami akan memberi perhatian khusus kepada

dalam styles. Pemilih ini menempatkan elemen HTML yang dikongsi antara blok. Berikut adalah rangka asas yang kita gunakan: elements

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

Apa yang perlu kita lakukan ialah menentukan elemen butang.

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

Butang ini sepadan dengan elemen HTML yang digunakan untuk menandakan elemen butang di hujung depan. Butang ini mengandungi tag HTML yang mungkin salah satu daripada dua jenis butang kami: komponen mandiri (iaitu blok butang) atau komponen yang bersarang di blok lain (mis., Blok komen artikel).

Daripada gaya setiap blok individu, buat gaya bersama. Mari kita teruskan dan ubah warna latar belakang dan warna teks lalai untuk kedua -dua jenis butang dalam tema. Terdapat objek warna di dalamnya, yang seterusnya menyokong sifat latar belakang dan teks, di mana kita menetapkan nilai yang dikehendaki:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

Ini mengubah warna kedua -dua butang.

Jika anda membuka DevTools dan melihat CSS yang dihasilkan oleh WordPress untuk butang, kami akan melihat bahawa kelas

menambah gaya yang kami tentukan dalam .wp-element-button: theme.json

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

Ini adalah warna lalai kami! Seterusnya, kami ingin memberikan maklum balas visual kepada pengguna ketika mereka berinteraksi dengan butang.

Melaksanakan gaya butang interaktif

Oleh kerana ini adalah laman web mengenai CSS, saya yakin ramai di antara kamu sudah biasa dengan status interaksi pautan dan butang. Kita boleh menggerakkan kursor tetikus ke atas mereka (:hover), tab mereka untuk fokus (:focus), dan klik mereka untuk memastikan mereka aktif (:active). Terdapat juga status :visited yang secara visual menunjukkan pengguna bahawa mereka telah mengklik pada ini sebelum ini.

Ini adalah kelas pseudo CSS, yang kami gunakan untuk mencari interaksi pautan atau butang.

Di CSS, kita boleh gaya :hover keadaan seperti ini:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

Dalam theme.json, kami akan menggunakan kelas pseudo ini untuk melanjutkan pengisytiharan butang sedia ada.

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

Sila perhatikan sifat "berstruktur "nya. Pada dasarnya kita mengikuti ringkasan:

• elemen
  • elemen
    • Objek
      • Properties
        • nilai

Kami kini telah menyelesaikan definisi lengkap gaya lalai dan interaktif butang. Tetapi bagaimana jika kita mahu gaya beberapa butang bersarang di blok lain?

Tetapkan gaya butang yang bersarang di setiap blok

Mari kita anggap kita mahu semua butang mempunyai gaya asas kita, dengan satu pengecualian. Kami mahu butang hantar dalam blok borang komen artikel menjadi biru. Bagaimana kita harus mencapainya?

Blok ini lebih kompleks daripada blok butang kerana ia mengandungi bahagian yang lebih aktif: bentuk, input, teks deskriptif, dan butang. Untuk mencari butang di blok ini, kita mesti mengikuti struktur JSON yang sama sebagai elemen butang, tetapi memohon kepada "borang komen artikel" blok dipetakan ke elemen core/post-comments-form:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

Sila ambil perhatian bahawa kami tidak lagi bekerja dalam elements. Sebaliknya, kami bekerja dalam blocks, yang digunakan untuk mengkonfigurasi blok sebenar. Sebaliknya, butang dianggap sebagai elemen global kerana mereka boleh bersarang di blok, walaupun mereka boleh digunakan sebagai blok mandiri.

Struktur JSON menyokong unsur -unsur dalam elemen. Oleh itu, jika terdapat elemen butang dalam blok borang komen artikel, kita dapat mengesannya di blok core/post-comments-form:

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

pemilih ini bermaksud bahawa kita bukan sahaja mencari blok tertentu -kita juga mencari elemen tertentu yang terkandung dalam blok itu. Sekarang kita mempunyai satu set gaya butang lalai yang digunakan untuk semua butang dalam topik, dan satu set gaya yang digunakan untuk butang tertentu yang terkandung dalam blok borang komen artikel.

WordPress dihasilkan CSS Oleh itu, mempunyai pemilih yang lebih tepat:

.wp-element-button {
  background-color: #17a2b8;
  color: #ffffff;
}

Bagaimana jika kita mahu menentukan gaya interaktif yang berbeza untuk butang "Borang Komen Artikel"? Ini adalah cara yang sama yang kami lakukan untuk gaya lalai, kecuali gaya ini ditakrifkan dalam blok core/post-comments-form:

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

Apa yang perlu saya lakukan jika butang dalam bukan blok?

WordPress secara automatik menjana dan menggunakan kelas yang betul untuk mengeluarkan gaya butang ini. Tetapi bagaimana jika anda menggunakan tema "hibrid" WordPress yang menyokong penyuntingan blok dan seluruh tapak tetapi juga mengandungi templat PHP "klasik"? Atau, bagaimana jika anda membuat blok tersuai, walaupun versi lama shortcode dengan butang? Ini tidak dikendalikan oleh enjin gaya WordPress!

Jangan risau. Dalam semua kes ini, anda akan menambah kelas .wp-element-button ke templat, blok, atau tag shortcode. Gaya yang dihasilkan oleh WordPress akan digunakan.

Dalam beberapa kes, anda mungkin tidak dapat mengawal penandaan. Sebagai contoh, beberapa plugin blok mungkin terlalu sewenang -wenang dan menggunakan gaya mereka sendiri. Pada ketika ini, anda biasanya boleh pergi ke pilihan lanjutan dalam panel Tetapan Blok dan memohon kelas di sana:

Ringkasan

Walaupun ia mungkin merasa janggal untuk menulis "CSS" dalam theme.json pada mulanya, saya mendapati ia menjadi sifat kedua. Seperti CSS, anda boleh memohon bilangan sifat terhad secara meluas atau sangat tepat menggunakan pemilih yang betul.

dan jangan lupa gunakan theme.json tiga kelebihan utama:

1. Gaya dikenakan ke butang dalam pandangan depan dan editor blok.
2. CSS anda akan serasi dengan kemas kini WordPress masa depan.
3. Gaya yang dihasilkan serasi dengan tema blok dan tema klasik -tidak perlu menyalin apa -apa dalam lembaran gaya yang berasingan.

Jika anda menggunakan gaya theme.json dalam projek anda, sila kongsi pengalaman dan idea anda. Saya berharap dapat membaca sebarang komen dan maklum balas!

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