{"id":42306,"date":"2022-01-26T16:20:38","date_gmt":"2022-01-26T16:20:38","guid":{"rendered":"https:\/\/kinsta.com\/se\/?p=42306&#038;preview=true&#038;preview_id=42306"},"modified":"2023-09-21T12:23:12","modified_gmt":"2023-09-21T12:23:12","slug":"twenty-twenty-two-och-blockteman","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/","title":{"rendered":"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress"},"content":{"rendered":"<p>\u00c4ven om det \u00e4r lite senare \u00e4n planerat f\u00e5r vi ett nytt WordPress-standardtema. Dess \u00a0namn \u00e4r Twenty Twenty-Two!<\/p>\n<p>Det nya WordPress-standardtemat anl\u00e4nder med den nya <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-9\/\">WordPress 5.9-utg\u00e5van<\/a>. Vi ville l\u00e4ra oss mer om det nya temat, s\u00e5 vi installerade och testade Twenty Twenty-Two p\u00e5 en <a href=\"https:\/\/kinsta.com\/se\/devkinsta\/\">lokal \u00a0utvecklingsmilj\u00f6<\/a> som k\u00f6r <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a>.<\/p>\n<p>Vi kommer att visa dig resultaten innan vi knyter ihop s\u00e4cken f\u00f6r att ge dig en djupg\u00e5ende \u00f6versikt \u00f6ver f\u00f6r och nackdelarna med det nya WordPress-temat.<\/p>\n<figure id=\"attachment_110731\" aria-describedby=\"caption-attachment-110731\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2.jpg\" alt=\"En f\u00f6rhandsgranskning av Twenty Twenty-Two, det nya standardtemat f\u00f6r WordPress\" width=\"2560\" height=\"1752\"><figcaption id=\"caption-attachment-110731\" class=\"wp-caption-text\">En f\u00f6rhandsgranskning av Twenty Twenty-Two, det nya standardtemat f\u00f6r WordPress (Bildk\u00e4lla: <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">WordPress.org<\/a>)<\/figcaption><\/figure>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">TwentyTwenty-Two<\/a> har utformats f\u00f6r att vara det mest flexibla, l\u00e4ttviktiga och anpassningsbara stardardtemat som n\u00e5gonsin har funnits. Det erbjuder en bra plattform f\u00f6r att testa block, m\u00f6nster och mallar.<\/p>\n<p>Tack vare att det \u00e4r ett blocktema hj\u00e4lper det dig att b\u00e4ttre utforska Full Site Editing, globala stilar, navigeringsblock och de nya bildgallerierna, som \u00e4r de mest efterl\u00e4ngtade funktionerna som inkluderas i WordPress 5.9.<\/p>\n<p><strong>Det b\u00f6r n\u00e4mnas att Twenty Twenty-Two<\/strong> <strong>\u00e4r det<\/strong> <strong>f\u00f6rsta standardblocktemat! <\/strong><\/p>\n<p>Ett av de mer ambiti\u00f6sa m\u00e5len med det nya temat \u00e4r att <strong>st\u00e4rka<\/strong> <strong>anv\u00e4ndarna<\/strong>. Det inkluderas s\u00e5 m\u00e5nga m\u00f6nster och mallar direkt ur l\u00e5dan att anv\u00e4ndarna kan bygga komplexa layouter med endast n\u00e5gra klick. Resten \u00e4r bara stilanpassning.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-Two kommer att sl\u00e4ppas med WordPress 5.9. Temat \u00e4r fortfarande under utveckling vid tidpunkten f\u00f6r detta skrivande, och det som rapporteras h\u00e4r kan genomg\u00e5 stora f\u00f6r\u00e4ndringar innan den slutliga utg\u00e5van.<\/p>\n<\/aside>\n\n<p>Det skiljer sig tekniskt sett inte s\u00e5 mycket fr\u00e5n att skriva om de senaste och mest kraftfulla funktionerna som inkluderas i WordPress 5.9. Men Twenty Twenty-Two ger oss ett f\u00f6rstoringsglas f\u00f6r att b\u00e4ttre uppskatta de nya webbplatsredigeringsfunktionerna. Det ger oss \u00e4ven en b\u00e4ttre uppfattning om plattformens framtid.<\/p>\n<p>S\u00e5 nu \u00e4r det dags att g\u00f6ra dig bekant med det nya temat.<\/p>\n<p>Vi kommer f\u00f6rst att utforska det <strong>nya webbplatsredigeringsfl\u00f6det<\/strong> som anv\u00e4ndare kommer att uppleva med WordPress 5.9 och Twenty Twenty-Two.<\/p>\n<p>Vi djupdyker d\u00e4refter i huvudblocktemat som implementeras i Twenty Twenty-Two. Du l\u00e4r k\u00e4nna <strong>Global Styles<\/strong>, <strong>blockm\u00f6nster,<\/strong> <strong>mallar <\/strong>och <strong>malldelar<\/strong>.<\/p>\n<p>Men det finns mycket mer \u00e4n s\u00e5 att s\u00e4ga om Twenty Twenty-Two och WordPress blockteman. S\u00e5 som ett bonuskapitel ger vi dig en snabb \u00f6versikt \u00f6ver hur du ut\u00f6kar Twenty Twenty-Twos funktioner genom att dra nytta av <strong>theme.json-filen<\/strong>.<\/p>\n<p>https:\/\/twitter.com\/kjellr\/status\/1445800581189160968<\/p>\n<p>Men l\u00e5t oss nu komma direkt till saken och djupdyka i det helt nya WP-standardtemat Twenty Twenty-Two.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/span><\/p>\n<h2>Twenty Twenty-Two erbjuder ett nytt webbplatsredigeringsfl\u00f6de<\/h2>\n<p>Det inkluderas flera fullst\u00e4ndiga webbplatsredigeringsfunktioner i k\u00e4rnan i WordPress 5.9. Webbplats\u00e4gare som anv\u00e4nder den senaste WordPress-versionen med ett blocktema som Twenty Twenty-Two installerat kommer snart att kunna:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-gutenberg-redigeraren\/\">Skapa och redigera inl\u00e4gg och sidor<\/a> med fler block och m\u00f6nster<\/li>\n<li>Anpassa de <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">inst\u00e4llningar och format<\/a> som definieras i filen <strong>theme.json<\/strong> \u00a0via gr\u00e4nssnittet Global Styles<\/li>\n<li>Skapa och redigera mallar f\u00f6r sidor och inl\u00e4gg<\/li>\n<li>Skapa och redigera malldelar f\u00f6r sidhuvud, sidfot och andra mallomr\u00e5den<\/li>\n<\/ul>\n<p>Nu n\u00e4r alla dessa funktioner \u00e4r sammanslagna i k\u00e4rnan har WordPress k\u00e4rn-utvecklare diskuterat <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">utvecklingen av informationsarkitekturen<\/a> och omdesignat hela <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">webbplatsredigeringsfl\u00f6det<\/a>.<\/p>\n<p>Det f\u00f6rsta du kanske m\u00e4rker n\u00e4r du har aktiverat Twenty Twenty-Two \u00e4r att startknappen f\u00f6r webbplatsredigeraren inte l\u00e4ngre finns i huvudmenyn p\u00e5 din WordPress-instrumentpanel. Den ligger nu under <strong>Utseende-menyn<\/strong>.<\/p>\n<figure id=\"attachment_110738\" aria-describedby=\"caption-attachment-110738\" style=\"width: 1980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editor-menu-wp-59.jpg\" alt=\"Den nya Utseende-menyn i WordPress 5.9\" width=\"1980\" height=\"952\"><figcaption id=\"caption-attachment-110738\" class=\"wp-caption-text\">Den nya Utseende-menyn i WordPress 5.9<\/figcaption><\/figure>\n<p>Att s\u00e4tta mall- och stilredigeringsfunktionerna under samma <strong>utseendemeny<\/strong> b\u00f6r effektivisera redigeringsupplevelsen. Det blir helt enkelt l\u00e4ttare att f\u00f6rst\u00e5 att de funktioner som du \u00f6ppnar relaterar till <em>presentationen<\/em> av dina sidor.<\/p>\n\n<p>Menyalternativet <strong>Redigerare<\/strong> \u00f6ppnar webbplatsens mall f\u00f6r hemsidan. Beroende p\u00e5 dina l\u00e4sinst\u00e4llningar \u00e4r detta antingen din senaste inl\u00e4ggssida eller en statisk sida.<\/p>\n<figure id=\"attachment_110740\" aria-describedby=\"caption-attachment-110740\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-site-editor.jpg\" alt=\"Webbplatsredigeraren i WordPress 5.9 med Twenty Twenty-Two\" width=\"2130\" height=\"1002\"><figcaption id=\"caption-attachment-110740\" class=\"wp-caption-text\">Webbplatsredigeraren i WordPress 5.9 med Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Om du klickar p\u00e5 WordPress-ikonen i det \u00f6vre v\u00e4nstra h\u00f6rnet visas en ny <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">navigeringsmeny f\u00f6r webbplatsredigeraren<\/a>, inklusive tre menyalternativ: <strong>Webbplats<\/strong>, <strong>Mallar<\/strong> och <strong>Malldelar<\/strong>.<\/p>\n<p>L\u00e5t oss ta en n\u00e4rmare titt.<\/p>\n<figure id=\"attachment_110741\" aria-describedby=\"caption-attachment-110741\" style=\"width: 2318px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editor-navigation-menu.jpg\" alt=\"Redigerarens navigeringsmeny\" width=\"2318\" height=\"1046\"><figcaption id=\"caption-attachment-110741\" class=\"wp-caption-text\">Redigerarens navigeringsmeny<\/figcaption><\/figure>\n<p>Alternativet <strong>Webbplats<\/strong> \u00f6ppnar startmallen (de senaste bloggartiklarna eller den statiska startsidan).<\/p>\n<p>Under menyalternativet <strong>Mallar<\/strong> f\u00e5r du en lista \u00f6ver tillg\u00e4ngliga mallar. Du kan klicka p\u00e5 vilken mall som helst i listan f\u00f6r att \u00f6ppna den i redigeraren.<\/p>\n<p>N\u00e4r detta skrivs tillhandah\u00e5ller Twenty Twenty-Two 11 mallar.<\/p>\n<figure id=\"attachment_110746\" aria-describedby=\"caption-attachment-110746\" style=\"width: 2132px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-templates.jpg\" alt=\"Mallar i Twenty Twenty-Two.\" width=\"2132\" height=\"1218\"><figcaption id=\"caption-attachment-110746\" class=\"wp-caption-text\">Mallar i Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>Genom att klicka p\u00e5 ellips-ikonen (<strong>\ufe19<\/strong>) till h\u00f6ger kan du rensa dina anpassningar.<\/p>\n<figure id=\"attachment_111357\" aria-describedby=\"caption-attachment-111357\" style=\"width: 1378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111357 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-clear-customizations.jpg\" alt=\"Ta bort mallanpassningar\" width=\"1378\" height=\"686\"><figcaption id=\"caption-attachment-111357\" class=\"wp-caption-text\">Ta bort mallanpassningar<\/figcaption><\/figure>\n<p>Till skillnad fr\u00e5n temamallar kan anpassade mallar endast byta namn eller tas bort (men du kan <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#template-editing-mode\">redigera anpassade mallar<\/a> i inl\u00e4ggsredigeraren).<\/p>\n<figure id=\"attachment_111356\" aria-describedby=\"caption-attachment-111356\" style=\"width: 1368px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111356 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/wp-59-delete-rename-custom-template.jpg\" alt=\"Byta namn p\u00e5\/ta bort anpassade mallar\" width=\"1368\" height=\"382\"><figcaption id=\"caption-attachment-111356\" class=\"wp-caption-text\">Byta namn p\u00e5\/ta bort anpassade mallar<\/figcaption><\/figure>\n<p>Menyalternativet <strong>Malldelar<\/strong> visar de tillg\u00e4ngliga malldelarna som du kan \u00f6ppna i redigeraren f\u00f6r dina anpassningar.<\/p>\n<p>Du hittar som standard fyra malldelar i Twenty Twenty-Two. Om du h\u00e5ller mark\u00f6ren \u00f6ver en modifierad mall visas ett verktygstips som informerar dig om att mallen har anpassats.<\/p>\n<figure id=\"attachment_110747\" aria-describedby=\"caption-attachment-110747\" style=\"width: 2128px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts.jpg\" alt=\"Malldelar i Twenty Twenty-Two\" width=\"2128\" height=\"1120\"><figcaption id=\"caption-attachment-110747\" class=\"wp-caption-text\">Malldelar i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Du kan rensa dessa anpassningar genom att klicka p\u00e5 ellips-ikonen (<strong>\ufe19<\/strong>) till h\u00f6ger.<\/p>\n<figure id=\"attachment_111354\" aria-describedby=\"caption-attachment-111354\" style=\"width: 2214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-clear-customizations.jpg\" alt=\"Ta bort malldelsanpassningar\" width=\"2214\" height=\"1118\"><figcaption id=\"caption-attachment-111354\" class=\"wp-caption-text\">Ta bort malldelsanpassningar<\/figcaption><\/figure>\n<h3>Redigera mallar och malldelar<\/h3>\n<p><strong>Redigeraren<\/strong> tillhandah\u00e5ller gr\u00e4nssnittet f\u00f6r att anpassa strukturen f\u00f6r dina <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/create-block-theme\/#required-files-and-file-structure\">mallar och malldelar<\/a>.<\/p>\n<p>H\u00e4r kan du enkelt l\u00e4gga till eller redigera block och m\u00f6nster, och dina \u00e4ndringar till\u00e4mpas automatiskt p\u00e5 varje sida som anv\u00e4nder mallen.<\/p>\n<figure id=\"attachment_110836\" aria-describedby=\"caption-attachment-110836\" style=\"width: 2534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110836 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editing-single-post-template.jpg\" alt=\"Redigera mallen f\u00f6r det enskilda inl\u00e4gget\" width=\"2534\" height=\"1294\"><figcaption id=\"caption-attachment-110836\" class=\"wp-caption-text\">Redigera mallen f\u00f6r det enskilda inl\u00e4gget<\/figcaption><\/figure>\n<p>Bilden nedan visar mallen f\u00f6r 404-sidan i redigeraren. Det \u00e4r en ganska enkel mall, som endast inkluderar en rubrik, ett stycke och en s\u00f6kruta. Den ger oss \u00e4nd\u00e5 en bra f\u00f6rst\u00e5else f\u00f6r hur anv\u00e4ndargr\u00e4nssnittet fungerar.<\/p>\n<figure id=\"attachment_110826\" aria-describedby=\"caption-attachment-110826\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110826 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/404-page-template.jpg\" alt=\"Twenty Twenty-Two\u2019s 404.blockmall i mallredigeraren\" width=\"1796\" height=\"1350\"><figcaption id=\"caption-attachment-110826\" class=\"wp-caption-text\">Twenty Twenty-Two\u2019s 404.blockmall i mallredigeraren<\/figcaption><\/figure>\n<p>H\u00e4r kan du g\u00f6ra \u00e4ndringar och anpassa mallar s\u00e5 att de passar dina behov. Du kanske exempelvis vill l\u00e4gga till ett <strong>rutn\u00e4t med bildinl\u00e4ggsm\u00f6nster<\/strong> f\u00f6r att \u00f6ka bes\u00f6karnas engagemang och locka dem att bl\u00e4ddra i inneh\u00e5llet p\u00e5 din webbplats.<\/p>\n<figure id=\"attachment_111351\" aria-describedby=\"caption-attachment-111351\" style=\"width: 2872px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/grid-of-image-post-pattern.jpg\" alt=\"Anpassa Twenty Twenty-Two\u2019s 404-blockmall\" width=\"2872\" height=\"1314\"><figcaption id=\"caption-attachment-111351\" class=\"wp-caption-text\">Anpassa Twenty Twenty-Two\u2019s 404-blockmall<\/figcaption><\/figure>\n<p>I rubrik-rullgardinsmenyn h\u00f6gst upp i mallredigeraren visas en lista \u00f6ver tillg\u00e4ngliga <strong>mallomr\u00e5den<\/strong>. Samma lista visas under <strong>Mall-fliken<\/strong> i <strong>Inst\u00e4llnings-sidof\u00e4ltet.<\/strong><\/p>\n<figure id=\"attachment_110761\" aria-describedby=\"caption-attachment-110761\" style=\"width: 2242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110761 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-areas.jpg\" alt=\"Mallomr\u00e5den i Twenty Twenty-Two\" width=\"2242\" height=\"1036\"><figcaption id=\"caption-attachment-110761\" class=\"wp-caption-text\">Mallomr\u00e5den i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Genom att klicka p\u00e5 ett mallomr\u00e5de (t.ex. Rubrik) kommer du direkt till den malldel som du vill redigera.<\/p>\n<p>Om du klickar p\u00e5 ellipsikonen till h\u00f6ger kommer du \u00e5t <strong>redigeraren f\u00f6r en isolerad malldel<\/strong>.<\/p>\n<figure id=\"attachment_110748\" aria-describedby=\"caption-attachment-110748\" style=\"width: 2292px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110748 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editing-template-parts.jpg\" alt=\"Ellipsikonen startar den isolerade malldelredigeraren\" width=\"2292\" height=\"1316\"><figcaption id=\"caption-attachment-110748\" class=\"wp-caption-text\">Ellipsikonen startar den isolerade malldelredigeraren<\/figcaption><\/figure>\n<p>Malldelredigeraren inkluderar \u00e4ven ett par dragbara handtag, s\u00e5 att du kan kontrollera hur mallen beter sig med olika sk\u00e4rmuppl\u00f6sningar.<\/p>\n<figure id=\"attachment_110762\" aria-describedby=\"caption-attachment-110762\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110762 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/adjusting-preview-dimension-1.jpg\" alt=\"Justera f\u00f6rhandsgranskningsdimensionen f\u00f6r malldelen\" width=\"2130\" height=\"1196\"><figcaption id=\"caption-attachment-110762\" class=\"wp-caption-text\">Justera f\u00f6rhandsgranskningsdimensionen f\u00f6r malldelen<\/figcaption><\/figure>\n<p>N\u00e4r du \u00e4r n\u00f6jd med dina \u00e4ndringar sparar du dem och g\u00e5r tillbaka till huvudmallredigeraren f\u00f6r att kontrollera slutresultatet.<\/p>\n<p>Om du vill f\u00f6rdjupa dig i den nya informationsarkitekturen kan det vara bra att kolla in f\u00f6ljande artiklar:<\/p>\n<ul>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">IA-koncept f\u00f6r webbplatsredigering: S\u00e5 h\u00e4r visar du och f\u00e5r tillg\u00e5ng till nya funktioner<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">IA-koncept f\u00f6r webbplatsredigering \u2013 Del 2<\/a><\/li>\n<\/ul>\n<h2>K\u00e4rnan av Twenty Twenty-Two: En snabb \u00f6versikt \u00f6ver theme.json<\/h2>\n<p>F\u00f6r att till fullo f\u00f6rst\u00e5 hur Twenty Twenty-Two och blockteman (som <a href=\"https:\/\/www.anarieldesign.com\/themes\/block-based-wordpress-theme\/\">Bricksy<\/a>) fungerar, ska vi ta en titt p\u00e5 den nya temakonfigurationen och stilmekanismen baserat p\u00e5 <strong>theme.json-filen<\/strong>.<\/p>\n<p>Den h\u00e4r nya mekanismen introducerades i <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">WordPress 5.8<\/a> och g\u00f6r det m\u00f6jligt f\u00f6r temautvecklare att konfigurera redigeraren och l\u00e4gga till funktionsst\u00f6d fr\u00e5n en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">central konfigurationspunkt<\/a>.<\/p>\n<p>I Twenty Twenty-Two har filen<strong> theme.json<\/strong> f\u00f6ljande struktur:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {},\n\t\"styles\": {},\n\t\"customTemplates\": {},\n\t\"templateParts\": {}\n}<\/code><\/pre>\n<p>L\u00e5t oss ta en snabb titt p\u00e5 varje sektion.<\/p>\n<h3>Version<\/h3>\n<p>I <code>version<\/code>-f\u00e4ltet beskrivs specifikationsversionen, som f\u00f6r n\u00e4rvarande \u00e4r <code>2<\/code>.<\/p>\n<h3>Settings<\/h3>\n<p><code>settings<\/code>-sektionen <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#settings\">definierar inst\u00e4llningar<\/a> p\u00e5 global niv\u00e5 eller blockniv\u00e5. Inst\u00e4llningar som definieras p\u00e5 \u00f6versta niv\u00e5n p\u00e5verkar alla block, men block kan \u00e5sidos\u00e4tta globala inst\u00e4llningar individuellt. I Twenty Twenty-Two hittar du f\u00f6ljande inst\u00e4llningar:<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"color\": {\n\t\t\t\"duotone\": [...],\n\t\t\t\"gradients\": [...],\n\t\t\t\"palette\": [...]\n\t\t},\n\t\t\"custom\": {...},\n\t\t\"spacing\": {...},\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [...],\n\t\t\t\"fontSizes\": [...]\n\t\t},\n\t\t\"layout\": {...}\n\t}\n}<\/code><\/pre>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#css-custom-properties-presets-custom\">Standardinst\u00e4llningarna<\/a> kallas <strong>f\u00f6rinst\u00e4llningar<\/strong> och anv\u00e4nds f\u00f6r att <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">generera anpassade CSS-egenskaper<\/a> och klassnamn baserat p\u00e5 en specifik \u00a0<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">namnkonvention:<\/a><\/p>\n<ul>\n<li>CSS anpassad egenskap: <code>--wp--preset--{preset-category}--{preset-slug}<\/code><\/li>\n<li>CSS klassnamn: <code>.has-{preset-slug}-{preset-category}<\/code><\/li>\n<\/ul>\n<p>N\u00e4r ett tema har definierat sina f\u00f6rinst\u00e4llningar kan motsvarande anpassade CSS-egenskaper anv\u00e4ndas f\u00f6r att formatera block och element i <code>styles<\/code>-sektionen.<\/p>\n<h3>Styles<\/h3>\n<p>I <code>styles<\/code>-sektionen definierar teman <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#styles\">standardstilar<\/a> f\u00f6r block och element. Ta exempelvis en titt p\u00e5 f\u00f6ljande stilar f\u00f6r k\u00e4rnblocket f\u00f6r knappar:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/button\": {\n\t\t\t\t\"border\": {\n\t\t\t\t\t\"radius\": \"0\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--primary)\",\n\t\t\t\t\t\"text\": \"var(--wp--preset--color--background)\"\n\t\t\t\t},\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSize\": \"var(--wp--preset--typography--font-size--normal)\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Du kommer att l\u00e4gga m\u00e4rke till de anpassade CSS-egenskaperna som anv\u00e4nds i egenskapsdeklarationerna.<\/p>\n<h3>Custom Templates<\/h3>\n<p>I <code>customTemplates<\/code>-sektionen deklarerar ett tema sina <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#customtemplates\">anpassade mallar<\/a>. Det kr\u00e4vs\u00a0<code>name<\/code> och\u00a0 <code>title<\/code>-f\u00e4lt.\u00a0 Teman kan \u00e4ven deklarera vilken inl\u00e4ggstyp som kan anv\u00e4nda mallen genom att st\u00e4lla in <code>postTypes<\/code> korrekt.<\/p>\n<p>Twenty Twenty-Two inkluderar fyra anpassade mallar:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"customTemplates\": [\n\t\t{\n\t\t\t\"name\": \"blank\",\n\t\t\t\"title\": \"Blank\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\",\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-large-header\",\n\t\t\t\"title\": \"Page (Large Header)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"single-no-separators\",\n\t\t\t\"title\": \"Single Post (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-no-separators\",\n\t\t\t\"title\": \"Page (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t}\n\t]\n}<\/code><\/pre>\n<p>Du hittar motsvarande <strong>.html-filer<\/strong> i <strong>block templates-mappen<\/strong>.<\/p>\n<figure id=\"attachment_111516\" aria-describedby=\"caption-attachment-111516\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111516 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-block-templates-folder.jpg\" alt=\"Block templates-mappen i Twenty Twenty-Two\" width=\"1224\" height=\"587\"><figcaption id=\"caption-attachment-111516\" class=\"wp-caption-text\"><strong>Block-templates<\/strong>-mappen i Twenty Twenty-Two<\/figcaption><\/figure>\n<h3>Template Parts<\/h3>\n<p><code>templateParts<\/code>-sektionen inkluderar <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#templateparts\">malldelsdefinitioner<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"templateParts\": [\n\t\t{\n\t\t\t\"name\": \"header\",\n\t\t\t\"title\": \"Header\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-large-dark\",\n\t\t\t\"title\": \"Header (Dark, large)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-small-dark\",\n\t\t\t\"title\": \"Header (Dark, small)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"footer\",\n\t\t\t\"title\": \"Footer\",\n\t\t\t\"area\": \"footer\"\n\t\t}\n\t]\n}<\/code><\/pre>\n<p><code>name<\/code> och\u00a0 <code>title<\/code>-f\u00e4lten kr\u00e4vs. Teman kan \u00e4ven deklarera ett <code>area<\/code>-villkor, d\u00e4r malldelen renderas i redigeraren.<\/p>\n<figure id=\"attachment_111360\" aria-describedby=\"caption-attachment-111360\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111360 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-1.jpg\" alt=\"Malldelar i Twenty Twenty-Two\" width=\"1616\" height=\"1128\"><figcaption id=\"caption-attachment-111360\" class=\"wp-caption-text\">Malldelar i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Malldelarnas <strong>.html-filer<\/strong> finns i <strong>mappen template-parts.<\/strong><\/p>\n<p>Nu n\u00e4r du vet mer om Twenty Twenty-Two\u2019s <strong>theme.json <\/strong>kan vi g\u00f6ra en noggrannare utforskning av temats funktioner och det nya redigeringsgr\u00e4nssnittet.<\/p>\n<p>L\u00e5t oss djupdyka i <strong>Twenty Twenty-Two&#8217;s Global Styles<\/strong>.<\/p>\n<h2>Global Styles i Twenty Twenty-Two<\/h2>\n<p>Om du tittar p\u00e5 Twenty Twenty-Two&#8217;s <strong>style.css, blir du kanske f\u00f6rv\u00e5nad av att den inneh\u00e5ller ett minimalt antal CSS-deklarationer. Anledningen \u00e4r att stilar deklareras i filen <\/strong><em><strong>theme.json<\/strong><\/em> <strong>i blockbaserade teman<\/strong>.<\/p>\n<p>WordPress 5.9 tar saker ett steg l\u00e4ngre och introducerar en ny funktion som g\u00f6r det m\u00f6jligt f\u00f6r blocktemaanv\u00e4ndare att anpassa utseendet p\u00e5 webbplatselement fr\u00e5n ett anv\u00e4ndargr\u00e4nssnitt som heter <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">Global Styles<\/a>.<\/p>\n<p>Global Styles-gr\u00e4nssnittet kan n\u00e5s fr\u00e5n den nya <strong>Stil-ikonen<\/strong> i det \u00f6vre h\u00f6gra h\u00f6rnet av redigeraren (se \u00e4ven <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34574\">Gr\u00e4nssnittet f\u00f6r Global Styles<\/a>).<\/p>\n<p>Om du klickar p\u00e5 ikonen visas ett nytt <strong>Stil-sidof\u00e4lt<\/strong> med tre separata paneler:<\/p>\n<ul>\n<li>En <strong>f\u00f6rhandsgransknings-panel<\/strong> som visar en f\u00f6rhandsgranskning av dina anpassningar<\/li>\n<li>En <strong>Global Styles-panel<\/strong> som ger \u00e5tkomst till specifika grupper av kontroller f\u00f6r <strong>typografi,<\/strong> <strong>f\u00e4rger <\/strong>och <strong>layout<\/strong><\/li>\n<li>Ett <strong>blockobjekt<\/strong> som ger \u00e5tkomst till stilinst\u00e4llningar p\u00e5 blockniv\u00e5<\/li>\n<\/ul>\n<figure id=\"attachment_110852\" aria-describedby=\"caption-attachment-110852\" style=\"width: 1606px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110852 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/styles-sidebar.jpg\" alt=\"Stil-sidof\u00e4ltet i Twenty Twenty-Two\" width=\"1606\" height=\"1336\"><figcaption id=\"caption-attachment-110852\" class=\"wp-caption-text\">Stil-sidof\u00e4ltet i Twenty Twenty-Two<\/figcaption><\/figure>\n<h3>Twenty Twenty-Two\u2019s f\u00e4rgpalett<\/h3>\n<p>I <strong>F\u00e4rg-panelen<\/strong> kan du redigera tillg\u00e4ngliga paletter och tilldela eller \u00e4ndra f\u00e4rger f\u00f6r <strong>Bakgrund<\/strong>, <strong>Text <\/strong>eller <strong>L\u00e4nkar<\/strong>.<\/p>\n<p>I <strong>palettpanelen<\/strong> kan du anpassa <strong>tema-<\/strong> eller <strong>standard-paletterna<\/strong> och till och med skapa en anpassad palett.<\/p>\n<figure id=\"attachment_110941\" aria-describedby=\"caption-attachment-110941\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110941 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-settings.jpg\" alt=\"F\u00e4rginst\u00e4llningar i Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110941\" class=\"wp-caption-text\">F\u00e4rginst\u00e4llningar i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Har du hittat koden som genererar f\u00e4rgkontrollerna?<\/p>\n<p>Om inte, \u00f6ppna Twenty Twenty-Two\u2019s <strong>theme.json<\/strong> i den <a href=\"https:\/\/kinsta.com\/se\/blog\/basta-textredigerarna\/\">kodredigerare<\/a> som du f\u00f6redrar. Du kommer att hitta f\u00f6ljande f\u00e4rgpalettdeklarationer:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#000000\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#ffffff\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#1a4548\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#ffe2c7\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#F6F6F6\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Bilden nedan visar hur koden ovan matchar Twenty Twenty-Two\u2019s f\u00e4rgpalett.<\/p>\n<figure id=\"attachment_111011\" aria-describedby=\"caption-attachment-111011\" style=\"width: 1314px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111011 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-palette.jpg\" alt=\"Twenty Twenty-Two\u2019s f\u00e4rgpalett\" width=\"1314\" height=\"972\"><figcaption id=\"caption-attachment-111011\" class=\"wp-caption-text\">Twenty Twenty-Two\u2019s f\u00e4rgpalett<\/figcaption><\/figure>\n<p>Anta nu att du vill \u00e4ndra standardbakgrundsf\u00e4rgen f\u00f6r ett visst block. Om du v\u00e4ljer en annan f\u00e4rg f\u00f6r blockets bakgrund tilldelas en annan <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/--*\">CSS-variabel<\/a> till elementets <code>background-color<\/code>-egenskap. Bilden nedan visar ett exempel p\u00e5 detta:<\/p>\n<figure id=\"attachment_111012\" aria-describedby=\"caption-attachment-111012\" style=\"width: 2036px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111012 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-custom-property.jpg\" alt=\"Twenty Twenty-Two\u2019s prim\u00e4ra f\u00e4rg som bakgrundsf\u00e4rg\" width=\"2036\" height=\"860\"><figcaption id=\"caption-attachment-111012\" class=\"wp-caption-text\">Twenty Twenty-Two\u2019s prim\u00e4ra f\u00e4rg som bakgrundsf\u00e4rg<\/figcaption><\/figure>\n<p>Och det \u00e4r allt! Du beh\u00f6ver inte l\u00e4gga till en enda rad med anpassad CSS-kod i anpassaren eller skapa ett underordnat tema f\u00f6r detta.<\/p>\n<p>Men l\u00e5t oss forts\u00e4tta att utforska Twenty Twenty-Two&#8217;s Global Styles med n\u00e5gra ytterligare exempel.<\/p>\n<h3><span style=\"color: #0c022f;font-family: 'Brandon Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1.25rem;font-weight: 900\">Typography Settings<\/span><\/h3>\n<p>I<strong> Typografi-panelen<\/strong> kan du anpassa typografistilar f\u00f6r webbplatsens <strong>text-<\/strong> och <strong>l\u00e4nk-element<\/strong> p\u00e5 global niv\u00e5.<\/p>\n<p>Varje objekt ger \u00e5tkomst till en grupp kontroller som l\u00e5ter dig anpassa teckensnittsfamilj, storlek och linjeh\u00f6jd.<\/p>\n<figure id=\"attachment_110847\" aria-describedby=\"caption-attachment-110847\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110847 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-typography-settings.jpg\" alt=\"Typografiinst\u00e4llningar i Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110847\" class=\"wp-caption-text\">Typografiinst\u00e4llningar i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Undrar du vilken kod som genererar dessa kontroller?<\/p>\n<p>\u00d6ppna Twenty Twenty-Two&#8217;s <strong>theme.json<\/strong> och hitta <code>typography<\/code>-sektionen. Du kommer att se f\u00f6ljande inst\u00e4llningar:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"-apple-system,BlinkMacSystemFont,\\\"Segoe UI\\\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\\"Helvetica Neue\\\",sans-serif\",\n\t\t\t\t\t\"name\": \"System Font\",\n\t\t\t\t\t\"slug\": \"system-font\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"\\\"Source Serif Pro\\\", serif\",\n\t\t\t\t\t\"name\": \"Source Serif Pro\",\n\t\t\t\t\t\"slug\": \"source-serif-pro\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Small\",\n\t\t\t\t\t\"size\": \"1rem\",\n\t\t\t\t\t\"slug\": \"small\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Normal\",\n\t\t\t\t\t\"size\": \"1.125rem\",\n\t\t\t\t\t\"slug\": \"normal\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Medium\",\n\t\t\t\t\t\"size\": \"1.75rem\",\n\t\t\t\t\t\"slug\": \"medium\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Large\",\n\t\t\t\t\t\"size\": \"clamp(1.75rem, 3vw, 2.25rem)\",\n\t\t\t\t\t\"slug\": \"large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Huge\",\n\t\t\t\t\t\"size\": \"clamp(2.5rem, 4vw, 3rem)\",\n\t\t\t\t\t\"slug\": \"huge\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n}<\/code><\/pre>\n<p>Du kanske f\u00f6rv\u00e4ntar dig att det ska utkristalliseras tv\u00e5 teckensnittsfamiljer och fem teckenstorlekar ur koden ovan. Och du gissar r\u00e4tt.<\/p>\n<p>S\u00e5 h\u00e4r \u00f6vers\u00e4tts koden ovan till Global Styles <strong>Typografi-inst\u00e4llningar<\/strong>:<\/p>\n<figure id=\"attachment_110848\" aria-describedby=\"caption-attachment-110848\" style=\"width: 1300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110848 size-full\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/font-family-font-size.jpg\" alt=\"Typografistilar i Twenty Twenty-Two\" width=\"1300\" height=\"1196\"><figcaption id=\"caption-attachment-110848\" class=\"wp-caption-text\">Typografistilar i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Du kan gissa vilken inst\u00e4llning som genererar <strong>linjeh\u00f6jdskontrollen<\/strong>. I Twenty Twenty-Two finns det ingen specifik inst\u00e4llning f\u00f6r detta eftersom det aktiveras av <code>appearanceTools<\/code>-egenskapen. Det \u00e4r en genv\u00e4g f\u00f6r flera inst\u00e4llningsdeklarationer (se n\u00e4sta sektion).<\/p>\n<h3>Verktyg f\u00f6r layout och utseende<\/h3>\n<p>Det sista elementet i Global Style\u2019s sidof\u00e4lt \u00e4r <strong>layouten<\/strong>. I skrivande stund inneh\u00e5ller den endast en <code>padding<\/code>-kontroll.<\/p>\n<figure id=\"attachment_111192\" aria-describedby=\"caption-attachment-111192\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111192 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/layout.jpg\" alt=\"Layoutinst\u00e4llningar i Twenty Twenty-Two\" width=\"1790\" height=\"1212\"><figcaption id=\"caption-attachment-111192\" class=\"wp-caption-text\">Layoutinst\u00e4llningar i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>I Twenty Twenty-Two aktiveras layoutpanelen av <code>appearanceTools<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">setting-egenskap<\/a>, en boolean som kan anv\u00e4ndas f\u00f6r att <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/issues\/261\">aktivera flera inst\u00e4llningar<\/a> samtidigt:<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true\n\t}\n}<\/code><\/pre>\n<p><code>\"appearanceTools\": true<\/code> ers\u00e4tter helt enkelt <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">f\u00f6ljande deklarationsblock<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t'settings': {\n\t\t'border': {\n\t\t\t'color': true,\n\t\t\t'radius': true,\n\t\t\t'style': true,\n\t\t\t'width': true\n\t\t},\n\t\t'color': {\n\t\t\t'link': true\n\t\t},\n\t\t'spacing': {\n\t\t\t'blockGap': true,\n\t\t\t'margin': true,\n\t\t\t'padding': true\n\t\t},\n\t\t'typography': {\n\t\t\t'lineHeight': true\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>OK \u2013 nu f\u00f6rst\u00e5r du f\u00f6rhoppningsvis hur de inst\u00e4llningar som deklareras i filen <strong>theme.json<\/strong> matchar motsvarande Global Styles-kontroller.<\/p>\n<p>Det saknas fortfarande en pusselbit f\u00f6r att f\u00e5 en fullst\u00e4ndig bild av det nya WordPress-standardtemat: <strong>blockm\u00f6nster<\/strong>.<\/p>\n<h2>Twenty Twenty-Two\u2019s blockm\u00f6nster<\/h2>\n<p>Man kan s\u00e4ga att Twenty Twenty-Two mestadels \u00e4r en <a href=\"https:\/\/wordpress.org\/news\/2021\/11\/episode-21-all-things-block-themes\/\">samling m\u00f6nster<\/a> &#8211; och det st\u00e4mmer ganska bra. I Twenty Twenty-Two hittar du massor av f\u00e4rdiga <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-5\/#block-patterns\">blockm\u00f6nster<\/a> \u00a0som du kan v\u00e4lja mellan f\u00f6r att bygga fantastiska och of\u00f6ruts\u00e4gbara strukturer av kapslade block f\u00f6r dina webbsidor.<\/p>\n<p>Nyckeltermen h\u00e4r \u00e4r <strong>anv\u00e4ndarinflytande<\/strong>. Och det \u00e4r passande eftersom du kan bygga allt m\u00f6jligt med blockm\u00f6nster. Du kan exempelvis bygga en tilltalande portfolio eller en kampanjwebbplats, \u00e4ven om du inte har n\u00e5gon kunskap om HTML eller CSS!<\/p>\n<p>Och WordPress 5.9 kommer med betydande f\u00f6rb\u00e4ttringar av m\u00f6nstersystemet tack vare det nya verktyget <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35773\">Pattern Explorer<\/a>, som l\u00e5ter dig bl\u00e4ddra bland m\u00f6nster i en helsk\u00e4rmsmodal.<\/p>\n<figure id=\"attachment_111407\" aria-describedby=\"caption-attachment-111407\" style=\"width: 2442px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111407 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/pattern-explorer.jpg\" alt=\"Pattern Explorer i Twenty Twenty-Two\" width=\"2442\" height=\"1378\"><figcaption id=\"caption-attachment-111407\" class=\"wp-caption-text\">Pattern Explorer i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Med det nya verktyget kan du \u00e4ven importera blockm\u00f6nster snabbt och enkelt fr\u00e5n <a href=\"https:\/\/wordpress.org\/patterns\/\">m\u00f6nsterkatalogen<\/a>. Detta skapar nya m\u00f6jligheter f\u00f6r b\u00e5de WordPress-anv\u00e4ndare och \u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/gutenberg-block\/\">utvecklare<\/a>, s\u00e5 dess anv\u00e4ndning kommer sannolikt att \u00f6ka avsev\u00e4rt i framtiden.<\/p>\n<figure id=\"attachment_111408\" aria-describedby=\"caption-attachment-111408\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111408 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/wordpress-patterns-directory.jpg\" alt=\"WordPress m\u00f6nsterkatalog\" width=\"2880\" height=\"2959\"><figcaption id=\"caption-attachment-111408\" class=\"wp-caption-text\">WordPress m\u00f6nsterkatalog<\/figcaption><\/figure>\n<p>Twenty Twenty-Two inkluderar <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/pull\/204\">massor av m\u00f6nster<\/a> (\u00f6ver 65 st) i fem kategorier.<\/p>\n<figure id=\"attachment_111409\" aria-describedby=\"caption-attachment-111409\" style=\"width: 1522px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111409 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/pattern-categories-dropdown.jpg\" alt=\"Twenty Twenty-Two\u2019s m\u00f6nsterkategorier\" width=\"1522\" height=\"1250\"><figcaption id=\"caption-attachment-111409\" class=\"wp-caption-text\">Twenty Twenty-Two\u2019s m\u00f6nsterkategorier<\/figcaption><\/figure>\n<p>Denna solida upps\u00e4ttning av m\u00f6nster passar perfekt ihop med de mallar och malldelar som inkluderas i det nya standardtemat, vilket skapar en verkligt fantastisk redigeringsupplevelse.<\/p>\n<figure id=\"attachment_111410\" aria-describedby=\"caption-attachment-111410\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111410 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/layered-images-with-duotone-pattern.jpg\" alt=\"Skiktade bilder med duotone\" width=\"2880\" height=\"1332\"><figcaption id=\"caption-attachment-111410\" class=\"wp-caption-text\">Skiktade bilder med duotone<\/figcaption><\/figure>\n<figure id=\"attachment_111411\" aria-describedby=\"caption-attachment-111411\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111411 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/video-with-header-and-details.jpg\" alt=\"Video med rubrik och detaljer \" width=\"2880\" height=\"2544\"><figcaption id=\"caption-attachment-111411\" class=\"wp-caption-text\">Video med rubrik och detaljer<\/figcaption><\/figure>\n<figure id=\"attachment_111412\" aria-describedby=\"caption-attachment-111412\" style=\"width: 2002px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111412 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/two-images-with-text.jpg\" alt=\"Tv\u00e5 bilder med text\" width=\"2002\" height=\"2160\"><figcaption id=\"caption-attachment-111412\" class=\"wp-caption-text\">Tv\u00e5 bilder med text<\/figcaption><\/figure>\n<p>Har du \u00e4nnu inte har haft en chans att experimentera med blockm\u00f6nster? D\u00e5 ska vi visa dig ett enkelt exempel p\u00e5 anledningen till att de anses vara s\u00e5 kraftfulla verktyg.<\/p>\n<p>Anta att du vill ta bort standardsidfoten fr\u00e5n mallarna Index och Single Post och ers\u00e4tta den med ett annat blockm\u00f6nster.<\/p>\n<p>Starta Webbplatsredigeraren fr\u00e5n <strong>Utseende-menyn<\/strong> eller wordpress-verktygsf\u00e4ltet f\u00f6r att anpassa indexmallen.<\/p>\n<p>Klicka p\u00e5 knappen <strong>Index<\/strong> f\u00f6r rullgardinsmenyn med listan \u00f6ver sidans tillg\u00e4ngliga mallomr\u00e5den. Klicka p\u00e5 ellipsknappen bredvid <strong>Sidfot <\/strong>och sedan p\u00e5 <strong>Redigera sidfot<\/strong>.<\/p>\n<figure id=\"attachment_111413\" aria-describedby=\"caption-attachment-111413\" style=\"width: 1534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111413 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-inspector.jpg\" alt=\"Mallinspekt\u00f6ren\" width=\"1534\" height=\"812\"><figcaption id=\"caption-attachment-111413\" class=\"wp-caption-text\">Mallinspekt\u00f6ren<\/figcaption><\/figure>\n<p>Som vi n\u00e4mnde ovan kommer detta att starta den isolerade malldelsredigeraren.<\/p>\n<figure id=\"attachment_111414\" aria-describedby=\"caption-attachment-111414\" style=\"width: 2358px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111414 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/isolated-template-part-editor.jpg\" alt=\"Standardsidfoten f\u00f6r Twenty Twenty-Two i den isolerade malldelsredigeraren\" width=\"2358\" height=\"848\"><figcaption id=\"caption-attachment-111414\" class=\"wp-caption-text\">Standardsidfoten f\u00f6r Twenty Twenty-Two i den isolerade malldelsredigeraren<\/figcaption><\/figure>\n<p>\u00d6ppna nu blockinfogaren och klicka p\u00e5 <strong>M\u00f6nster<\/strong>.<\/p>\n<p>Starta det nya verktyget<strong> Pattern Explorer,<\/strong> v\u00e4lj kategorin <strong>Twenty Twenty-Two Sidf\u00f6tter<\/strong> och v\u00e4lj den sidfot som du vill ha.<\/p>\n<figure id=\"attachment_111415\" aria-describedby=\"caption-attachment-111415\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111415 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-pattern-explorer.jpg\" alt=\"Pattern Explorer i Twenty Twenty-Two\" width=\"2360\" height=\"1338\"><figcaption id=\"caption-attachment-111415\" class=\"wp-caption-text\">Pattern Explorer i Twenty Twenty-Two<\/figcaption><\/figure>\n<p>L\u00e4gg nu till och redigera blocken efter dina behov.<\/p>\n<figure id=\"attachment_111416\" aria-describedby=\"caption-attachment-111416\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111416 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/new-footer-in-isolated-template-editor.jpg\" alt=\"Redigera sidfoten i den isolerade malldelsredigeraren\" width=\"2360\" height=\"996\"><figcaption id=\"caption-attachment-111416\" class=\"wp-caption-text\">Redigera sidfoten i den isolerade malldelsredigeraren<\/figcaption><\/figure>\n<p>Spara rubriken och kontrollera webbplatsen igen n\u00e4r du \u00e4r n\u00f6jd med dina \u00e4ndringar.<\/p>\n<p>Bilden nedan j\u00e4mf\u00f6r tre mallar (Index, Single Post och Single Post utan avgr\u00e4nsare) med olika anpassningar av sidhuvud och sidfot:<\/p>\n<figure id=\"attachment_111417\" aria-describedby=\"caption-attachment-111417\" style=\"width: 2400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111417 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-comparison.jpg\" alt=\"Sidhuvuds- och sidfots-anpassningar i olika Twenty Twenty-Two-mallar\" width=\"2400\" height=\"2223\"><figcaption id=\"caption-attachment-111417\" class=\"wp-caption-text\">Sidhuvuds- och sidfots-anpassningar i olika Twenty Twenty-Two-mallar<\/figcaption><\/figure>\n<h2>Ut\u00f6ka Twenty Twenty-Two med ett barntema<\/h2>\n<p>Att skapa ett <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\">barntema f\u00f6r ett blocktema<\/a> skiljer sig helt fr\u00e5n att skapa ett <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/\">barntema f\u00f6r ett klassiskt tema<\/a>.<\/p>\n<p>Men n\u00e4r du har en god f\u00f6rst\u00e5else f\u00f6r ett <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#what-is-the-structure-of-a-block-theme\">blocktemas struktur<\/a> kommer det det inte att vara s\u00e5 sv\u00e5rt att skapa ett barntema f\u00f6r Twenty Twenty-Two eller n\u00e5got annat blocktema.<\/p>\n<p>S\u00e5 l\u00e5t oss ta reda p\u00e5 hur du anpassar utseendet och k\u00e4nslan p\u00e5 din Twenty Twenty-Two-baserade webbplats.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\"><div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/span><\/p>\n<h3>1. Skapa ett barntema f\u00f6r Twenty Twenty-Two<\/h3>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">Skapa en ny mapp<\/a> i katalogen <strong>\/wp-content\/themes<\/strong> och namnge den som du \u00f6nskar (enligt <a href=\"https:\/\/codex.wordpress.org\/Theme_Development#Theme_Development_Standards\">temautvecklingsstandarder<\/a>). I det h\u00e4r exemplet kallade vi barntemamappen <em>twentytwentytwo-child<\/em>.<\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#2-create-a-stylesheet-style-css\">Nu beh\u00f6ver du<\/a> en <strong>stil.css-fil<\/strong>. \u00d6ppna din favoritkodredigerare och skapa f\u00f6ljande formatmall:<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Twenty Twenty-Two Child\nTheme URI: https:\/\/example.com\/\nAuthor: Your name\nAuthor URI: https:\/\/example.com\/\nDescription: A child theme for TT2.\nRequires at least: 5.8\nTested up to: 5.9\nRequires PHP: 5.6\nVersion: 0.2\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: twentytwentytwo-child\nTemplate: twentytwentytwo\nTags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments\n\nTwenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org\nTwenty Twenty-Two Child is distributed under the terms of the GNU GPL.\n*\/<\/code><\/pre>\n<p>Du kan som vanligt redigera f\u00e4lt efter dina behov.<\/p>\n<p>Ditt barntema \u00e4r nu tillg\u00e4ngligt f\u00f6r f\u00f6rhandsgranskning. Du kan aktivera det via adminsk\u00e4rmen <strong>Utseende<\/strong> <strong>&gt;<\/strong> <strong>teman.<\/strong><\/p>\n<h3>2. Anpassa globala inst\u00e4llningar<\/h3>\n<p>Sedan WordPress 5.9 \u00e4rver barnteman med en <strong>theme.json-fil<\/strong> det \u00f6verordnade temats inst\u00e4llningar. Om barntemats <strong>theme.json<\/strong> definierar en upps\u00e4ttning av stilar, l\u00e4ggs dessa stilar p\u00e5 f\u00f6r\u00e4ldratemat.<\/p>\n<p>S\u00e5 vi kan skapa en <strong>theme.json-fil<\/strong> som endast inneh\u00e5ller ett litet anpassat block med inst\u00e4llnings- och stildefinitioner snarare \u00e4n att omdefiniera alla v\u00e5ra ursprungliga val.<\/p>\n<h4>S\u00e5 h\u00e4r deklarerar du en anpassad f\u00e4rgpalett<\/h4>\n<p>N\u00e4r du skapar ett barntema f\u00f6r Twenty Twenty-Two \u00e4r den enklaste uppgiften att ers\u00e4tta f\u00e4rgpaletten. Allt du beh\u00f6ver g\u00f6ra \u00e4r att definiera en ny f\u00e4rgpalett i barntemats <strong>theme.json<\/strong>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#FFFFFF\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#001F29\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#D6FDFF\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#FDFCDC\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#FED9B7\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"accent\",\n\t\t\t\t\t\"color\": \"#E94435\",\n\t\t\t\t\t\"name\": \"Accent\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Spara filen och g\u00e5 tillbaka till webbplatsredigeraren. F\u00e4rgpaletten som definieras ovan borde ha ersatt standardpaletten f\u00f6r Twenty Twenty-Two.<\/p>\n<figure id=\"attachment_111460\" aria-describedby=\"caption-attachment-111460\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111460 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-color-palette.jpg\" alt=\"Ett barntemas f\u00e4rgpalett\" width=\"2264\" height=\"1076\"><figcaption id=\"caption-attachment-111460\" class=\"wp-caption-text\">Ett barntemas f\u00e4rgpalett<\/figcaption><\/figure>\n<p>F\u00e4rgerna kommer att <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/#block-color-palettes\">visas i ordning p\u00e5 sj\u00e4lva paletten<\/a>, och deras namn b\u00f6r f\u00f6lja <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/#h-frequently-asked-questions\">b\u00e4sta praxis<\/a> och de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/29568\">namnkonventioner som diskuteras p\u00e5 Github<\/a>.<\/p>\n<p>Du kan l\u00e4sa mycket mer om <strong>theme.json\u2019s<\/strong> f\u00e4rgalternativ i denna <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/\">djupg\u00e5ende \u00f6versikt av Carolina Nymark<\/a>.<\/p>\n<h4>S\u00e5 h\u00e4r deklarerar du duotone-filter<\/h4>\n<p>Du kan \u00e4ven ers\u00e4tta standard duotone-f\u00e4rgerna med en anpassad upps\u00e4ttning av filter.<\/p>\n<p>F\u00f6r att g\u00f6ra detta l\u00e4gger du helt enkelt till f\u00f6ljande kod i barntemats <strong>theme.json-inst\u00e4llningar<\/strong> p\u00e5 samma niv\u00e5 som <code>palette<\/code>-egenskapen:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [...],\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [\n\t\t\t\t\t\t\"#001F29\",\n\t\t\t\t\t\t\"#FFFFFF\"\n\t\t\t\t\t],\n\t\t\t\t\t\"slug\": \"default-filter\",\n\t\t\t\t\t\"name\": \"Default filter\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Spara filen och kontrollera resultatet i blockredigeraren. Du b\u00f6r endast se ett enda duotone-filter.<\/p>\n<figure id=\"attachment_111461\" aria-describedby=\"caption-attachment-111461\" style=\"width: 1564px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111461 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-duotone-filter.jpg\" alt=\"Ett barntema\u2019s duotone-filter\" width=\"1564\" height=\"1122\"><figcaption id=\"caption-attachment-111461\" class=\"wp-caption-text\">Ett barntema\u2019s duotone-filter<\/figcaption><\/figure>\n<h3>3. Anpassa blockstilar<\/h3>\n<p>Med WordPress 5.9, kan du som sagt anpassa <strong>theme.json-inst\u00e4llningar<\/strong> och stilar fr\u00e5n gr\u00e4nssnittet Global Styles.<\/p>\n<p>Blockstilar kan endast anpassas fr\u00e5n Global Style\u2019s gr\u00e4nssnitt <strong>om blocket deklarerar st\u00f6d f\u00f6r specifika funktioner<\/strong> i motsvarande <strong>block.json-fil.<\/strong> Men du kan \u00e5sidos\u00e4tta standardblockinst\u00e4llningarna i ditt barntemas <strong>theme.json<\/strong>.<\/p>\n<p>Anta nu att du vill \u00e5sidos\u00e4tta blockstilarna Post Title och Group block. Allt du beh\u00f6ver g\u00f6ra \u00e4r att definiera de stilar som du vill l\u00e4gga till eller \u00e5sidos\u00e4tta, som du kan se nedan:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {...},\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/post-title\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontFamily\": \"Roboto,Oxygen-Sans,Ubuntu,Cantarell,\\\"Helvetica Neue\\\",sans-serif\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--tertiary)\"\n\t\t\t\t},\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"padding\": \"var(--wp--custom--spacing--small)\"\n\t\t\t\t}\n\t\t\t},\n\t\t\t\"core\/group\": {\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"margin\": {\n\t\t\t\t\t\t\"top\": \"0\",\n\t\t\t\t\t\t\"bottom\": \"0\"\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>I exemplet ovan har vi \u00e4ndrat teckensnittsfamiljen, bakgrundsf\u00e4rgen och utfyllnadsv\u00e4rdena f\u00f6r <code>core\/post-title<\/code>, samt de \u00f6vre och nedre marginalerna f\u00f6r <code>core\/group<\/code>.<\/p>\n<p>Bilden nedan visar resultatet som det skulle se ut p\u00e5 den offentliga webbplatsen:<\/p>\n<figure id=\"attachment_111462\" aria-describedby=\"caption-attachment-111462\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111462 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-styles-post-title.jpg\" alt=\"Ett anpassat Post Title-block\" width=\"2264\" height=\"832\"><figcaption id=\"caption-attachment-111462\" class=\"wp-caption-text\">Ett anpassat Post Title-block<\/figcaption><\/figure>\n<p>Och det var hela granskningen!<\/p>\n<p>Vi kommer inte att djupdyka mer i barnteman f\u00f6r tillf\u00e4llet eftersom det egentligen kr\u00e4ver ett helt eget inl\u00e4gg. Under tiden hittar du fler exempel p\u00e5 <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/tree\/add\/tt2-child-themes\">Twenty Twenty-Two\u2019s barnteman<\/a> p\u00e5 Github.<\/p>\n\n<h2>Sammanfattning<\/h2>\n<p>Medan vi tittade n\u00e4rmare p\u00e5 det nya WordPress-standardtemat Twenty Twenty-Two och dess funktioner (som g\u00f6r det till det mest flexibla standardtemat som n\u00e5gonsin har sl\u00e4ppts), presenterade vi den nya informationsarkitekturen som introducerades med WordPress 5.9. Vi gav till och med en smygtitt p\u00e5 det nya Global Styles-gr\u00e4nssnittet.<\/p>\n<p>M\u00e5nga nya och sp\u00e4nnande funktioner \u00e4r p\u00e5 v\u00e4g, och den nya redigeringsmilj\u00f6n verkar bli mer robust, p\u00e5litlig och funktionell med tiden.<\/p>\n<p>I takt med att det kommer nya WordPress-funktioner, f\u00f6rsvinner andra eller minskar i betydelse. M\u00e5nga anv\u00e4ndare undrar vad som kommer att h\u00e4nda med <a href=\"https:\/\/kinsta.com\/se\/blog\/sa-har-anpassar-wordpress-tema\/#customizing-your-theme-via-the-customizer\">Anpassaren<\/a> och hur man b\u00e4st uppr\u00e4tth\u00e5ller bak\u00e5tkompatibilitet med befintliga teman.<\/p>\n<p>Du b\u00f6r dock inte f\u00f6rv\u00e4nta dig att du pl\u00f6tsligt v\u00e4xlar fr\u00e5n traditionella teman till blockteman p\u00e5 en g\u00e5ng. Vi har f\u00f6r n\u00e4rvarande fyra olika typer av teman att v\u00e4lja mellan:<\/p>\n<ul>\n<li><strong>Blockteman<\/strong>: Teman utformade f\u00f6r FSE<\/li>\n<li><strong>Universella teman<\/strong>: Teman som b\u00e5de fungerar med Anpassaren och Webbplatsredigeraren<\/li>\n<li><strong>Hybridteman<\/strong>: Klassiska teman som st\u00f6der FSE-funktioner som <strong>theme.json<\/strong><\/li>\n<li><strong>Klassiska teman<\/strong>: Teman med PHP-mallar, \u00a0funktioner.php, osv.<\/li>\n<\/ul>\n<p>S\u00e5 var inte orolig &#8211; det finns fortfarande m\u00e5nga l\u00f6sningar att v\u00e4lja mellan om du inte k\u00e4nner dig redo att byta till blockteman.<\/p>\n<p><em>Och nu \u00e4r det upp till dig! \u00c4r du redo att ta det stora spr\u00e5nget och b\u00f6rja anv\u00e4nda blockteman? Dela dina tankar med oss i kommentarerna nedan.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00c4ven om det \u00e4r lite senare \u00e4n planerat f\u00e5r vi ett nytt WordPress-standardtema. Dess \u00a0namn \u00e4r Twenty Twenty-Two! Det nya WordPress-standardtemat anl\u00e4nder med den nya WordPress &#8230;<\/p>\n","protected":false},"author":36,"featured_media":42309,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[455,185],"topic":[842],"class_list":["post-42306","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-twenty-twenty-two","tag-wordpress-themes","topic-wordpress-teman"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress<\/title>\n<meta name=\"description\" content=\"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress\" \/>\n<meta property=\"og:description\" content=\"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-26T16:20:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-21T12:23:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress\",\"datePublished\":\"2022-01-26T16:20:38+00:00\",\"dateModified\":\"2023-09-21T12:23:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/\"},\"wordCount\":3770,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg\",\"keywords\":[\"Twenty Twenty-Two\",\"wordpress themes\"],\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/\",\"name\":\"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg\",\"datePublished\":\"2022-01-26T16:20:38+00:00\",\"dateModified\":\"2023-09-21T12:23:12+00:00\",\"description\":\"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-teman\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/wordpress-teman\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/se\/#website\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/se\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress","description":"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/","og_locale":"sv_SE","og_type":"article","og_title":"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress","og_description":"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.","og_url":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2022-01-26T16:20:38+00:00","article_modified_time":"2023-09-21T12:23:12+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.","twitter_image":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Carlo Daniele","Ber\u00e4knad l\u00e4stid":"24 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress","datePublished":"2022-01-26T16:20:38+00:00","dateModified":"2023-09-21T12:23:12+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/"},"wordCount":3770,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg","keywords":["Twenty Twenty-Two","wordpress themes"],"inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/","url":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/","name":"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg","datePublished":"2022-01-26T16:20:38+00:00","dateModified":"2023-09-21T12:23:12+00:00","description":"Twenty Twenty-Two \u00e4r standardblocktemat som introduceras med WordPress 5.9. Kolla in alla dess nyckelfunktioner i denna djupg\u00e5ende guide.","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/01\/twenty-twenty-two-och-blockteman.jpeg","width":1460,"height":730,"caption":"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-two-och-blockteman\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"WordPress-teman","item":"https:\/\/kinsta.com\/se\/topics\/wordpress-teman\/"},{"@type":"ListItem","position":3,"name":"En djupdykning i Twenty Twenty-Two och Blockteman f\u00f6r WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/se\/#website","url":"https:\/\/kinsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/se\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/42306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/comments?post=42306"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/42306\/revisions"}],"predecessor-version":[{"id":44268,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/42306\/revisions\/44268"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/translations\/dk"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/42306\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/42309"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=42306"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=42306"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=42306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}