wp<\/code>paketet och destrukturering<\/h2>\nN\u00e4r vi \u00e4r i en Javascript-fil i k\u00f6 i Gutenberg-editorn har vi tillg\u00e5ng till ett globalt objekt\/paket: wp<\/code>. Detta \u00e4r ett mycket, varierande stort Javascript-objekt och det inneh\u00e5ller en hel massa anv\u00e4ndbara komponenter och funktioner som vi kommer att anv\u00e4nda f\u00f6r att skapa block. N\u00e4r du skriver Javascript f\u00f6r anpassade block kommer du att referera till wp<\/code>en hel del.<\/p>\nD\u00e4rf\u00f6r \u00e4r det vanligt, b\u00e5de i modernt Javascript och i React, att destrukturera det vi vill anv\u00e4nda ur det. I grund och botten betyder det bara att vi definierar lokala variabler fr\u00e5n delar av en st\u00f6rre struktur. Till exempel \u00e4r den f\u00f6rsta funktionen vi kommer att anv\u00e4nda registerBlockType()<\/code>som finns inom wp.blocks<\/code>. Vi skulle kunna anropa funktionen s\u00e5 h\u00e4r:<\/p>\nwp.blocks.registerBlockType();<\/code><\/pre>\nMen det \u00e4r l\u00e4ttare att destrukturera det s\u00e5 h\u00e4r:<\/p>\n
const { registerBlockType } = wp.blocks;\nregisterBlockType();<\/code><\/pre>\nNu kan du referera till funktionen direkt utan att prefixa den med dess struktur. Det blir mycket mer anv\u00e4ndbart n\u00e4r vi h\u00e4nvisar till funktioner eller komponenter som vi kommer att upprepa ofta.<\/p>\n
Vi kommer att g\u00f6ra omstruktureringar i den h\u00e4r serien, och n\u00e4r vi g\u00e5r vidare i handledningen kommer vi att se hur mycket mer l\u00e4sbar och kortare v\u00e5r kod blir.<\/p>\n
Registrerar ett nytt block<\/h2>\n
Funktionen f\u00f6r att registrera ett nytt anpassat block registerBlockType()<\/code>finns i wp.blocks<\/code>paketet. Den accepterar tv\u00e5 parametrar; f\u00f6rst en str\u00e4ng med blockets namnutrymme och namn, och sedan ett objekt med den fullst\u00e4ndiga blockkonfigurationen.<\/p>\nGutenberg f\u00f6rv\u00e4ntar sig att alla block ska ha ett namnutrymme och ett namn, definierade med ett snedstreck d\u00e4remellan. Namnutrymmet \u00e4r f\u00f6r att s\u00e4kerst\u00e4lla att ditt blocknamn inte kommer i konflikt med n\u00e5gra andra block som kan anv\u00e4nda samma namn. Alla block i WordPress anv\u00e4nder namnutrymmet core<\/code>. Till exempel har standardstyckeblocket i WordPress namnet core\/paragraph<\/code>. Om du v\u00e4ljer ett annat namnomr\u00e5de kan du ocks\u00e5 skapa ett block med namnet stycke utan att orsaka n\u00e5gra problem.<\/p>\nBest\u00e4m ett namnutrymme i slug-version som \u00e4r unikt f\u00f6r dig. Jag kommer att anv\u00e4nda namnutrymmet awp<\/code>(kort version av A White Pixel) i den h\u00e4r serien.<\/p>\n\u00d6ppna k\u00e4llfilen vi skapade i det sista steget; src\/block-awhitepixel-myfirstblock.js<\/code>, i en redakt\u00f6r. F\u00f6rst ringer vi registerBlockType<\/code>fr\u00e5n destrukturerad wp.blocks<\/code>, med namnet awp\/firstblock<\/code>. Justera ditt namn och namnutrymme allt eftersom.<\/p>\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n \/\/ Your block configuration and code here\n});<\/code><\/pre>\nI den andra parametern, blockkonfigurationsobjektet, m\u00e5ste vi definiera n\u00e5gra egenskaper f\u00f6r att det ska kunna registreras framg\u00e5ngsrikt. Kom ih\u00e5g att blockkonfigurationen \u00e4r ett objekt, vilket inneb\u00e4r att du m\u00e5ste skriva allt som nyckel + v\u00e4rdepar, separerade med kommatecken. Det finns en hel del m\u00f6jliga konfigurationsegenskaper s\u00e5 l\u00e5t oss g\u00e5 igenom dessa s\u00e5 ser vi den slutliga koden i slutet.<\/p>\n
Obligatorisk: titel<\/h3>\n
Den f\u00f6rsta n\u00f6dv\u00e4ndiga egenskapen \u00e4r title<\/code>. Detta \u00e4r namnet som det kommer att visas n\u00e4r du v\u00e4ljer mellan block. St\u00e4ll in den h\u00e4r egenskapen som vilket namn du vill ha i en str\u00e4ng.<\/p>\nVi l\u00e4gger till f\u00f6ljande som en titel:<\/p>\n
title: 'My first block',<\/code><\/pre>\nPS: Vi kommer att \u00e5terkomma till hur vi skriver alla str\u00e4ngar i v\u00e5rt block f\u00f6r att s\u00e4kerst\u00e4lla att de kan \u00f6vers\u00e4ttas i del 8. Men f\u00f6r nu ska vi h\u00e5lla det enkelt och helt enkelt skriva str\u00e4ngar.<\/p>\n
Obligatorisk: kategori<\/h3>\n
Egenskapen category<\/code>definierar var i vilken blockkategori ditt block kommer att visas n\u00e4r du v\u00e4ljer block f\u00f6r infogning i editorn. M\u00f6jliga v\u00e4rden \u00e4r common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, embed<\/code>.<\/p>\nL\u00e5t oss l\u00e4gga det i common<\/code>, den f\u00f6rsta blockkategorin.<\/p>\ncategory: 'common',<\/code><\/pre>\nValfritt: ikon<\/h3>\n
Om du har anv\u00e4nt Gutenberg har du f\u00f6rmodligen m\u00e4rkt att alla block har ikoner. Du kan l\u00e4gga till en ikon i ditt block med antingen en str\u00e4ng som h\u00e4nvisar till n\u00e5gon av WordPresss Dashicons<\/a>, eller s\u00e5 kan du tillhandah\u00e5lla ett anpassat svg<\/code>element.<\/p>\nJag v\u00e4ljer bara en av WordPresss dashikoner, smileyen<\/a> \u2013 men du kan v\u00e4lja vilken du vill. Observera att du hoppar \u00f6ver att inkludera "dashicons-" i ditt ikonklassnamn.<\/p>\nicon: 'smiley',<\/code><\/pre>\nValfritt: beskrivning<\/h3>\n
Du kan ge en beskrivning som kommer att visas i sidof\u00e4ltet Inst\u00e4llningar (p\u00e5 h\u00f6ger sida) n\u00e4r blocket \u00e4r aktivt.<\/p>\n
Jag l\u00e4gger bara till en snabb text som exempel:<\/p>\n
description: 'Learning in progress',<\/code><\/pre>\nValfritt: s\u00f6kord<\/h3>\n
Gutenberg st\u00f6der en s\u00f6kfunktion vid val av blocktyper. Du kan tillhandah\u00e5lla en m\u00e4ngd m\u00f6jliga matchningar i fastigheten keywords<\/code>. Utan keywords<\/code>skulle du bara hitta ditt block genom att s\u00f6ka p\u00e5 dess namn.<\/p>\nJag l\u00e4gger till example<\/code>och test<\/code>, s\u00e5 att vi enkelt kan hitta v\u00e5rt anpassade block n\u00e4r vi b\u00f6rjar skriva ett av dessa s\u00f6kord.<\/p>\nkeywords: ['example', 'test'],<\/code><\/pre>\nValfritt: attribut<\/h3>\n
Egenskapen attributes<\/code>\u00e4r en mycket viktig egenskap som vi kommer att \u00e5terkomma till ganska ofta i den h\u00e4r handledningsserien. Det \u00e4r h\u00e4r du lagrar din strukturerade data och anv\u00e4ndarindata f\u00f6r ditt block. Du kan f\u00f6rest\u00e4lla dig det som variabler. Vi kommer inte att l\u00e4gga till det f\u00f6r nu, men vi kommer definitivt att \u00e5terkomma till det h\u00e4r ganska snart.<\/p>\n(Sorts) kr\u00e4vs: redigera och valfritt: spara<\/h3>\n
Inom edit<\/code>och save<\/code>egenskaper \u00e4r faktiskt d\u00e4r du kommer att l\u00e4gga till all din kod f\u00f6r b\u00e5de redakt\u00f6rsutdata och frontend-rendering. B\u00e5da dessa egenskaper f\u00f6rv\u00e4ntar sig en funktion som b\u00f6r returnera viss utdata.<\/p>\nEgenskapen edit<\/code>beskriver strukturen f\u00f6r ditt block i editorn. Fastigheten save<\/code>hanterar i princip tv\u00e5 saker; din blockutg\u00e5ng i frontend, men ocks\u00e5 strukturen f\u00f6r hur ditt block sparas i databasen. Du kommer att arbeta mestadels i edit<\/code>eftersom det \u00e4r h\u00e4r du l\u00e4gger till ing\u00e5ngar f\u00f6r att mata in eller v\u00e4lja saker och uppdatera blockets data. Funktionen save<\/code>ska inte uppdatera eller redigera data p\u00e5 n\u00e5got s\u00e4tt, den ska bara matas ut.<\/p>\nGutenberg m\u00e5ste kunna rekonstruera ditt block med alla dess inst\u00e4llningar i editorn fr\u00e5n det som matas ut i save<\/code>funktionen (och attributen). Om Gutenberg n\u00e5gonsin \u00f6ppnar ett inl\u00e4gg d\u00e4r den tidigare sparade blockutg\u00e5ngen skiljer sig (\u00e4ven bara n\u00e5got) fr\u00e5n vad som definieras i save, kommer ditt block att bli ogiltigt.<\/p>\n![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d21609214.png\")
<\/a><\/p>\nJag kan garantera dig att du kommer att st\u00f6ta p\u00e5 detta mycket n\u00e4r du utvecklar anpassade block. N\u00e4r detta h\u00e4nder m\u00e5ste du ta bort blocket (fr\u00e5n prickarna i verktygsf\u00e4ltet) och l\u00e4gga till det igen. Jag rekommenderar ocks\u00e5 att g\u00f6ra en webbl\u00e4saruppdatering (F5 eller CTRL+R).<\/p>\n
WordPress har en dedikerad dokumentationssida<\/a> f\u00f6r blockets redigerings- och sparafunktioner om du vill l\u00e4ra dig mer.<\/p>\nN\u00e4r det g\u00e4ller v\u00e5rt f\u00f6rsta block, l\u00e5t oss skriva ut n\u00e5got grundl\u00e4ggande. Vi kommer att returnera samma sak f\u00f6r b\u00e5de edit<\/code>och save<\/code>; ett ":)" insvept i <div><\/code>. Blockets ikon \u00e4r trots allt en smiley.<\/p>\nedit:() => { \n return <div>:)<\/div> \n},\nsave:() => { \n return <div>:)<\/div> \n}<\/code><\/pre>\n\u00d6vriga fastigheter<\/h3>\n
Det finns fler valfria egenskaper f\u00f6r registerBlockType<\/code>; parent<\/code>, supports<\/code>, transforms<\/code>, example<\/code>, och styles<\/code>. Vi hoppar \u00f6ver dessa f\u00f6r nu eftersom de flesta \u00e4r f\u00f6r mer avancerad eller anpassad blockbyggnad. Om du \u00e4r intresserad av att l\u00e4sa mer om dessa, ta en titt p\u00e5 WordPress dokumentation<\/a>.<\/p>\nSlutlig registerblockkod<\/h2>\n
V\u00e5r kod ser nu ut ungef\u00e4r s\u00e5 h\u00e4r.<\/p>\n
const { registerBlockType } = wp.blocks;\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 edit: () => { \n return <div>:)<\/div> \n },\n save: () => { \n return <div>:)<\/div> \n }\n});<\/code><\/pre>\nMed detta har vi tillr\u00e4ckligt f\u00f6r att v\u00e5rt block ska kunna registreras som ett anpassat block. L\u00e5t oss se det i praktiken i Gutenbergs redakt\u00f6r.<\/p>\n
Kom du ih\u00e5g att kompilera ditt Javascript? I f\u00f6reg\u00e5ende steg l\u00e4rde vi oss att vi inte kan ladda den h\u00e4r Javascript-filen i Gutenberg; vi beh\u00f6ver den kompilerade versionen. Du brukar utvecklas med npm run start<\/code>att springa i bakgrunden, eller s\u00e5 kan du bara springa npm run build<\/code>en g\u00e5ng nu. Det borde kompilera v\u00e5rt k\u00e4ll-Javascript och placera det var du \u00e4n definierade det f\u00f6r att placeras och namnges i din webpack.config.js<\/code>.<\/p>\nPHP-delen av att registrera ett block<\/h2>\n
F\u00f6r varje block m\u00e5ste du registrera Javascript-filen och detta \u00e4r precis som du skulle registrera alla andra skript i WordPress \u2013 genom att anv\u00e4nda [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>. Observera att vi registrerar skriptet, inte st\u00e4ller det i k\u00f6. Detta beror p\u00e5 att vi ocks\u00e5 m\u00e5ste anropa en PHP-funktion f\u00f6r att registrera varje anpassat block, och den funktionen \u00e4r ansvarig f\u00f6r att st\u00e4lla skriptet i k\u00f6 n\u00e4r det beh\u00f6vs.<\/p>\nJag f\u00f6redrar att beh\u00e5lla Gutenberg-relaterad kod i en separat fil i mina teman. Men du kan, och vi kommer att i den h\u00e4r handledningen, helt enkelt skriva all PHP-kod direkt inuti temat functions.php<\/code>f\u00f6r enkelhetens skull.<\/p>\nJag rekommenderar att du anv\u00e4nder init<\/code>kroken f\u00f6r din funktion, och inte enqueue_block_assets<\/code>. Vi kan l\u00e4gga b\u00e5de registrering av skriptet och registrering av blocket tillsammans.<\/p>\nadd_action('init', function() {\n wp_register_script('awp-myfirstblock-js', get_template_directory_uri(). '\/assets\/js\/gutenberg\/block-awhitepixel-myfirstblock.js');\n\u00a0\n register_block_type('awp\/firstblock', [\n 'editor_script' => 'awp-myfirstblock-js',\n ]);\n});<\/code><\/pre>\nPHP-funktionen vi kommer att anv\u00e4nda f\u00f6r att registrera ett nytt block \u00e4r [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. P\u00e5 samma s\u00e4tt som Javascript registerBlockType()<\/code>accepterar den tv\u00e5 parametrar; blockets namnomr\u00e5de och namn, och en array med argument. Se till att du anger exakt samma namnutrymme och namn i PHP som i Javascript.<\/p>\nI det andra argumentet finns det n\u00e5gra m\u00f6jliga argument (av vilka n\u00e5gra kommer vi tillbaka till senare i den h\u00e4r serien). Men det viktigaste \u00e4r editor_script<\/code>var du tillhandah\u00e5ller handtaget (f\u00f6rsta parametern av wp_register_script()<\/code>) f\u00f6r det registrerade skriptet.<\/p>\nOch det \u00e4r allt!<\/p>\n
V\u00e5rt block i Gutenberg editor<\/h2>\n
Nu n\u00e4r du uppdaterar din editor i n\u00e5got inl\u00e4gg b\u00f6r du hitta v\u00e5rt block \u2013 antingen genom att \u00f6ppna Gemensam kategori eller genom att s\u00f6ka efter n\u00e5got av nyckelorden eller namnet du angav.<\/p>\n
![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d216d1cdb.png\")
<\/a>![\"Skapa](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d217e1762.gif\")
<\/a><\/p>\nV\u00e5rt block \u00e5terger ett enkelt ":)" b\u00e5de i editorn och i frontend. Fr\u00e5n och med nu kan du inte redigera n\u00e5got i blocket, men det \u00e4r vad vi kommer att l\u00e4ra oss i n\u00e4sta steg!<\/p>\n