Menguruskan WordPress Metadata di Gutenberg menggunakan plugin bar sisi

Artikel ini meneroka menguruskan metadata WordPress dalam editor Gutenberg menggunakan plugin bar sisi. Gutenberg, editor blok WordPress, mewakili jawatan sebagai koleksi blok. Walaupun metadata boleh diuruskan menggunakan blok, artikel ini memberi tumpuan kepada pengurusan sidebar untuk kegunaannya yang kerap. Tutorial ini mengandaikan kebiasaan dengan ReactJs dan Redux, kerana Gutenberg menggunakan teknologi ini.

Inti Gutenberg adalah aplikasi React. Semua elemen editor -tajuk, kawasan kandungan, bar alat, dan bar sisi -adalah komponen React. Keadaan aplikasi disimpan dalam objek JavaScript berpusat ("kedai") yang diuruskan oleh modul data WordPress, yang berkongsi persamaan dengan Redux. Kedai -kedai ini memegang data pos (kandungan, tajuk, kategori) dan maklumat laman web global (kategori, tag, jawatan). Mengubah suai kedai -kedai ini mengemas kini UI Gutenberg dan, setelah menyimpan, API REST WordPress mengemas kini pangkalan data.

Walau bagaimanapun, Gutenberg tidak menguruskan metadata melalui kedai -kedai global ini secara lalai. Walaupun Legacy PHP Metaboxes masih berfungsi, WordPress mengesyorkan untuk memindahkan mereka ke pendekatan JavaScript menggunakan kedai global dan komponen bertindak balas untuk pengalaman bersatu.

Mengakses dan mengubah suai kedai seperti Redux Gutenberg

Untuk mengakses kedai -kedai ini, buka konsol penyemak imbas anda di Editor Gutenberg dan gunakan wp.data . Sebagai contoh, wp.data.select('core/editor').getBlocks() mengambil blok dalam jawatan semasa. wp.data.select('core/editor').getEditedPostAttribute('title') mengambil semula tajuk pos. Untuk menukar data, gunakan wp.data.dispatch() . Sebagai contoh, wp.data.dispatch('core/editor').editPost({title: 'My new title'}) mengemas kini tajuk pos. Kedai-kedai lain yang berkaitan termasuk core (Maklumat Laman Web Global) dan core/edit-post (Editor UI State).

Membuat plugin WordPress untuk bar sisi gutenberg

Untuk menambah komponen sidebar React, buat plugin WordPress. Ini melibatkan menubuhkan folder plugin (misalnya, gutenberg-sidebar ), membuat fail plugin.php (titik masuk plugin), dan menggunakan npm untuk menguruskan dependensi JavaScript ( @wordpress/scripts , @ @wordpress/i18n @wordpress/edit-post , @wordpress/components , @wordpress @wordpress/plugins @wordpress/data plugin.php enqueues bundle JavaScript yang dicipta oleh npm run build .

Mendaftarkan plugin dan bar sisi gutenberg

Kod JavaScript (dalam src/index.js ) menggunakan registerPlugin dari @wordpress/plugins untuk mendaftarkan plugin. PluginSidebar dan PluginSidebarMoreMenuItem dari @wordpress/edit-post Buat bar sisi dan item menu untuk bertukar-tukarnya.

Mengendalikan metadata dalam editor klasik

Tutorial menunjukkan pengurusan metadata dalam editor klasik menggunakan php metaboxes dan fungsi seperti add_meta_box , get_post_meta , update_post_meta , dan wp_verify_nonce . Pilihan __back_compat_meta_box menyembunyikan metabox apabila gutenberg aktif.

Menguruskan metadata dengan JavaScript

Untuk menguruskan medan tersuai (misalnya, _myprefix_text_metafield ) di Gutenberg menggunakan JavaScript, daftar medan menggunakan register_meta dengan show_in_rest: true , sanitize_callback , dan auth_callback untuk membenarkan kemas kini api. Gunakan wp.data.select('core/editor').getEditedPostAttribute('meta') untuk mengambil semula dan wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: 'new value'}})

Membuat komponen React

Komponen React ( PluginMetaFields ) dicipta menggunakan PanelBody dan TextControl dari @wordpress/components . withSelect dan withDispatch dari @wordpress/data Sambungkan komponen ke kedai seperti Redux, membolehkan pengambilan data dan kemas kini. Acara onChange menghantar kemas kini ke kedai. Akhirnya, komponen ColorPicker ditambah untuk menunjukkan menggunakan komponen lain dari @wordpress/components . Kod lengkap boleh didapati di GitHub.

Atas ialah kandungan terperinci Menguruskan WordPress Metadata di Gutenberg menggunakan plugin bar sisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!