Lisää aloituspisteitä WordPressin luontilohkokomentosarjaan

Kun luot lohkon ensimmäisen kerran WordPressin luontilohkokomentosarjan avulla, npm init @wordpress/blocksaat sisääntulopisteen osoitteeseen /src/index.js, jonka avulla voit kääntää kaikki lohkopohjaiset resurssit ja tyylit.

Joskus haluat lisätä muita aloituskohtia, esimerkiksi haluat ehkä käyttää WordPress Block Editor (Gutenberg) -lohkoja muualla editorissa, esimerkiksi asetussivulla tai mukauttajassa.

Tämä opas auttaa sinua laajentamaan WordPressin luontilohkokomentosarjaa webpack.config, jotta voit lisätä nämä lisätulokohdat.

Edellytykset

• Tutustu WordPress Gutenbergin lisäosien luomiseen lohkokomentosarjan avulla

Luo tiedostosi

Lohkokomentosarjan luontioppaan jälkeen aiomme luoda ratkaisussamme muutamia tiedostoja:

Luoda/src/admin.js

Tämä tiedosto on pääsisääntulopiste mille tahansa Reactille, jonka haluamme lisätä WordPressin järjestelmänvalvojanäyttöön (jos esimerkiksi halusimme rakentaa asetussivun hallitaksemme asetuksiamme Gutenberg Componentsilla.

Luo tiedosto /src/admin.jsja liitä siihen seuraava koodi:

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

import './admin.scss';

Emme tee tässä tiedostossa juuri mitään, se on myöhemmin annettavien oppaiden aihe. Toistaiseksi lisäämme vain koodia, jotta voimme testata ulostuloa.

Se kuitenkin tuo /src/admin.scsstiedoston, joka käännetään sisältämään kaikki mukautetut CSS-tiedostomme WordPress-järjestelmänvalvojalle.

Luoda/src/admin.scss

Luo tiedosto /src/admin.scssja lisää testi-SCSS:

body {
  background: pink;
}

Jälleen tämä koodi ei palvele muuta kuin testaamaan, käännetäänkö SCSS.

Luoda/webpack.config.js

Luo laajennuksen juureen tiedosto, jonka nimi kerrotaan webpack.config.jspian, mitä tähän tiedostoon laitetaan.

Muokkaa laajennuksen PHP-juuritiedostoa

Jos olet seurannut edellistä opasta, kyseistä laajennusta kutsutaan nimellä wholesome-plugin.php.

Tässä tiedostossa haluamme rekisteröidä komentosarjat admin-alueelle, jotka tulostetaan webpack-kokoonpanollamme. Lisää seuraava funktio tiedoston alaosaan:

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

Olemme melko pitkälti kopioineet koodin edellisestä jonolohkosta, mutta tehneet siitä merkityksellisen odotetuille /build/admin.jsja tulostetuille tiedostoillemme /build/admin.css. Huomaa, että lataamme myös erityisesti luodun /build/admin.asset.phptiedoston, joka lisää automaattisesti kaikki WordPress-lohkoeditorin (Gutenberg) riippuvuudet järjestelmänvalvojan komentosarjaamme.

MuokkaawebPack.config

Vaiheessa 2 loimme tiedoston webpack.config.js, lisää tähän tiedostoon seuraava koodi:

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' ),
    }
};

Tämä koodi tuo webpack.configosoitteesta @wordpress/scripts. Tämä on koodi, joka suoritetaan aina, kun suoritat npm startratkaisusi.

Teemme vain tämän konfiguraation ja lisäämme toisen aloituspisteen rivillä admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Loppuosa koodista vain käskee webpackia käyttämään jo olemassa olevia asetuksia (esim ...defautConfig. ...defaultConfig.entry).

Kokoa koodi

Käännä laajennus npm startkomennolla ja katsotaan mitä tapahtuu:

Koodin kääntäminen uudella sisääntulopisteellä

Skripti luo nyt meille uusia tiedostoja:

• /build/admin.assets.php— Tämä PHP-tiedosto luodaan automaattisesti, kun /srckansio käännetään. Se sisältää joukon kaikkia WordPress Editorin (Gutenberg) JavaScript-syvyyksiä, joita uusi aloituspisteesi käyttää. Se asetetaan jonoon päälataustiedoston kautta käyttöönottamamme wholesome-plugin.phplisätoiminnon kautta.

• /build/admin.css— Tämä on järjestelmänvalvojan CSS-tiedosto, ja se asetetaan jonoon päälataustiedoston kautta käyttöönottamamme wholesome-plugin.phplisätoiminnon kautta.

• /build/admin.js— Tämä on tärkein käännetty JavaScript-tiedosto, ja se asetetaan jonoon päälataustiedoston kautta käyttöönottamamme wholesome-plugin.phplisätoiminnon kautta.

• /build/admin.css.map— Tämä tiedosto luodaan vain, kun käännät resursseja kehitystilaa varten (IE käytät, npm startetkä npm buildkun käännät resursseja. Se on hyödyllinen tiedosto virheenkorjaajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot CSS:ssä, jos tapahtuu virheitä.

• /build/admin.js.map— Tämä tiedosto luodaan vain, kun käännät resursseja kehitystilaa varten (IE käytät, npm startetkä npm buildkun käännät resursseja. Se on hyödyllinen tiedosto JavaScript-virheenkorjaajille, joka auttaa tunnistamaan tiedostojen nimet ja rivinumerot virheiden sattuessa.

• Katso post-metakenttien käyttöä Gutenberg-lohkoissa

• Katso vaihtoehtojen ja asetusten käyttöä Gutenberg-lohkoissa

• Katso mukautettujen metalaatikoiden luomista Gutenbergissä

• Katso vaihtoehto- ja asetussivun rakentaminen Gutenbergin komponenteilla