I vår senaste guide tittade vi på att skapa en inställningssida med WordPress Block Editor (Gutenberg) komponenter. I den här guiden kommer vi att ta det ännu längre och använda Gutenberg-komponenter i WordPress Customizer.
Customizer med Gutenberg-komponenter
Förutsättningar
- Har följt guiden Skapa ett plugin för WordPress Block Editor (Gutenberg) .
- Har följt guiden Använda alternativ för att lagra data i WordPress Block Editor (Gutenberg) .
- Har följt Lägg till ingångspunkter till WordPress Create Block Script- guiden
- Har följt guiden Skapa en inställningssida med WordPress Block Editor (Gutenberg) Components guide
Skapa en Entry Point i webpack
Efter att ha lagt till ingångspunkter till WordPress Skapa blockskript- guiden, skapa en ny ingångspunkt i den utökade webpack.config.jsfilen som du skapade i den guiden.
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' ),
}
};
Skapa två nya filer i din lösning:
/src/customizer.js/src/customizer.scss
Vi kommer att använda dessa för att skapa vårt plugin.
Registrera Customizer Settings och Components i PHP
Följ guiderna i förutsättningarna, öppna upp root-PHP-filen för plugin-programmet (i det här fallet wholesome-plugin.php) och lägg till följande:
Registrera Customizer Control
Vi måste skapa en anpassad Customizer-kontroll. Lägg till följande kod till din fil som gör ett anrop som matar ut a <div>med ett ID som vårt JavaScript kan kopplas in i.
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 );
Längst ner i den här filen registrerar vi kontrollen med register_control_typesom tillåter oss att komma åt denna kontroll i JavaScript.
Registrera Customizer Settings
I samma kodblock måste vi registrera inställningarna som vi ska använda i Customizer. För att göra det lägg till följande kodblock efter raden som gör 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' ] );
Observera att de två första inställningarna kommer att vara tillgängliga via standardfunktionen get_theme_mod, medan de två nedersta inställningarna passerar in i argumenten 'type' => 'option'vilket innebär att dessa inställningar kommer att registreras som unika fält i alternativtabellen och kommer att vara tillgängliga via get_option.
För dessa två nedersta inställningar måste vi se till att de registreras via register_settingoch show_in_resttill trueför var och en, så att de kan nås via Gutenberg.
Registrera "Alternativ"-inställningarna
Registrera de två nedre anpassarinställningarna (som vi kommer åt via get_option) med följande kodblock:
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 );
Ställ skripten i kö
Slutligen registrerar du anpassade tillgångar med följande kod (se guiden Lägg till startpunkter för mer information).
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 );
Observera att vi även använder wp_localize_scripti detta kodblock för att skicka inställningarna som vi kommer åt via get_theme_modtill JavaScript.
Låt oss ta en titt på den här delen av koden mer detaljerat:
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', '' ),
]
);
Observera att vi använder samma inställningsnycklar som vi registrerade när vi registrerade anpassarinställningarna med $wp_customize->add_settingtidigare (de som inte var konfigurerade att använda ett alternativ).
Bygg Customizer Panel i JavaScript
Lägg till följande kod i /src/customizer.jsfilen.
För det mesta är den här koden (Appkomponenten) en omarbetning av koden från guiden Skapa inställningar. Den använder samma komponenter och ställer fortfarande in statefrån Settings API, men tar bort spara-knappen och meddelandeområdet.
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>) }
}
En anmärkningsvärd förändring är den inuti componentDidMount, där inställningarna laddas från API:et. Observera att de två inställningarna som kommer att nås via get_theme_modnås med variabeln WholesomePluginSettingssom vi skapade i wp_localize_scriptfunktionen tidigare i denna guide.
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,
} );
Hantera Spara
Vi behöver egentligen inte göra något speciellt för att hantera förändringarna. Det enda vi behöver göra är att koppla in customizeoch låta WordPress Customizer hantera lagringen, till exempel:
onChange={ (exampleSelect) => {
this.setState( { exampleSelect } );
customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);
}}
I det här exemplet onChangeskickar värdet för inmatningsfältet (i detta fall vår <select>) och uppdaterar tillståndet och skickar sedan detta värde till Customizer via wp.customize.value()funktionen.
Bygg anpassasektionen och panelen med JavaScript
Lägg till följande kod längst ner i /src/customizer.jsfilen:
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
);
}
});
Den här koden skapar Customizer-sektionen och panelen i JavaScript.
Koden lägger också till vår anpassade Gutenberg-kontroll genom att registrera en new customize.Controlklass och skicka in den typemed samma namn som typevi angav när vi registrerade kontrollen i PHP.
Vi använder också den här koden för att hitta de <div>vi registrerade i vår anpassade Gutenberg-kontroll och återge Gutenberg-komponenterna till detta <div>.
Lägg till SCSS
Vi måste städa upp panelen lite genom att lägga till följande 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;
}
}
}
Visa Customizer
Navigera till WordPress Customizer och se Gutenberg Customizer Panel i aktion:
Customizer med Gutenberg-komponenter
- Ta en titt på att skapa kapslade underordnade block med
InnerBlockskomponenten - Ta en titt på hur du använder post-metafält i Gutenberg-block