В нашем последнем руководстве мы рассмотрели создание страницы настроек с помощью компонентов WordPress Block Editor (Gutenberg). В этом руководстве мы пойдем еще дальше и будем использовать компоненты Gutenberg в настройщике WordPress.
Настройщик с компонентами Gutenberg
Предпосылки
- Следовали руководству по созданию плагина для редактора блоков WordPress (Gutenberg).
- Следовали руководству по использованию параметров для хранения данных в редакторе блоков WordPress (Gutenberg).
- Следовали инструкциям по добавлению точек входа в руководство WordPress Create Block Script.
- Следовали руководству по созданию страницы настроек с помощью компонента WordPress Block Editor (Gutenberg).
Создайте точку входа в веб-пакете
Следуя инструкции «Добавить точки входа» в руководство «Создание сценария блока WordPress », создайте новую точку входа в расширенном webpack.config.jsфайле, который вы создали в этом руководстве.
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' ),
}
};
Создайте два новых файла в своем решении:
/src/customizer.js/src/customizer.scss
Мы будем использовать их для создания нашего плагина.
Зарегистрируйте настройки и компоненты настройщика в PHP
Следуя инструкциям в предварительных условиях, откройте корневой PHP-файл плагина (в данном случае wholesome-plugin.php) и добавьте следующее:
Зарегистрируйте элемент управления настройщика
Нам нужно создать собственный элемент управления Customizer. Добавьте следующий код в свой файл, который будет отображать вызов, который выводит a <div>с идентификатором, к которому может подключиться наш 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 );
Внизу этого файла мы регистрируем элемент управления с помощью, register_control_typeчто позволяет нам получить доступ к этому элементу управления в JavaScript.
Зарегистрируйте настройки настройщика
В этом же блоке кода нам нужно прописать настройки, которые мы собираемся использовать в кастомайзере. Для этого добавьте следующий блок кода после строки, которая выполняет 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' ] );
Обратите внимание, что первые два параметра будут доступны через get_theme_modфункцию по умолчанию, тогда как два нижних параметра передаются в аргументах 'type' => 'option', что означает, что эти параметры будут зарегистрированы как уникальные поля в таблице параметров и будут доступны через get_option.
Для этих двух нижних настроек нам нужно убедиться, что они зарегистрированы через register_settingи show_in_restдля trueкаждого из них, чтобы к ним можно было получить доступ через Гутенберг.
Зарегистрируйте настройки «Опции»
Зарегистрируйте две нижние настройки настройщика (к которым мы будем обращаться через get_option) с помощью следующего блока кода:
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 );
Поставить сценарии в очередь
Наконец, зарегистрируйте ресурсы настройщика с помощью следующего кода (дополнительную информацию см. в руководстве по добавлению точек входа ).
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 );
Обратите внимание, что мы также используем wp_localize_scriptв этом блоке кода для передачи настроек, к которым мы будем получать доступ, get_theme_modв JavaScript.
Давайте посмотрим на эту часть кода более подробно:
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', '' ),
]
);
Обратите внимание, что мы используем те же ключи настроек, которые мы зарегистрировали $wp_customize->add_settingранее при регистрации настроек настройщика (те, которые не были настроены для использования параметра).
Создайте панель настройки в JavaScript
Добавьте следующий код в /src/customizer.jsфайл.
По большей части этот код (Appкомпонент) является переработкой кода из руководства «Создать страницу настроек ». Он использует те же компоненты и по-прежнему устанавливает параметры stateиз API настроек, но избавляется от кнопки сохранения и области уведомлений.
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>) }
}
Одно заметное изменение — внутри componentDidMount, где настройки загружаются из API. Обратите внимание, что доступ к двум настройкам, доступ к которым будет осуществляться через get_theme_mod, осуществляется с помощью переменной WholesomePluginSettings, которую мы создали в wp_localize_scriptфункции ранее в этом руководстве.
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,
} );
Обработать сохранение
Нам действительно не нужно делать ничего особенного, чтобы справиться с изменениями. Единственное, что нам нужно сделать, это подключиться customizeи позволить настройщику WordPress обработать сохранение, например:
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
В этом примере onChangeпередается значение поля ввода (в данном случае наше <select>) и обновляется состояние, а затем передается это значение в настройщик через wp.customize.value()функцию.
Создайте раздел и панель Customizer с помощью JavaScript
Внизу /src/customizer.jsфайла добавьте следующий код:
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
);
}
});
Этот код создает раздел Customizer и Panel в JavaScript.
Код также добавляет наш пользовательский элемент управления Gutenberg путем регистрации new customize.Controlкласса и передачи typeс тем же именем, которое typeмы установили при регистрации элемента управления в PHP.
Мы также используем этот код, чтобы найти <div>зарегистрированный в нашем пользовательском элементе управления Gutenberg и визуализировать компоненты Gutenberg в этот файл <div>.
Добавьте SCSS
Нам нужно немного привести панель в порядок, добавив следующий SCSS в /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;
}
}
}
Просмотр настройщика
Перейдите к настройщику WordPress и просмотрите панель настройщика Gutenberg в действии:
Настройщик с компонентами Gutenberg
- Посмотрите на создание вложенных дочерних блоков с
InnerBlocksкомпонентом - Взгляните на использование метаполей сообщений в блоках Гутенберга.