{"id":228319,"date":"2022-10-16T15:37:00","date_gmt":"2022-10-16T12:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228319"},"modified":"2022-11-09T01:51:23","modified_gmt":"2022-11-08T22:51:23","slug":"andmete-salvestamise-valikute-kasutamine-wordpressi-plokiredaktoris-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/andmete-salvestamise-valikute-kasutamine-wordpressi-plokiredaktoris-gutenberg\/","title":{"rendered":"Andmete salvestamise valikute kasutamine WordPressi plokiredaktoris (Gutenberg)"},"content":{"rendered":"\n<p>Oleme varem uurinud WordPressi plokiredaktori (Gutenbergi) andmete salvestamist plokiatribuutidesse <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ja<\/a> postituse <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">metasse<\/a>, kuid kas teadsite, et saate WordPressi valikute tabelis salvestada ja sealt hankida, importides <code>api<\/code>kohast <code>@wordpress\/api<\/code>.<\/p>\n<p>Selles juhendis vaatleme, mida tavaliselt PHP-s kirjutaksite kui <code>update_option<\/code>ja <code>get_option<\/code>.<\/p>\n<p>Selle rakendamiseks peame \u00e4ra kasutama Reacti eluts\u00fckli eeliseid, seega vaatleme Reacti komponendi loomist, importides <code>Component<\/code>saidilt <code>@wordpress\/element<\/code>.<\/p>\n<h2>Eeldused<\/h2>\n<ul>\n<li>Olge tuttav <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi Gutenbergi pistikprogrammide loomisega<\/a><\/li>\n<li>Olge tuttav <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d\u00fcnaamiliste plokkide ja serveripoolse renderdamisega<\/a><\/li>\n<li>Saate aru, kuidas saate <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergis metakaste luua<\/a><\/li>\n<\/ul>\n<p>See viimane n\u00f5ue on kasulik kasutajaliidese jaoks, mida me selles juhendis kasutame, kuid reaalmaailma rakendustes kasutaksite seda meetodit t\u00f5en\u00e4oliselt k\u00fclgribal v\u00f5i valikute lehel.<\/p>\n<h2>Registreerige suvandid PHP-s<\/h2>\n<p>Enne kui saame JavaScriptis suvandit kasutada, peame veenduma, et oleme selle PHP-s registreerinud <code>register_setting<\/code>ja <code>show_in_rest<\/code>argumendiks on seatud t\u00f5ene.<\/p>\n<p>J\u00e4rgides <a href=\"https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">d\u00fcnaamilise blokeerimise juhendit<\/a>, avage pistikprogrammi PHP juurfail (antud juhul <code>wholesome-plugin.php<\/code>) ja lisage p\u00e4rast k\u00f5iki muid funktsioone selle faili allossa j\u00e4rgmine kood:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_settings() {\n    register_setting(\n        'wholesomecode_wholesome_plugin_settings',\n        'wholesomecode_wholesome_plugin_example_text',\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' );\n<\/code><\/pre>\n<p>See kood registreerib metav\u00e4lja, mida kutsutakse valikur\u00fchma <code>wholesomecode_wholesome_plugin_block_text<\/code>jaoks <code>wholesomecode_wholesome_plugin_settings<\/code>. Samuti tagab see, et REST API p\u00e4\u00e4seb sellele metav\u00e4ljale juurde, kui <code>show_in_rest<\/code>v\u00e4\u00e4rtuseks on seatud t\u00f5ene.<\/p>\n<h2>Looge komponent<\/h2>\n<p>Avage <code>\/src\/edit.js<\/code>fail ja me muudame selle faili struktuuri m\u00f5nev\u00f5rra, et saaksime v\u00e4ljastada oma <code>Component<\/code>.<\/p>\n<p>L\u00f5ika ja kleepige kogu see koodiplokk <code>\/src\/edit.js<\/code>faili, k\u00e4sitleme hetkega, mida see teeb:<\/p>\n<pre><code>import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport {\n    Panel,\n    PanelBody,\n    TextControl,\n} from '@wordpress\/components';\nimport { Component } from '@wordpress\/element';\n\nimport '.\/editor.scss';\n\nclass OptionsExample extends Component {\n    constructor() {\n        super( ...arguments );\n        this.state = { exampleText: '' };\n    }\n\n    render() {\n        const { exampleText } = this.state;\n        return (&lt;Panel&gt;\n                &lt;PanelBody\n                    title={ __( 'Example Meta Box', '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; this.setState( { exampleText }) }\n                        value={ exampleText }\n                    \/&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/Panel&gt;) }\n}\n\nexport default function Edit( props) {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;OptionsExample { ...props }\/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>V\u00f5ib-olla tunnete \u00e4ra, et meie loodud kasutajaliides on t\u00e4pselt sama, mis on <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Gutenbergi metaboksi<\/a> juhendist, kus kasutasime post meta atribuute. Samuti v\u00f5ite m\u00e4rgata, et me ei saa ega seadista veel suvandite abil teavet ja selle asemel kasutame lihtsalt komponenti <code>state<\/code>.<\/p>\n<h3>Riigi kasutamine<\/h3>\n<p>P\u00f5hjus, miks oleme loonud kohandatud komponendi ja seej\u00e4rel selle oma <code>Edit<\/code>funktsiooni andnud, on see, et saaksime olekut \u00e4ra kasutada. Oleme seda teinud, sest:<\/p>\n<ul>\n<li>Loome funktsiooni API-st valikute laadimiseks ja peame selle olekusse salvestama, et meie komponendid saaksid seda lugeda<\/li>\n<li>Me ei soovi, et API v\u00e4rskendaks suvandeid kohe, kui tekst meie tekstikastis muutub, seega vajame funktsiooni, mis salvestab oleku API kaudu suvanditesse, kui postitus on salvestatud<\/li>\n<\/ul>\n<p>Oleku kasutamine on \u00fcsna lihtne. Konstruktoris l\u00e4htestame oleku j\u00e4rgmiselt:<\/p>\n<pre><code>this.state = { exampleText: '' };\n<\/code><\/pre>\n<p>Ja komponendis p\u00e4\u00e4seme sellele ligi sarnaselt sellega, kuidas oleme eelmises juhendis atribuutidele juurde p\u00e4\u00e4senud:<\/p>\n<pre><code>const { exampleText } = this.state;\n<\/code><\/pre>\n<p>Erinevus seisneb selles, et meie <code>onChange<\/code>meetodil kasutame selle asemel, <code>setAttributes<\/code>et kasutada <code>this.setState<\/code>.<\/p>\n<h3>Suvandite hankimine API-st<\/h3>\n<p>Impordi dokumendi \u00fclaosas <code>api<\/code>asukohast <code>@wordpress\/api<\/code>:<\/p>\n<pre><code>import api from '@wordpress\/api';\n<\/code><\/pre>\n<p>Lisage sellele, kus olek on l\u00e4htestatud, uus atribuut <code>isAPILoaded<\/code>. Vajame seda tagamaks, et me ei prooviks API-le juurde p\u00e4\u00e4seda ega komponenti renderdada enne, kui API on laaditud.<\/p>\n<pre><code>this.state = {\n  exampleText: '',\n  isAPILoaded: false,\n};\n<\/code><\/pre>\n<p>N\u00fc\u00fcd lisage loodud komponendi sisse konstruktori alla koodiplokk nimega <code>componentDidMount<\/code>. See on Reacti eluts\u00fckli meetod, mida kutsutakse v\u00e4lja p\u00e4rast komponendi lisamist DOM-i.<\/p>\n<p>Sellesse koodiplokki lisage j\u00e4rgmine:<\/p>\n<pre><code>componentDidMount() {\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          exampleText: response[ 'wholesomecode_wholesome_plugin_example_text' ],\n          isAPILoaded: true,\n        } );\n      } );\n    }\n  } );\n}\n<\/code><\/pre>\n<p>Siin p\u00e4\u00e4seme juurde valikule, mille <code>register_setting<\/code>funktsiooniga varem registreerisime.<\/p>\n<p>See koodiplokk teeb j\u00e4rgmist:<\/p>\n<ul>\n<li>Hangi s\u00e4tted WordPressi Guttenbergi seadete API-st.<\/li>\n<li>Saab <code>isAPILoaded<\/code>riigilt<\/li>\n<li>Kui API-d pole laaditud, hangib see seaded API-st jaotises a<code>response<\/code><\/li>\n<li>Seej\u00e4rel m\u00e4\u00e4rame oleku v\u00e4rskendama olekut valikuga, millele tahame juurde p\u00e4\u00e4seda, ja m\u00e4\u00e4rame <code>isAPILoaded<\/code>olekuks t\u00f5ene<\/li>\n<\/ul>\n<h3>Peatage ploki renderdamine ilma seadeteta<\/h3>\n<p>Me ei taha, et meie blokk renderdataks enne, kui seaded on t\u00e4idetud. Selle eest hoolitsemiseks saame importida PlaceHolderi ja Spinneri aadressilt <code>$wordpress\/components<\/code>:<\/p>\n<pre><code>import {\n    Panel,\n    PanelBody,\n    Placeholder,\n    Spinner,\n    TextControl,\n} from '@wordpress\/components';\n<\/code><\/pre>\n<p>Seej\u00e4rel veenduge komponentide renderdamismeetodis, et saate <code>isAPILoaded<\/code>olekust ja v\u00e4ljastage <code>Placeholder<\/code>ja <code>Spinner<\/code>kui see pole:<\/p>\n<pre><code>const {\n  exampleText,\n  isAPILoaded,\n} = this.state;\n\nif (! isAPILoaded) {\n  return (&lt;Placeholder&gt;\n      &lt;Spinner \/&gt;\n    &lt;\/Placeholder&gt;\n  );\n}\n<\/code><\/pre>\n<p>Nii, kui suvandid pole laaditud, saame kena kohahoidja kuni komponendi laadimiseni:<\/p>\n<p>Kohat\u00e4ide ja Spinner<\/p>\n<h3>Haakimine Gutenbergiga Save&#8217;i kaudu<\/h3>\n<p>N\u00fc\u00fcd, kui loeme suvandite tabelist valikuid, vajame nende muutmisel v\u00f5imalust need suvandid salvestada. Selleks l\u00e4heme <code>subscribe<\/code>WordPressi Gutenbergi andmesalve, mis annab teada, kui midagi on muutunud.<\/p>\n<p>Seda kasutades loome postituse salvestamise jaoks kuulaja ja salvestame oma seaded, kui see juhtub.<\/p>\n<p>Selle importimiseks <code>subscribe<\/code>ja <code>select<\/code>alates <code>@wordpress\/data<\/code>.<\/p>\n<pre><code>import { select, subscribe } from '@wordpress\/data';\n<\/code><\/pre>\n<p><code>componentDidMount<\/code>Seej\u00e4rel kirjutage koodiploki \u00fclaossa j\u00e4rgmine tekst:<\/p>\n<pre><code>subscribe(() =&gt; {\n  const { exampleText } = this.state;\n\n  const isSavingPost = select('core\/editor').isSavingPost();\n  const isAutosavingPost = select('core\/editor').isAutosavingPost();\n\n  if (isAutosavingPost) {\n    return;\n  }\n\n  if (! isSavingPost) {\n    return;\n  }\n\n  const settings = new api.models.Settings( {\n    [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n  } );\n  settings.save();\n});\n<\/code><\/pre>\n<p>Kood teeb j\u00e4rgmist:<\/p>\n<ul>\n<li>Kontrollib, kas postitust salvestatakse<\/li>\n<li>Kontrollige, kas salvestamine on automaatne salvestamine<\/li>\n<li>Kui postitust salvestatakse ja see pole automaatne salvestamine, l\u00fckake uued s\u00e4tted seadete API-sse<\/li>\n<li>K\u00e4ivitage seadete API salvestamine.<\/li>\n<\/ul>\n<h3>V\u00e4ike h\u00e4kkimine<\/h3>\n<p>V\u00f5iksime oma koodi selliseks j\u00e4tta, kuid kuna me paneme oma s\u00e4tted plokki, mitte k\u00fclgriba v\u00f5i muusse redaktori komponenti, siis kui muudame \u00fchte suvanditest ja ei midagi muud redaktoris, siis nupp &#8216;Salvesta&#8217; ei t\u00f6\u00f6ta. aktiivseks muutuda.<\/p>\n<p>Seda seet\u00f5ttu, et me ei kasuta <code>setAttributes<\/code>ega muuda ploki tegelikku koodi.<\/p>\n<p>Saame sellest m\u00f6\u00f6da minna, redigeerides lihtsalt postituse teist osa v\u00f5i lisades <code>TextControl<\/code>koodi veidi h\u00e4kki:<\/p>\n<pre><code>onChange={ (exampleText) =&gt; { this.setState( { exampleText } ); setAttributes( { exampleText }) } }\n<\/code><\/pre>\n<p>Pidades meeles panna see koodirida renderdamismeetodi \u00fclaossa, et sellest eraldada <code>setAttributes<\/code>( <code>props<\/code>kuna me kasutame komponenti, p\u00e4\u00e4seme rekvisiitidele juurde, mis erinevad <code>this<\/code>.<\/p>\n<pre><code>const { setAttributes } = this.props;\n<\/code><\/pre>\n<p>N\u00fc\u00fcd, kui muudame oma atribuuti, muutub v\u00f5ltsatribuut, mis paneb toimetaja arvama, et saame postituse salvestada.<\/p>\n<p>See on pisut r\u00e4pane, kuid selle kasutusjuhtumi jaoks teeb see seda, mida vajame.<\/p>\n<h3>Kogu <code>Edit<\/code>kood<\/h3>\n<p>Siin on kogu <code>Edit<\/code>meetodi jaoks vajalik kood:<\/p>\n<p>i ` import {} alates &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/i18n&#8217;; import api alates &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/api&#8217;; import { useBlockProps } saidist &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/block-editor&#8217;; import { Panel, PanelBody, Placeholder, Spinner, TextControl, } from &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/components&#8217;; import { select, subscribe } from &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/data&#8217;; import { Component } from &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/element&#8217;;<\/p>\n<p>import &#8216;.\/editor.scss&#8217;;<\/p>\n<p>class OptionsExample extends Component { konstruktor() { super( \u2026argumendid );<\/p>\n<pre><code>    this.state = {\n        exampleText: '',\n        isAPILoaded: false,\n    };\n}\n\ncomponentDidMount() {\n\n    subscribe( () =&gt; {\n        const { exampleText } = this.state;\n\n        const isSavingPost = select('core\/editor').isSavingPost();\n        const isAutosavingPost = select('core\/editor').isAutosavingPost();\n\n        if (isAutosavingPost) {\n            return;\n        }\n\n        if (! isSavingPost) {\n            return;\n        }\n\n        const settings = new api.models.Settings( {\n            [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n        } );\n        settings.save();\n    });\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                    exampleText: response[ 'wholesomecode_wholesome_plugin_example_text' ],\n                    isAPILoaded: true,\n                } );\n            } );\n        }\n    } );\n}\n\nrender() {\n    const {\n        exampleText,\n        isAPILoaded,\n    } = this.state;\n\n    const { setAttributes } = this.props;\n\n    if (! isAPILoaded) {\n        return (&lt;Placeholder&gt;\n                &lt;Spinner \/&gt;\n            &lt;\/Placeholder&gt;\n        );\n    }\n\n    return (&lt;Panel&gt;\n            &lt;PanelBody\n                title={ __( 'Example Meta Box', 'wholesomecode') }\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; { this.setState( { exampleText } ); setAttributes( { exampleText }) } }\n                    value={ exampleText }\n                \/&gt;\n            &lt;\/PanelBody&gt;\n        &lt;\/Panel&gt;) }\n<\/code><\/pre>\n<p>}<\/p>\n<p>ekspordi vaikefunktsioon Redigeeri( rekvisiidid) { return (<\/p>\n<p>); }<\/p>\n<pre><code>\n### Remove the Attributes\n\nOption up `src\/index.js` and remove the attributes block that we placed there in the previous guides. We are not storing any attributes, the data will be pushed into and retrieved from the options table.\n\nRender the Output\n\nBecause we have saved our attribute as settings in the WordPress options table, we could output this anywhere in WordPress using `get_option`:\n<\/code><\/pre>\n<p>get_option( &#8216;wholesomecode_wholesome_plugin_block_text&#8217;, &quot; );<\/p>\n<pre><code>\nContinuing from the [Dynamic Block guide](https:\/\/wholesomecode.ltd\/guides\/php-render-block-wordpress-gutenberg\/), let's see how we can access this attribute on the server side in PHP.\n\nWith this in mind, let\u2019s update our `register_block_type` to output the option:\n<\/code><\/pre>\n<p>register_block_type( &#8216;wholesomecode\/wholesome-plugin&#8217;, array( &#8216;editor_script&#8217; =&gt; &#8216;wholesomecode-wholesome-plugin-block-editor&#8217;, &#8216;editor_style&#8217; =&gt; &#8216;wholesomecode-wholesome-plugin-block-editor&#8217;, &#8216;render_call &gt; function( $atribuudid, $sisu) { $example_text = get_option( &#8216;wholesomecode_wholesome_plugin_example_text&#8217; ); return &quot;<\/p>\n<p>$example_text<\/p>\n<p>&quot;; }, &#8216;style&#8217; =&gt; &#8216;wholesomecode-wholesome-plugin-block&#8217;,) );<\/p>\n<pre><code>\nNote that we no longer need to register the `attributes` here, because we are only accessing the post meta field via the `get_post_meta` function.\n\n5.  \nUsing the Block\n--------------------\n\nPutting it all together, let\u2019s see the block in action:\n\n![Using the block editor for settings and options](https:\n\nExtra: Add Some More Fields\n-----------------------------\n\nIn the extra steps of the Custom Meta Box guide, we added in some extra fields. Let\u2019s update the `Edit` method to include those same fields (note that I have omitted the hack):\n<\/code><\/pre>\n<p>import {} alates &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/i18n&#8217;; import api alates &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/api&#8217;; import { useBlockProps } saidist &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/block-editor&#8217;; import { Panel, PanelBody, PanelRow, Placeholder, SelectControl, Spinner, TextControl, ToggleControl, } from &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/components&#8217;; import { select, subscribe } from &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/data&#8217;; import { Component } from &#8216; <a href=\"https:\/\/hashnode.com\/@wordpress\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">@wordpress<\/a> \/element&#8217;;<\/p>\n<p>import &#8216;.\/editor.scss&#8217;;<\/p>\n<p>class OptionsExample extends Component { konstruktor() { super( \u2026argumendid );<\/p>\n<pre><code>    this.state = {\n        exampleSelect: '',\n        exampleText: '',\n        exampleText2: '',\n        exampleText3: '',\n        exampleToggle: false,\n        isAPILoaded: false,\n    };\n}\n\ncomponentDidMount() {\n\n    subscribe( () =&gt; {\n        const {\n            exampleSelect,\n            exampleText,\n            exampleText2,\n            exampleText3,\n            exampleToggle,\n        } = this.state;\n\n        const isSavingPost = select('core\/editor').isSavingPost();\n        const isAutosavingPost = select('core\/editor').isAutosavingPost();\n\n        if (isAutosavingPost) {\n            return;\n        }\n\n        if (! isSavingPost) {\n            return;\n        }\n\n        const settings = new api.models.Settings( {\n            [ 'wholesomecode_wholesome_plugin_example_select' ]: exampleSelect,\n            [ 'wholesomecode_wholesome_plugin_example_text' ]: exampleText,\n            [ 'wholesomecode_wholesome_plugin_example_text_2' ]: exampleText2,\n            [ 'wholesomecode_wholesome_plugin_example_text_3' ]: exampleText3,\n            [ 'wholesomecode_wholesome_plugin_example_toggle' ]: exampleToggle,\n        } );\n        settings.save();\n    });\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: response[ 'wholesomecode_wholesome_plugin_example_select' ],\n                    exampleText: response[ '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\nrender() {\n    const {\n        exampleSelect,\n        exampleText,\n        exampleText2,\n        exampleText3,\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;Panel&gt;\n            &lt;PanelBody\n                title={ __( 'Example Meta Box', '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; this.setState( { exampleSelect }) }\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;TextControl\n                    help={ __( 'This is an example text field.', 'wholesome-plugin') }\n                    label={ __( 'Example Text', 'wholesome-plugin') }\n                    onChange={ (exampleText) =&gt; this.setState( { exampleText }) }\n                    value={ exampleText }\n                \/&gt;\n                &lt;PanelRow&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; this.setState( { exampleText2 }) }\n                        value={ exampleText2 }\n                    \/&gt;\n                    &lt;TextControl\n                        help={ __( 'This control is inline.', 'wholesome-plugin') }\n                        label={ __( 'Example Text 3', 'wholesome-plugin') }\n                        onChange={ (exampleText3) =&gt; this.setState( { exampleText3 }) }\n                        value={ exampleText3 }\n                    \/&gt;\n                &lt;\/PanelRow&gt;\n                &lt;ToggleControl\n                    checked={ exampleToggle }\n                    help={ __( 'An example toggle.', 'wholesome-plugin') }\n                    label={ __( 'Example Toggle', 'wholesome-plugin') }\n                    onChange={ (exampleToggle) =&gt; this.setState( { exampleToggle }) }\n                \/&gt;\n            &lt;\/PanelBody&gt;\n        &lt;\/Panel&gt;) }\n<\/code><\/pre>\n<p>}<\/p>\n<p>ekspordi vaikefunktsioon Redigeeri( rekvisiidid) { return (<\/p>\n<p>); } `<\/p>\n<p>Siin on tulemus:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169009-61e7fab7b579e.png\" alt=\"Andmete salvestamise valikute kasutamine WordPressi plokiredaktoris (Gutenberg)\" \/>Lisavalikud<\/p>\n<ul>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">komponendiga<\/a> <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pesastatud alamplokkide loomist<code>InnerBlocks<\/code><\/a><\/li>\n<li>Vaadake <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">post-meta v\u00e4ljade kasutamist Gutenbergi plokkides<\/a><\/li>\n<li>Heitke pilk <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-custom-meta-boxes-using-the-wordpress-block-editor-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kohandatud metakastide loomisele Gutenbergis<\/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>Oleme varem uurinud WordPressi plokiredaktori (Gutenbergi) andmete salvestamist plokiatribuutides ja postituse metas, kuid kas teadsite, et saate WordPressis salvestada ja sealt alla laadida&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223685,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[718,937,894,842,802,863],"tags":[1165],"class_list":["post-228319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-gutenberg-4","category-kood","category-opetused","category-php-4","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228319"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228319\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/223685"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}