InspectorControls<\/code>. Mida iganes sellesse komponenti paned, v\u00e4ljastatakse k\u00fclgribal, mitte ploki\/redaktorisse endasse. P\u00f5him\u00f5tteliselt saab funktsiooni tagastusse panna komponendi ja selle sisu igale poole edit<\/code>.<\/p>\nPeale selle saate s\u00e4tteid hallata k\u00fclgribal nii, nagu need olid ploki sees. Iga seade n\u00f5uab atribuuti ning atribuute laadite ja v\u00e4rskendate samal viisil.<\/p>\n
![\"Kohandatud](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50856030af.png\")
<\/a><\/p>\nVaatame k\u00f5igepealt, kuidas meie ploki k\u00fclgriba n\u00e4eb v\u00e4lja (kui meie plokk on redaktoris aktiivne), l\u00e4htudes eelmises etapis saadud koodist.<\/p>\n
K\u00f5ik plokid n\u00e4itavad vaikimisi ploki ikooni, nime ja kirjeldust ning jaotist T\u00e4psem \u2013 ahendatud. T\u00e4psemalt leiate tekstisisestuse ploki CSS-klassi pakkumiseks.<\/p>\n
K\u00fclgriba jaotise ja m\u00f5nede s\u00e4tete lisamine<\/h2>\n
K\u00fclgriba on jagatud osadeks (koodis nimetatakse neid paneelideks) ning optimaalse disaini ja funktsionaalsuse jaoks (sh avatud ahendamise funktsioon) peaksime paneelide \u00f5igeks v\u00e4ljastamiseks kasutama WordPressi komponente.<\/p>\n
Kasutage PanelBody<\/code>jaotise lisamiseks komponenti (need, mida saate avada v\u00f5i ahendada), mis on wp.components<\/code>pakendis. Komponent aktsepteerib m\u00f5ningaid rekvisiite, n\u00e4iteks pealkirja ja selle kohta, kas paneel peaks vaikimisi olema avatud v\u00f5i suletud. Samuti saate avamise-sulgemise p\u00e4\u00e4stikule pakkuda kohandatud klassi, ikooni ja lisada s\u00fcndmuse funktsiooni.<\/p>\nPanelBody<\/code>Seej\u00e4rel soovitab WordPress kujunduse sujuvamaks muutmiseks kasutada komponenti, PanelRow<\/code>mis toimib paneelis \u00fcldiste konteineritena. See komponent rakendab teie sisule automaatselt teatud veerise ja painduva rea \u200b\u200bstiili. Stiili " flex-direction: row<\/code>" t\u00f5ttu peaksite m\u00e4hkima iga seadistuse \u00fche sisse PanelRow<\/code>. V\u00f5i v\u00f5ite selle \u00fcldse vahele j\u00e4tta ja v\u00f5tta vastutuse selle kujundamise eest ise, kasutades dive ja muud sellist.<\/p>\nPaneeli ja s\u00e4tete lisamine<\/h3>\n
Lisame oma ploki jaoks k\u00fclgriba paneeli, mille sees on m\u00f5ned s\u00e4tted, et seda praktikas n\u00e4ha. Lisame l\u00fclitusnupu, sisendi valimise, v\u00e4rvivalija ja m\u00e4rkeruudu \u2013 lihtsalt selleks, et saada kogemusi erinevat t\u00fc\u00fcpi sisendkomponentidega. J\u00e4tsin ploki sisu (kahe RichText<\/code>s-ga) ja save<\/code>funktsiooni nagu varemgi.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n attributes: {\n myRichHeading: {\n type: 'string',\n },\n myRichText: {\n type: 'string',\n source: 'html',\n selector: 'p'\n },\n toggle: {\n type: 'boolean',\n default: true\n },\n favoriteAnimal: {\n type: 'string',\n default: 'dogs'\n },\n favoriteColor: {\n type: 'string',\n default: '#DDDDDD'\n },\n activateLasers: {\n type: 'boolean',\n default: false\n }\n },\n edit: (props) => { \n const { attributes, setAttributes } = props;\n return (<div>\n <InspectorControls>\n <PanelBody\n title=\"Most awesome settings ever\"\n initialOpen={true}\n >\n <PanelRow>\n <ToggleControl\n label=\"Toggle me\"\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <SelectControl\n label=\"What's your favorite animal?\"\n value={attributes.favoriteAnimal}\n options={[\n {label: \"Dogs\", value: 'dogs'},\n {label: \"Cats\", value: 'cats'},\n {label: \"Something else\", value: 'weird_one'},\n ]}\n onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <ColorPicker\n color={attributes.favoriteColor}\n onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n disableAlpha\n \/>\n <\/PanelRow>\n <PanelRow>\n <CheckboxControl\n label=\"Activate lasers?\"\n checked={attributes.activateLasers}\n onChange={(newval) => setAttributes({ activateLasers: newval })}\n \/>\n <\/PanelRow>\n <\/PanelBody>\n <\/InspectorControls>\n <RichText \n tagName=\"h2\"\n placeholder=\"Write your heading here\"\n value={attributes.myRichHeading}\n onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n \/>\n <RichText\n tagName=\"p\"\n placeholder=\"Write your paragraph here\"\n value={attributes.myRichText}\n onChange={(newtext) => setAttributes({ myRichText: newtext })}\n \/>\n <\/div>\n );\n },\n save: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n <\/div>\n );\n }\n});<\/code><\/pre>\nNagu alati, alustame komponentide ja funktsioonide struktureerimisest, mida soovime kasutada. Sees m\u00e4\u00e4ratleme \u00fche atribuudi sisendi kohta attributes<\/code>ja registerBlockType()<\/code>sobitame t\u00fc\u00fcbi \u2013 n\u00e4iteks l\u00fclitusnupp eeldab t\u00f5ev\u00e4\u00e4rtust ja kuna rippmen\u00fc\u00fc v\u00e4\u00e4rtused on stringid, peaks atribuut olema ka t\u00fc\u00fcbistring.<\/p>\nReal #41<\/code>k\u00e4ivitame InspectorControls<\/code>komponendi ja k\u00f5ik sellest punktist kuni jooneni #80<\/code>ilmub k\u00fclgribale. \u00dclej\u00e4\u00e4nud kuvatakse redaktoris ja ma pole seal muudatusi teinud.<\/p>\n![\"Kohandatud](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50857e3c95.png\")
<\/a><\/p>\nSees loome esmalt paneeli, PanelBody<\/code>mille rekvisiit initialOpen<\/code>on seatud t\u00f5eseks, \u00fctleme Gutenbergile, et see paneel tuleks vaikimisi avada. Ja siis on meie otsustada, mida iga\u00fchele lisada PanelRow<\/code>.<\/p>\nKomponendi jaoks ToggleControl<\/code>kasutame samu rekvisiite, mida oleme varem tekstisisendite puhul teinud, v\u00e4lja arvatud see, et propi asemel value<\/code>esitame atribuudi v\u00e4\u00e4rtuse prop sees checked<\/code>. See kehtib k\u00f5igi sisendite kohta, mis eeldavad m\u00e4rgistatud atribuuti tavalises HTML-is, n\u00e4iteks m\u00e4rkeruudud. Raadionuppude jaoks kasutaksite rekvisiite selected<\/code>, kuna seda kasutaksite ka tavalises HTML-is. Pidage meeles, et selle sisendi atribuut peab olema t\u00fc\u00fcpi boolean<\/code>.<\/p>\nAinsuse CheckboxControl<\/code>m\u00e4rkeruudu k\u00e4sitsemisel toimib t\u00e4pselt samamoodi nagu ToggleControl<\/code>\u2013 see tagastab t\u00f5ev\u00e4\u00e4rtuse, olenemata sellest, kas see on m\u00e4rgitud v\u00f5i mitte.<\/p>\nLoob valiku rippmen\u00fc\u00fc ja ootab SelectControl<\/code>v\u00f5imalikke valikuid rekvisiidis massiivina. options<\/code>Iga element peab olema objekt, millel on omadused label<\/code>ja value<\/code>. Sama kehtib ka m\u00e4rkeruutude ja raadionuppude (RadioControl<\/code>) kohta. Tavaolukorras genereeriksite valikud t\u00f5en\u00e4oliselt muutujana v\u00e4ljaspool HTML-v\u00e4ljundit.<\/p>\nV\u00f5ite m\u00e4rgata, et see ColorPicker<\/code>t\u00f6\u00f6tab teistest veidi erinevalt, kuna see on keerulisem komponent, mitte standardne HTML-sisend. Esitage color<\/code>salvestatud v\u00e4rvi jaoks tugi ja selle asemel onChange<\/code>(k\u00e4ivitub \u00fcks kord kl\u00f5psamisel, aga ka iga kord, kui v\u00e4\u00e4rtust lohistamise ajal muudetakse \u2013 see v\u00f5ib p\u00f5hjustada palju tulekahjusid) onChangeComplete<\/code>. Sellel s\u00fcndmusel tagastatud rekvisiit on samuti objekt, kus peame otsustama, millise osa tahame oma atribuudis salvestada. Selles n\u00e4ites tahame salvestada kuueteistk\u00fcmnendv\u00e4\u00e4rtuse (ilma alfa\/l\u00e4bipaistmatuseta), nii et sees setAttributes()<\/code>eraldame tagastatud objekti hex<\/code>atribuudi. color<\/code>See on ka p\u00f5hjus, miks lisame kinnisvaradisableAlpha<\/code>alfakanali kasutajaliidese eemaldamiseks (l\u00e4bipaistmatuse kontrollimiseks), kuna pole m\u00f5tet seda kasutajale pakkuda, kui me l\u00e4bipaistmatuse v\u00e4\u00e4rtust kunagi ei salvesta.<\/p>\nIgal komponendil on label<\/code>saadaval tugi, v\u00e4lja arvatud v\u00e4rvivalija. Kui soovite sildi v\u00f5i teksti enne seda v\u00e4ljastada, peate selle hea v\u00e4ljan\u00e4gemise tagamiseks HTML-i v\u00f5i stiiliga askeldama.<\/p>\nIlmselgelt saate lisada nii palju paneele, kui soovite, lisage lihtsalt PanelBody<\/code>p\u00e4rast eelmist komponenti.<\/p>\nKui olete huvitatud plokis\u00e4tete lisamise kohta lisateabe saamiseks, on mul eraldi \u00f5petused Inspectori keerukamate s\u00e4tete ja komponentide jaoks; Pildivaliku lisamine<\/a> ja v\u00e4rviseadete paneeli lisamine<\/a>.<\/p>\nK\u00e4itleminesave<\/code><\/h3>\nJ\u00e4tsin save<\/code>funktsiooni endiseks. See on teie otsustada ja k\u00f5ik s\u00f5ltub sellest, mida v\u00e4ljundis olevad s\u00e4tted juhivad. Teate juba, kuidas iga seade v\u00e4\u00e4rtusi hankida. Oletame n\u00e4iteks, et t\u00f5ev\u00e4\u00e4rtuslik atribuut activateLasers<\/code>juhib kohandatud HTML-i elemendi renderdamist v\u00f5i mitte. Kui atribuut on true<\/code>div, tuleks v\u00e4ljastada, muidu mitte. Saate seda teha traditsioonilise if-checkiga v\u00f5i kasutada JSX-i sisemist if<\/code>ja &&<\/code>operaatorit. Lisateavet selle kohta leiate Reacti tingimusliku renderdamise juhendist<\/a>.<\/p>\nsave: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n {attributes.activateLasers && \n <div className=\"lasers\">Lasers activated<\/div>\n }\n <\/div>\n );\n}<\/code><\/pre>\nKuna me kasutame RichText<\/code>seda v\u00e4ljundit, poleks see redaktoris n\u00e4htav, kuid see ilmub kasutajaliideses.<\/p>\nRohkem komponente leiate wp.components<\/code> Githubi repost<\/a>. Enamik neist kaustadest peaks pakkuma teile lugemist koos m\u00f5ningate dokumentidega selle kasutamise kohta. \u00d5ppisin sellest suurema osa sellest repost ja ka WordPressi p\u00f5hikomponentidest uurides, kuidas nad seda tegid.<\/p>\n