W naszym ostatnim przewodniku przyjrzeliśmy się tworzeniu strony ustawień za pomocą komponentów WordPress Block Editor (Gutenberg). W tym przewodniku zamierzamy pójść jeszcze dalej i użyjemy komponentów Gutenberga w WordPress Customizer.
Customizer z komponentami Gutenberg
Warunki wstępne
- Postępowałem zgodnie z przewodnikiem Tworzenie wtyczki do edytora bloków WordPress (Gutenberg)
- Postępowałem zgodnie z instrukcjami dotyczącymi używania opcji przechowywania danych w edytorze bloków WordPress (Gutenberg)
- Postępowałem zgodnie z instrukcjami dodawania punktów wejścia do przewodnika tworzenia skryptów blokowych WordPress
- Postępowałem zgodnie z przewodnikiem Utwórz stronę ustawień za pomocą edytora bloków WordPress (Gutenberg)
Utwórz punkt wejścia w webpack
Kontynuując od Dodaj punkty wejścia do przewodnika WordPress Create Block Script, utwórz nowy punkt wejścia w rozszerzonym webpack.config.jspliku, który utworzyłeś w tym przewodniku.
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' ),
}
};
Utwórz dwa nowe pliki w swoim rozwiązaniu:
/src/customizer.js/src/customizer.scss
Wykorzystamy je do stworzenia naszej wtyczki.
Zarejestruj ustawienia i komponenty konfiguratora w PHP
Kontynuując instrukcje w wymaganiach wstępnych, otwórz główny plik PHP wtyczki (w tym przypadku wholesome-plugin.php) i dodaj następujące elementy:
Zarejestruj kontrolkę konfiguratora
Musimy utworzyć niestandardową kontrolkę Customizer. Dodaj następujący kod do swojego pliku, który wyrenderuje wywołanie, które wygeneruje a <div>z identyfikatorem, do którego może się podłączyć nasz JavaScript.
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 );
Na dole tego pliku rejestrujemy kontrolkę, register_control_typektóra umożliwia nam dostęp do tej kontrolki w JavaScript.
Zarejestruj ustawienia konfiguratora
W tym samym bloku kodu musimy zarejestrować ustawienia, których będziemy używać w konfiguratorze. Aby to zrobić, dodaj następujący blok kodu po wierszu, który wykonuje 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' ] );
Należy zauważyć, że pierwsze dwa ustawienia będą dostępne za pośrednictwem get_theme_modfunkcji domyślnej, podczas gdy dwa dolne ustawienia przekażą argumenty 'type' => 'option', co oznacza, że ustawienia te zostaną zarejestrowane jako unikalne pola w tabeli opcji i będą dostępne za pośrednictwem get_option.
W przypadku tych dwóch dolnych ustawień musimy upewnić się, że są one zarejestrowane za pośrednictwem register_settingi show_in_restdo truekażdego z nich, aby można było uzyskać do nich dostęp za pośrednictwem Gutenberga.
Zarejestruj ustawienia „Opcji"
Zarejestruj dwa dolne ustawienia dostosowywania (do których uzyskamy dostęp przez get_option) za pomocą następującego bloku kodu:
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 );
Kolejkuj skrypty
Na koniec zarejestruj zasoby dostosowywania za pomocą następującego kodu (zobacz przewodnik Dodawanie punktów wejścia, aby uzyskać więcej informacji).
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 );
Zauważ, że używamy również wp_localize_scriptw tym bloku kodu, aby przekazać ustawienia, do których uzyskamy dostęp za pośrednictwem get_theme_modJavaScript.
Przyjrzyjmy się dokładniej tej części kodu:
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', '' ),
]
);
Zwróć uwagę, że używamy tych samych kluczy ustawień, które zarejestrowaliśmy $wp_customize->add_settingwcześniej, rejestrując ustawienia dostosowania (te, które nie zostały skonfigurowane do korzystania z opcji).
Zbuduj panel dostosowania w JavaScript
Dodaj następujący kod do /src/customizer.jspliku.
W większości ten kod (Appkomponent) jest przeróbką kodu z przewodnika tworzenia strony ustawień. Używa tych samych komponentów i nadal ustawia statez interfejsu API ustawień, ale eliminuje przycisk zapisywania i obszar powiadomień.
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>) }
}
Jedną z godnych uwagi zmian jest to, że wewnątrz componentDidMount, gdzie ustawienia są ładowane z API. Zwróć uwagę, że dostęp do dwóch ustawień, do których można uzyskać dostęp, odbywa get_theme_modsię za pomocą zmiennej WholesomePluginSettings, którą utworzyliśmy w wp_localize_scriptfunkcji we wcześniejszej części tego przewodnika.
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,
} );
Obsługuj Zapisz
Tak naprawdę nie musimy robić nic specjalnego, aby poradzić sobie ze zmianami. Jedyne, co musimy zrobić, to podłączyć się customizei pozwolić WordPress Customizer zająć się zapisem, na przykład:
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
W tym przykładzie onChangeprzekazuje wartość pola wejściowego (w tym przypadku nasz <select>) i aktualizuje stan, a następnie przekazuje tę wartość do Customizer za pomocą wp.customize.value()funkcji.
Zbuduj sekcję i panel Customizer za pomocą JavaScript
Na dole /src/customizer.jspliku dodaj następujący kod:
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
);
}
});
Ten kod tworzy sekcję Customizer i panel w JavaScript.
Kod dodaje również naszą niestandardową kontrolkę Gutenberg, rejestrując new customize.Controlklasę i przekazując ją typeo tej samej nazwie, typektórą ustawiliśmy podczas rejestracji kontrolki w PHP.
Używamy również tego kodu, aby znaleźć ten <div>, który zarejestrowaliśmy w naszej niestandardowej kontrolce Gutenberg i renderować składniki Gutenberg w this <div>.
Dodaj SCSS
Musimy trochę uporządkować panel, dodając następujący SCSS do /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;
}
}
}
Przeglądanie konfiguratora
Przejdź do WordPress Customizer i zobacz Panel Gutenberg Customizer w akcji:
Customizer z komponentami Gutenberg
- Spójrz na tworzenie zagnieżdżonych bloków podrzędnych za pomocą
InnerBlockskomponentu - Zobacz, jak używać meta pól postu w blokach Gutenberga