Status asas di blok WordPress

Tutorial ini menunjukkan mewujudkan blok WordPress yang mengintegrasikan komponen web asas, memaparkan ketersediaan ciri platform web. Penulis, Geoff Graham, memperincikan proses, menonjolkan langkah -langkah utama dan cabaran yang dihadapi.

Konsep teras memanfaatkan blok WordPress untuk membuat komponen web yang boleh diguna semula dengan mudah diulangi dalam editor WordPress. Ini mengelakkan terus membenamkan komponen HTML, yang menawarkan kebolehgunaan dan pengurusan yang lebih baik. Pendekatan yang sama wujud untuk Hugo dan Astro.

<baseline-status></baseline-status>

Persediaan Projek:

Projek ini menggunakan pakej

untuk permulaan. Pendaftaran plugin berlaku di

, yang mendaftarkan jenis blok. Fail ini juga mengendalikan enqueuing JavaScript yang diperlukan (@wordpress/create-block) secara kondusif, memastikan komponen hanya dimuatkan apabila diperlukan. Fungsi penting, baseline-status.php, mengubah tag skrip untuk membolehkan import modul ES. baseline-status.min.js csstricks_add_type_attribute

// ... (baseline-status.php excerpt) ...
function csstricks_enqueue_block_assets() {
  wp_enqueue_script(
    'baseline-status-widget-script',
    'https://cdn.jsdelivr.net/npm/[email protected]/baseline-status.min.js',
    array(),
    '1.0.4',
    true
  );
}
// ...

markup depan dan back-end:

rendering front-end (

) menggunakan komponen

, secara dinamik memasukkan atribut render.php: <baseline-status></baseline-status> featureId

Pandangan belakang (

// ... (render.php excerpt) ...
<baseline-status featureid="<?php echo esc_html( $featureID ); ?>"></baseline-status>

) menggunakan fungsi

untuk debug dan rendering dalam editor WordPress. Fail edit.js mentakrifkan atribut blok, termasuk useBlockProps. block.json featureID

// ... (block.json excerpt) ...
"attributes": {
  "featureID": {
    "type": "string"
  }
},

Tetapan blok:

fail

menggabungkan

, edit.js, dan InspectorControls dari PanelBody untuk membuat panel tetapan dalam editor. Ini membolehkan pengguna menentukan TextControl secara langsung. @wordpress/components featureID

// ... (edit.js excerpt) ...
<textcontrol label="Feature ID" value="{" featureid onchange="{"> setAttributes( { featureID: value } ) }
/></textcontrol>

Styling:

Styling Komponen melibatkan pemahaman bayangan dom. Penulis menggunakan pembolehubah CSS dan pemilihan langsung elemen

untuk memohon gaya. Pendekatan ini menangani cabaran dalam elemen dom bayangan gaya.

<baseline-status></baseline-status> ketersediaan plugin dan penambahbaikan masa depan:

Plugin boleh didapati di direktori plugin WordPress. Penambahbaikan masa depan termasuk kemas kini langsung, variasi (pilihan saiz), dan togol untuk penglihatan tajuk.

Artikel ini menyediakan panduan yang komprehensif untuk membina blok WordPress yang mengintegrasikan komponen web pihak ketiga, yang menawarkan pandangan berharga ke dalam pembangunan blok WordPress dan gaya Shadow Dom.

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