InspectorControls<\/code>. Vad du \u00e4n l\u00e4gger in i den h\u00e4r komponenten kommer att matas ut i sidof\u00e4ltet och inte i sj\u00e4lva blocket\/redigeraren. Du kan i princip l\u00e4gga komponenten och dess inneh\u00e5ll \u00f6verallt i returen av edit<\/code>funktionen.<\/p>\nF\u00f6rutom det skulle du hantera inst\u00e4llningar i sidof\u00e4ltet som de var inne i blocket. Varje inst\u00e4llning kr\u00e4ver ett attribut, och du laddar och uppdaterar attributen p\u00e5 samma s\u00e4tt.<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50856030af.png\")
<\/a><\/p>\nL\u00e5t oss f\u00f6rst ta en snabb titt p\u00e5 hur v\u00e5rt blocks sidof\u00e4lt ser ut (n\u00e4r v\u00e5rt block \u00e4r aktivt i editorn), baserat p\u00e5 koden vi hamnade i f\u00f6reg\u00e5ende steg.<\/p>\n
Alla block kommer som standard att visa blockets ikon, namn och beskrivning, och avsnittet Avancerat \u2013 komprimerat. Inuti Advanced hittar du en textinmatning f\u00f6r att tillhandah\u00e5lla CSS-klass f\u00f6r blocket.<\/p>\n
L\u00e4gger till en sidof\u00e4ltssektion och n\u00e5gra inst\u00e4llningar<\/h2>\n
Sidof\u00e4ltet \u00e4r uppdelat i sektioner (kallas paneler i kod), och f\u00f6r optimal design och funktionalitet (inklusive \u00f6ppen kollaps funktionalitet) b\u00f6r vi anv\u00e4nda WordPress komponenter f\u00f6r att mata ut paneler p\u00e5 r\u00e4tt s\u00e4tt.<\/p>\n
Anv\u00e4nd komponenten PanelBody<\/code>f\u00f6r att l\u00e4gga till en sektion (de som du kan \u00f6ppna eller komprimera), som finns i wp.components<\/code>paketet. Komponenten accepterar n\u00e5gra rekvisita, till exempel f\u00f6r titeln och om panelen ska vara \u00f6ppen eller st\u00e4ngd som standard. Du kan ocks\u00e5 tillhandah\u00e5lla anpassad klass, ikon och bifoga en h\u00e4ndelsefunktion till \u00f6ppna-st\u00e4ng-utl\u00f6saren.<\/p>\nInom PanelBody<\/code>WordPress rekommenderar sedan att du anv\u00e4nder PanelRow<\/code>komponenten som fungerar som generiska beh\u00e5llare i panelen – f\u00f6r att s\u00e4kerst\u00e4lla att designen effektiviseras. Den h\u00e4r komponenten till\u00e4mpar automatiskt viss marginal och flex radstil f\u00f6r ditt inneh\u00e5ll. P\u00e5 grund av " flex-direction: row<\/code>" stylingen b\u00f6r du linda in varje inst\u00e4llning i en PanelRow<\/code>eller s\u00e5 kan du hoppa \u00f6ver den helt och ta ansvar f\u00f6r att styla den sj\u00e4lv med divs och s\u00e5.<\/p>\nL\u00e4gga till en panel och inst\u00e4llningar<\/h3>\n
L\u00e5t oss l\u00e4gga till en sidof\u00e4ltspanel f\u00f6r v\u00e5rt block med n\u00e5gra inst\u00e4llningar inuti, bara f\u00f6r att se det i praktiken. Vi l\u00e4gger till en v\u00e4xlingskontroll, en vald ing\u00e5ng, en f\u00e4rgv\u00e4ljare och en kryssruta \u2013 bara f\u00f6r att f\u00e5 lite erfarenhet av olika typer av ing\u00e5ngskomponenter. Jag har l\u00e4mnat blockinneh\u00e5llet (med de tv\u00e5 RichText<\/code>s) och save<\/code>funktionen precis som tidigare.<\/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>\nSom alltid b\u00f6rjar vi med att f\u00f6rst\u00f6ra de komponenter och funktioner vi vill anv\u00e4nda. Inuti attributes<\/code>definierar registerBlockType()<\/code>vi ett attribut per ing\u00e5ng och matchar typen \u2013 till exempel f\u00f6rv\u00e4ntar v\u00e4xlingskontrollen ett booleskt v\u00e4rde och eftersom v\u00e4rdena i rullgardinsmenyn \u00e4r str\u00e4ngar b\u00f6r det attributet ocks\u00e5 vara en typstr\u00e4ng.<\/p>\nVid raden #41<\/code>startar vi InspectorControls<\/code>komponenten, och allt fr\u00e5n den punkten till raden #80<\/code>kommer att visas i sidof\u00e4ltet. Resten kommer att dyka upp i sj\u00e4lva redigeraren, och jag har inte gjort n\u00e5gra \u00e4ndringar d\u00e4r.<\/p>\n![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50857e3c95.png\")
<\/a><\/p>\nInuti skapar vi f\u00f6rst en panel med PanelBody<\/code>och med propen initialOpen<\/code>inst\u00e4lld p\u00e5 sant s\u00e4ger vi till Gutenberg att den h\u00e4r panelen ska \u00f6ppnas som standard. Och sedan \u00e4r det upp till oss vad vi ska l\u00e4gga till i varje PanelRow<\/code>.<\/p>\nF\u00f6r komponenten ToggleControl<\/code>anv\u00e4nder vi samma rekvisita som vi har gjort tidigare med textinmatning, f\u00f6rutom att value<\/code>vi ist\u00e4llet f\u00f6r props tillhandah\u00e5ller attributv\u00e4rdet inuti prop checked<\/code>. Detta g\u00e4ller alla indata som f\u00f6rv\u00e4ntar sig ett markerat attribut i vanlig HTML, till exempel kryssrutor. F\u00f6r radioknappar skulle du anv\u00e4nda rekvisitan selected<\/code>eftersom detta \u00e4r vad du ocks\u00e5 skulle anv\u00e4nda i vanlig HTML. T\u00e4nk p\u00e5 att attributet f\u00f6r denna ing\u00e5ng m\u00e5ste vara av typen boolean<\/code>.<\/p>\nN\u00e4r det g\u00e4ller CheckboxControl<\/code>hanteringen av en singular kryssruta fungerar exakt samma sak som ToggleControl<\/code>\u2013 den returnerar ett boolesk v\u00e4rde oavsett om det \u00e4r markerat eller inte.<\/p>\nDen SelectControl<\/code>genererar en rullgardinsmeny f\u00f6r val och f\u00f6rv\u00e4ntar sig de m\u00f6jliga valen som en array i rekvisiten options<\/code>. Varje element m\u00e5ste vara ett objekt med egenskaperna label<\/code>och value<\/code>. Detsamma g\u00e4ller f\u00f6r kryssrutor och alternativknappar (RadioControl<\/code>). Under normala omst\u00e4ndigheter skulle du f\u00f6rmodligen generera valen som en variabel utanf\u00f6r HTML-utdata.<\/p>\nDu kanske m\u00e4rker att de ColorPicker<\/code>fungerar lite annorlunda \u00e4n de andra eftersom detta \u00e4r en mer komplex komponent och inte en vanlig HTML-inmatning. Ange rekvisiten color<\/code>f\u00f6r den sparade f\u00e4rgen och anv\u00e4nd ist\u00e4llet f\u00f6r onChange<\/code>(avfyras en g\u00e5ng n\u00e4r du klickar men ocks\u00e5 varje g\u00e5ng v\u00e4rdet \u00e4ndras medan du drar \u2013 vilket kan resultera i m\u00e5nga br\u00e4nder) onChangeComplete<\/code>. Den rekvisita som returneras i denna h\u00e4ndelse \u00e4r ocks\u00e5 ett objekt d\u00e4r vi m\u00e5ste best\u00e4mma vilken del vi vill spara i v\u00e5rt attribut. I det h\u00e4r exemplet vill vi spara hex-v\u00e4rdet (utan alfa\/opacitet), s\u00e5 inuti setAttributes()<\/code>extraherar vi hex<\/code>egenskapen f\u00f6r det color<\/code>returnerade objektet. Det \u00e4r ocks\u00e5 d\u00e4rf\u00f6r vi l\u00e4gger till fastighetendisableAlpha<\/code>att ta bort alfakanalens anv\u00e4ndargr\u00e4nssnitt (f\u00f6r att kontrollera opaciteten) eftersom det inte \u00e4r meningsfullt att erbjuda anv\u00e4ndaren detta n\u00e4r vi aldrig sparar opacitetsv\u00e4rdet.<\/p>\nVar och en av komponenterna har en label<\/code>rekvisita tillg\u00e4nglig f\u00f6rutom colorpicker. Om du vill skriva ut en etikett eller text innan den m\u00e5ste du pilla runt med HTML eller styling f\u00f6r att s\u00e4kerst\u00e4lla att det ser bra ut.<\/p>\nDu kan sj\u00e4lvklart l\u00e4gga till hur m\u00e5nga paneler du vill, l\u00e4gg bara till ytterligare en PanelBody<\/code>komponent efter den f\u00f6reg\u00e5ende.<\/p>\nOm du \u00e4r intresserad av att l\u00e4ra dig mer om att l\u00e4gga till blockinst\u00e4llningar har jag separata handledningar f\u00f6r mer komplexa inst\u00e4llningar och komponenter f\u00f6r Inspector; Hur man l\u00e4gger till ett bildval<\/a> och hur man l\u00e4gger till en f\u00e4rginst\u00e4llningspanel<\/a>.<\/p>\nHanteringsave<\/code><\/h3>\nJag har l\u00e4mnat save<\/code>funktionen som den var tidigare. Det \u00e4r upp till dig och allt beror p\u00e5 vad inst\u00e4llningarna styr i utg\u00e5ngen. Du vet redan hur du f\u00e5r fram v\u00e4rdena f\u00f6r varje inst\u00e4llning. L\u00e5t oss som ett exempel anta att det booleska attributet activateLasers<\/code>styr om ett anpassat HTML-element renderas eller inte. Om attributet \u00e4r true<\/code>en div ska matas ut, annars inte. Du kan g\u00f6ra det med traditionell if-check eller anv\u00e4nda JSX:s inline if<\/code>och &&<\/code>operator. L\u00e4s mer om detta i Reacts guide f\u00f6r villkorlig rendering<\/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>\nEftersom vi anv\u00e4nder RichText<\/code>denna utdata skulle den inte vara synlig i editorn, men den kommer att visas i frontend.<\/p>\nDu hittar fler komponenter i wp.components<\/code> Github-repo<\/a>. De flesta av dessa mappar b\u00f6r ge dig ett readme med viss dokumentation om hur du anv\u00e4nder det. Jag l\u00e4rde mig det mesta av detta genom att titta i denna repo och \u00e4ven p\u00e5 de viktigaste WordPress-komponenterna hur de gjorde det.<\/p>\n