Viimases juhendis vaatlesime seadete lehe loomist WordPressi plokiredaktori (Gutenberg) komponentide abil. Selles juhendis võtame selle veelgi kaugemale ja kasutame WordPressi kohandaja sees Gutenbergi komponente.
Kohandaja Gutenbergi komponentidega
Eeldused
- Olete järginud WordPressi plokiredaktori (Gutenbergi) pistikprogrammi loomise juhendit
- On järginud WordPressi plokiredaktori (Gutenberg) juhendis olevate andmete salvestamise valikute kasutamist
- Järginud WordPressi plokiskripti loomise juhendi sisestuspunktide lisamist
- On järginud WordPressi plokiredaktori (Gutenbergi) komponendi juhendit Seadete lehe loomine
Looge veebipaketis sisenemispunkt
Järgides WordPressi plokiskriptiwebpack.config.js loomise juhendi sisestuspunktide lisamist, looge selles juhendis loodud laiendatud failis uus sisenemispunkt .
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' ),
}
};
Looge oma lahenduses kaks uut faili:
/src/customizer.js/src/customizer.scss
Kasutame neid oma pistikprogrammi loomiseks.
Registreerige kohandaja sätted ja komponendid PHP-s
Järgides eeltingimuste juhendeid, avage pistikprogrammi PHP juurfail (antud juhul wholesome-plugin.php) ja lisage järgmine:
Registreerige kohandaja juhtelement
Peame looma kohandatud kohandaja juhtelemendi. Lisage oma failile järgmine kood, mis renderdab kõne, mis väljastab a <div>ID-ga, millele meie JavaScript saab haakida.
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 );
Selle faili allosas registreerime juhtelemendi, register_control_typemis võimaldab meil JavaScriptis sellele juhtelemendile juurde pääseda.
Registreerige kohandaja sätted
Samas koodiplokis peame registreerima sätted, mida hakkame kohandajas kasutama. Selleks lisage järgmine koodiplokk pärast rida, mis teeb 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' ] );
Pange tähele, et kahele esimesele seadele pääseb juurde vaikefunktsiooni kaudu get_theme_mod, samas kui kaks alumist sätet edastavad argumendid, 'type' => 'option'mis tähendab, et need sätted registreeritakse valikute tabelis unikaalsete väljadena ja neile pääseb juurde get_option.
Nende kahe alumise seadistuse jaoks peame tagama, et need on registreeritud mõlema jaoks register_setting, show_in_restet trueneile pääseks juurde Gutenbergi kaudu.
Registreerige ‘Option’ seaded
Registreerige kaks alumist kohandamisseadet (millele pääseme juurde get_option) järgmise koodiplokiga:
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 );
Pange skriptid järjekorda
Lõpuks registreerige kohandaja varad järgmise koodiga (lisateabe saamiseks vaadake juhendit Sisenemispunktide lisamine ).
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 );
Pange tähele, et me kasutame wp_localize_scriptselles koodiplokis ka seadete get_theme_modedastamiseks JavaScripti, mille kaudu pääseme juurde.
Vaatame seda koodi osa üksikasjalikumalt:
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', '' ),
]
);
Pange tähele, et kasutame samu seadistusklahve, mida registreerisime kohandaja sätete registreerimisel $wp_customize->add_settingvarem (need, mis ei olnud suvandit kasutama konfigureeritud).
Looge kohandaja paneel JavaScriptis
/src/customizer.jsLisage faili järgmine kood .
Enamasti on see kood (komponent) seadete lehe loomise juhendiApp koodi ümbertöötamine. See kasutab samu komponente ja määrab endiselt seadete API-st, kuid kaotab salvestamisnupu ja teadete ala.state
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>) }
}
Üks märkimisväärne muudatus on sees componentDidMount, kus seaded laaditakse API-st. Pange tähele, et kahele seadele, millele pääsete juurde, pääsete get_theme_modjuurde muutuja abil WholesomePluginSettings, mille lõime wp_localize_scriptfunktsioonis selles juhendis varem.
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äsitsege Salvesta
Me ei pea tegelikult muudatustega toimetulemiseks midagi erilist tegema. Ainus asi, mida peame tegema, on konksu sisse lülitada customizeja lasta WordPressi kohandajal salvestada, näiteks:
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
Selles näites onChangeedastab sisendvälja väärtuse (antud juhul meie <select>) ja värskendab olekut ning seejärel edastab selle väärtuse funktsiooni kaudu wp.customize.value()kohandajasse.
Looge JavaScripti abil kohandaja jaotis ja paneel
Lisage faili allosas /src/customizer.jsjärgmine kood:
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
);
}
});
See kood loob JavaScriptis kohandaja jaotise ja paneeli.
Kood lisab ka meie kohandatud Gutenbergi juhtelemendi, registreerides new customize.Controlklassi ja edastades typeselle sama nimega, mille typemäärasime juhtelemendi PHP-s registreerimisel.
Kasutame seda koodi ka <div>kohandatud Gutenbergi juhtelemendis registreeritud andmete leidmiseks ja Gutenbergi komponendid sellesse renderdamiseks <div>.
Lisage SCSS
Peame paneeli veidi korrastama, lisades järgmise SCSS-i /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;
}
}
}
Kohandaja vaatamine
Liikuge WordPressi kohandaja juurde ja vaadake Gutenbergi kohandaja paneeli töös:
Kohandaja Gutenbergi komponentidega