{"id":40178,"date":"2021-08-02T13:57:44","date_gmt":"2021-08-02T11:57:44","guid":{"rendered":"https:\/\/kinsta.com\/?p=98590"},"modified":"2023-09-21T12:26:58","modified_gmt":"2023-09-21T12:26:58","slug":"wordpress-5-8","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/","title":{"rendered":"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)"},"content":{"rendered":"<p>WordPress 5.8 kommer <a href=\"https:\/\/wordpress.org\/news\/2021\/07\/tatum\/\">att bli<\/a> en viktig utg\u00e5va som inkluderar ett otroligt stort antal funktioner, f\u00f6rb\u00e4ttringar och buggfixar. Ut\u00f6ver detta introducerar WP 5.8 ett nytt s\u00e4tt att bygga webbplatser genom att leverera de f\u00f6rsta funktionerna som faller under det bredare projektet som kallas<strong> Full Site Editing<\/strong>.<\/p>\n<p>Bortsett fr\u00e5n Full Site Editing, innefattar WordPress 5.8 massor av \u00e4ndringar och f\u00f6rb\u00e4ttringar till flera omr\u00e5den i <a href=\"https:\/\/kinsta.com\/wordpress-market-share\/\">CMS<\/a>.<\/p>\n<p>WordPress-anv\u00e4ndare som inte anv\u00e4nder Gutenberg-pluginet kommer att hitta funktioner och f\u00f6rb\u00e4ttringar som kommer fr\u00e5n nio Gutenberg-utg\u00e5vor (f\u00f6r en djupdykning i varje utg\u00e5va, se Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/05\/whats-new-in-gutenberg-9-9-5-february\/\">9.9<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/17\/whats-new-in-gutenberg-10-0-february\/\">10.0<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">10.1<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">10.2<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">10.4<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">10.5<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">10.6<\/a>, \u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">10.7<\/a>).<\/p>\n<p>En viktig ny funktion f\u00f6r anv\u00e4ndare som verkligen bryr sig om sina webbplatsers prestanda \u00e4r webp-formatst\u00f6det.<\/p>\n<p>Utvecklare kommer garanterat att \u00e4lska borttagningen av IE11 fr\u00e5n listan \u00f6ver webbl\u00e4sare som st\u00f6ds, den nya blockkonfigurations- och styling-mekanismen baserad p\u00e5<strong> theme.json<\/strong>, det f\u00f6rb\u00e4ttrade blockregistreringssystemet baserat p\u00e5 \u00a0<strong>block.json<\/strong>, och de m\u00e5nga API-f\u00f6rb\u00e4ttringarna som kommer med den andra \u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-version\/\">WordPress-utg\u00e5van<\/a> 2021.<\/p>\n<p>S\u00e5 ta ett djupt andetag, f\u00f6r det kommer att bli en l\u00e5ng sammanfattning av funktioner och f\u00f6rb\u00e4ttringar som banar v\u00e4g f\u00f6r nya kraftfulla verktyg f\u00f6r webbplatsbyggnad. Allt detta f\u00f6rv\u00e4ntas sl\u00e4ppas under de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24551\">kommande m\u00e5naderna<\/a>.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Det finns otroligt m\u00e5nga f\u00f6r\u00e4ndringar i WordPress 5.8. F\u00f6r att f\u00f6rhindra risken f\u00f6r ov\u00e4ntade konflikter med ditt tema och dina plugins rekommenderar vi starkt att du k\u00f6r en <a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/wordpress-backups\/#wordpress-backup\">s\u00e4kerhetskopia av din webbplats<\/a> och testar den nya versionen i en \u00a0<a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/staging-environment\/\">iscens\u00e4ttningsmilj\u00f6<\/a> innan du uppdaterar din livewebbplats.<\/p>\n<\/aside>\n\n\n<h2>Full Site Editing-funktioner i WordPress 5.8<\/h2>\n<p>Visionen bakom Full Site Editing \u00e4r att tillhandah\u00e5lla en samling verktyg och funktioner som g\u00f6r det m\u00f6jligt f\u00f6r WordPress-anv\u00e4ndare att <a href=\"https:\/\/wordpress.org\/news\/2021\/06\/gutenberg-highlights\/\">bygga en hel webbplats med block<\/a>. Med Full Site Editing, kommer vi att f\u00e5 m\u00e5nga tillg\u00e4ngliga block f\u00f6r att skapa element p\u00e5 sidan, fr\u00e5n <a href=\"https:\/\/kinsta.com\/se\/blog\/menyplugins-for-wordpress\/\">navigeringsmenyer<\/a> till webbplatsvarum\u00e4rken, sidof\u00e4lts-widgetar, mallar och mycket mer.<\/p>\n<p>\u00c4ven om WordPress 5.8 introducerar flera funktioner som omfattas av Full Site Editing (FSE), b\u00f6r vi inte f\u00f6rv\u00e4nta oss att se en fullst\u00e4ndig visuell webbplatsbyggnadsmilj\u00f6. FSE \u00e4r fortfarande ett p\u00e5g\u00e5ende arbete, och lanseringen av WordPress 5.8 \u00f6ppnar en slags offentlig beta-fas. Enligt <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/08\/full-site-editing-scope-for-wp5-8\/\">Josepha Haden Chomphosy<\/a>:<\/p>\n<blockquote><p><em>Full Site Editing \u00e4r en samling projekt som tillsammans representerar en stor f\u00f6r\u00e4ndring, f\u00f6rmodligen f\u00f6r mycket f\u00f6r en enda utg\u00e5va. Det viktigaste att f\u00f6rmedla \u00e4r att det inte levereras som en fullst\u00e4ndig standardupplevelse f\u00f6r anv\u00e4ndare. En av de tydligaste feedbackbitarna fr\u00e5n fas 1-sammanslagningsprocessen var att det inte fanns tillr\u00e4ckligt med tid f\u00f6r v\u00e5ra extenders (agenturer, temaskapare, pluginutvecklare, webbplatsbyggare osv.) att f\u00f6rbereda sig f\u00f6r de kommande \u00e4ndringarna.<\/em><\/p>\n<p><em>Med detta i \u00e5tanke kommer denna sammanslagningsprocess inte att vara en p\u00e5 \/ av-knapp. Fokus nu ligger inte p\u00e5 en fullst\u00e4ndig och nyanserad anv\u00e4ndarupplevelse, utan mer p\u00e5 en \u00f6ppen offentlig beta inom WordPress 5.8.<\/em><\/p><\/blockquote>\n<p>S\u00e5 vi b\u00f6r inte f\u00f6rv\u00e4nta oss att se en perfekt och komplett FSE-upplevelse i nul\u00e4get. Vi kommer ist\u00e4llet att f\u00e5 se nya funktioner l\u00e4ggas till och f\u00f6rb\u00e4ttras med tiden, fr\u00e5n och med version 5.8. Av samma anledning kan vi anta att WordPress 5.8 inte kommer att ha en dramatisk inverkan p\u00e5 hur vi \u00e4r vana vid att bygga webbplatser.<\/p>\n<p>I skrivande stund m\u00e5ste webbplats\u00e4gare och administrat\u00f6rer fortfarande medvetet v\u00e4lja FSE genom att installera ett blocktema, exempelvis <a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\">Twenty-Twenty One Blocks<\/a> (den blockbaserade versionen av Twenty-Twenty One), och aktivera Gutenberg-pluginet.<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=a1Sf7PxfmLQ\"><\/kinsta-video><\/p>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/handbook\/full-site-editing\/\">Full Site Editing<\/a> \u00a0omfattar en rad separata delprojekt, inklusive webbplatsredigerare, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Global Styles<\/a>, s\u00f6kfr\u00e5geblock, navigeringsblock, mallar, blockteman och mycket mer. Men det n\u00e4rmaste webbplatsredigering som vi f\u00e5r i WordPress 5.8 \u00e4r \u00a0<strong>mallredigeringsl\u00e4get <\/strong>och motsvarande <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#theme-blocks\">temablock<\/a> som finns tillg\u00e4ngliga f\u00f6r anv\u00e4ndande i det l\u00e4get, som vi kommer att se senare i den h\u00e4r artikeln.<\/p>\n<p>L\u00e5t oss nu djupdyka i n\u00e5gra<strong> FSE-funktioner som sl\u00e5s samman i k\u00e4rnan med WordPress 5.8<\/strong>.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Mallredigeringsl\u00e4ge<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/introducing-the-template-editor-in-wordpress-5-8\/\">Mallredigeringsl\u00e4get<\/a>\u00a0\u00e4r ett s\u00e4tt att skapa inl\u00e4ggs-\/sidmallar med hj\u00e4lp av block. Det \u00e4r ett bra s\u00e4tt att minska komplexiteten i webbplatsbyggnaden, s\u00e5 att anv\u00e4ndare kan dra nytta av flera webbplatsredigeringsfunktioner utanf\u00f6r webbplatsredigerarens gr\u00e4nssnitt medan de v\u00e4njer sig vid att arbeta med block. Detta \u00e4r \u00e4ven bra f\u00f6r anv\u00e4ndare som inte anv\u00e4nder blockbaserade teman men \u00e4nd\u00e5 letar efter ett enkelt s\u00e4tt att skapa och redigera mallar fr\u00e5n blockredigerarens anv\u00e4ndargr\u00e4nssnitt.<\/p>\n<p>Att anpassa teman har aldrig tidigare varit s\u00e5 enkelt i WordPress. Nu beh\u00f6ver du inte l\u00e4ngre skapa ett <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-barntema\/\">barntema<\/a> f\u00f6r att skapa dina anpassade mallar. Med WordPress 5.8 \u00e4r mallredigering inte begr\u00e4nsat till blockteman utan \u00e4r \u00e4ven \u00a0<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">tillg\u00e4ngligt att anv\u00e4nda med klassiska teman<\/a>, \u00e4ven om du m\u00e5ste v\u00e4lja att aktivera det f\u00f6r klassiska teman.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Mallredigering kan anv\u00e4ndas i klassiska teman, inklusive en <em>theme.json<\/em>-fil eller support av &#8217;<code>block-templates<\/code>&#8217;. Det kan inte inaktiveras f\u00f6r blockteman.<\/p>\n<\/aside>\n\n<figure id=\"attachment_98643\" aria-describedby=\"caption-attachment-98643\" style=\"width: 2873px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98643 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-the-template-editor.jpg\" alt=\"Mallredigeraren.\" width=\"2873\" height=\"1385\"><figcaption id=\"caption-attachment-98643\" class=\"wp-caption-text\">Mallredigeraren.<\/figcaption><\/figure>\n<p>Om du vill skapa en ny mall beh\u00f6ver du bara aktivera mallredigeringsl\u00e4get i <strong>Inst\u00e4llnings<\/strong>-sidof\u00e4ltet. En ny <strong>mall-<\/strong>panel \u00e4r nu tillg\u00e4nglig f\u00f6r anv\u00e4ndare som vill v\u00e4xla redigeringsl\u00e4ge (se <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">Gutenberg 10.5<\/a> viktig anm\u00e4rkning).<\/p>\n<figure id=\"attachment_98639\" aria-describedby=\"caption-attachment-98639\" style=\"width: 1676px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98639 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-panel.jpg\" alt=\"Mallpanelen i blockredigerarens sidof\u00e4lt.\" width=\"1676\" height=\"942\"><figcaption id=\"caption-attachment-98639\" class=\"wp-caption-text\">Mallpanelen i blockredigerarens sidof\u00e4lt.<\/figcaption><\/figure>\n<p>I <strong>mall<\/strong>-panelen kan du skapa en ny mall eller redigera en befintlig mall.<\/p>\n<figure id=\"attachment_98595\" aria-describedby=\"caption-attachment-98595\" style=\"width: 1674px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/create-custom-template.jpg\" alt=\"Ange ett mallnamn.\" width=\"1674\" height=\"938\"><figcaption id=\"caption-attachment-98595\" class=\"wp-caption-text\">Ange ett mallnamn.<\/figcaption><\/figure>\n<p>Om du vill skapa en ny mall klickar du p\u00e5 <strong>Ny<\/strong>. Ange sedan ett mallnamn i modalen och klicka p\u00e5 <strong>skapa<\/strong>, s\u00e5 \u00e4r du klar.<\/p>\n<figure id=\"attachment_98638\" aria-describedby=\"caption-attachment-98638\" style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98638 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode.jpg\" alt=\"Mallredigeringsl\u00e4ge i WordPress 5.8.\" width=\"2876\" height=\"1314\"><figcaption id=\"caption-attachment-98638\" class=\"wp-caption-text\">Mallredigeringsl\u00e4ge i WordPress 5.8.<\/figcaption><\/figure>\n<p>I mallredigeringsl\u00e4get kan du skapa dina mallar med alla tillg\u00e4ngliga block, inklusive FSE-block som webbplatsrubrik, webbplats-tagline, inloggning \/ utloggning och m\u00e5nga fler.<\/p>\n<p>N\u00e4r du \u00e4r n\u00f6jd med dina redigeringar kan du v\u00e4xla tillbaka till inl\u00e4ggsredigeringsl\u00e4get och spara mallen separat fr\u00e5n inl\u00e4gg\/sidinneh\u00e5llet, som visas i bilden nedan:<\/p>\n<figure id=\"attachment_98631\" aria-describedby=\"caption-attachment-98631\" style=\"width: 2076px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98631 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/save-template.jpg\" alt=\"Alternativen f\u00f6r Spara mall.\" width=\"2076\" height=\"994\"><figcaption id=\"caption-attachment-98631\" class=\"wp-caption-text\">Alternativen f\u00f6r Spara mall.<\/figcaption><\/figure>\n<p>Mallar lagras i din <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpressdatabasen\/\">WordPress-databas<\/a> som anpassade inl\u00e4ggstyper med namnet <code>wp_template<\/code>. Detta g\u00f6r det m\u00f6jligt f\u00f6r dig att redigera en mall fr\u00e5n redigeringsgr\u00e4nssnittet, samt importera eller exportera dem n\u00e4r du vill. Du kan \u00e4ven anv\u00e4nda en mall p\u00e5 olika webbplatser (vid tidpunkten f\u00f6r detta skrivande \u00e4r den h\u00e4r funktionen endast tillg\u00e4nglig om du aktiverar Gutenberg-pluginet).<\/p>\n<figure id=\"attachment_98605\" aria-describedby=\"caption-attachment-98605\" style=\"width: 1566px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98605 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/export-templates.png\" alt=\"Exportera mallar och malldelar.\" width=\"1566\" height=\"1116\"><figcaption id=\"caption-attachment-98605\" class=\"wp-caption-text\">Exportera mallar och malldelar.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Observera att om du anger en blockmall f\u00f6r en sida eller ett blogginl\u00e4gg anv\u00e4nds inte den vanliga PHP-mallen l\u00e4ngre f\u00f6r att generera sidan. D\u00e5 anv\u00e4nds blockmallen i st\u00e4llet.<\/p>\n<\/aside>\n\n<p>Mallredigeringsl\u00e4get \u00e4r fortfarande lite buggigt vid tidpunkten f\u00f6r detta skrivande, som du kan l\u00e4sa i detta <span style=\"text-decoration: underline\"><a href=\"https:\/\/make.wordpress.org\/test\/2021\/05\/26\/fse-program-testing-call-7-polished-portfolios\/\">call for testing<\/a><\/span> och <a href=\"https:\/\/wptavern.com\/fse-outreach-7-building-a-portfolio-in-the-upcoming-template-editing-mode\">detta experiment fr\u00e5n Justin Tadlock<\/a>.<\/p>\n<figure id=\"attachment_98637\" aria-describedby=\"caption-attachment-98637\" style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98637 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode-issue.jpg\" alt=\"Fullbreddsjusterings-problem i Twenty Twenty-One klassiskt tema.\" width=\"2314\" height=\"916\"><figcaption id=\"caption-attachment-98637\" class=\"wp-caption-text\">Fullbreddsjusterings-problem i Twenty Twenty-One klassiskt tema.<\/figcaption><\/figure>\n<p>Men allt som kr\u00e4vs \u00e4r lite t\u00e5lamod och lite v\u00e4ntan p\u00e5 att de <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Template%20Editing%20Mode\">stora problemen<\/a> ska \u00e5tg\u00e4rdas s\u00e5 kommer det framg\u00e5 hur mallredigeringsl\u00e4get kommer att f\u00f6r\u00e4ndra hur du anpassar utseendet och k\u00e4nslan p\u00e5 dina webbplatser.<\/p>\n<p>Anv\u00e4ndare beh\u00f6ver inte l\u00e4ngre utvecklarf\u00e4rdigheter f\u00f6r att f\u00e5 fullst\u00e4ndig kontroll \u00f6ver layouten och webbplatsens \u00f6vergripande utseende.<\/p>\n<figure id=\"attachment_99183\" aria-describedby=\"caption-attachment-99183\" style=\"width: 2316px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99183 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/cover-block-in-template-editing-mode.jpg\" alt=\"Problemet med fullbreddsjusteringen har \u00e5tg\u00e4rdats.\" width=\"2316\" height=\"1130\"><figcaption id=\"caption-attachment-99183\" class=\"wp-caption-text\">Problemet med fullbreddsjusteringen har \u00e5tg\u00e4rdats.<\/figcaption><\/figure>\n<p>Mallredigeringsl\u00e4get var till en b\u00f6rjan <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">tillg\u00e4ngligt f\u00f6r b\u00e5de blockteman och klassiska teman<\/a>. Efter en tankev\u00e4ckande diskussion i 5.8 leads-kanalen best\u00e4mdes det att mallredigeraren skulle bli opt-in f\u00f6r klassiska teman och opt-out f\u00f6r blockteman (se \u00e4ven pull #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32858\">32858<\/a>).<\/p>\n<p>Enligt <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/07\/08\/summary-theme-features-in-wordpress-5-8\/\">Carolina Nymark<\/a>:<\/p>\n<blockquote><p>Mallredigering aktiverades ursprungligen f\u00f6r alla teman. Temautvecklare uttryckte en oro \u00f6ver att de inte skulle kunna uppdatera alla sina befintliga klassiska teman f\u00f6r att st\u00f6dja den h\u00e4r nya funktionen. Men med en sen \u00e4ndring v\u00e4ljer releasegruppen och redigeringsteamet att mallredigeringen ska vara opt-in f\u00f6r klassiska teman.<\/p><\/blockquote>\n<p>F\u00f6r opt-in i klassiska teman b\u00f6r utvecklare nu l\u00e4gga till temast\u00f6d:<\/p>\n<pre><code class=\"language-php\">add_theme_support( 'block-templates' );<\/code><\/pre>\n<p>Klassiska teman som anv\u00e4nder<em> theme.json <\/em>kan opt-out genom att ta bort temast\u00f6d:<\/p>\n<pre><code class=\"language-php\">remove_theme_support(  'block-templates' );<\/code><\/pre>\n<p>F\u00f6r en mer detaljerad \u00f6versikt \u00f6ver hur mallredigeringsl\u00e4get fungerar i WordPress 5.8 och n\u00e5gra anv\u00e4ndbara exempel p\u00e5 anv\u00e4ndning, se till att titta p\u00e5 den h\u00e4r videon fr\u00e5n Anne McCarty:<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=Z571V_jlD-o\"><\/kinsta-video><\/p>\n<h3>Temablock<\/h3>\n<p>Som n\u00e4mnts tidigare \u00e4r FSE inte en enda funktion utan en komplett upps\u00e4ttning av webbplatsbyggnadsfunktioner som inte endast \u00e4r relaterade till webbplatsredigeraren.\u00a0<a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#template-editing-mode\">Mallredigeringsl\u00e4get<\/a> \u00e4r bara ett exempel p\u00e5 detta. Men ut\u00f6ver mallredigeringen erbjuder WordPress 5.8 \u00e4ven m\u00e5nga <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/20\/full-site-editing-go-no-go-next-steps\/\">temablock<\/a> som kan visa information som dynamiskt h\u00e4mtas fr\u00e5n databasen. Vissa av dessa block kan \u00e4ven anv\u00e4ndas i icke FSE-sammanhang (se \u00e4rende nr <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">28744<\/a>).<\/p>\n<figure id=\"attachment_98606\" aria-describedby=\"caption-attachment-98606\" style=\"width: 1124px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98606 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/fse-blocks.jpg\" alt=\"Fullst\u00e4ndiga webbplatsredigerarblock som \u00e4r tillg\u00e4ngliga i icke FSE-sammanhang sedan WordPress 5.8.\" width=\"1124\" height=\"1798\"><figcaption id=\"caption-attachment-98606\" class=\"wp-caption-text\">Fullst\u00e4ndiga webbplatsredigerarblock som \u00e4r tillg\u00e4ngliga i icke FSE-sammanhang sedan WordPress 5.8.<\/figcaption><\/figure>\n<p><strong>Temablock ger malltaggs-funktionalitet till klassiska <\/strong><strong>teman<\/strong>, och du kan anv\u00e4nda dem p\u00e5 samma s\u00e4tt som vanliga block. Du kan exempelvis l\u00e4gga till inl\u00e4ggstaggar eller inl\u00e4ggets utvalda bild var som helst i inl\u00e4ggsinneh\u00e5llet eller mallen. F\u00f6r att f\u00e5 en uppfattning om antalet temablock som l\u00e4ggs till k\u00e4rnan med WordPress 5.8, skriv bara<strong> \/post<\/strong> i blockplatsh\u00e5llaren:<\/p>\n<figure id=\"attachment_98619\" aria-describedby=\"caption-attachment-98619\" style=\"width: 662px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98619 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/post-related-blocks.png\" alt=\" F\u00f6reslagna temablock.\" width=\"662\" height=\"864\"><figcaption id=\"caption-attachment-98619\" class=\"wp-caption-text\">F\u00f6reslagna temablock.<\/figcaption><\/figure>\n<p>Ett anv\u00e4ndbart temablock som finns tillg\u00e4ngligt i och med WordPress 5.8 \u00e4r <strong>inloggnings\/utloggnings<\/strong>-blocket, som tillhandah\u00e5ller inloggnings- och utloggningsl\u00e4nkar. Om s\u00e5 \u00f6nskas kan det visa inloggningsformul\u00e4ret ist\u00e4llet f\u00f6r en l\u00e4nk. Webbplatsadministrat\u00f6rer kan \u00e4ven anpassa omdirigeringsm\u00e5let (se PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29766\">29766<\/a>).<\/p>\n<figure id=\"attachment_98612\" aria-describedby=\"caption-attachment-98612\" style=\"width: 1948px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98612 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/login-out-block.jpg\" alt=\"Blockinst\u00e4llningarna f\u00f6r inloggning\/utloggning i blockredigeraren.\" width=\"1948\" height=\"770\"><figcaption id=\"caption-attachment-98612\" class=\"wp-caption-text\">Blockinst\u00e4llningarna f\u00f6r inloggning\/utloggning i blockredigeraren.<\/figcaption><\/figure>\n<p>En n\u00e4rmare vy \u00f6ver FSE-block finns i &#8221;Aktivera Full Site Editor-block i klassiska teman\u201d <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">p\u00e5 Github<\/a>.<\/p>\n<h3>Query Loop-blocket<\/h3>\n<p>Hur m\u00e5nga g\u00e5nger har du befunnit dig i en situation d\u00e4r du beh\u00f6ver visa en anpassad lista \u00f6ver blogginl\u00e4gg eller <a href=\"https:\/\/kinsta.com\/se\/blog\/anpassade-wordpress-inlaggstyper\/\">anpassade inl\u00e4ggstyper<\/a>? T\u00e4nk p\u00e5 produkter, evenemang, fastigheter&#8230; Det finns naturligtvis massor av plugins som du kan v\u00e4lja mellan f\u00f6r detta, men m\u00f6jligheten att skapa v\u00e4ldigt anpassade s\u00f6kfr\u00e5gor kr\u00e4ver ofta utvecklarf\u00e4rdigheter om man ska kunna jobba med <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\">WordPress Loop<\/a>.<\/p>\n<p>Med introduktionen av <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">Query Loop-blocket<\/a> i WordPress k\u00e4rna kan webbplats\u00e4gare och administrat\u00f6rer skapa listor \u00f6ver inl\u00e4gg och HLT utan att skriva komplex kod eller <a href=\"https:\/\/kinsta.com\/blog\/hire-wordpress-developer\/\">hyra in en utvecklare<\/a>, \u00e5tminstone i de vanligaste anv\u00e4ndningsomr\u00e5dena.<\/p>\n<p>S\u00e5 vad g\u00f6r Query Loop-blocket?<\/p>\n<p>Det g\u00f6r kort sagt samma arbete som WordPress Loop, men i blockredigerarens visuella kontext.<\/p>\n<p>Query Loop-blocket utf\u00f6r en s\u00f6kfr\u00e5ga baserat p\u00e5 anv\u00e4ndarens inst\u00e4llningar i WordPress-databasen, loopar genom varje h\u00e4mtat inl\u00e4gg och visar data p\u00e5 sidan.<\/p>\n<p>Efter <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">intensiv utveckling<\/a> har det h\u00e4r blocket n\u00e5tt sin nuvarande struktur och <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32283\">best\u00e5r numera av tv\u00e5 kapslade block<\/a>: <strong>fr\u00e5ge<\/strong>&#8211; och <strong>postmall<\/strong>-blocken.<\/p>\n<figure id=\"attachment_99071\" aria-describedby=\"caption-attachment-99071\" style=\"width: 2126px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99071 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/query-loop-list-view.jpg\" alt=\"Listvy \u00f6ver ett Query Loop-block.\" width=\"2126\" height=\"1124\"><figcaption id=\"caption-attachment-99071\" class=\"wp-caption-text\">Listvy \u00f6ver ett Query Loop-block.<\/figcaption><\/figure>\n<p>Eftersom Query Loop-blocket \u00e4r en avancerad funktion kr\u00e4ver det vissa konfigurationer.<\/p>\n<p>Du kan v\u00e4lja mellan olika <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-5\/#block-patterns\">blockm\u00f6nster<\/a> som listas i karusell- och rutn\u00e4tsvyn. N\u00e4r du har valt ditt m\u00f6nster klickar du bara p\u00e5 <strong>V\u00e4lj<\/strong>, s\u00e5 genererar Query Loop-blocket din anpassade lista med inl\u00e4gg.<\/p>\n<figure id=\"attachment_98623\" aria-describedby=\"caption-attachment-98623\" style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98623 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-grid-view.jpg\" alt=\"Query Loop-blockm\u00f6nster i rutn\u00e4tsvyn.\" width=\"1262\" height=\"1374\"><figcaption id=\"caption-attachment-98623\" class=\"wp-caption-text\">Query Loop-blockm\u00f6nster i rutn\u00e4tsvyn.<\/figcaption><\/figure>\n<p>Om du klickar p\u00e5 <strong>Starta tomt <\/strong>ser du en lista med fyra k\u00e4rnblockvariationer: \u00a0<strong>Titel &#038; Datum<\/strong>; <strong>Titel &#038; Utdrag<\/strong>;\u00a0<strong>Titel, datum &#038; utdrag<\/strong>; och <strong>bild,<\/strong> <strong>datum &#038; titel<\/strong> (se <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">erbjudna m\u00f6nster vid blockinst\u00e4llningar<\/a>).<\/p>\n<figure id=\"attachment_99068\" aria-describedby=\"caption-attachment-99068\" style=\"width: 1238px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99068 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-loop-variations-1.png\" alt=\"Variationer i Query Loop-blocket.\" width=\"1238\" height=\"662\"><figcaption id=\"caption-attachment-99068\" class=\"wp-caption-text\">Variationer i Query Loop-blocket.<\/figcaption><\/figure>\n<p>N\u00e4r du \u00e4r p\u00e5 plats kommer valet av Query Loop-blocket att visa sidof\u00e4ltet f\u00f6r blockinst\u00e4llningar, d\u00e4r du kan bygga s\u00f6kfr\u00e5gan. Du kan antingen \u00e4rva fr\u00e5gan fr\u00e5n <a href=\"https:\/\/kinsta.com\/blog\/what-is-a-url\/\">URL:en<\/a> \u00a0eller anpassa fr\u00e5geargumenten: vilken typ av inl\u00e4gg som ska inkluderas i listan, visningsordningen och om du vill ha klisterposter eller inte.<\/p>\n<p>Du kan \u00e4ven st\u00e4lla in flera filter, v\u00e4lja mellan kategorier, f\u00f6rfattare och nyckelord.<\/p>\n<figure id=\"attachment_98625\" aria-describedby=\"caption-attachment-98625\" style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98625 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block.jpg\" alt=\"Query Loop-blocket med sidof\u00e4ltsinst\u00e4llningar.\" width=\"2876\" height=\"1380\"><figcaption id=\"caption-attachment-98625\" class=\"wp-caption-text\">Query Loop-blocket med sidof\u00e4ltsinst\u00e4llningar.<\/figcaption><\/figure>\n<p>Dessutom ger knappen <strong>Bildsk\u00e4rmsinst\u00e4llningar<\/strong> i blockverktygsf\u00e4ltet fler inst\u00e4llningar f\u00f6r att styra antalet objekt per sida, f\u00f6rskjutningen och det maximala antalet sidor som ska visas.<\/p>\n<figure id=\"attachment_98622\" aria-describedby=\"caption-attachment-98622\" style=\"width: 1252px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98622 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-display-settings.jpg\" alt=\"Visa blockinst\u00e4llningar f\u00f6r Query Loop-blocket.\" width=\"1252\" height=\"1152\"><figcaption id=\"caption-attachment-98622\" class=\"wp-caption-text\">Visa blockinst\u00e4llningar f\u00f6r Query Loop-blocket.<\/figcaption><\/figure>\n<p>Ja, Query Loop-blocket \u00e4r ett kraftfullt verktyg som g\u00f6r det m\u00f6jligt f\u00f6r webbplats\u00e4gare att skapa v\u00e4ldigt anpassade listor \u00f6ver inl\u00e4gg och anpassade inl\u00e4ggstyper.<\/p>\n<p>Men om du g\u00e5r igenom <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/\">WP_Query<\/a>-klassparametrarna \u00e4r det tydligt att den m\u00f6jliga anpassningsniv\u00e5n med koden \u00e4r mycket mer detaljerad \u00e4n vad som \u00e4r m\u00f6jligt med hj\u00e4lp av Query Loop-blocket.<\/p>\n<p>Men det \u00e4r \u00e4nd\u00e5 ett v\u00e4rdefullt och flexibelt verktyg som l\u00e4mpar sig f\u00f6r m\u00e5nga anv\u00e4ndningsomr\u00e5den, och vi kommer sannolikt att se ytterligare f\u00f6rb\u00e4ttringar i framtiden.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Blocken Query Loop och Inl\u00e4ggsmall har bytt namn flera g\u00e5nger under de senaste veckorna. Den slutliga namngivningen har n\u00e5tts med <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">Gutenberg 10,9<\/a>.<\/p>\n<\/aside>\n\n<h3>Best\u00e4ndig listvy i inl\u00e4ggsredigeraren<\/h3>\n<p>En annan FSE-funktion som l\u00e4ggs till i inl\u00e4ggsredigeraren \u00e4r <strong>Best\u00e4ndig listvy<\/strong>. Innan WordPress 5.8 (och <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">Gutenberg 10.7<\/a>) visades listvyn i ett flytande f\u00f6nster. N\u00e4r du flyttade fokus utanf\u00f6r f\u00f6nstret f\u00f6rsvann listan.<\/p>\n<p>Omv\u00e4nt visade webbplatsredigeraren listvyn i ett sidof\u00e4lt som inneh\u00f6ll hela blocktr\u00e4det.<\/p>\n<p>Med WordPress 5.8 visas listvyn nu i ett sidof\u00e4lt i inl\u00e4ggsredigeraren, s\u00e5 att anv\u00e4ndarna kan navigera i blocktr\u00e4det snabbare och exaktare.<\/p>\n<figure id=\"attachment_98618\" aria-describedby=\"caption-attachment-98618\" style=\"width: 698px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98618 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/persistent-list-view.png\" alt=\"Listvy-sidof\u00e4ltet i WordPress 5.8.\" width=\"698\" height=\"1182\"><figcaption id=\"caption-attachment-98618\" class=\"wp-caption-text\">Listvy-sidof\u00e4ltet i WordPress 5.8.<\/figcaption><\/figure>\n<p>Om du klickar p\u00e5 ett objekt i listvyn markeras listobjektet och fokus flyttas till motsvarande block p\u00e5 inl\u00e4ggsredigerarens arbetsyta. Om du h\u00e5ller muspekaren \u00f6ver objekten i listvyn markeras dessutom b\u00e5de objektet och motsvarande block i inl\u00e4ggsredigeraren.<\/p>\n<figure id=\"attachment_99304\" aria-describedby=\"caption-attachment-99304\" style=\"width: 2158px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99304 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-enhancement-1.jpg\" alt=\"Hovra \u00f6ver objekten i listvyn.\" width=\"2158\" height=\"1184\"><figcaption id=\"caption-attachment-99304\" class=\"wp-caption-text\">Hovra \u00f6ver objekten i listvyn.<\/figcaption><\/figure>\n<p>Slutligen visas \u00e4ven ett tillagt ankare i ett block bredvid motsvarande objekt i listvyn.<\/p>\n<figure id=\"attachment_99303\" aria-describedby=\"caption-attachment-99303\" style=\"width: 2496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99303 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-anchor-2.jpg\" alt=\"L\u00e4gga till ett ankare i block i WordPress 5.8.\" width=\"2496\" height=\"1156\"><figcaption id=\"caption-attachment-99303\" class=\"wp-caption-text\">L\u00e4gga till ett ankare i block i WordPress 5.8.<\/figcaption><\/figure>\n<p>Med alla dessa f\u00f6rb\u00e4ttringar i listvyn b\u00f6r det bli mycket enklare att navigera i komplexa dokument.<\/p>\n<h2>Blockbaserad widgetredigerare och blockwidgetar i anpassaren<\/h2>\n<p>Den <strong>blockbaserade widgetredigeraren <\/strong>\u00e4r ett <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/projects\/27\">brett projekt<\/a> som syftar till att ta gr\u00e4nssnittet fr\u00e5n <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">blockredigeraren till widgetar med klassiskt tema<\/a>.<\/p>\n<p>Den nya widgetredigeraren erbjuder m\u00e5nga f\u00f6rdelar f\u00f6r de allra flesta som fortfarande anv\u00e4nder klassiska teman. Det till\u00e5ter dem samtidigt att bekanta sig med blockgr\u00e4nssnittet innan det blir standard f\u00f6r alla <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-anvanderroller\/\">WordPress-anv\u00e4ndare<\/a>.<\/p>\n<figure id=\"attachment_98656\" aria-describedby=\"caption-attachment-98656\" style=\"width: 2150px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98656 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-widgets.jpg\" alt=\"Blockwidgets modal.\" width=\"2150\" height=\"1254\"><figcaption id=\"caption-attachment-98656\" class=\"wp-caption-text\">Blockwidgets modal.<\/figcaption><\/figure>\n<p>Som <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">Anne McCarty p\u00e5pekar<\/a> erbjuder blockbaserade widgets flera f\u00f6rdelar, inklusive f\u00f6ljande:<\/p>\n<ul>\n<li>Du kan nu skapa<strong> layouter i sidof\u00e4lt, <\/strong>sidhuvuden och sidf\u00f6tter med kolumner, avgr\u00e4nsare, mellanslag och andra designblock.<\/li>\n<li>Widgets st\u00f6der nu <strong>RTF-redigering<\/strong> som standard, utan att anv\u00e4ndarna beh\u00f6ver l\u00e4gga till anpassad kod eller b\u00e4dda in en HTML-redigerare fr\u00e5n tredje part med ett plugin.<\/li>\n<li>M\u00e5nga kortkodsbaserade widgetar \u00e4r nu<strong> tillg\u00e4ngliga som block<\/strong>, vilket effektiviserar redigeringsupplevelsen.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">Andrei Draganescu<\/a> betonar \u00e4ven f\u00f6rdelarna som vi kan f\u00e5 av att kunna redigera widgets fr\u00e5n ett blockbaserat gr\u00e4nssnitt:<\/p>\n<blockquote><p>Den st\u00f6rsta f\u00f6rdelen med att uppgradera widgets-funktionen till block \u00e4r m\u00f6jligheten att direkt redigera widgets med hj\u00e4lp av den v\u00e4lbekanta blockinteraktion som du anv\u00e4nder n\u00e4r du redigerar en sida eller ett inl\u00e4gg p\u00e5 din webbplats. Att kunna anv\u00e4nda block \u00f6ppnar massor av nya kreativa m\u00f6jligheter, fr\u00e5n minilayouter utan kodskrivning till att utnyttja det stora biblioteket med k\u00e4rnblock och block fr\u00e5n tredje part f\u00f6r att skapa inneh\u00e5ll.<\/p><\/blockquote>\n<p>Du beh\u00f6ver inte oroa dig f\u00f6r att dina widgets ska sluta fungera med WordPress 5.8 eftersom <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">communityn har arbetat h\u00e5rt<\/a> f\u00f6r att <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/07\/whats-next-in-gutenberg-may-2021\/\">s\u00e4kerst\u00e4lla bak\u00e5tkompatibilitet<\/a> s\u00e5 att &#8221;befintliga widgets och widgets fr\u00e5n tredje part forts\u00e4tter att fungera och kan anv\u00e4ndas tillsammans med block\u201d <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">(se Blockbaserad widgetredigerare i WordPress 5.8<\/a>).<\/p>\n<p>Men \u00e5terigen, f\u00f6r att f\u00f6rhindra eventuella kompatibilitetsproblem p\u00e5 din befintliga WordPress-installation, gl\u00f6m inte att testa den nya versionen i en <a href=\"https:\/\/kinsta.com\/docs\/wordpress-hosting\/staging-environment\/\">iscens\u00e4ttningsmilj\u00f6<\/a> innan du uppdaterar din livewebbplats.<\/p>\n<p>F\u00f6r dig som inte vill anv\u00e4nda den blockbaserade widgetredigeraren f\u00f6r tillf\u00e4llet \u00e4r det fortfarande m\u00f6jligt att \u00e5terst\u00e4lla den klassiska <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-widgetar\/\">widget<\/a>-sk\u00e4rmen p\u00e5 tre olika s\u00e4tt:<\/p>\n<ol>\n<li>Du kan installera det <a href=\"https:\/\/wordpress.org\/plugins\/classic-widgets\/\">officiella Classic Widgets-pluginet<\/a>, som \u00e5terst\u00e4ller det tidigare gr\u00e4nssnittet p\u00e5 widgetssk\u00e4rmen. Pluginet &#8221;kommer att st\u00f6djas och underh\u00e5llas till \u00e5tminstone 2022, eller s\u00e5 l\u00e4nge som det \u00e4r n\u00f6dv\u00e4ndigt&#8221;.<\/li>\n<li>Temautvecklare kan som vanligt inaktivera den blockbaserade widgetredigeraren genom att ta bort temast\u00f6det:<br \/>\n<code class=\"language-php\">remove_theme_support( 'widgets-block-editor' );<\/code><\/li>\n<li>Det g\u00e5r \u00e4ven att anv\u00e4nda ett <code>use_widgets_block_editor<\/code>-filter:\n<pre><code class=\"language-php\">add_filter( 'use_widgets_block_editor', '__return_false' );<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>Se \u00e4ven <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/opting-out\/\">\u00c5terst\u00e4lla den klassiska widgetredigeraren<\/a> i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/overview\/\">Blockbaserade widgetredigerarens \u00f6versikt<\/a>.<\/p>\n<h3>Blockwidgetar till anpassaren<\/h3>\n<p>Som en del av samma projekt tar WordPress 5.8 \u00e4ven<strong> blockwidgetar till anpassaren<\/strong>.<\/p>\n<figure id=\"attachment_98642\" aria-describedby=\"caption-attachment-98642\" style=\"width: 598px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98642 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-block-widgets.jpg\" alt=\"Blockwidgetar i anpassaren.\" width=\"598\" height=\"1398\"><figcaption id=\"caption-attachment-98642\" class=\"wp-caption-text\">Blockwidgetar i anpassaren.<\/figcaption><\/figure>\n<p>Att l\u00e4gga till en blockbaserad widget i anpassaren \u00e4r ganska enkelt. Du kan starta <strong>anpassa widgetar-infogaren<\/strong> genom att klicka p\u00e5 plusikonen i det \u00f6vre h\u00f6gra h\u00f6rnet p\u00e5 widgetpanelen.<\/p>\n<figure id=\"attachment_98596\" aria-describedby=\"caption-attachment-98596\" style=\"width: 1706px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98596 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-inserter.jpg\" alt=\"Anpassa widgetar-infogaren.\" width=\"1706\" height=\"1298\"><figcaption id=\"caption-attachment-98596\" class=\"wp-caption-text\">Anpassa widgetar-infogaren.<\/figcaption><\/figure>\n<p>Du kan \u00e4ven starta <strong>snabbinfogaren<\/strong> l\u00e4ngst ned p\u00e5 widgetpanelen, som visas i f\u00f6ljande bild.<\/p>\n<figure id=\"attachment_98597\" aria-describedby=\"caption-attachment-98597\" style=\"width: 1212px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-quick-inserter.jpg\" alt=\"Snabbinfogaren f\u00f6r att anpassa widgetar.\" width=\"1212\" height=\"886\"><figcaption id=\"caption-attachment-98597\" class=\"wp-caption-text\">Snabbinfogaren f\u00f6r att anpassa widgetar.<\/figcaption><\/figure>\n<p>Vid tidpunkten f\u00f6r denna artikel kr\u00e4vs det fortfarande <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Widgets%20Customizer\">f\u00f6rb\u00e4ttringar och buggfixar<\/a> f\u00f6r det nya widgetredigeringsgr\u00e4nssnittet. M\u00f6jligheterna till anpassning \u00e4r dock praktiskt taget obegr\u00e4nsade.<\/p>\n<p>I grund och botten, fr\u00e5n och med WordPress 5.8, har du <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-gutenberg-redigeraren\/\">kraften hos blockredigeraren<\/a> \u00a0i anpassaren, och du kommer att kunna bygga v\u00e4ldigt anpassade sidof\u00e4lt utan kr\u00e5ngel.<\/p>\n<figure id=\"attachment_98632\" aria-describedby=\"caption-attachment-98632\" style=\"width: 924px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98632 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/show-more-settings.jpg\" alt=\"Visa fler inst\u00e4llningar.\" width=\"924\" height=\"1066\"><figcaption id=\"caption-attachment-98632\" class=\"wp-caption-text\">Visa fler inst\u00e4llningar.<\/figcaption><\/figure>\n<p>Den <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">blockbaserade widgetredigerarens<\/a> anm\u00e4rkning f\u00f6r utvecklare ger en mer djupg\u00e5ende \u00f6versikt \u00f6ver den blockbaserade widgetredigeraren, med exempel och resurser f\u00f6r utvecklare.<\/p>\n<h2>Blockredigerarens funktioner och f\u00f6rb\u00e4ttringar<\/h2>\n<p>F\u00f6rutom den f\u00f6rsta FSE-implementeringen erbjuder WordPress 5.8 \u00e4ven nya funktioner och f\u00f6rb\u00e4ttringar till flera delar av blockredigeraren, vilket avsev\u00e4rt f\u00f6rb\u00e4ttrar den \u00f6vergripande redigeringsupplevelsen.<\/p>\n<p>Dessa \u00e4ndringar inkluderar:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"9\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>F\u00f6rb\u00e4ttringar av media &#038; textblock<\/h3>\n<p>Det har varit m\u00f6jligt att omvandla ett block till ett <strong>kolumnblock<\/strong> ett tag nu. Alla block omvandlas dock till kolumnblock med en enda kolumn. Detta kan leda till mindre bra resultat f\u00f6r <strong>media &#038; text<\/strong>-block, d\u00e4r en enda kolumn vanligtvis inte \u00e4r l\u00e4mpligt.<\/p>\n<figure id=\"attachment_98614\" aria-describedby=\"caption-attachment-98614\" style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98614 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-transforms.jpg\" alt=\"Media &#038; textblock omformningar och stilar.\" width=\"2314\" height=\"1110\"><figcaption id=\"caption-attachment-98614\" class=\"wp-caption-text\">Media &#038; textblock omformningar och stilar.<\/figcaption><\/figure>\n<p>Fr\u00e5n och med WordPress 5.8 (<a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">och Gutenberg 10.2<\/a>) medf\u00f6r omvandlingen av<strong> media &#038; textblock<\/strong> till <strong>kolumnblock<\/strong> automatiskt att det l\u00e4ggs till tv\u00e5 kolumner: en f\u00f6r bilden och en annan f\u00f6r texten.<\/p>\n<figure id=\"attachment_98613\" aria-describedby=\"caption-attachment-98613\" style=\"width: 2018px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98613 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-to-two-columns.jpg\" alt=\"Omvandling till tv\u00e5 kolumner f\u00f6r media och text.\" width=\"2018\" height=\"652\"><figcaption id=\"caption-attachment-98613\" class=\"wp-caption-text\">Omvandling till tv\u00e5 kolumner f\u00f6r media och text.<\/figcaption><\/figure>\n<h3>F\u00f6rb\u00e4ttringar av \u00e5teranv\u00e4ndbara block<\/h3>\n<p>\u00c5teranv\u00e4ndbara block g\u00f6r det m\u00f6jligt f\u00f6r anv\u00e4ndaren att spara ett block eller en grupp block som ska \u00e5teranv\u00e4ndas senare i ett inl\u00e4gg eller en sida p\u00e5 en webbplats. Detta \u00e4r fr\u00e4mst anv\u00e4ndbart f\u00f6r anv\u00e4ndare som upprepade g\u00e5nger inkluderar samma block eller grupp av block i olika inl\u00e4gg \/ sidor.<\/p>\n<figure id=\"attachment_98628\" aria-describedby=\"caption-attachment-98628\" style=\"width: 1290px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98628 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-modal.jpg\" alt=\"Ett modal f\u00f6r fl\u00f6det f\u00f6r att skapa \u00e5teranv\u00e4ndbara block.\" width=\"1290\" height=\"964\"><figcaption id=\"caption-attachment-98628\" class=\"wp-caption-text\">Ett modal f\u00f6r fl\u00f6det f\u00f6r att skapa \u00e5teranv\u00e4ndbara block.<\/figcaption><\/figure>\n<p>I WordPress 5.8 \u00e4r \u00e5teranv\u00e4ndbara block tydligare visuellt, vilket g\u00f6r dem enklare f\u00f6r WordPress-anv\u00e4ndare att hantera.<\/p>\n<figure id=\"attachment_98630\" aria-describedby=\"caption-attachment-98630\" style=\"width: 2084px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98630 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block.jpg\" alt=\"Ett \u00e5teranv\u00e4ndbart block i WordPress 5.8.\" width=\"2084\" height=\"724\"><figcaption id=\"caption-attachment-98630\" class=\"wp-caption-text\">Ett \u00e5teranv\u00e4ndbart block i WordPress 5.8.<\/figcaption><\/figure>\n<p>H\u00e4r \u00e4r en snabb lista \u00f6ver f\u00f6rb\u00e4ttringarna med \u00e5teranv\u00e4ndbara block som anv\u00e4ndare har uppt\u00e4ckt efter att ha uppdaterat sina webbplatser till WordPress 5.8:<\/p>\n<ul>\n<li>N\u00e4r du skapar ett \u00e5teranv\u00e4ndbart block till\u00e5ter en modal nu anv\u00e4ndare att tilldela blocket ett namn.<\/li>\n<li>Det \u00e5teranv\u00e4ndbara blockets namn visas nu i blockverktygsf\u00e4ltet, navigeringslistan och br\u00f6dsmulorna.<\/li>\n<li>N\u00e4r ett underordnat block \u00e4r valt markeras nu \u00e5teranv\u00e4ndbara block. Detta inneb\u00e4r en betydande f\u00f6rb\u00e4ttring av anv\u00e4ndbarheten eftersom det g\u00f6r att du enkelt kan identifiera det \u00f6verordnade blocket och dess inneh\u00e5ll.<\/li>\n<li>Det \u00e4r nu m\u00f6jligt att \u00e4ndra blocknamnet i sidof\u00e4ltsinspekt\u00f6ren.<\/li>\n<\/ul>\n<figure id=\"attachment_98629\" aria-describedby=\"caption-attachment-98629\" style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98629 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-outlines.jpg\" alt=\"Markeringar av \u00e5teranv\u00e4ndbara block.\" width=\"1262\" height=\"658\"><figcaption id=\"caption-attachment-98629\" class=\"wp-caption-text\">Markeringar av \u00e5teranv\u00e4ndbara block.<\/figcaption><\/figure>\n<h3>Normaliserade verktygsf\u00e4lt f\u00f6r block<\/h3>\n<p>Flera blockverktygsf\u00e4lt har placerats om f\u00f6r att ge ett <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">konsekvent anv\u00e4ndargr\u00e4nssnitt f\u00f6r blocken<\/a> och f\u00f6rb\u00e4ttra anv\u00e4ndarupplevelsen. Verktygsf\u00e4ltskontroller grupperas efter semantisk ordning p\u00e5 &#8221;meta, blockniv\u00e5, infogad&#8221;.<\/p>\n<figure id=\"attachment_98607\" aria-describedby=\"caption-attachment-98607\" style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98607 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/heading-block-toolbar.png\" alt=\"Rubrikblockets verktygsf\u00e4lt.\" width=\"950\" height=\"294\"><figcaption id=\"caption-attachment-98607\" class=\"wp-caption-text\">Rubrikblockets verktygsf\u00e4lt.<\/figcaption><\/figure>\n<p>Sedan <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">Gutenberg 10.1<\/a> och <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">Gutenberg 10.3<\/a> har en hel upps\u00e4ttning blockverktygsf\u00e4lt normaliserats. Dessa inkluderar en <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29205\">bild<\/a>, knapp, knappar, lista, rubrik, stycke, citat, ljud, fil, media &#038; text, video och mer.<\/p>\n<p>Enligt <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/25983\">Matias Ventura:<\/a><\/p>\n<blockquote><p>De semantiska grupperingar som vi har i verktygsf\u00e4ltet \u2013 meta, blockniv\u00e5, infogad \u2013 b\u00f6r \u00e4ven ha en visuell representation med gr\u00e4nserna. Just nu har separata blockniv\u00e5kontroller olika representationer, inklusive Navigering d\u00e4r var och en har gr\u00e4nser.<\/p><\/blockquote>\n<figure id=\"attachment_98610\" aria-describedby=\"caption-attachment-98610\" style=\"width: 953px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98610 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar.png\" alt=\"Normaliserat bildblocks verktygsf\u00e4lt\" width=\"953\" height=\"280\"><figcaption id=\"caption-attachment-98610\" class=\"wp-caption-text\">Normaliserat bildblocks verktygsf\u00e4lt<\/figcaption><\/figure>\n<p>S\u00e5 sedan WordPress 5.8 \u00e4r blockverktygsf\u00e4lten <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/designers\/block-design\/#group-block-toolbar-controls-with-related-items\">styrda i segment<\/a> och omgivna av gr\u00e4nser. Dessutom:<\/p>\n<ul>\n<li><strong>Meta<\/strong>segmentet inneh\u00e5ller blocktypskontroller, exempelvis blockv\u00e4xlaren, draghandtaget och flytt-kontrollen.<\/li>\n<li>Segmentet <strong>Blockniv\u00e5<\/strong> inneh\u00e5ller specifika blockverktyg som p\u00e5verkar hela inneh\u00e5llet, exempelvis justering i ett paragrafblock eller l\u00e4nkning i ett bildblock.<\/li>\n<li>Segmentet <strong>Infogad niv\u00e5\/\u00d6vrigt<\/strong> inneh\u00e5ller infogade omvandlingsverktyg, exempelvis infogad formatering i ett textblock.<\/li>\n<li>Menyn <strong>Mer<\/strong> inneh\u00e5ller ytterligare verktyg.<\/li>\n<\/ul>\n<p>Bilden nedan j\u00e4mf\u00f6r Bildblockets verktygsf\u00e4lt i WordPress 5.7 och 5.8:<\/p>\n<figure id=\"attachment_98608\" aria-describedby=\"caption-attachment-98608\" style=\"width: 902px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98608 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar-before-after.png\" alt=\"Bildblockets verktygsf\u00e4lt i WordPress 5.7 vs WordPress 5.8.\" width=\"902\" height=\"466\"><figcaption id=\"caption-attachment-98608\" class=\"wp-caption-text\">Bildblockets verktygsf\u00e4lt i WordPress 5.7 vs WordPress 5.8.<\/figcaption><\/figure>\n<h3>F\u00f6rb\u00e4ttringar av det \u00f6vre verktygsf\u00e4ltet<\/h3>\n<p>N\u00e4r det \u00f6vre verktygsf\u00e4ltsl\u00e4get aktiverades i tidigare WordPress-versioner visades det \u00f6vre verktygsf\u00e4ltet och blockverktygsf\u00e4ltet sida vid sida, som du kan se i f\u00f6ljande bild:<\/p>\n<figure id=\"attachment_98644\" aria-describedby=\"caption-attachment-98644\" style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98644 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-57-top-toolbar.jpg\" alt=\"Det \u00f6vre verktygsf\u00e4ltet p\u00e5 breda sk\u00e4rmar i WordPress 5.7.\" width=\"2880\" height=\"1332\"><figcaption id=\"caption-attachment-98644\" class=\"wp-caption-text\">Det \u00f6vre verktygsf\u00e4ltet p\u00e5 breda sk\u00e4rmar i WordPress 5.7.<\/figcaption><\/figure>\n<p>Med WordPress 5.8 kommer blockverktygsf\u00e4ltet att fixeras h\u00f6gst upp i det \u00f6vre verktygsf\u00e4ltet genom att du aktiverar den \u00f6vre verktygsf\u00e4ltsvyn. Detta sker oberoende av webbl\u00e4sarens bredd och b\u00f6r f\u00f6rb\u00e4ttra anv\u00e4ndarupplevelsen avsev\u00e4rt.<\/p>\n<figure id=\"attachment_98645\" aria-describedby=\"caption-attachment-98645\" style=\"width: 2880px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98645 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-58-top-toolbar.jpg\" alt=\"Det \u00f6vre verktygsf\u00e4ltet p\u00e5 breda sk\u00e4rmar i WordPress 5.8.\" width=\"2880\" height=\"1324\"><figcaption id=\"caption-attachment-98645\" class=\"wp-caption-text\">Det \u00f6vre verktygsf\u00e4ltet p\u00e5 breda sk\u00e4rmar i WordPress 5.8.<\/figcaption><\/figure>\n<p>Den h\u00e4r f\u00f6rb\u00e4ttringen medf\u00f6r \u00e4ven \u00e4ndringar f\u00f6r utvecklare eftersom den f\u00f6renar API:er i verktygsf\u00e4ltet under komponenten <code>&lt;BlockTools \/&gt;<\/code> (se PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31134\">31134<\/a>).<\/p>\n<h3>Inb\u00e4ddade PDF-filer<\/h3>\n<p>N\u00e4r en PDF-fil l\u00e4ggs till i dokumentet via filblocket kan du med en ny sidof\u00e4ltsv\u00e4xling aktivera\/inaktivera en <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">inb\u00e4ddad PDF-version<\/a> (se PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30857\">30857<\/a>).<\/p>\n<figure id=\"attachment_98604\" aria-describedby=\"caption-attachment-98604\" style=\"width: 2080px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98604 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/embedded-pdf.jpg\" alt=\"En inb\u00e4ddad PDF i WordPress 5.8.\" width=\"2080\" height=\"1054\"><figcaption id=\"caption-attachment-98604\" class=\"wp-caption-text\">En inb\u00e4ddad PDF i WordPress 5.8.<\/figcaption><\/figure>\n<p>Du kan antingen dra filen direkt till redigerarens arbetsyta eller helt enkelt markera den fr\u00e5n biblioteket. Det \u00e4r \u00e4ven m\u00f6jligt att manuellt justera h\u00f6jden p\u00e5 PDF-visaren eller att anv\u00e4nda sidof\u00e4ltskontrollen.<\/p>\n<p>Alla st\u00f6rre webbl\u00e4sare st\u00f6der PDF-visaren, <a href=\"https:\/\/caniuse.com\/pdf-viewer\">f\u00f6rutom mobila webbl\u00e4sare<\/a>.<\/p>\n<h3>St\u00f6d f\u00f6r duotonblock<\/h3>\n<p>En av de mest intressanta funktionerna som sl\u00e5s samman i k\u00e4rnan med WordPress 5.8 \u00e4r duotonfiltret, som f\u00f6rst introducerades med <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">Gutenberg 10.6<\/a>.<\/p>\n<figure id=\"attachment_98601\" aria-describedby=\"caption-attachment-98601\" style=\"width: 1256px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98601 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image.jpg\" alt=\"Det nya duotondesignverktyget i ett bildblock.\" width=\"1256\" height=\"1186\"><figcaption id=\"caption-attachment-98601\" class=\"wp-caption-text\">Det nya duotondesignverktyget i ett bildblock.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26752\">Duotonfiltret \u00e4r tillg\u00e4ngligt<\/a> som en &#8221;blockst\u00f6dsfunktion&#8221; och \u00e4r aktiverat som standard i k\u00e4rn-<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26751\">bilden<\/a> och omslagsblocken. I omslagsblocket fungerar det dock inte ihop med <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/31662\">fasta bakgrunder<\/a>.<\/p>\n<figure id=\"attachment_98602\" aria-describedby=\"caption-attachment-98602\" style=\"width: 1268px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98602 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-picker.jpg\" alt=\"Den nya duotonv\u00e4ljaren i WordPress 5.8.\" width=\"1268\" height=\"998\"><figcaption id=\"caption-attachment-98602\" class=\"wp-caption-text\">Den nya duotonv\u00e4ljaren i WordPress 5.8.<\/figcaption><\/figure>\n<p>Verktygsf\u00e4lten f\u00f6r Bild- och Omslagsblock visar nu en <strong>Anv\u00e4nd duoton filter<\/strong>-kontroll som visar en duotonv\u00e4ljare med m\u00e5nga f\u00f6rinst\u00e4llningar att v\u00e4lja mellan.<\/p>\n<p>Tv\u00e5 underkontroller till\u00e5ter separat anpassning av skuggor och markeringar. Effekten till\u00e4mpas med ett <a href=\"https:\/\/www.w3.org\/TR\/SVG11\/filters.html\">SVG-filter<\/a> som \u00e4r dolt med infogade format och som till\u00e4mpas med ett specifikt klassnamn.<\/p>\n<figure id=\"attachment_98603\" aria-describedby=\"caption-attachment-98603\" style=\"width: 2142px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98603 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-source-code.jpg\" alt=\"Inspekterar duoton SVG filtret i Chrome DevTools.\" width=\"2142\" height=\"1038\"><figcaption id=\"caption-attachment-98603\" class=\"wp-caption-text\">Inspekterar duoton SVG filtret i Chrome DevTools.<\/figcaption><\/figure>\n<p>Det nya verktyget levereras ihop med en ny <code>color._ experimentalDuotone<\/code>-egenskap, vilket g\u00f6r det m\u00f6jligt f\u00f6r utvecklare att l\u00e4gga till duotonfiltret i block eller delar av block i sin <strong>block.json-fil<\/strong> \u00a0(mer om detta i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color\">color object reference<\/a>):<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\t__experimentalDuotone: '&gt; .duotone-img, &gt; .duotone-video',\n\t\tbackground: false,\n\t\ttext: false\n\t}\n}<\/code><\/pre>\n<p>N\u00e4r ett block f\u00f6rklarar st\u00f6d f\u00f6r <code>color.__experimentalDuotone<\/code> kan ett \u00a0<code>style<\/code> \u00a0-attribut anv\u00e4ndas f\u00f6r att ange anpassade <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color-__experimentalduotone\">standardf\u00e4rger<\/a>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tduotone: [\n\t\t\t\t\t'#FFF',\n\t\t\t\t\t'#000\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Nedan kan du se samma bild med tv\u00e5 olika till\u00e4mpade duotoneffekter:<\/p>\n<figure id=\"attachment_98599\" aria-describedby=\"caption-attachment-98599\" style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-blue.jpg\" alt=\"Duotonf\u00e4rgfilter som anv\u00e4nds \u00f6ver en bild.\" width=\"1250\" height=\"850\"><figcaption id=\"caption-attachment-98599\" class=\"wp-caption-text\">Duotonf\u00e4rgfilter som anv\u00e4nds \u00f6ver en bild.<\/figcaption><\/figure>\n<figure id=\"attachment_98600\" aria-describedby=\"caption-attachment-98600\" style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98600 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-yellow.jpg\" alt=\"Ett annat duotonf\u00e4rgfilter som anv\u00e4nds \u00f6ver en bild.\" width=\"1250\" height=\"850\"><figcaption id=\"caption-attachment-98600\" class=\"wp-caption-text\">Ett annat duotonf\u00e4rgfilter som anv\u00e4nds \u00f6ver en bild.<\/figcaption><\/figure>\n<p>Utvecklare kan definiera duoton-<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">f\u00f6rinst\u00e4llningar<\/a> i filen<strong> theme.json<\/strong> \u00a0(se <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">n\u00e4sta avsnitt<\/a>), som visas i f\u00f6ljande utdrag:<\/p>\n<pre><code class=\"language-javascript\">{\n\"version\": 1,\n\"settings\": {\n\t\"color\": {\n\t\t\"duotone\": [\n\t\t\t{\n\t\t\t\t\"colors\": [ \"#000\", \"#7f7f7f\" ],\n\t\t\t\t\"slug\": \"black-and-white\",\n\t\t\t\t\"name\": \"dark-grayscale\"\n\t\t\t}\n\t\t],\n\t...<\/code><\/pre>\n<p>Du kan l\u00e4sa mer om duotonfilter i <a href=\"https:\/\/wordpress.org\/news\/2021\/05\/coloring-your-images-with-duotone-filters\/\">F\u00e4rgl\u00e4ggning av dina bilder med duotonfilter<\/a>.<\/p>\n<h3>Tabellblocksf\u00e4rger och kantlinjer<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">WordPress 5.8 ger \u00e4ven<\/a> ett par f\u00f6rb\u00e4ttringar till tabellblocket, inklusive b\u00e4ttre kontroll \u00f6ver <a href=\"https:\/\/kinsta.com\/se\/blog\/webbplats-fargscheman\/\">tabell-bakgrund och f\u00f6rgrundsf\u00e4rger<\/a>.<\/p>\n<figure id=\"attachment_98636\" aria-describedby=\"caption-attachment-98636\" style=\"width: 1618px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98636 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/table-block-color-settings.jpg\" alt=\"Ut\u00f6kade Inst\u00e4llningar f\u00f6r tabellblocksf\u00e4rg.\" width=\"1618\" height=\"1144\"><figcaption id=\"caption-attachment-98636\" class=\"wp-caption-text\">Ut\u00f6kade Inst\u00e4llningar f\u00f6r tabellblocksf\u00e4rg.<\/figcaption><\/figure>\n<p>Ett annat till\u00e4gg till tabellblocket \u00e4r <strong>st\u00f6d f\u00f6r kantblock<\/strong>, vilket ger anv\u00e4ndarna m\u00f6jlighet att styra kantlinjef\u00e4rg, format och bredd.<\/p>\n<p>Om det aktiva temat st\u00f6der denna nya funktion, ger en ny panel f\u00f6r<strong> kantinst\u00e4llningar<\/strong> tre nya kontroller f\u00f6r anv\u00e4ndaranpassningar.<\/p>\n<figure id=\"attachment_98672\" aria-describedby=\"caption-attachment-98672\" style=\"width: 1984px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98672 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/border-block-support.jpg\" alt=\"Kantblockskontroller i WordPress 5.8 och TT1 Block.\" width=\"1984\" height=\"1224\"><figcaption id=\"caption-attachment-98672\" class=\"wp-caption-text\">Kantblockskontroller i WordPress 5.8 och TT1 Block.<\/figcaption><\/figure>\n<p>Utvecklare kan l\u00e4gga till <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31265\">st\u00f6d f\u00f6r kantblock<\/a> i sina teman genom att l\u00e4gga till f\u00f6ljande kod i filen<strong> theme.json:<\/strong><\/p>\n<pre><code class=\"language-javascript\">\"border\": {\n\t\"customColor\": true,\n\t\"customStyle\": true,\n\t\"customWidth\": true\n}<\/code><\/pre>\n<h3>F\u00f6rb\u00e4ttringar av blockinfogaren<\/h3>\n<p>I WordPress 5.8 har blockinfogaren f\u00f6rb\u00e4ttrats med <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">flera till\u00e4gg<\/a> (PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26938\">26938<\/a> och #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21080#issuecomment-649231549\">21080<\/a>):<\/p>\n<figure id=\"attachment_98593\" aria-describedby=\"caption-attachment-98593\" style=\"width: 1354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98593 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-inserter-keyboard-navigation.jpg\" alt=\"Om du trycker p\u00e5 pilen upp\u00e5t och ned\u00e5t flyttas radfokus.\" width=\"1354\" height=\"840\"><figcaption id=\"caption-attachment-98593\" class=\"wp-caption-text\">Om du trycker p\u00e5 pilen upp\u00e5t och ned\u00e5t flyttas radfokus.<\/figcaption><\/figure>\n<ol>\n<li><strong> Tv\u00e5dimensionell tangentbordsnavigering p\u00e5 blockinfogaren<\/strong>. Nu kan vi navigera mellan block mer exakt och intuitivt.<\/li>\n<\/ol>\n<ul>\n<li>Genom att trycka p\u00e5 pilen upp\u00e5t (\u2191 ) och pilen ned\u00e5t ( \u2193) flyttas fokus till raden ovanf\u00f6r eller under.<\/li>\n<li>Genom att trycka p\u00e5<strong> Tab <\/strong>eller<strong> Skift +<\/strong> <strong>Tab<\/strong> kan du flytta fokus mellan s\u00f6krutan, tab-listan och det f\u00f6rsta objektet i varje kategori.<\/li>\n<\/ul>\n<ol start=\"2\">\n<li><strong> En ny &#8221;Tema&#8221;-kategori f\u00f6r malldelar och<\/strong> <strong>variationer<\/strong> visas nu i infogaren i Full Site Editing (se PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30020\">30020<\/a>).<\/li>\n<li><strong> Flera ord i den autokompletterande frasmatchningen<\/strong> \u00e4r nu till\u00e5tna (se PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29939\">29939<\/a>).<\/li>\n<\/ol>\n<h3>Ytterligare f\u00f6rb\u00e4ttringar av blockredigeraren<\/h3>\n<p>WordPress 5.8 innefattar massor av ytterligare sm\u00e5 och medelstora f\u00f6r\u00e4ndringar som \u00e4r v\u00e4rda att skriva om h\u00e4r. Vi kommer att n\u00e4mna f\u00f6ljande av dessa f\u00f6rb\u00e4ttringar:<\/p>\n<h4>Dra och sl\u00e4pp-st\u00f6d i omslagsblock<\/h4>\n<p>Nu kan du dra och sl\u00e4ppa bilder fr\u00e5n skrivbordet f\u00f6r att ers\u00e4tta ett omslagsblocks bakgrund (se Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a> och PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29813\">29813<\/a>).<\/p>\n<figure id=\"attachment_98598\" aria-describedby=\"caption-attachment-98598\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98598 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/drag-and-drop-cover-background-image.gif\" alt=\"Dra och sl\u00e4pp bakgrundsbilder i omslagsblocket.\" width=\"558\" height=\"338\"><figcaption id=\"caption-attachment-98598\" class=\"wp-caption-text\">Dra och sl\u00e4pp bakgrundsbilder i omslagsblocket.<\/figcaption><\/figure>\n<h4>F\u00f6rb\u00e4ttrat publiceringsgr\u00e4nssnitt<\/h4>\n<p>I och med WordPress 5.8 visar publiceringsgr\u00e4nssnittet webbplatsikonen och titeln f\u00f6r att g\u00f6ra det tydligare var du publicerar dina inl\u00e4gg eller sidor (<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">Gutenberg 10.4<\/a>).<\/p>\n<figure id=\"attachment_98620\" aria-describedby=\"caption-attachment-98620\" style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98620 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-57.png\" alt=\"Publiceringsgr\u00e4nssnitt i WordPress 5.7.\" width=\"562\" height=\"730\"><figcaption id=\"caption-attachment-98620\" class=\"wp-caption-text\">Publiceringsgr\u00e4nssnitt i WordPress 5.7.<\/figcaption><\/figure>\n<figure id=\"attachment_98621\" aria-describedby=\"caption-attachment-98621\" style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98621 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-58.png\" alt=\"Publiceringsgr\u00e4nssnitt i WordPress 5.8.\" width=\"562\" height=\"730\"><figcaption id=\"caption-attachment-98621\" class=\"wp-caption-text\">Publiceringsgr\u00e4nssnitt i WordPress 5.8.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30231\">Den h\u00e4r f\u00f6rb\u00e4ttringen<\/a>\u00a0 \u00e4r f\u00f6rdelaktig om du arbetar i helsk\u00e4rmsl\u00e4ge eller p\u00e5 mobila enheter.<\/p>\n<h2>Blockinst\u00e4llningar och stilar med theme.json<\/h2>\n<p>Med WordPress 5.8 blir <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">filen <strong>theme.json<\/strong><\/a> &#8221;en central konfigurationspunkt&#8221;, vilket ger ett nytt s\u00e4tt f\u00f6r temautvecklare att anpassa redigeringsinst\u00e4llningar och stilar.<\/p>\n<p>Med hj\u00e4lp av en<strong> theme.json<\/strong>-fil \u00a0kan teman ange anpassade f\u00f6rinst\u00e4llningar och\/eller l\u00e4gga till st\u00f6d f\u00f6r nya funktioner, exempelvis duoton och tabellkantlinjer (se <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">Globala inst\u00e4llningar &#038; stilar<\/a>).<\/p>\n<p>Enligt <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">Andr\u00e9 Maneiro:<\/a><\/p>\n<blockquote><p>Denna nya mekanism syftar till att ta \u00f6ver och konsolidera alla <code>add_theme_support<\/code>-anrop som tidigare kr\u00e4vdes f\u00f6r att kontrollera redigeraren.<\/p><\/blockquote>\n<p>Du kan exempelvis globalt ange en anpassad duotonf\u00f6rinst\u00e4llning med f\u00f6ljande kod:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [ \"#000\", \"#0FF\" ],\n\t\t\t\t\t\"slug\": \"black-cyan\",\n\t\t\t\t\t\"name\": \"Black Cyan\"\n\t\t\t\t}\n\t\t\t],<\/code><\/pre>\n<p>Detta skulle skriva \u00f6ver standardf\u00f6rinst\u00e4llningarna s\u00e5 att du endast ser ett duotonalternativ:<\/p>\n<figure id=\"attachment_99016\" aria-describedby=\"caption-attachment-99016\" style=\"width: 1264px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99016 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/custom-duotone-preset.jpg\" alt=\"Anpassad duotonf\u00f6rinst\u00e4llning i theme.json.\" width=\"1264\" height=\"802\"><figcaption id=\"caption-attachment-99016\" class=\"wp-caption-text\">Anpassad duotonf\u00f6rinst\u00e4llning i theme.json.<\/figcaption><\/figure>\n<p>Den nya mekanismen skapar ett s\u00e4tt att styra inst\u00e4llningarna antingen globalt eller per block. Du kan exempelvis l\u00e4gga till en anpassad 12px-teckenstorlek globalt genom att l\u00e4gga till f\u00f6ljande f\u00f6rinst\u00e4llning i filen<strong> theme.json:<\/strong><\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"customLineHeight\": true,\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t},\n\t\t\t\t{...}<\/code><\/pre>\n<p>Detta resulterar i en ny teckenstorlek som \u00e4r tillg\u00e4nglig f\u00f6r anv\u00e4ndare att anv\u00e4nda med<em> vilken<\/em> text som helst i inneh\u00e5llet.<\/p>\n<figure id=\"attachment_99017\" aria-describedby=\"caption-attachment-99017\" style=\"width: 560px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99017 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/extra-extra-small-font-size-settings.png\" alt=\"En globalt definierad anpassad teckenstorlek i theme.json.\" width=\"560\" height=\"754\"><figcaption id=\"caption-attachment-99017\" class=\"wp-caption-text\">En globalt definierad anpassad teckenstorlek i theme.json.<\/figcaption><\/figure>\n<p>Om du bara vill anpassa paragrafblocket blir koden n\u00e5got annorlunda:<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/paragraph\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSizes\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-small\",\n\t\t\t\t\t\t\t\"size\": \"16px\",\n\t\t\t\t\t\t\t\"name\": \"Extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"small\",\n\t\t\t\t\t\t\t\"size\": \"18px\",\n\t\t\t\t\t\t\t\"name\": \"Small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"normal\",\n\t\t\t\t\t\t\t\"size\": \"20px\",\n\t\t\t\t\t\t\t\"name\": \"Normal\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"large\",\n\t\t\t\t\t\t\t\"size\": \"24px\",\n\t\t\t\t\t\t\t\"name\": \"Large\"\n\t\t\t\t\t\t}\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>S\u00e5d\u00e4r! Du har just st\u00e4llt in dina anpassade f\u00f6rinst\u00e4llningar f\u00f6r teckenstorlek i paragrafblocket.<\/p>\n<figure id=\"attachment_99018\" aria-describedby=\"caption-attachment-99018\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99018 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/paragraph-block-custom-settings.png\" alt=\"Ett styckeblock med anpassade f\u00f6rinst\u00e4llningar f\u00f6r teckenstorlek.\" width=\"558\" height=\"1216\"><figcaption id=\"caption-attachment-99018\" class=\"wp-caption-text\">Ett styckeblock med anpassade f\u00f6rinst\u00e4llningar f\u00f6r teckenstorlek.<\/figcaption><\/figure>\n<p>K\u00e4rnblocken har uppdaterats f\u00f6r att f\u00f6lja den nya mekanismen, medan block fr\u00e5n tredje part kan anpassas till den nya mekanismen med hj\u00e4lp av React <code>useSetting<\/code> \u00a0hook (l\u00e4s mer om den h\u00e4r funktionen i <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">dev-note<\/a> och <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-editor\/#useSetting\">API-dokumentationen<\/a>):<\/p>\n<pre><code class=\"language-javascript\">const isEnabled = useSetting( 'spacing.margin' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Inst\u00e4llningarna som deklareras i<strong> theme.json<\/strong> har f\u00f6retr\u00e4de framf\u00f6r inst\u00e4llningar som deklareras via <code>add_theme_support<\/code>.<\/p>\n<\/aside>\n\n<p>Den nya mekanismen som baseras p\u00e5 filen<strong> theme.json<\/strong> g\u00e4ller inte bara f\u00f6r blockinst\u00e4llningar. Faktum \u00e4r att fr\u00e5n och med WordPress 5.8 kommer det inte l\u00e4ngre att vara n\u00f6dv\u00e4ndigt att skapa redigeringsstilar och placera dem sist i k\u00f6n. Det kommer att r\u00e4cka med att deklarera f\u00f6rinst\u00e4llningar i <strong>theme.json<\/strong>-filen; \u00a0motorn genererar klasserna och s\u00e4tter dem automatiskt sist i k\u00f6n b\u00e5de i redigeraren och frontend.<\/p>\n<p>Motorn genererar \u00e4ven motsvarande <a href=\"https:\/\/kinsta.com\/se\/blog\/twenty-twenty-one-temat\/#styles-and-css-custom-properties\">CSS Anpassade Egenskaper<\/a>.<\/p>\n<p>I f\u00f6reg\u00e5ende exempel angav vi fem <code>fontSizes<\/code>-f\u00f6rinst\u00e4llningar f\u00f6r paragrafblocket. F\u00f6r dessa f\u00f6rinst\u00e4llningar genereras f\u00f6ljande anpassade CSS-egenskaper:<\/p>\n<pre><code class=\"language-css\">p {\n\t--wp--preset--font-size--extra-extra-small: 12px;\n\t--wp--preset--font-size--extra-small: 16px;\n\t--wp--preset--font-size--small: 18px;\n\t--wp--preset--font-size--normal: 20px;\n\t--wp--preset--font-size--large: 24px;\n}<\/code><\/pre>\n<p>N\u00e4r du har angett paragrafteckensnittsstorleken i filen<strong> theme.json<\/strong> tar motsvarande <code>p<\/code>-element klassen <code>has-{preset-slug}-{preset-category}<\/code>.<\/p>\n<p>Detta inneb\u00e4r att ett stycke med en <code>extra-extra-small<\/code>\u00a0teckenstorlek f\u00e5r klassen <code>has-extra-extra-small-font-size<\/code>.<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"has-extra-extra-small-font-size\"&gt;Lorem ipsum dolor...&lt;\/p&gt;<\/code><\/pre>\n<p>Och h\u00e4r \u00e4r CSS-deklarationsblocket:<\/p>\n<pre><code class=\"language-css\">p.has-extra-extra-small-font-size {\n\tfont-size: var(--wp--preset--font-size--extra-extra-small) !important;\n}<\/code><\/pre>\n<p>F\u00f6r en n\u00e4rmare titt p\u00e5 inst\u00e4llningen och stilarna med<strong> theme.json<\/strong>, se till att kontrollera <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">dev-note<\/a> och <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">API-dokumentationen<\/a>.<\/p>\n<p>Kontrollera \u00e4ven Anne McCartys <a href=\"https:\/\/make.wordpress.org\/test\/2021\/06\/24\/call-for-testing-thrive-with-theme-json\/\">FSE Call for testing<\/a> f\u00f6r mer anv\u00e4ndbar l\u00e4sning och en sp\u00e4nnande utmaning f\u00f6r utvecklare som vill utforska de nya \u00a0<strong>theme.json<\/strong>-funktionerna.<\/p>\n<h2>Block API-f\u00f6rb\u00e4ttringar<\/h2>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">Block API-f\u00f6rb\u00e4ttringar<\/a> som kommer med WordPress 5.8 f\u00f6rtj\u00e4nar en s\u00e4rskild uppm\u00e4rksamhet fr\u00e5n plugin-utvecklare.<\/p>\n<p>Att anv\u00e4nda filen<strong> block.json<\/strong> uppmuntras nu som det kanoniska s\u00e4ttet f\u00f6r att <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\">registrera blocktyper<\/a> och ger flera f\u00f6rdelar:<\/p>\n<ul>\n<li>N\u00e4r det g\u00e4ller prestanda: Om temat st\u00f6der <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-latladdning\/\">lazy loading av tillg\u00e5ngar<\/a>, kommer registrering av blocktyper via filen<strong> block.json<\/strong> \u00a0automatiskt att optimera resursen som \u00e4r sist i k\u00f6n. Detta beror p\u00e5 att de resurser som anges av <code>style<\/code> &#8211; \u00a0och <code>script<\/code>-egenskaperna endast kommer att anges p\u00e5 frontend n\u00e4r blocket identifieras. Detta m\u00f6jligg\u00f6r utveckling av effektivare plugins, minskar sidstorleken och f\u00f6rhindrar flera av de problem som omfattas av <a href=\"https:\/\/kinsta.com\/blog\/disable-wordpress-plugins-loading\/\">den h\u00e4r artikeln<\/a>.<\/li>\n<li>Filen <strong>block.json<\/strong> f\u00f6renklar blockregistreringen p\u00e5 serversidan genom att l\u00e5ta <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/block-types\/\">API-slutpunkten f\u00f6r Block Types REST<\/a> lista blocket.<\/li>\n<li>Filen <strong>block.json<\/strong> kr\u00e4vs \u00e4ven om du best\u00e4mmer dig f\u00f6r att skicka in ditt blockplugin till WordPress Plugins Directory.<\/li>\n<\/ul>\n<h3>\u00c4ndringar i register_block_type-funktionen<\/h3>\n<p>Sedan WordPress 5.8 har <code>register_block_type<\/code>\u00a0-funktionen f\u00f6rb\u00e4ttrats f\u00f6r att l\u00e4sa metadata fr\u00e5n filen<strong> block.json.<\/strong> \u00a0Nu accepterar <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\">den f\u00f6rsta parametern<\/a> s\u00f6kv\u00e4gen till mappen d\u00e4r filen <strong>block.json<\/strong> finns.<\/p>\n<p>Funktionen kan anv\u00e4ndas enligt f\u00f6ljande exempel:<\/p>\n<pre><code class=\"language-php\">function create_custom_block_init() {\n\tregister_block_type( __DIR__ );\n}\nadd_action( 'init', 'create_custom_block_init' );<\/code><\/pre>\n<p>Den returnerar den registrerade blocktypen eller <code>false<\/code> vid fel.<\/p>\n<p>Som du kanske m\u00e4rker anv\u00e4nds funktionen <code>register_block_type<\/code>\u00a0nu p\u00e5 samma s\u00e4tt som <code>register_block_type_from_metadata<\/code>-funktionen, som tidigare var den enda funktionen som var tillg\u00e4nglig f\u00f6r att registrera en blocktyp \u00a0<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type_from_metadata\/\">genom att l\u00e4sa metadata fr\u00e5n filen<\/a> <strong>block.json.<\/strong> \u00a0H\u00e4r f\u00f6rklaras detta av <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">Greg Zi\u00f3\u0142kowski<\/a>:<\/p>\n<blockquote><p>Vi best\u00e4mde oss f\u00f6r att f\u00f6rena den befintliga funktionaliteten som finns i <code>register_block_type_from_metadata-metoden<\/code> med \u00a0<code>register_block_type<\/code>\u00a0f\u00f6r att undvika den f\u00f6rvirring som den skapade. Det \u00e4r fortfarande m\u00f6jligt att anv\u00e4nda b\u00e5da funktionerna, men vi planerar att endast anv\u00e4nda den kortare versionen i de officiella dokumenten och verktygen fr\u00e5n och med nu.<\/p><\/blockquote>\n<p>N\u00e4r blocket har registrerats p\u00e5 servern beh\u00f6ver du bara <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/\">registrera inst\u00e4llningarna<\/a> p\u00e5 klienten med samma blocknamn i din <strong>index.js<\/strong>-fil.<\/p>\n<p>F\u00f6r en mer djupg\u00e5ende \u00f6versikt \u00f6ver block-API-f\u00f6rb\u00e4ttringarna som introducerats av WordPress 5.8, se till att <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">kontrollera dev-note av Greg Zi\u00f3\u0142kowski<\/a>.<\/p>\n<h2>WebP-st\u00f6d i WordPress 5.8<\/h2>\n<p>H\u00e4r p\u00e5 Kinsta \u00e4r vi besatta av webbplatsens hastighet och WordPress-prestanda. Av den anledningen \u00e4r <a href=\"https:\/\/kinsta.com\/se\/blog\/webp\/\">WebP<\/a>-formatst\u00f6d i WordPress 5.8 v\u00e4ldigt sp\u00e4nnande nyheter f\u00f6r oss.<\/p>\n<p>WebP anses vara <a href=\"https:\/\/web.dev\/uses-webp-images\/\">n\u00e4sta generations format<\/a> och \u00e4r ett <a href=\"https:\/\/kinsta.com\/se\/blog\/basta-bildfilstyperna\/\">bildformat<\/a> som \u00e4r utvecklat av Google och som ger &#8221;b\u00e4ttre komprimering \u00e4n PNG eller JPEG, vilket inneb\u00e4r snabbare nedladdningar och mindre dataf\u00f6rbrukning.&#8221;.<\/p>\n<figure id=\"attachment_98615\" aria-describedby=\"caption-attachment-98615\" style=\"width: 1406px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98615 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/next-gen-image-formats-lighthouse.png\" alt=\" Google Lighthouse f\u00f6resl\u00e5r att du anv\u00e4nder n\u00e4sta generations bildformat.\" width=\"1406\" height=\"338\"><figcaption id=\"caption-attachment-98615\" class=\"wp-caption-text\">Google Lighthouse f\u00f6resl\u00e5r att du anv\u00e4nder n\u00e4sta generations bildformat.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developers.google.com\/speed\/webp\">Enligt Google<\/a>:<\/p>\n<blockquote><p>WebP \u00e4r ett modernt <strong>bildformat<\/strong> som ger en \u00f6verl\u00e4gsen <strong>f\u00f6rlustfri <\/strong>och<strong> f\u00f6rst\u00f6rande komprimering<\/strong> f\u00f6r bilder p\u00e5 webben. Med WebP kan webbansvariga och webbutvecklare skapa mindre och rikare bilder som g\u00f6r webben snabbare.<\/p>\n<p>WebP f\u00f6rlustfria bilder \u00e4r 26% mindre i storlek j\u00e4mf\u00f6rt med PNGs. WebP f\u00f6rst\u00f6rande bilder \u00e4r 25-34% mindre \u00e4n j\u00e4mf\u00f6rbara <a href=\"https:\/\/kinsta.com\/se\/blog\/jpg-vs-jpeg\/\">JPEG-bilder<\/a> med motsvarande SSIM-kvalitetsindex.<\/p><\/blockquote>\n<p>Fr\u00e5n och med WordPress 5.8 kan du anv\u00e4nda WebP-bildformatet p\u00e5 samma s\u00e4tt som JPEG-, PNG- och GIF-format. Ladda bara upp dina bilder till <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-mediebibliotek\/\">mediebiblioteket<\/a> \u00a0och inkludera dem i ditt inneh\u00e5ll.<\/p>\n<p>I en <a href=\"https:\/\/kinsta.com\/se\/blog\/webp\/\">tidigare artikel<\/a> tog vi en djupg\u00e5ende titt p\u00e5 WebP-formatet och de verktyg som finns tillg\u00e4ngliga f\u00f6r att anv\u00e4nda detta i WordPress. Nu, p\u00e5 grund av <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">st\u00f6det f\u00f6r WebP-bilder i WordPress 5.8<\/a>, kan saker och ting f\u00f6r\u00e4ndras litegrann. Eftersom WebP-formatet st\u00f6ds direkt beh\u00f6ver du inte installera plugins fr\u00e5n tredje part f\u00f6r att ladda upp WebP-bilder i WordPress, \u00e5tminstone inte f\u00f6r de vanligaste anv\u00e4ndningsomr\u00e5dena.<\/p>\n<p>Observera att \u00e4ven om du nu kan ladda upp dina WebP-bilder till WordPress med hj\u00e4lp av mediebiblioteket, st\u00f6der WordPress inte automatisk bildkonvertering till WebP-format. F\u00f6r att aktivera den funktionen p\u00e5 din webbplats beh\u00f6ver du ett tredje parts <a href=\"https:\/\/kinsta.com\/se\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">WebP WordPress-plugin<\/a>.<\/p>\n<h3>S\u00e5 h\u00e4r anv\u00e4nder du WebP-bilder i WordPress<\/h3>\n<p>Du kan konvertera dina bilder till WebP p\u00e5 m\u00e5nga olika s\u00e4tt:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Du kan anv\u00e4nda Googles f<a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled\">\u00f6rkompilerade WebP-verktyg och bibliotek<\/a> f\u00f6r Linux, Windows eller Mac OS X.<\/li>\n<li>Mac-anv\u00e4ndare kan installera en <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled#os_x_package_managers\">pakethanterare<\/a> som <a href=\"https:\/\/formulae.brew.sh\/formula\/webp\">Homebrew WebP-paketet<\/a> \u00a0eller <a href=\"https:\/\/ports.macports.org\/?search=webp&#038;search_by=name\">Macports WebP-paketet<\/a>.<\/li>\n<li>Du kan anv\u00e4nda ett bildredigeringsverktyg som st\u00f6der WebP, exempelvis <a href=\"https:\/\/squoosh.app\/\">Squoosh<\/a> av <a href=\"https:\/\/github.com\/GoogleChromeLabs\/squoosh\">Google Chrome Labs<\/a>, batchbildkonverteraren XnConvert, en <a href=\"https:\/\/www.xnview.com\/en\/xnconvert\/\">popul\u00e4r bildredigerare som<\/a> GIMP och m\u00e5nga andra.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>Du kan installera ett <a href=\"https:\/\/kinsta.com\/se\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">WebP WordPress-plugin<\/a> f\u00f6r en b\u00e4ttre \u00f6vergripande kontroll \u00f6ver WebP-bilder i WordPress.<\/li>\n<\/ul>\n<figure id=\"attachment_98680\" aria-describedby=\"caption-attachment-98680\" style=\"width: 582px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98680 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-export-settings-gimp.jpg\" alt=\"Exportera bilden som WebP i GIMP.\" width=\"582\" height=\"596\"><figcaption id=\"caption-attachment-98680\" class=\"wp-caption-text\">Exportera bilden som WebP i GIMP.<\/figcaption><\/figure>\n<p>Om du v\u00e4ljer ett kommandoradsverktyg kan du koda och avkoda dina bilder med hj\u00e4lp av <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/cwebp\">cwebp<\/a>&#8211; och <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/dwebp\">dwebp<\/a>. \u00a0F\u00f6ljande kommando k\u00f6r exempelvis en grundl\u00e4ggande JPEG till WebP-konvertering:<\/p>\n<pre><code class=\"language-bash\">cwebp [options] original_image.jpg -o compressed_image.webp<\/code><\/pre>\n<p>Du kan \u00e4ven k\u00f6ra en masskonvertering av dina bilder med Bash och cwebp (exempel av <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/converting-images-to-webp\/\">Jeremy Wagner<\/a>):<\/p>\n<pre><code class=\"language-bash\">find .\/ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o \"${1%.png}.webp\"' _ {} \\;\n<\/code><\/pre>\n<p>Kommandot ovan konverterar alla <strong>.png<\/strong> till <strong>.webp<\/strong> \u00a0med en komprimeringsfaktor p\u00e5 75.<\/p>\n<figure id=\"attachment_98677\" aria-describedby=\"caption-attachment-98677\" style=\"width: 1269px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98677 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-quality-vs-file-size.jpg\" alt=\"J\u00e4mf\u00f6relse av komprimeringsfaktor och filstorlekar.\" width=\"1269\" height=\"870\"><figcaption id=\"caption-attachment-98677\" class=\"wp-caption-text\">J\u00e4mf\u00f6relse av komprimeringsfaktor och filstorlekar.<\/figcaption><\/figure>\n<p>N\u00e4r du har dina WebP-bilder kan du helt enkelt ladda upp dem med WordPress <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-mediebibliotek\/\">Mediebibliotek<\/a>. Nedan kan du se en JPEG-bild p\u00e5 127 KB f\u00f6re konvertering i mediebiblioteket:<\/p>\n<figure id=\"attachment_98611\" aria-describedby=\"caption-attachment-98611\" style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98611 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/jpeg-image.jpg\" alt=\"Den komprimerade JPEG-filstorleken \u00e4r 127 KB.\" width=\"1960\" height=\"1280\"><figcaption id=\"caption-attachment-98611\" class=\"wp-caption-text\">Den komprimerade JPEG-filstorleken \u00e4r 127 KB.<\/figcaption><\/figure>\n<p>Den komprimerade WebP-bildstorleken \u00e4r 42 % mindre \u00e4n den ursprungliga JPEG-bilden!<\/p>\n<figure id=\"attachment_98641\" aria-describedby=\"caption-attachment-98641\" style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98641 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-image.jpg\" alt=\"Samma bild i WebP-format \u00e4r 74 kB.\" width=\"1960\" height=\"1280\"><figcaption id=\"caption-attachment-98641\" class=\"wp-caption-text\">Samma bild i WebP-format \u00e4r 74 kB.<\/figcaption><\/figure>\n<p>Slutligen har WebP-bilder samma redigeringsfunktioner som JPEG-, PNG- och GIF-bilder. Du kan besk\u00e4ra, rotera, v\u00e4nda och skala dem och till\u00e4mpa \u00e4ndringar p\u00e5 valfri bildstorlek.<\/p>\n<h3>Varningar om WebP i WordPress 5.8<\/h3>\n<p>Enligt Adam Silverstein:<\/p>\n<blockquote><p>WebP-bilder st\u00f6der f\u00f6rst\u00f6rande och f\u00f6rlustfri komprimering, samt ett animerat format och st\u00f6d f\u00f6r transparenta bilder. I WordPress st\u00f6ds det f\u00f6rlustfria WebP-formatet endast n\u00e4r hosting-servern anv\u00e4nder Imagick (PHP-biblioteket) tills LibGD l\u00e4gger till st\u00f6d. Animerade format och alfaformat st\u00f6ds dessutom \u00e4nnu inte f\u00f6r \u00e4ndrad bild (n\u00e4r du laddar upp bilder i dessa format skapas f\u00f6rst\u00f6rande bilder i st\u00e4llet).<\/p><\/blockquote>\n<p>Om hosting-leverant\u00f6ren inte st\u00f6der WebP-bilder visas ett felmeddelande n\u00e4r du f\u00f6rs\u00f6ker ladda upp dem. Om du inte \u00e4r s\u00e4ker p\u00e5 om hosting-leverant\u00f6ren st\u00f6der Imagick-biblioteket inneh\u00e5ller Site Health Tools info-flik ett <strong>Imagick-biblioteksf\u00e4lt<\/strong> som tillhandah\u00e5ller den informationen.<\/p>\n<figure id=\"attachment_99311\" aria-describedby=\"caption-attachment-99311\" style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99311 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/site-health-tool-1.jpg\" alt=\"Kinsta st\u00f6djer Imagickbiblioteket.\" width=\"1600\" height=\"1222\"><figcaption id=\"caption-attachment-99311\" class=\"wp-caption-text\">Kinsta st\u00f6djer Imagickbiblioteket.<\/figcaption><\/figure>\n<p>I och med WebP-st\u00f6d introducerar WordPress 5.8 \u00e4ven tv\u00e5 ytterligare f\u00e4lt i avsnittet Mediehantering i Site Health: <strong>Imagick-versionen<\/strong> och<strong> ImageMagick-st\u00f6dda filformat<\/strong>.<\/p>\n<figure id=\"attachment_98634\" aria-describedby=\"caption-attachment-98634\" style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98634 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-media-handling.jpg\" alt=\"ImageMagick version f\u00e4lt i Site Heath.\" width=\"1600\" height=\"473\"><figcaption id=\"caption-attachment-98634\" class=\"wp-caption-text\">ImageMagick version f\u00e4lt i Site Heath.<\/figcaption><\/figure>\n<p>Om WebP inte finns med bland filtyper som st\u00f6ds m\u00e5ste du kontakta hosting-leverant\u00f6ren f\u00f6r support.<\/p>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">Dev-note<\/a> inneh\u00e5ller <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/#comment-41376\">ytterligare information<\/a> om WebP-st\u00f6d i WordPress 5.8, anv\u00e4ndbara vanliga fr\u00e5gor och ytterligare resurser.<\/p>\n<p>Om du \u00e4r intresserad av bildoptimering kanske du \u00e4ven gillar f\u00f6ljande sj\u00e4lvstudier:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/optimerar-bilder-for-webb\/\">Hur man optimerar bilder f\u00f6r webben och prestanda<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/destruktiv-komprimering\/\">Varf\u00f6r och hur man anv\u00e4nder f\u00f6rst\u00f6rande komprimering p\u00e5 sina WordPress-bilder<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/webp\/\">Hur man anv\u00e4nder WebP-bilder p\u00e5 WordPress (och krymper bildfilstorlekar med upp till 35%)<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/basta-bildfilstyperna\/\">15 filtyper f\u00f6r b\u00e4sta bild<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/se\/blog\/bildstorlekar-for-wordpress\/\">Allt du beh\u00f6ver veta om WordPress bildstorlekar<\/a><\/li>\n<\/ul>\n<h2>Ytterligare funktioner f\u00f6r utvecklare<\/h2>\n<p>Det finns dussintals sp\u00e4nnande funktioner f\u00f6r utvecklare i WordPress 5.8. I den h\u00e4r artikeln har vi \u00e4gnat mest uppm\u00e4rksamhet \u00e5t de som borde ha st\u00f6rst inverkan p\u00e5 ditt utvecklingsarbete. Men det finns verkligen m\u00e5nga nya funktioner som \u00e4r v\u00e4rda uppm\u00e4rksamhet, inklusive f\u00f6ljande:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Block Supports API<\/h3>\n<p>WordPress 5.8 l\u00e4gger till <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">nytt block supports flags<\/a> som g\u00f6r det m\u00f6jligt f\u00f6r utvecklare att anpassa registrerade block med de senaste blockfunktionerna.<\/p>\n<p>F\u00f6rutom det experimentella <a href=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#duotone-block-support\">duoton blockst\u00f6det<\/a> som n\u00e4mndes tidigare (<code>color._experimentalDuotone<\/code>), l\u00e4gger WordPress 5.8 \u00e4ven till st\u00f6d f\u00f6r l\u00e4nkf\u00e4rg. Om du vill dra nytta av den h\u00e4r funktionen l\u00e4gger du bara till f\u00f6ljande flag i dina blockmetadata:<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\tlink: true;\n\t}\n}<\/code><\/pre>\n<p>Du kan ange standardv\u00e4rden med attribut, som visas i f\u00f6ljande exempel, eller st\u00e4lla in f\u00f6rinst\u00e4llningarna i <em>theme.json<\/em>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tlink: '#FF0000',\n\t\t\t}\n\t\t}<\/code><\/pre>\n<p>Ytterligare Block API-\u00e4ndringar inkluderar:<\/p>\n<ul>\n<li><code>fontSize<\/code> och <code>lineHeight<\/code>-st\u00f6d blir stabilt.<\/li>\n<li>spacing-st\u00f6det har ut\u00f6kats, och du kan nu styra <code>margin<\/code> och <code>padding<\/code>, samt individuellt styra <code>top<\/code>,\u00a0<code>right<\/code>,\u00a0<code>bottom<\/code>\u00a0och <code>left<\/code>-storlekar.<\/li>\n<\/ul>\n<p>Du kan l\u00e4sa mer om Block Supports API i WordPress 5.8 i <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">Block Supports API-uppdateringar<\/a> dev-note.<\/p>\n<p>En n\u00e4rmare titt p\u00e5 hur du anv\u00e4nder Block Supports API finns i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\">Block Supports API:s<\/a> \u00a0officiella dokumentation.<\/p>\n<h3>Anpassade flikar f\u00f6r Site Health<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">Tv\u00e5 nya krokar<\/a> g\u00f6r det nu m\u00f6jligt f\u00f6r utvecklare att l\u00e4gga till sina anpassade flikar i Site Health-gr\u00e4nssnittet och anpassa tillg\u00e4ngliga sk\u00e4rmar.<\/p>\n<p>Filtret <strong>site_health_navigation_tabs <\/strong>\u00e4r en associativ matris med flik-ID:t och etiketter f\u00f6r att registrera en ny flik p\u00e5 sk\u00e4rmen Webbplatsh\u00e4lsa. Du kan anv\u00e4nda filtret genom att l\u00e4gga till f\u00f6ljande exempelkod i <a href=\"https:\/\/kinsta.com\/se\/blog\/sa-har-anpassar-wordpress-tema\/#the-theme-editor-and-why-not-to-use-it\">temats funktionsfil<\/a> eller anpassade plugin:<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_navigation_tabs( $tabs ) {\n\t$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );\n\n\treturn $tabs;\n}\nadd_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );<\/code><\/pre>\n<p>Bilden nedan visar den nya fliken Site Health:<\/p>\n<figure id=\"attachment_98633\" aria-describedby=\"caption-attachment-98633\" style=\"width: 1646px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98633 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-custom-tabs.png\" alt=\"En anpassad flik som lagts till p\u00e5 navigeringsmenyn f\u00f6r Site Health.\" width=\"1646\" height=\"1068\"><figcaption id=\"caption-attachment-98633\" class=\"wp-caption-text\">En anpassad flik som lagts till p\u00e5 navigeringsmenyn f\u00f6r Site Health.<\/figcaption><\/figure>\n<p>Tack vare <code>site_health_navigation_tabs<\/code>\u00a0\u00e4r det \u00e4ven m\u00f6jligt att \u00e4ndra ordning p\u00e5 flikar eller ta bort ett eller flera objekt.<\/p>\n<p>\u00c5tg\u00e4rden <code><strong>site_health_tab_content<\/strong><\/code><strong>\u00a0<\/strong>utl\u00f6ses n\u00e4r en anv\u00e4ndare bes\u00f6ker sk\u00e4rmen Site Health, med undantag f\u00f6r standardstatussk\u00e4rmen. Du kan anv\u00e4nda den h\u00e4r kroken som visas i f\u00f6ljande utdrag (exempel fr\u00e5n <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">dev-note<\/a>):<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_tab_content( $tab ) {\n\t\/\/ Return if this is not your tab.\n\tif ( 'kinsta-site-health-tab' !== $tab ) {\n\t\treturn;\n\t}\n\n\t\/\/ Include the interface, kept in a separate file just to differentiate code from views.\n\tinclude trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views\/kinsta-site-health-tab.php';\n}\nadd_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );<\/code><\/pre>\n<p>Den unders\u00f6ker f\u00f6rst om den aktuella fliken \u00e4r din anpassade flik, och l\u00e4ser sedan in Site Health-sk\u00e4rminneh\u00e5llet fr\u00e5n en<strong> .php<\/strong>-fil. <code>site_health_tab_content<\/code> -\u00e5tg\u00e4rden g\u00f6r det \u00e4ven m\u00f6jligt f\u00f6r utvecklare att ut\u00f6ka standard <strong>Info <\/strong>fliken och l\u00e4gga till information som \u00e4r specifik f\u00f6r deras plugins eller teman.<\/p>\n<h3>Block API-\u00e4ndringar i redigeraren f\u00f6r att st\u00f6dja flera administrat\u00f6rssk\u00e4rmar<\/h3>\n<p>I och med WordPress 5.8 \u00e4r inl\u00e4ggsredigeraren inte l\u00e4ngre den enda administrat\u00f6rssk\u00e4rmen som anv\u00e4nder blockredigeraren (widgetssk\u00e4rmen \u00e4r ett exempel).<\/p>\n<p>De som bidragit till k\u00e4rnan hittade flera krokar som definierades p\u00e5 servern beroende p\u00e5 <code>$post<\/code>-objektet. Det h\u00e4r objektet finns inte i webbplatsredigerings-, widget- och navigeringssk\u00e4rmarna. Ett flertal filter har blivit inaktuella och ersatta med kontextmedvetna ers\u00e4ttningar.<\/p>\n<p>Dessutom har en ny <code>WP_Block_Editor_Context<\/code>-klass introducerats, som representerar den aktuella blockredigeringskontexten och olika metoder.<\/p>\n<p>Dessa \u00e4ndringar kommer att f\u00f6rb\u00e4ttra dessa sk\u00e4rmar med nya funktioner och g\u00f6ra det m\u00f6jligt f\u00f6r utvecklare att l\u00e4gga till sina egna anpassningar.<\/p>\n<p>En omfattande lista \u00f6ver API-\u00e4ndringar i blockredigeraren som \u00e4r relaterade till administrat\u00f6rssk\u00e4rmar finns i <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/block-editor-api-changes-to-support-multiple-admin-screens-in-wp-5-8\/\">dev-note<\/a> fr\u00e5n Greg Zi\u00f3\u0142kowski.<\/p>\n<h3>Ytterligare funktioner och f\u00f6rb\u00e4ttringar<\/h3>\n<p>Det finns s\u00e5 m\u00e5nga nya funktioner och \u00e4ndringar f\u00f6r utvecklare i WordPress 5.8 att det skulle vara om\u00f6jligt f\u00f6r oss att n\u00e4mna dem alla i den h\u00e4r artikeln. Men vi har samlat en lista \u00f6ver dev-notes som inte omfattas h\u00e4r f\u00f6r vidare l\u00e4sning:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/news\/2021\/05\/dropping-support-for-internet-explorer-11\/\">Sl\u00e4pper st\u00f6d f\u00f6r Internet Explorer 11<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/01\/block-styles-loading-enhancements-in-wordpress-5-8\/\">Laddningsf\u00f6rb\u00e4ttringar f\u00f6r block-stilar i WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/blocks-in-an-iframed-template-editor\/\">Block i en iframed-redigerare (mall)<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/on-layout-and-content-width-in-wordpress-5-8\/\">Om layout och inneh\u00e5llsbredd i WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/introducing-update-uri-plugin-header-in-wordpress-5-8\/\">Vi presenterar plugin-sidhuvudet &#8221;Update URI&#8221; i WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-editor-api-removals-58\/\">Olika API-borttagningar i blockredigeraren i WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/rest-api-changes-in-wordpress-5-8\/\">REST API-\u00e4ndringar i WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/28\/miscellaneous-developer-focused-changes-in-wordpress-5-8\/\">Diverse utvecklarfokuserade f\u00f6r\u00e4ndringar i WordPress 5.8<\/a><\/li>\n<\/ul>\n\n<h2>Sammanfattning<\/h2>\n<p>WordPress 5.8 markerar en milstolpe p\u00e5 v\u00e4gen till Full Site Editing. Men \u00e5rets andra WordPress-utg\u00e5va erbjuder mycket mer \u00e4n FSE. Anv\u00e4ndare och utvecklare hittar massor av f\u00f6rb\u00e4ttringar av blockredigeraren, en ny<strong> theme.json<\/strong>-mekanism<strong>,<\/strong> \u00a0ett kraftfullare Block API, webp-bildformatst\u00f6d och mycket mer.<\/p>\n<p>Vi \u00e4r s\u00e4rskilt imponerade av f\u00f6rb\u00e4ttringarna, b\u00e5de sm\u00e5 och stora, f\u00f6r blockredigeraren och dess anv\u00e4ndargr\u00e4nssnitt. Vi \u00e4lskar den f\u00f6rb\u00e4ttrade navigerbarheten mellan blocken, det omarbetade blockverktygsf\u00e4ltet, den berikade klarheten i gr\u00e4nssnittet och f\u00f6rb\u00e4ttringarna av flera block.<\/p>\n<p>Dessa sm\u00e5 f\u00f6r\u00e4ndringar f\u00f6rb\u00e4ttrar redigeringsupplevelsen ett steg i taget, och n\u00e4stan utan att m\u00e4rka det, anv\u00e4nder vi b\u00e4ttre och mer robust programvara. Det \u00e4r <a href=\"https:\/\/kinsta.com\/se\/blog\/vad-ar-wordpress\/\">WordPress!<\/a><\/p>\n<p><em>Nu \u00e4r det dags f\u00f6r dig! Vad tycker du om Full Site Editing? Och vilka \u00e4r dina favorit\u00e4ndringar i WordPress 5.8?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 5.8 kommer att bli en viktig utg\u00e5va som inkluderar ett otroligt stort antal funktioner, f\u00f6rb\u00e4ttringar och buggfixar. Ut\u00f6ver detta introducerar WP 5.8 ett nytt s\u00e4tt &#8230;<\/p>\n","protected":false},"author":36,"featured_media":40180,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[66,29],"topic":[844],"class_list":["post-40178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-cms","tag-wordpress","topic-wordpress-uppdateringar"],"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>Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)<\/title>\n<meta name=\"description\" content=\"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!\" \/>\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\/wordpress-5-8\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)\" \/>\n<meta property=\"og:description\" content=\"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/\" \/>\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=\"2021-08-02T11:57:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-21T12:26:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2025\/01\/SE-Homepage-featured-image-1024x536.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"536\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg\" \/>\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=\"40 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)\",\"datePublished\":\"2021-08-02T11:57:44+00:00\",\"dateModified\":\"2023-09-21T12:26:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/\"},\"wordCount\":7362,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg\",\"keywords\":[\"CMS\",\"WordPress\"],\"articleSection\":[\"WordPress-nyheter\"],\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/\",\"url\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/\",\"name\":\"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg\",\"datePublished\":\"2021-08-02T11:57:44+00:00\",\"dateModified\":\"2023-09-21T12:26:58+00:00\",\"description\":\"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress-uppdateringar\",\"item\":\"https:\/\/kinsta.com\/se\/topics\/wordpress-uppdateringar\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)\"}]},{\"@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":"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)","description":"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!","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\/wordpress-5-8\/","og_locale":"sv_SE","og_type":"article","og_title":"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)","og_description":"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!","og_url":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2021-08-02T11:57:44+00:00","article_modified_time":"2023-09-21T12:26:58+00:00","og_image":[{"width":1024,"height":536,"url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2025\/01\/SE-Homepage-featured-image-1024x536.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!","twitter_image":"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Carlo Daniele","Ber\u00e4knad l\u00e4stid":"40 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/se\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)","datePublished":"2021-08-02T11:57:44+00:00","dateModified":"2023-09-21T12:26:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/"},"wordCount":7362,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg","keywords":["CMS","WordPress"],"articleSection":["WordPress-nyheter"],"inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/","url":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/","name":"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)","isPartOf":{"@id":"https:\/\/kinsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg","datePublished":"2021-08-02T11:57:44+00:00","dateModified":"2023-09-21T12:26:58+00:00","description":"Kolla in v\u00e5r djupg\u00e5ende recension av WordPress 5.8 och uppt\u00e4ck alla de viktigaste funktionerna som kommer med den senaste utg\u00e5van (det finns gott om s\u00e5dana)!","breadcrumb":{"@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#primaryimage","url":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg","contentUrl":"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2021\/08\/wordpress-5.8.jpg","width":1460,"height":730,"caption":"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/se\/blog\/wordpress-5-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"WordPress-uppdateringar","item":"https:\/\/kinsta.com\/se\/topics\/wordpress-uppdateringar\/"},{"@type":"ListItem","position":3,"name":"Vad \u00e4r nytt i WordPress 5.8 (Full Site Editing, WebP-bilder, globala stilar och inst\u00e4llningar och mycket mer)"}]},{"@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\/40178","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=40178"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/40178\/revisions"}],"predecessor-version":[{"id":55274,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/posts\/40178\/revisions\/55274"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/dk"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/translations\/se"},{"href":"https:\/\/kinsta.com\/se\/wp-json\/kinsta\/v1\/posts\/40178\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media\/40180"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/media?parent=40178"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/tags?post=40178"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/se\/wp-json\/wp\/v2\/topic?post=40178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}