Lisage WordPressi loomise plokiskripti sisenemispunktid

Kui loote WordPressi ploki loomise skripti abil esmakordselt ploki, npm init @wordpress/blockannab see teile sisenemispunkti /src/index.js, mida saate kasutada kõigi oma plokipõhiste varade ja stiilide kompileerimiseks.

Mõnikord soovite lisada muid sisestuspunkte, näiteks võite kasutada WordPressi plokiredaktori (Gutenberg) plokke mujal redaktoris, näiteks seadete lehel või kohandajas.

See juhend aitab teil laiendada WordPressi loomisploki skripti webpack.config, et saaksite neid täiendavaid sisenemispunkte lisada.

Eeldused

• Olge tuttav WordPress Gutenbergi jaoks pluginate loomisega, kasutades loomisploki skripti

Looge oma failid

Plokiskripti loomise juhendi järgi loome oma lahenduses mõned failid:

Loo/src/admin.js

See fail on peamine sisenemispunkt igale Reactile, mida soovime WordPressi administraatoriekraanile lisada (näiteks kui soovime luua suvandite lehe, et juhtida oma seadeid Gutenbergi komponentidega.

Looge fail /src/admin.jsja kleepige järgmine kood:

import { __ } from '@wordpress/i18n';
import api from '@wordpress/api';

import './admin.scss';

Me ei tee selles failis veel midagi, see on hilisemate juhendite teema. Praegu sisestame lihtsalt koodi, et saaksime väljundit testida.

See aga impordib /src/admin.scssfaili, mis kompileeritakse nii, et see sisaldaks kogu meie kohandatud CSS-i WordPressi administraatori jaoks.

Loo/src/admin.scss

Looge fail /src/admin.scssja lisage mõni test-SCSS:

body {
  background: pink;
}

Jällegi pole sellel koodil muud kasu, kui selleks, et testida, kas SCSS kompileeritakse.

Loo/webpack.config.js

Looge oma pistikprogrammi juurfaili fail nimega webpack.config.jsme käsitleme varsti, mida sellesse faili lisada.

Redigeerige pistikprogrammi PHP juurfaili

Kui olete eelmist juhendit järginud, nimetatakse seda pistikprogrammi wholesome-plugin.php.

Selles failis tahame registreerida administraatoriala skriptid, mille väljastab meie veebipaketi konfiguratsioon. Lisage selle faili allossa järgmine funktsioon:

function wholesomecode_wholesome_plugin_admin_scripts() {
    $dir = __DIR__;

    $script_asset_path = "$dir/build/admin.asset.php";
    if (! file_exists( $script_asset_path)) {
        throw new Error(
            'You need to run `npm start` or `npm run build` for the "wholesomecode/wholesome-plugin" block first.'
        );
    }
    $admin_js     = 'build/admin.js';
    $script_asset = require( $script_asset_path );
    wp_register_script(
        'wholesomecode-wholesome-plugin-admin-editor',
        plugins_url( $admin_js, __FILE__ ),
        $script_asset['dependencies'],
        $script_asset['version']
    );
    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );

    $admin_css = 'build/admin.css';
    wp_enqueue_style(
        'wholesomecode-wholesome-plugin-admin',
        plugins_url( $admin_css, __FILE__ ),
        ['wp-components'],
        filemtime( "$dir/$admin_css") );
}
add_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );

Oleme koodi eelmisest järjekorraplokist üsna palju kopeerinud, kuid muutnud selle asjakohaseks meie eeldatavate ja väljundfailide /build/admin.jsjaoks /build/admin.css. Pange tähele, et laadime ka spetsiaalselt loodud /build/admin.asset.phpfaili, mis lisab meie administraatori skriptile automaatselt kõik WordPressi plokiredaktori (Gutenbergi) sõltuvused.

RedigeeriwebPack.config

2 sammus lõime faili webpack.config.js, lisage sellesse faili järgmine kood:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),
    }
};

See kood webpack.configimpordib @wordpress/scripts. npm startSee on kood, mis töötab iga kord, kui oma lahenduses käitate .

Kõik, mida me teeme, on selle konfiguratsiooni valimine ja teise sisenemispunkti lisamine reaga admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Ülejäänud osa koodist käsib veebipaketil kasutada juba olemasolevaid sätteid (nt ...defautConfig, ...defaultConfig.entry).

Koostage kood

Kompileerige oma plugin npm startkäsuga ja vaatame, mis juhtub:

Koodi koostamine uue sisenemispunktiga

Skript genereerib nüüd meie jaoks mõned uued failid:

• /build/admin.assets.php— See PHP-fail genereeritakse automaatselt /srckausta kompileerimisel. See sisaldab massiivi kõigist WordPressi redigeerija (Gutenberg) JavaScripti sündsustest, mida teie uus sisenemispunkt kasutab. See pannakse järjekorda pealaadurifaili kaudu wholesome-plugin.phpmeie lisatud lisafunktsiooni kaudu.

• /build/admin.css— See on administraatori CSS-fail ja see pannakse järjekorda peamise wholesome-plugin.phplaadimisfaili kaudu meie lisatud lisafunktsiooni kaudu.

• /build/admin.js— See on peamine kompileeritud JavaScripti fail ja see pannakse järjekorda peamise wholesome-plugin.phplaadimisfaili kaudu meie lisatud lisafunktsiooni kaudu.

• /build/admin.css.map— See fail luuakse ainult siis, kui kompileerite varasid arendusrežiimi jaoks (IE käitate, npm startmitte npm buildvarade kompileerimisel. See on abistav fail siluritele, mis aitab vigade ilmnemisel tuvastada CSS-is failinimesid ja reanumbreid.

• /build/admin.js.map— See fail luuakse ainult siis, kui kompileerite varasid arendusrežiimi jaoks (IE käitate, npm startmitte npm buildvarade kompileerimisel. See on kasulik fail JavaScripti siluritele, mis aitab vigade ilmnemisel tuvastada failinimesid ja reanumbreid.

• Vaadake postituste metaväljade kasutamist Gutenbergi plokkides

• Vaadake valikute ja sätete kasutamist Gutenbergi plokkides

• Vaadake kohandatud metakastide loomist Gutenbergis

• Vaadake Gutenbergi komponentide abil valikute ja sätete lehe loomist