{"id":228938,"date":"2022-10-19T16:13:00","date_gmt":"2022-10-19T13:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228938"},"modified":"2022-11-09T04:52:48","modified_gmt":"2022-11-09T01:52:48","slug":"luo-mukautuspaneeli-kaeyttaemaellae-wordpress-block-editor-gutenberg-komponentteja","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/luo-mukautuspaneeli-kaeyttaemaellae-wordpress-block-editor-gutenberg-komponentteja\/","title":{"rendered":"Luo mukautuspaneeli k\u00e4ytt\u00e4m\u00e4ll\u00e4 WordPress Block Editor (Gutenberg) -komponentteja"},"content":{"rendered":"\n<p>Edellisess\u00e4 oppaassamme tarkastelimme <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">asetussivun luomista WordPress Block Editor (Gutenberg) -komponenttien avulla<\/a>. T\u00e4ss\u00e4 oppaassa viemme sen viel\u00e4 pidemm\u00e4lle ja k\u00e4yt\u00e4mme Gutenberg-komponentteja WordPress Customizerin sis\u00e4ll\u00e4.<\/p>\n<p>Mukauttaja Gutenberg-komponenteilla<\/p>\n<h2>Edellytykset<\/h2>\n<ul>\n<li>Olet noudattanut <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pluginin luominen WordPress Block Editor (Gutenberg)<\/a> -opasta<\/li>\n<li>Olet noudattanut WordPress Block Editor (Gutenberg) -oppaan <a href=\"https:\/\/wholesomecode.ltd\/guides\/options-settings-data-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tietojen tallennusvaihtoehtojen k\u00e4ytt\u00e4mist\u00e4<\/a><\/li>\n<li>Olet noudattanut <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lis\u00e4\u00e4 aloituspisteit\u00e4 WordPressin Luo Block Script<\/a> -oppaaseen<\/li>\n<li>On seurannut <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Luo asetussivu k\u00e4ytt\u00e4m\u00e4ll\u00e4 WordPress Block Editor (Gutenberg) -komponentin<\/a> opasta<\/li>\n<\/ul>\n<h2>Luo aloituspiste verkkopaketissa<\/h2>\n<p>Jatkamalla <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Lis\u00e4\u00e4 aloituspisteit\u00e4 WordPressin Luo lohkokomentosarja -oppaaseen<\/a>, luo uusi aloituspiste laajennettuun <code>webpack.config.js<\/code>tiedostoon, jonka loit oppaassa.<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst path = require( 'path' );\n\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        ...defaultConfig.entry,\n        customizer: path.resolve( process.cwd(), 'src', 'customizer.js' ),\n    }\n};\n<\/code><\/pre>\n<p>Luo kaksi uutta tiedostoa ratkaisuusi:<\/p>\n<ul>\n<li><code>\/src\/customizer.js<\/code><\/li>\n<li><code>\/src\/customizer.scss<\/code><\/li>\n<\/ul>\n<p>K\u00e4yt\u00e4mme n\u00e4it\u00e4 lis\u00e4osien luomiseen.<\/p>\n<h2>Rekister\u00f6i mukauttajaasetukset ja komponentit PHP:ss\u00e4<\/h2>\n<p>Edellytyksen\u00e4 olevien ohjeiden mukaisesti avaa laajennuksen (t\u00e4ss\u00e4 tapauksessa <code>wholesome-plugin.php<\/code>) PHP-juuritiedosto ja lis\u00e4\u00e4 seuraava:<\/p>\n<h3>Rekister\u00f6i Customizer Control<\/h3>\n<p>Meid\u00e4n on luotava mukautettu Customizer-hallinta. Lis\u00e4\u00e4 tiedostoosi seuraava koodi, joka muodostaa kutsun, joka tulostaa a <code>&lt;div&gt;<\/code>:n tunnuksella, johon JavaScript voi liitty\u00e4.<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_customizer_register( $wp_customize) {\n\n    class Wholesome_Plugin_Gutenberg_Control extends WP_Customize_Control {\n\n        public $type = 'wholesome-plugin-gutenberg-control';\n\n        public function render_content() {}\n\n        public function content_template() {\n            ?&gt;\n                &lt;div id=\"wholesome-plugin-customizer\"&gt;&lt;\/div&gt;\n            &lt;?php\n        }\n    }\n\n    $wp_customize-&gt;register_control_type( 'Wholesome_Plugin_Gutenberg_Control' );\n}\nadd_action( 'customize_register', 'wholesomecode_wholesome_plugin_customizer_register', 10 );\n<\/code><\/pre>\n<p>T\u00e4m\u00e4n tiedoston alareunassa rekister\u00f6imme ohjausobjektin kanssa, <code>register_control_type<\/code>jonka avulla voimme k\u00e4ytt\u00e4\u00e4 t\u00e4t\u00e4 ohjausobjektia JavaScriptiss\u00e4.<\/p>\n<h3>Rekister\u00f6i mukauttajaasetukset<\/h3>\n<p>Samassa koodilohkossa meid\u00e4n on rekister\u00f6it\u00e4v\u00e4 asetukset, joita aiomme k\u00e4ytt\u00e4\u00e4 mukauttajassa. Voit tehd\u00e4 t\u00e4m\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 seuraavan koodilohkon rivin per\u00e4\u00e4n, joka tekee <code>register_control_type<\/code>.<\/p>\n<pre><code>\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_select' );\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_text' );\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_text_2', [ 'type' =&gt; 'option' ] );\n$wp_customize-&gt;add_setting( 'wholesomecode_wholesome_plugin_example_toggle', [ 'type' =&gt; 'option' ] );\n<\/code><\/pre>\n<p>Huomaa, ett\u00e4 kaksi ensimm\u00e4ist\u00e4 asetusta ovat k\u00e4ytett\u00e4viss\u00e4 oletustoiminnon kautta <code>get_theme_mod<\/code>, kun taas kaksi alinta asetusta v\u00e4litt\u00e4v\u00e4t argumentit <code>'type' =&gt; 'option'<\/code>, mik\u00e4 tarkoittaa, ett\u00e4 n\u00e4m\u00e4 asetukset rekister\u00f6id\u00e4\u00e4n yksil\u00f6llisin\u00e4 kenttin\u00e4 asetustaulukossa ja niihin p\u00e4\u00e4see k\u00e4siksi <code>get_option<\/code>.<\/p>\n<p>N\u00e4ille kahdelle alimmalle asetukselle meid\u00e4n on varmistettava, ett\u00e4 ne on rekister\u00f6ity kautta <code>register_setting<\/code>ja -kohtaan, <code>show_in_rest<\/code>jotta <code>true<\/code>niit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 Gutenbergin kautta.<\/p>\n<h3>Rekister\u00f6i &#8217;Option&#8217;-asetukset<\/h3>\n<p>Rekister\u00f6i kaksi alinta mukautusasetusta (jotka p\u00e4\u00e4semme k\u00e4siksi <code>get_option<\/code>) seuraavalla koodilohkolla:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_settings() {\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_text_2',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_toggle',\n        [\n            'default'      =&gt; '',\n            'show_in_rest' =&gt; true,\n            'type'         =&gt; 'string',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_settings', 10 );\n<\/code><\/pre>\n<h3>Aseta komentosarjat jonoon<\/h3>\n<p>Rekister\u00f6i lopuksi mukauttajaresurssit seuraavalla koodilla (katso lis\u00e4tietoja <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Aloituspisteiden<\/a> lis\u00e4\u00e4misoppaasta).<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_customizer_scripts() {\n    $dir = __DIR__;\n\n    $script_asset_path = \"$dir\/build\/customizer.asset.php\";\n    if (! file_exists( $script_asset_path)) {\n        throw new Error(\n            'You need to run `npm start` or `npm run build` for the \"wholesomecode\/wholesome-plugin\" block first.'\n        );\n    }\n    $customizer_js = 'build\/customizer.js';\n    $script_asset  = require( $script_asset_path );\n    wp_enqueue_script(\n        'wholesomecode-wholesome-plugin-customizer-editor',\n        plugins_url( $customizer_js, __FILE__ ),\n        $script_asset['dependencies'],\n        $script_asset['version']\n    );\n    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );\n\n    wp_localize_script(\n        'wholesomecode-wholesome-plugin-customizer-editor',\n        'WholesomePluginSettings',\n        [\n            'wholesomecode_wholesome_plugin_example_select' =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),\n            'wholesomecode_wholesome_plugin_example_text'   =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),\n        ]\n    );\n\n    $customizer_css = 'build\/customizer.css';\n    wp_enqueue_style(\n        'wholesomecode-wholesome-plugin-customizer',\n        plugins_url( $customizer_css, __FILE__ ),\n        ['wp-components'],\n        filemtime( \"$dir\/$customizer_css\") );\n}\nadd_action( 'customize_controls_enqueue_scripts', 'wholesomecode_wholesome_plugin_customizer_scripts', 10 );\n<\/code><\/pre>\n<p>Huomaa, ett\u00e4 k\u00e4yt\u00e4mme <code>wp_localize_script<\/code>t\u00e4ss\u00e4 koodilohkossa my\u00f6s asetukset, joiden kautta p\u00e4\u00e4semme k\u00e4ytt\u00e4m\u00e4\u00e4n <code>get_theme_mod<\/code>JavaScripti\u00e4.<\/p>\n<p>Katsotaanpa t\u00e4t\u00e4 koodin osaa yksityiskohtaisemmin:<\/p>\n<pre><code>wp_localize_script(\n  'wholesomecode-wholesome-plugin-customizer-editor',\n  'WholesomePluginSettings',\n  [\n    'wholesomecode_wholesome_plugin_example_select' =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_select', '' ),\n    'wholesomecode_wholesome_plugin_example_text'   =&gt; get_theme_mod( 'wholesomecode_wholesome_plugin_example_text', '' ),\n  ]\n);\n<\/code><\/pre>\n<p>Huomaa, ett\u00e4 k\u00e4yt\u00e4mme samoja asetusn\u00e4pp\u00e4imi\u00e4, jotka rekister\u00f6itiin, kun rekister\u00f6imme mukauttamisasetukset <code>$wp_customize-&gt;add_setting<\/code>aiemmin (ne, joita ei ole m\u00e4\u00e4ritetty k\u00e4ytt\u00e4m\u00e4\u00e4n vaihtoehtoa).<\/p>\n<h2>Rakenna mukautuspaneeli JavaScriptill\u00e4<\/h2>\n<p>Lis\u00e4\u00e4 tiedostoon seuraava koodi <code>\/src\/customizer.js<\/code>.<\/p>\n<p>Suurimmaksi osaksi t\u00e4m\u00e4 koodi (<code>App<\/code>komponentti) on versio <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Luo asetussivu -oppaan<\/a> koodista. Se k\u00e4ytt\u00e4\u00e4 samoja komponentteja ja m\u00e4\u00e4ritt\u00e4\u00e4 edelleen <code>state<\/code>Asetukset-sovellusliittym\u00e4st\u00e4, mutta poistaa tallennuspainikkeen ja ilmoitusalueen.<\/p>\n<pre><code>import '.\/customizer.scss';\n\nconst { api } = wp;\n\nimport {\n    Panel,\n    PanelBody,\n    Placeholder,\n    SelectControl,\n    Spinner,\n    TextControl,\n    ToggleControl,\n} from '@wordpress\/components';\n\nimport {\n    Fragment,\n    render,\n    Component,\n} from '@wordpress\/element';\n\nimport { __ } from '@wordpress\/i18n';\n\nconst { customize } = wp;\n\nclass App extends Component {\n    constructor() {\n        super( ...arguments );\n\n        this.state = {\n            exampleSelect: '',\n            exampleText: '',\n            exampleText2: '',\n            exampleText3: '',\n            exampleToggle: false,\n            isAPILoaded: false,\n        };\n    }\n\n    componentDidMount() {\n\n        api.loadPromise.then(() =&gt; {\n            this.settings = new api.models.Settings();\n\n            const { isAPILoaded } = this.state;\n\n            if (isAPILoaded === false) {\n                this.settings.fetch().then( (response) =&gt; {\n                    this.setState( {\n                        exampleSelect: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_select' ],\n                        exampleText: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_text' ],\n                        exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],\n                        exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],\n                        exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),\n                        isAPILoaded: true,\n                    } );\n                } );\n            }\n        } );\n    }\n\n    render() {\n        const {\n            exampleSelect,\n            exampleText,\n            exampleText2,\n            exampleToggle,\n            isAPILoaded,\n        } = this.state;\n\n        if (! isAPILoaded) {\n            return (&lt;Placeholder&gt;\n                    &lt;Spinner \/&gt;\n                &lt;\/Placeholder&gt;\n            );\n        }\n\n        return (&lt;Fragment&gt;\n                &lt;div className=\"wholesome-plugin__main\"&gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body One', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;SelectControl\n                                help={ __( 'An example dropdown field.', 'wholesome-plugin') }\n                                label={ __( 'Example Select', 'wholesome-plugin') }\n                                onChange={ (exampleSelect) =&gt; {\n                                    this.setState( { exampleSelect } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);\n                                }}\n                                options={ [\n                                    {\n                                        label: __( 'Please Select...', 'wholesome-plugin' ),\n                                        value: '',\n                                    },\n                                    {\n                                        label: __( 'Option 1', 'wholesome-plugin' ),\n                                        value: 'option-1',\n                                    },\n                                    {\n                                        label: __( 'Option 2', 'wholesome-plugin' ),\n                                        value: 'option-2',\n                                    },\n                                ] }\n                                value={ exampleSelect }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Two', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;TextControl\n                                help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                                label={ __( 'Example Text', 'wholesome-plugin') }\n                                onChange={ (exampleText) =&gt; {\n                                    this.setState( { exampleText } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_text')(exampleText);\n                                }}\n                                value={ exampleText }\n                            \/&gt;\n\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Three', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;TextControl\n                                help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }\n                                label={ __( 'Example Text 2', 'wholesome-plugin') }\n                                onChange={ (exampleText2) =&gt; {\n                                    this.setState( { exampleText2 } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_text_2')(exampleText2);\n                                }}\n                                value={ exampleText2 }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                        &lt;PanelBody\n                            title={ __( 'Panel Body Four', 'wholesome-plugin') }\n                            icon=\"admin-plugins\"\n                        &gt;\n                            &lt;ToggleControl\n                                checked={ exampleToggle }\n                                help={ __( 'An example toggle.', 'wholesome-plugin') }\n                                label={ __( 'Example Toggle', 'wholesome-plugin') }\n                                onChange={ (exampleToggle) =&gt; {\n                                    this.setState( { exampleToggle } );\n                                    customize.value('wholesomecode_wholesome_plugin_example_toggle')(exampleToggle);\n                                }}\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/div&gt;\n            &lt;\/Fragment&gt;) }\n}\n<\/code><\/pre>\n<p>Yksi merkitt\u00e4v\u00e4 muutos on sis\u00e4ll\u00e4 <code>componentDidMount<\/code>, jossa asetukset ladataan API:sta. Huomaa, ett\u00e4 kahta asetusta, joihin p\u00e4\u00e4st\u00e4\u00e4n, <code>get_theme_mod<\/code>p\u00e4\u00e4st\u00e4\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4 muuttujaa <code>WholesomePluginSettings<\/code>, jonka loimme <code>wp_localize_script<\/code>funktiossa aiemmin t\u00e4ss\u00e4 oppaassa.<\/p>\n<pre><code>this.setState( {\n  exampleSelect: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_select' ],\n  exampleText: WholesomePluginSettings[ 'wholesomecode_wholesome_plugin_example_text' ],\n  exampleText2: response[ 'wholesomecode_wholesome_plugin_example_text_2' ],\n  exampleText3: response[ 'wholesomecode_wholesome_plugin_example_text_3' ],\n  exampleToggle: Boolean( response[ 'wholesomecode_wholesome_plugin_example_toggle' ] ),\n  isAPILoaded: true,\n} );\n<\/code><\/pre>\n<h3>K\u00e4sittele Tallenna<\/h3>\n<p>Meid\u00e4n ei todellakaan tarvitse tehd\u00e4 mit\u00e4\u00e4n erityist\u00e4 k\u00e4sitell\u00e4ksemme muutoksia. Ainoa asia, joka meid\u00e4n tarvitsee tehd\u00e4, on kytkeyty\u00e4 sis\u00e4\u00e4n <code>customize<\/code>ja antaa WordPress Customizerin hoitaa tallennus, esimerkiksi:<\/p>\n<pre><code>onChange={ (exampleSelect) =&gt; {\n  this.setState( { exampleSelect } );\n  customize.value('wholesomecode_wholesome_plugin_example_select')(exampleSelect);\n}}\n<\/code><\/pre>\n<p>T\u00e4ss\u00e4 esimerkiss\u00e4 <code>onChange<\/code>v\u00e4litt\u00e4\u00e4 sy\u00f6tt\u00f6kent\u00e4n arvon (t\u00e4ss\u00e4 tapauksessa meid\u00e4n <code>&lt;select&gt;<\/code>) ja p\u00e4ivitt\u00e4\u00e4 tilan ja v\u00e4litt\u00e4\u00e4 t\u00e4m\u00e4n arvon mukauttajalle <code>wp.customize.value()<\/code>funktion kautta.<\/p>\n<h3>Rakenna mukauttajaosio ja paneeli JavaScriptill\u00e4<\/h3>\n<p>Lis\u00e4\u00e4 tiedoston alaosaan <code>\/src\/customizer.js<\/code>seuraava koodi:<\/p>\n<pre><code>customize.bind('ready', function() {\n    const panelKey = 'wholesomecode-wholesome-plugin-customizer-panel';\n    const sectionKey = 'wholesomecode-wholesome-plugin-customizer-section';\n\n    customize.panel.add(\n        new customize.Panel( panelKey, {\n              description: __( 'Wholesome Plugin Example Panel', 'wholesome-plugin' ),\n            priority: 1000,\n            title: __( 'Wholesome Plugin Panel', 'wholesome-plugin' ),\n        })\n    );\n    customize.section.add(\n        new customize.Section( sectionKey, {\n            customizeAction: __( 'Wholesome Plugin \u25b8 Section', 'wholesome-plugin' ),\n            panel: panelKey,\n             title: __( 'Wholesome Plugin Section', 'wholesome-plugin' ),\n        })\n    );\n\n    customize.control.add(\n        new customize.Control( 'wholesomecode-wholesome-plugin-customizer-gutenberg-control', {\n            section: sectionKey,\n            type: 'wholesome-plugin-gutenberg-control',\n        })\n    );\n\n    const htmlOutput = document.getElementById( 'wholesome-plugin-customizer' );\n    if (htmlOutput) {\n        render(\n            &lt;App \/&gt;,\n            htmlOutput\n        );\n    }\n});\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 koodi luo mukautusosion ja paneelin JavaScriptiin.<\/p>\n<p>Koodi lis\u00e4\u00e4 my\u00f6s mukautetun Gutenberg-ohjausobjektin rekister\u00f6im\u00e4ll\u00e4 <code>new customize.Control<\/code>luokan ja v\u00e4litt\u00e4m\u00e4ll\u00e4 <code>type<\/code>sen samalla nimell\u00e4 kuin <code>type<\/code>m\u00e4\u00e4ritimme, kun rekister\u00f6imme ohjausobjektin PHP:ss\u00e4.<\/p>\n<p>K\u00e4yt\u00e4mme t\u00e4t\u00e4 koodia my\u00f6s l\u00f6yt\u00e4\u00e4ksemme <code>&lt;div&gt;<\/code>rekister\u00f6id\u00e4mme mukautettuun Gutenberg-hallintaomme ja tehd\u00e4ksemme Gutenberg-komponentit t\u00e4h\u00e4n <code>&lt;div&gt;<\/code>.<\/p>\n<h2>Lis\u00e4\u00e4 SCSS<\/h2>\n<p>Meid\u00e4n on siivottava paneelia hieman lis\u00e4\u00e4m\u00e4ll\u00e4 seuraava SCSS kohtaan <code>\/src\/customizer.scss<\/code>:<\/p>\n<pre><code>#wholesome-plugin-customizer {\n\n    .components-placeholder {\n        background: #f1f1f1;\n    }\n\n    .wholesome-plugin__main {\n        margin-left: auto;\n        margin-right: auto;\n\n        .components-panel {\n            background: none;\n            border: none;\n        }\n\n        .components-panel__body {\n            background: #ffffff;\n            border: 1px solid #e2e4e7;\n            margin-bottom: 1rem;\n        }\n    }\n\n    .components-base-control__help {\n        margin-top: .5rem;\n    }\n\n    .components-panel__row {\n        &gt; div {\n            flex-grow: 1;\n            margin-right: 1rem;\n\n            &amp;:last-of-type {\n                margin-right: 0;\n            }\n        }\n    }\n\n    .wholesome-plugin__notices {\n        .components-snackbar {\n            bottom: .5rem;\n            position: fixed;\n        }\n    }\n}\n<\/code><\/pre>\n<h2>Mukauttajan katselu<\/h2>\n<p>Siirry WordPress-muokkausohjelmaan ja tarkastele Gutenberg-muokkauspaneelia toiminnassa:<\/p>\n<p>Mukauttaja Gutenberg-komponenteilla<\/p>\n<ul>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sis\u00e4kk\u00e4isten alilohkojen luomiseen <code>InnerBlocks<\/code>komponentin avulla<\/a><\/li>\n<li>Tutustu <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-metakenttien k\u00e4ytt\u00f6\u00f6n Gutenberg-lohkoissa<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Edellisess\u00e4 oppaassamme tarkastelimme asetussivun luomista WordPress Block Editor (Gutenberg) -komponenttien avulla. T\u00e4ss\u00e4 oppaassa viemme sen viel\u00e4 pidemm\u00e4lle ja k\u00e4yt\u00e4mme Gutenbergin yhteisty\u00f6t\u00e4&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223674,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,719,895,813,917],"tags":[1166],"class_list":["post-228938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-kehittaejae","category-koodi","category-laajennuksia","category-muut","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228938"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228938\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223674"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}