Edellisessä oppaassamme tarkastelimme asetussivun luomista WordPress Block Editor (Gutenberg) -komponenttien avulla. Tässä oppaassa viemme sen vielä pidemmälle ja käytämme Gutenberg-komponentteja WordPress Customizerin sisällä.
Mukauttaja Gutenberg-komponenteilla
Edellytykset
- Olet noudattanut Pluginin luominen WordPress Block Editor (Gutenberg) -opasta
- Olet noudattanut WordPress Block Editor (Gutenberg) -oppaan tietojen tallennusvaihtoehtojen käyttämistä
- Olet noudattanut Lisää aloituspisteitä WordPressin Luo Block Script -oppaaseen
- On seurannut Luo asetussivu käyttämällä WordPress Block Editor (Gutenberg) -komponentin opasta
Luo aloituspiste verkkopaketissa
Jatkamalla Lisää aloituspisteitä WordPressin Luo lohkokomentosarja -oppaaseen, luo uusi aloituspiste laajennettuun webpack.config.jstiedostoon, jonka loit oppaassa.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );
module.exports = {
...defaultConfig,
entry: {
...defaultConfig.entry,
customizer: path.resolve( process.cwd(), 'src', 'customizer.js' ),
}
};
Luo kaksi uutta tiedostoa ratkaisuusi:
/src/customizer.js/src/customizer.scss
Käytämme näitä lisäosien luomiseen.
Rekisteröi mukauttajaasetukset ja komponentit PHP:ssä
Edellytyksenä olevien ohjeiden mukaisesti avaa laajennuksen (tässä tapauksessa wholesome-plugin.php) PHP-juuritiedosto ja lisää seuraava:
Rekisteröi Customizer Control
Meidän on luotava mukautettu Customizer-hallinta. Lisää tiedostoosi seuraava koodi, joka muodostaa kutsun, joka tulostaa a <div>:n tunnuksella, johon JavaScript voi liittyä.
function wholesomecode_wholesome_plugin_customizer_register( $wp_customize) {
class Wholesome_Plugin_Gutenberg_Control extends WP_Customize_Control {
public $type = 'wholesome-plugin-gutenberg-control';
public function render_content() {}
public function content_template() {
?>
<div id="wholesome-plugin-customizer"></div>
<?php
}
}
$wp_customize->register_control_type( 'Wholesome_Plugin_Gutenberg_Control' );
}
add_action( 'customize_register', 'wholesomecode_wholesome_plugin_customizer_register', 10 );
Tämän tiedoston alareunassa rekisteröimme ohjausobjektin kanssa, register_control_typejonka avulla voimme käyttää tätä ohjausobjektia JavaScriptissä.
Rekisteröi mukauttajaasetukset
Samassa koodilohkossa meidän on rekisteröitävä asetukset, joita aiomme käyttää mukauttajassa. Voit tehdä tämän lisäämällä seuraavan koodilohkon rivin perään, joka tekee register_control_type.
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_select' );
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_text' );
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_text_2', [ 'type' => 'option' ] );
$wp_customize->add_setting( 'wholesomecode_wholesome_plugin_example_toggle', [ 'type' => 'option' ] );
Huomaa, että kaksi ensimmäistä asetusta ovat käytettävissä oletustoiminnon kautta get_theme_mod, kun taas kaksi alinta asetusta välittävät argumentit 'type' => 'option', mikä tarkoittaa, että nämä asetukset rekisteröidään yksilöllisinä kenttinä asetustaulukossa ja niihin pääsee käsiksi get_option.
Näille kahdelle alimmalle asetukselle meidän on varmistettava, että ne on rekisteröity kautta register_settingja -kohtaan, show_in_restjotta trueniitä voidaan käyttää Gutenbergin kautta.
Rekisteröi ’Option’-asetukset
Rekisteröi kaksi alinta mukautusasetusta (jotka pääsemme käsiksi get_option) seuraavalla koodilohkolla:
function wholesomecode_wholesome_plugin_register_settings() {
register_setting(
'wholesomecode_wholesome_plugin_settings',
'wholesomecode_wholesome_plugin_example_text_2',
[
'default' => '',
'show_in_rest' => true,
'type' => 'string',
]
);
register_setting(
'wholesomecode_wholesome_plugin_settings',
'wholesomecode_wholesome_plugin_example_toggle',
[
'default' => '',
'show_in_rest' => true,
'type' => 'string',
]
);
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_settings', 10 );
Aseta komentosarjat jonoon
Rekisteröi lopuksi mukauttajaresurssit seuraavalla koodilla (katso lisätietoja Aloituspisteiden lisäämisoppaasta).
function wholesomecode_wholesome_plugin_customizer_scripts() {
$dir = __DIR__;
$script_asset_path = "$dir/build/customizer.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.'
);
}
$customizer_js = 'build/customizer.js';
$script_asset = require( $script_asset_path );
wp_enqueue_script(
'wholesomecode-wholesome-plugin-customizer-editor',
plugins_url( $customizer_js, __FILE__ ),
$script_asset['dependencies'],
$script_asset['version']
);
wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );
wp_localize_script(
'wholesomecode-wholesome-plugin-customizer-editor',
'WholesomePluginSettings',
[
'wholesomecode_wholesome_plugin_example_select' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),
'wholesomecode_wholesome_plugin_example_text' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),
]
);
$customizer_css = 'build/customizer.css';
wp_enqueue_style(
'wholesomecode-wholesome-plugin-customizer',
plugins_url( $customizer_css, __FILE__ ),
['wp-components'],
filemtime( "$dir/$customizer_css") );
}
add_action( 'customize_controls_enqueue_scripts', 'wholesomecode_wholesome_plugin_customizer_scripts', 10 );
Huomaa, että käytämme wp_localize_scripttässä koodilohkossa myös asetukset, joiden kautta pääsemme käyttämään get_theme_modJavaScriptiä.
Katsotaanpa tätä koodin osaa yksityiskohtaisemmin:
wp_localize_script(
'wholesomecode-wholesome-plugin-customizer-editor',
'WholesomePluginSettings',
[
'wholesomecode_wholesome_plugin_example_select' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),
'wholesomecode_wholesome_plugin_example_text' => get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),
]
);
Huomaa, että käytämme samoja asetusnäppäimiä, jotka rekisteröitiin, kun rekisteröimme mukauttamisasetukset $wp_customize->add_settingaiemmin (ne, joita ei ole määritetty käyttämään vaihtoehtoa).
Rakenna mukautuspaneeli JavaScriptillä
Lisää tiedostoon seuraava koodi /src/customizer.js.
Suurimmaksi osaksi tämä koodi (Appkomponentti) on versio Luo asetussivu -oppaan koodista. Se käyttää samoja komponentteja ja määrittää edelleen stateAsetukset-sovellusliittymästä, mutta poistaa tallennuspainikkeen ja ilmoitusalueen.
import './customizer.scss';
const { api } = wp;
import {
Panel,
PanelBody,
Placeholder,
SelectControl,
Spinner,
TextControl,
ToggleControl,
} from '@wordpress/components';
import {
Fragment,
render,
Component,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
const { customize } = wp;
class App extends Component {
constructor() {
super( ...arguments );
this.state = {
exampleSelect: '',
exampleText: '',
exampleText2: '',
exampleText3: '',
exampleToggle: false,
isAPILoaded: false,
};
}
componentDidMount() {
api.loadPromise.then(() => {
this.settings = new api.models.Settings();
const { isAPILoaded } = this.state;
if (isAPILoaded === false) {
this.settings.fetch().then( (response) => {
this.setState( {
exampleSelect: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_select' ],
exampleText: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_text' ],
exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],
exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],
exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),
isAPILoaded: true,
} );
} );
}
} );
}
render() {
const {
exampleSelect,
exampleText,
exampleText2,
exampleToggle,
isAPILoaded,
} = this.state;
if (! isAPILoaded) {
return (<Placeholder>
<Spinner />
</Placeholder>
);
}
return (<Fragment>
<div className="wholesome-plugin__main">
<Panel>
<PanelBody
title={ __( 'Panel Body One', 'wholesome-plugin') }
icon="admin-plugins"
>
<SelectControl
help={ __( 'An example dropdown field.', 'wholesome-plugin') }
label={ __( 'Example Select', 'wholesome-plugin') }
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
options={ [
{
label: __( 'Please Select...', 'wholesome-plugin' ),
value: '',
},
{
label: __( 'Option 1', 'wholesome-plugin' ),
value: 'option-1',
},
{
label: __( 'Option 2', 'wholesome-plugin' ),
value: 'option-2',
},
] }
value={ exampleSelect }
/>
</PanelBody>
<PanelBody
title={ __( 'Panel Body Two', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
help={ __( 'This is an example text field.', 'wholesome-plugin') }
label={ __( 'Example Text', 'wholesome-plugin') }
onChange={ (exampleText) => {
this.setState( { exampleText } );
customize.value('wholesomecode_wholesome_plugin_example_text')(exampleText);
}}
value={ exampleText }
/>
</PanelBody>
<PanelBody
title={ __( 'Panel Body Three', 'wholesome-plugin') }
icon="admin-plugins"
>
<TextControl
help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }
label={ __( 'Example Text 2', 'wholesome-plugin') }
onChange={ (exampleText2) => {
this.setState( { exampleText2 } );
customize.value('wholesomecode_wholesome_plugin_example_text_2')(exampleText2);
}}
value={ exampleText2 }
/>
</PanelBody>
<PanelBody
title={ __( 'Panel Body Four', 'wholesome-plugin') }
icon="admin-plugins"
>
<ToggleControl
checked={ exampleToggle }
help={ __( 'An example toggle.', 'wholesome-plugin') }
label={ __( 'Example Toggle', 'wholesome-plugin') }
onChange={ (exampleToggle) => {
this.setState( { exampleToggle } );
customize.value('wholesomecode_wholesome_plugin_example_toggle')(exampleToggle);
}}
/>
</PanelBody>
</Panel>
</div>
</Fragment>) }
}
Yksi merkittävä muutos on sisällä componentDidMount, jossa asetukset ladataan API:sta. Huomaa, että kahta asetusta, joihin päästään, get_theme_modpäästään käyttämällä muuttujaa WholesomePluginSettings, jonka loimme wp_localize_scriptfunktiossa aiemmin tässä oppaassa.
this.setState( {
exampleSelect: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_select' ],
exampleText: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_text' ],
exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],
exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],
exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),
isAPILoaded: true,
} );
Käsittele Tallenna
Meidän ei todellakaan tarvitse tehdä mitään erityistä käsitelläksemme muutoksia. Ainoa asia, joka meidän tarvitsee tehdä, on kytkeytyä sisään customizeja antaa WordPress Customizerin hoitaa tallennus, esimerkiksi:
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
Tässä esimerkissä onChangevälittää syöttökentän arvon (tässä tapauksessa meidän <select>) ja päivittää tilan ja välittää tämän arvon mukauttajalle wp.customize.value()funktion kautta.
Rakenna mukauttajaosio ja paneeli JavaScriptillä
Lisää tiedoston alaosaan /src/customizer.jsseuraava koodi:
customize.bind('ready', function() {
const panelKey = 'wholesomecode-wholesome-plugin-customizer-panel';
const sectionKey = 'wholesomecode-wholesome-plugin-customizer-section';
customize.panel.add(
new customize.Panel( panelKey, {
description: __( 'Wholesome Plugin Example Panel', 'wholesome-plugin' ),
priority: 1000,
title: __( 'Wholesome Plugin Panel', 'wholesome-plugin' ),
})
);
customize.section.add(
new customize.Section( sectionKey, {
customizeAction: __( 'Wholesome Plugin ▸ Section', 'wholesome-plugin' ),
panel: panelKey,
title: __( 'Wholesome Plugin Section', 'wholesome-plugin' ),
})
);
customize.control.add(
new customize.Control( 'wholesomecode-wholesome-plugin-customizer-gutenberg-control', {
section: sectionKey,
type: 'wholesome-plugin-gutenberg-control',
})
);
const htmlOutput = document.getElementById( 'wholesome-plugin-customizer' );
if (htmlOutput) {
render(
<App />,
htmlOutput
);
}
});
Tämä koodi luo mukautusosion ja paneelin JavaScriptiin.
Koodi lisää myös mukautetun Gutenberg-ohjausobjektin rekisteröimällä new customize.Controlluokan ja välittämällä typesen samalla nimellä kuin typemääritimme, kun rekisteröimme ohjausobjektin PHP:ssä.
Käytämme tätä koodia myös löytääksemme <div>rekisteröidämme mukautettuun Gutenberg-hallintaomme ja tehdäksemme Gutenberg-komponentit tähän <div>.
Lisää SCSS
Meidän on siivottava paneelia hieman lisäämällä seuraava SCSS kohtaan /src/customizer.scss:
#wholesome-plugin-customizer {
.components-placeholder {
background: #f1f1f1;
}
.wholesome-plugin__main {
margin-left: auto;
margin-right: auto;
.components-panel {
background: none;
border: none;
}
.components-panel__body {
background: #ffffff;
border: 1px solid #e2e4e7;
margin-bottom: 1rem;
}
}
.components-base-control__help {
margin-top: .5rem;
}
.components-panel__row {
> div {
flex-grow: 1;
margin-right: 1rem;
&:last-of-type {
margin-right: 0;
}
}
}
.wholesome-plugin__notices {
.components-snackbar {
bottom: .5rem;
position: fixed;
}
}
}
Mukauttajan katselu
Siirry WordPress-muokkausohjelmaan ja tarkastele Gutenberg-muokkauspaneelia toiminnassa:
Mukauttaja Gutenberg-komponenteilla