Nyheter i WordPress 6.2: Bläddrings-läge, stilbok, förbättrade navigeringsmenyer, nya API: er och mycket mer

WordPress 6.2 ”Dolphy” har släppts och det är dags för oss att utforska vad som är nytt med den första versionen för året 2023.

Med WordPress 6.2 går vi in i slutfasen av fas 2 i den långsiktiga färdplanen för Gutenbergs utveckling, och blockredigeraren lämnar officiellt betafasen.

Den här versionen fokuserar främst på att förbättra gränssnittet och effektivisera redigeringsupplevelsen.

Det har exempelvis införts ett nytt tillvägagångssätt för att navigera mellan mallar och malldelar. Utöver detta så finns numera möjligheten att importera widgetar i blockteman, ett nytt distraktionsfritt skrivläge, en skalad upplevelse för blockinställningar och massor av stora och små förbättringar av befintliga block, prestanda och användbarhet.

Men en sak som verkligen har förbättrats när det gäller funktionalitet och användbarhet är navigerings-blocket. Efter att den först släpptes har så har navigeringsmenyn genomgått flera iterationer som har effektiviserat redigeringsprocessen avsevärt. Med WordPress 6.2 så fortsätter utvecklingen, och i den här artikeln visar vi dig hur enkelt du numera kan hantera en navigeringsmeny.

Kolla in vår videoguide för att ta reda på vad som är nytt i WordPress 6.2

Förbättrad redigeringsupplevelse

WordPress 6.2 erbjuder en förbättrad redigeringsupplevelse med hela webbplatsens struktur i fokus. Du kan nu exempelvis hantera navigeringsmenyer enklare och skjuta stiländringar från ett enskilt block till globala stilar. Det går även enkelt att navigera mellan mallar och malldelar med färgade malldelar och återanvändbara block.

Men det finns mycket mer. Låt oss utforska de viktigaste tilläggen och förändringarna i redigerarens gränssnitt i detalj.

Ett omarbetat gränssnitt och bläddrings-läge för webbplatsredigeraren

Med WordPress 6.2 så erbjuds ett flertal förbättringar av redigeringsgränssnittet till kärnan. Den första och mest intressanta uppdateringen påverkar Webbplatsredigerar-gränssnittet. Tack vare ett nytt bläddrings-läge så är det nu lättare att navigera bland mallar och malldelar.

Det nya gränssnittet gör det dessutom möjligt att lägga till en ny mall eller malldel direkt från redigerarens sidofält. Du klickar helt enkelt på plusikonen (+) som finns till höger om menytiteln.

Enligt Ryan Welcher, bidragsgivare till Wp-kärnan och dokumentation, ”[D]en här funktionen är ett pågående arbete och den kommer att fortsätta att förbättras i takt med att nya Gutenberg-versioner släpps”.

Arbetsflödet är nu smidigare och mer sömlöst. För att börja att redigera den aktuella mallen/malldelen så klickar du bara på knappen Redigera i vänstermenyn eller på förhandsgranskningen av mallen i mitten av sidan.

Distraktionsfritt läge

WordPress 6.2 introducerar ett nytt Distraktionsfritt-redigeringsläge, som skär bort röran från allt runtom och låter dig fokusera på sidans innehåll.

Du kan aktivera den här funktionen i alternativpanelen genom att klicka på ellips-ikonen (tre prickar) i det övre högra hörnet.

När Distraktionsfritt läge är aktiverat så försvinner sidofält och verktygsfält och på skärmen finns endast det innehåll som du arbetar med.

Blockinspektör med flikar

WordPress 6.2 introducerar en ny blockinspektör som exempelvis syftar till att bringa ordning i sidofältet genom att dela upp inställningskontroller i separata paneler.

Blockinställningarna är nu indelade i flikar för att separera stilinställningar från andra blockinställningar.

Om de är tillgängliga så visas flikarna i blockinspektören i följande ordning:

• Listvy: Här finns kontroller för att hantera blockets barn, t.ex. undermenyer och länkar i Navigeringsblocket
• Inställningar: Inkluderar konfigurationsinställningar som inte är relaterade till blockets utseende
• Utseende: Inkluderar inställningar som är specifikt relaterade till stilen för det aktuella blocket, t.ex. typografi och färger

Detta är en anmärkningsvärd förbättring av gränssnittets användbarhet, särskilt för avancerade block med många konfigurationsalternativ som Gruppblock eller Navigeringsblock.

Observera att:

• Den nya inspektören visar endast en flik när den inkluderar element som ska visas.
• Om fliken Inställningar endast innehåller panelen Avancerad så flyttas den till fliken Utseende.
• Om blockinspektören endast har en flik så visas den som den var innan WordPress 6.2.

Kolla in utvecklingsmeddelandet för en närmare titt på den nya blockinspektören.

Färgade malldelar och återanvändbara block

För att lättare kunna skilja dem från grupper och block så markeras malldelar och återanvändbara block nu med en annan färg i listvyn, blockinstickaren, verktygsfältet för block och i redigeringsduken.

Detta sker både i webbplatsredigeraren och i inläggsredigeraren, vilket visas i bilden nedan.

En omarbetad blockinsats

Blockinfogaren påverkas av flera förändringar som avsevärt förbättrar den övergripande redigeringsupplevelsen.

För det första så förbättrar en ny gränssnittsdesign navigeringen mellan mönster- och mediekategorier. Den ger dessutom större förhandsvisningar för mönster och medieobjekt.

När media finns på webbplatsen så visas en media-flik i Blockinfogaren för att förenkla insättning av media i innehållet. Du kan dra och släppa bilder/media eller helt enkelt klicka på din media för att lägga till den i innehållet.

I fliken finns en knapp Öppna mediebibliotek som för dig till WordPress Mediebibliotek.

Openverse-integrering i blockinfogaren

Openverse är ett verktyg som syftar till att dela öppet licensierade eller offentligrättsliga verk som kan användas av vem som helst. Nu, med WordPress 6.2, är Openverse integrerat i Blockinfogaren.

För att komma åt den här nya funktionen så klickar du på fliken Media i Blockinfogaren. Då visas en panel med ett sökfält och förhandsgranskningar av bilder som är direkt hämtade från Openverse-arkivet.

Tekniska detaljer finns i pull request för Openverse-integreringen.

Migrera widgets till blockteman

Från och med WordPress 6.2 så kan användare som driver en webbplats med ett klassiskt tema och som bestämmer sig för att byta till ett blocktema migrera sina befintliga widgetområden till det nya temat och omvandla dem till malldelar.

Låt oss ta reda på hur det fungerar.

Skapa först ett widgetområde i ett klassiskt tema. Du kan exempelvis aktivera Twenty-Eleven och lägga till en kalender i Footer Area One.

Ändra nu temat till Twenty Twenty-Three. Öppna Webbplatsredigeraren, välj en mall att redigera och lägg till en malldel.

I blocksidofältet så väljer du det widgetområde som ska importeras från rullgardinsmenyn Importera widgetområde.

Sen är det klart. Nu kan du hantera ditt tidigare widgetområde som vilken annan malldel som helst.

Kombinerade dokumentdetaljer och listvy

Före WordPress 6.2 så fanns det två separata knappar i redigeringsverktygsfältet för detaljer och listvy. I följande bild så kan du se popover-fönstret för dokumentdetaljer i WordPress 6.1, inklusive antal ord, antal tecken, lästid och antal rubriker, stycken och block, samt dokumentöversikt.

Från och med WordPress 6.2 så har Listvy och Detaljer flyttats till en enda panel för dokumentöversikt som är uppdelad i två flikar: Lista och Översikt.

Den här ändringen ska ge ett enklare sätt att hantera dokumentet.

Utökade blockfunktioner

Med WordPress 6.2 så har möjligheterna för flera centrala blocktyper utökats. Detta gäller särskilt för navigeringsblocket, som påverkas av flera ändringar och förbättringar av redigeringsupplevelsen.

Låt oss ta en titt på de viktigaste förändringarna i detalj.

Listbaserad redigering för navigeringsblocket

Med lanseringen av WordPress 6.2 så är det möjligt att ändra arrangemanget av Navigeringsblockets element från en listvy i blockinställningarna i sidofältet.

Om du klickar på menyalternativet så kommer du till inställnings-sidofältet för den valda sidolänken. Där kan du redigera länkdetaljerna, inklusive exempelvis etikett, webbadress, beskrivning, länktitel och länk rel.

Den här ändringen förenklar redigeringen av navigeringsmenyer avsevärt. Som ett resultat så kan du lägga till, ordna och ta bort objekt i din meny, eller till och med skapa nya navigeringsmenyer.

Lås navigering

En annan förbättring av Navigeringsblocket är möjligheten att låsa menyredigering på ett mer finkornigt sätt. Nu kan du Begränsa redigering, Inaktivera rörelse och Förhindra borttagning. WordPress 6.1 hade endast alternativ för att Begränsa redigering och Inaktivera rörelse.

Dessutom så kan de valda alternativen även tillämpas på de inre blocken (länkar och undermenyer).

Lägg till/ta bort bildtexter från verktygsfältet Block

Med den nya knappen Lägg till/ta bort bildtexter så kan användare exempelvis styra bildtexter från blockverktygsfältet för flera block (ljud, video, bild).

Om du redan har ställt in en bildtext så kommer den sedan automatiskt att inkluderas när du lägger till bilden i ditt innehåll.

Förbättringar av blocket Sidlista

Två förbättringar gäller blocket Sidlista.

För det första så kan blocket Sidlista nu expanderas för att visa listan över sidor i panelen Listvy.

Dessutom så kan du nu ange en startsida med ett nytt alternativ i blockets sidofält och endast visa sidor som är nedåtgående från den i blocket.

Ny platshållare för gruppblock

Numera så visar platshållaren för gruppblock en variationsväljare när blocket läggs till i sidans innehåll.

Stöd för block med klibbig positionering

WordPress 6.2 introducerar en ny funktion för stöd för positionsblock, med klibbig positionering.

Den här nya funktionen gäller för närvarande endast för gruppblock, för vilka den är vald som standard.

Temautvecklare kan aktivera klibbig positionering i sina teman med hjälp av funktionen appearanceTools i theme.json. Om du vill ha en mer detaljerad kontroll över verktyg för utseende så kan du dessutom även ställa in settings.position.sticky -representationen till true.

Du kan aktivera klibbig positionering i panelen Position i inspektörens kontroll-sidofält.

När klibbig positionering är aktiverad så får HTML-taggens klass is-position-sticky och vissa CSS-regler tillämpas på motsvarande element:

.wp-container-6 {
    top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
    position: sticky;
    z-index: 10;
}

Klibbig positionering fungerar endast för gruppblock vid roten av dokumentet. Även om detta kan förhindra förvirring och fel för användarna, så kan inbyggd klibbig positionering kännas lite knepig för tillfället (och du kanske vill kontrollera olika metoder för att lägga till en klibbig rubrik på din WordPress-webbplats). Men enligt dev note,

… vid manuell testning så indikerade feedbacken att det krävs mer UI- eller UX-arbete för att göra det mindre förvirrande för användare som försöker skapa klibbiga rubriker. Särskilt om de exempelvis ställer in ett block som inte är rotblock till klibbigt av misstag, eller ett block inom en rubrikmalldel. Beslutet blev att minska funktionen till att bara gälla rotblock i 6.2 för att ge mer tid att utforska en lämplig lösning för inbäddade block.

Positionerings-funktionen är endast tillgänglig för enskilda block, så du hittar den inte i globala stilar.

Ytterligare förbättringar av redigeringsupplevelsen för block

Några andra anmärkningsvärda uppgraderingar av blockredigering är följande:

• Du kan nu dra och släppa bilder på ett tomt stycke för att ersätta detta med ett bildblock.
• Kontrollerna för typografi har dessutom grupperats i paneler. Som ett resultat så blir gränssnittet för stilar mer konsekvent med gränssnittet för inställningar och förbättrar dess användbarhet. Detta beror på att du nu kan visa och dölja kontroller på samma sätt som i gränssnittet för blockinställningar.

  

• Det är nu möjligt att ändra bokstavsavståndet i rubrikblocken direkt i gränssnittet Globala stilar.
• Du kan nu ställa in bakgrunds-, länk- och textfärgen för blocket Kalender.
• Två nya kategorier av blockmönster för Banners och Sidfot har införts för att bättre återspegla strukturen på webbsidor.
• Det är nu möjligt att autokomplettera länkar i alla block med hjälp av genvägen [[. Före denna ändring så var blocken tvungna att uttryckligen deklarera stöd för automatisk komplettering av länkar med hjälp av __experimentalSlashInserter.
• Det nya kortkommandot control + option + 1–6 gör det möjligt att omvandla ett stycke till en rubrik.
• Blocket Sidolista har nu stöd för alla typografiska alternativ, inklusive typsnittsfamilj, typsnittsstorlek, utseende, linjehöjd, bokstavsavstånd, dekoration och bokstäver.

  

Förbättrade designverktyg

Många av de nya funktionerna och förbättringarna som introduceras med WordPress 6.2 förbättrar CMS: ets styling- och designmöjligheter. Nedan så finns en lista över de mest intressanta designrelaterade funktionerna som inkluderas i 6.2. Vi kommer att beskriva varje funktion i detalj längre ner.

Style Book

WordPress 6.2 introducerar den nya funktionen Style Book. Som ett resultat av denna funktion så blir det möjligt för användare att förhandsgranska alla block som kan användas på deras webbplatser utan att behöva lägga till dessa block i en mall/malldel. Du kan starta Style Book genom att klicka på knappen Öppna Style Book (ögonikonen) som nu visas i Styles-rubriken inom globala stilar.

Detta öppnar ett gränssnitt som visar en förhandsgranskning av varje kärnblock och block från tredje part per kategori.

Det nya Style Book-gränssnittet förenklar designprocessen genom att göra förhandsvisningar av varje blockform tillgängliga på en enda central plats.

Tekniskt sett så genereras det nya gränssnittet av en ny StyleBook-komponent som läggs till på @wordpress/edit-site för att visa en förhandsvisning av varje registrerat block i en iframe (se även PR #45960).

Samma gränssnitt ger även förhandsvisningar av enskilda block. Följande bild visar exempelvis förhandsgranskningen av en anpassad kalenderwidget.

Utvecklare kan dölja ett block från att infogas och förhandsgranskas på två sätt. För det första så kan du ställa in supports.inserter till false i block.json:

{
    "supports": {
        "inserter": false
    }
}

Ett annat sätt att dölja förhandsgranskningen av blocket är att undvika egenskapen example. Den används för att skapa en förhandsgranskning av blocket i hjälppanelen i inspektören (läs mer här).

Skuggor i Global Styles

Med WordPress 6.2 så är det nu möjligt att lägga till och anpassa skuggor till vissa block med hjälp av Global Styles eller theme.json (i skrivande stund så är skuggfunktionen endast tillgänglig för Knapp-blocket).

I teman som stöder den här funktionen så kan du exempelvis lägga till skuggor från gränssnittet Global Styles.

För att se hur det fungerar så aktiverar du temat Twenty Twenty-Three, navigerar till Stilar > Block > Knappar och klickar på knappen Skugga.

I popupfönstret Skugga så kan du välja en skugga från temats förinställningar.

Temautvecklare och avancerade användare kan även lägga till en skugga i block med hjälp av theme.json. Följande definition lägger till en 4px svart skugga till knappblock:

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "4px 4px #000000"
        }
    }
},

Du kan dessutom definiera förinställningar för att ge temaanvändare möjlighet att välja en från gränssnittet Styles:

"settings": {
    "shadow": {
        "presets": [
            {
                "shadow": "4px 4px #FF0000",
                "name": "Red",
                "slug": "red"
            },
            {
                "shadow": "4px 4px #00FF00",
                "name": "Green",
                "slug": "green"
            },
            {
                "shadow": "4px 4px #0000FF",
                "name": "Blue",
                "slug": "blue"
            }
        ]
    },
}

När du har definierat dina förinställningar så visas Skugga i panelen för blocket Styles.

Du kan sedan välja värdet för en förinställning och använda det som blockstandard:

"styles": {
    "blocks": {
        "core/button": {
            "shadow": "var(--wp--preset--shadow--blue)"
        }
    }
}

Ny dimensionskontroll för minsta höjd

Från och med WordPress 6.2 så har panelen Dimensioner i sidofältet för blockinställningar för blocken Grupp och Inläggsinnehåll nu en ny kontroll för minsta höjd. Den är aktiverad som standard i teman som använder funktionen appearanceTools.

Den här nya kontrollen gör det exempelvis möjligt för användare att ställa in en minsta höjd för grupp- och inläggsinnehållsblocken. Som ett resultat så kan den användas för att återge sidfoten längst ner på sidan, även med lite innehåll.

I kombination med de nya verktygen för vertikal justering så blir det även möjligt att vertikalt justera inre element i sidans övre/mittre/nedre del.

Utvecklare kan lägga till stöd för minsta höjd i teman genom att lägga till inställningen minHeight i theme.json:

{
    "settings": {
        dimensions: "minHeight": true
    }
}

Du kan dessutom använda egenskapen appearanceTools:

{
    "settings": {
        "appearanceTools": true
    }
}

Den nya egenskapen minHeight kan även användas för att ställa in ett specifikt värde direkt i theme.json:

{
    "styles": {
        "blocks": {
            "core/post-content": {
                "dimensions": {
                    "minHeight": "80vh"
                }
            }
        }
    }
}

Blockutvecklare kan lägga till egenskapen supports.dimensions.minHeight i sin block.json-fil och ställa in värdet till true. För statiska block så lagras CSS-regeln min-height som en inbunden stil. För dynamiska block så inkluderas den i stilattributet som returneras av get_block_wrapper_attributes.

Anpassad CSS i panelen för stilar

En av de funktioner som saknades i Webbplatsredigeraren jämfört med temaanpassaren var möjligheten att lägga till egna CSS-stilar. WordPress 6.2 fyller i luckan och numera så inkluderar gränssnittet Global Styles ett textfält för att lägga till anpassade CSS-regler som inte skrivs över när du uppdaterar ditt tema.

Du kan lägga till anpassade stilar antingen per block, från panelen för blockstilar eller genom att klicka på åtgärdsknappen Fler stilar i verktygsfältet Stilar. Då visas en snabbmeny som visar elementet Ytterligare CSS-element.

För att stödja anpassad CSS så har den nya egenskapen styles.css lagts till i theme.json.

Anpassade CSS-regler kan helt åsidosätta alla anpassade stilar som anges i theme.json. Om du inte vill att detta ska hända så kan du överväga att inkludera formatmallen med hjälp av de befintliga kö-metoderna.

Du kan även lägga till anpassad CSS per block i theme.json med egenskapen styles.blocks.block.css:

"styles": {
    "blocks": {
        "core/button": {
            "css": "background: #FF0000"
        }
    }
}

Det går även att använda & för inbäddade element och pseudoväljare.

För en närmare titt på den nya funktionen för anpassat CSS, kolla in Anpassat CSS för globala stilar och per block.

Kopiera och klistra in stilar mellan block

En ny grupp i menyn Alternativ i blockets verktygsfält visar nu två knappar för att kopiera stilar och klistra in stilar. Innan detta tillägg så var det bara möjligt att kopiera stilar, men det var inte tydligt hur man klistrar in stilar.

För att prova den här nya funktionen så lägger du till ett nytt block, exempelvis en rubrik. Ändra stilen och välj Kopiera stilar i menyn Blockalternativ.

Välj sedan ett annat block och välj Klistra in stil. De kopierade stilarna tillämpas automatiskt på det andra blocket.

Observera att den här funktionen endast är tillgänglig på säkra (https) webbplatser i webbläsare med stöd. För ytterligare information, kolla in pull request.

Tillämpa blockändringar globalt

WordPress 6.2 introducerar dessutom knappen Tillämpa globalt under panelen Avancerat för enskilda block. Den gör att du kan flytta dina ändringar av blockformat till Global Styles och tillämpa dessa ändringar på hela webbplatsen.

Tack vare den här nya funktionen så är det nu lika enkelt att tillämpa blocktypografi som att trycka på en knapp. Du kan påverka avstånd, dimensioner och färgstyling på alla block av den typen (se även denna pull request).

Förbättrad designupplevelse med Spacing Visualizers

Med Spacing Visualizers så kan du förhandsgranska hur mycket marginal eller utfyllnad som tillämpas på ett block. Med WordPress 6.2 så förbättras den här funktionen med ett par tillägg som förbättrar redigeringsupplevelsen.

För det första så visas nu Spacing Visualizers så snart som du håller muspekaren över marginal- eller utfyllnadskontrollen.

För det andra så döljer Spacing Visualizer nu automatiskt blockverktygsfältet så snart du håller muspekaren över spacinginställningen. Som ett resultat så kan du förhandsgranska de nya marginal- och paddinginställningarna utan att blockverktygsfältet blir rörigt.

Detta är små men viktiga ändringar som påverkar ett stort antal kärnblock.

Ändringar för utvecklare

WordPress 6.2 erbjuder även många nya funktioner för utvecklare: nya API: er, felrättningar, prestandaförbättringar och mycket mer. Låt oss djupdyka i de mest tilltalande tilläggen.

Ett nytt HTML API

WordPress 6.2 introducerar HTML Tag Processor, en HTML5-spec-kompatibel tolkare som skapar ett säkert sätt att hitta specifika HTML-taggar. Du kan även lägga till, ta bort eller uppdatera attribut via PHP. HTML Tag Processor är den första komponenten i ett nytt API för HTML-bearbetning.

Det nya API: et gör det enkelt att utföra tidigare komplexa uppgifter som ofta krävde användning av reguljära uttryck.

I följande exempel så lägger vi helt enkelt till attributet alt till en img-tagg:

$html = '<img src="/my-image.jpg" />';

$p = new WP_HTML_Tag_Processor( $html );
 
if ( $p->next_tag() ) {
    $p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
 
echo $p->get_updated_html();

Denna kod skulle ge följande img-tagg:

<img alt="Hello WordPress 6.2" src="/my-image.jpg">

Metoden $p->next_tag() flyttar till nästa tillgängliga tagg i HTML. Den accepterar även ett tagg-namn, en CSS-klass eller båda för att hitta specifika taggar, vilket visas i exemplet ovan.

För att redigera HTML-taggar så måste du först välja måltagg:

$p->next_tag();

När du väl har valt måltagg så kan du använda API-metoderna för att utföra flera olika operationer:

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

Du kan ange ett stilattribut:

$html = '<a href="https://example.com">example.com</a>';

$p = new WP_HTML_Tag_Processor( $html );

if ( $p->next_tag( 'a' ) ) {
    $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}

echo $p->get_updated_html();

Du kan dessutom lägga till eller ta bort en klass eller ett attribut. I följande kod så lägger vi till en egen klass till en h1-tagg:

$html = '<div><h1>Page Title</h1></div>';

$p = new WP_HTML_Tag_Processor( $html );

if( $p->next_tag( 'h1' ) ) {
    $p->add_class( 'title' );
}

echo $p->get_updated_html();

Du kan sedan eka eller returnera den uppdaterade taggen med hjälp av metoden $p->get_updated_html().

Om du vill ta en närmare titt på det nya HTML API: et så kan du kolla in den här interaktiva PHP-handledningen från Adam Zieliński, bidragsgivare till WordPress-kärnan.

API för mönster och en ny egenskap template_types

Patterns API gör det möjligt för WordPress-utvecklare att ”skapa fördesignade innehållsblock som enkelt kan infogas i inlägg, sidor, anpassade inläggstyper och mallar”.

Från och med WordPress 6.2 så inkluderar Patterns API den nya egenskapen template_types så att du kan ange i vilka mallar ett visst blockmönster kan användas.

Jorge Costa framhåller att detta är en uppdatering som endast gäller backend och att det för närvarande inte finns någon motsvarande UX-funktionalitet. Vi kan dock förvänta oss att se utvecklade implementeringar av den här funktionen i och med WordPress 6.3:

Det första användningsområdet, som man tänker sig för WordPress 6.3, är att visa användaren några mönster som är vettiga på en mall när användaren börjar att skapa en mall. Användaren kan börja med ett mönster i stället för ”blank” eller reservmallen.

På den tekniska sidan så har funktionen register_block_pattern() ändrats för att inkludera en ny parameter template_types. Detta är en matris av strängar som innehåller namnen på de mallar som blockmönstret är avsett för.

REST API har även ändrats för att återge malltyperna för ett blockmönster om minst ett sådant har definierats.

React v18.0 och samtidighetsläge

WordPress 6.2 levereras dessutom med en ny version av React-biblioteket, som nu har uppdaterats till version 18.0. Den nya versionen inkluderar nya API: er, funktioner, förbättringar och buggfixar. En av de viktigaste funktionerna som inkluderas i React v18.0 är införandet av concurrency mode, ”en ny mekanism bakom kulisserna som gör det möjligt för React att förbereda flera versioner av ditt användargränssnitt samtidigt”.

En av de viktigaste egenskaperna hos Concurrent Mode i React är att det går att avbryta:

React garanterar att användargränssnittet kommer att se konsekvent ut även om en rendering avbryts. För att lyckas med detta så väntar den med att utföra DOM-mutationer till slutet, när hela trädet har utvärderats. Som ett resultat så kan React förbereda nya skärmar i bakgrunden utan att blockera huvudtråden. Detta innebär att användargränssnittet kan reagera omedelbart på användar-inmatningar även om det är mitt i en stor renderingsuppgift, vilket skapar en flytande användarupplevelse.

Den största fördelen är att användargränssnittet reagerar på användar-inmatningar omedelbart, i samklang med det jobb som det fortfarande kör i bakgrunden.

Men samtidighet så introduceras även potentiella fallgropar som utvecklare bör vara medvetna om. För en mer djupgående översikt av Concurrent Mode i React i WordPress 6.2, kolla in de exempel som tillhandahålls i dev note.

Ytterligare ändringar för utvecklare

Andra anmärkningsvärda förändringar som utvecklare bör notera är följande:

• WordPress 6.2 introducerar ett nytt JavaScript-filter som kan användas för att filtrera blockinställningar innan redigeraren visas på skärmen. Som ett resultat av det nya blockEditor.useSetting.before-filtret så blir det även möjligt för utvecklare att ändra inställningar baserat på blockets placering, aktuell användarroll, angränsande block med mera. För ytterligare information och exempel på användning, se Anpassa inställningar för alla block i WordPress 6.2.
• En ny skipBlockSupportAttributes-prop har införts för att utesluta attribut och stilar som är relaterade till blockstöd i ServerSideRender-komponenten.
• Ett nytt API för theme.json gör det nu möjligt att styla befintliga variationer av kärnblock från theme.json.
• Google Fonts ingår nu lokalt och hämtas inte från Google-adresser i paketerade teman från Twenty Twelve till Twenty Seventeen.

Men det är inte allt. WordPress 6.2 introducerar många funktioner, förbättringar och buggfixar som vi inte nämner här. Om du vill ha en mer omfattande översikt så kan du läsa WordPress 6.2 Fält Guide.

Sammanfattning

WordPress 6.2 tar oss närmare slutet av fas 2 av anpassningen av Gutenberg-projektet. Men, som Matias Ventura påpekar, så betyder detta inte att arbetet med anpassningen är klart. Som alltid så kan vi förvänta oss ytterligare förbättringar av redigeraren baserat på feedback från WordPress community.

I det här inlägget så utforskade vi några av de viktigaste funktionerna, förbättringarna och buggfixarna som inkluderas i  WordPress 6.2. Men det finns mycket mer i 6.2. Med tio versioner av Gutenberg-pluginet i kärnan – från 14.2 till 15.1 – så kommer vi att få se ett nytt bläddrings-läge, en flikartad blockinspektör, migrering av widgets till blocktecken, nya API: er och massor av förbättringar och buggfixar. Och det kommer även att finnas förbättringar för tillgänglighet och internationalisering.

Och om du älskar WordPress och vill skaffa dig nya WordPress-utvecklingsfärdigheter eller testa och ge bidrag till CMS: et, se till att provköra DevKinsta, Kinsta’s helt kostnadsdfria lokala WordPress-utvecklingssvit.

Nu vill vi fråga dig: Har du redan testat den nya versionen i din utvecklingsmiljö? Vilka funktioner gillar du mest i WordPress 6.2? Dela dina tankar i kommentarsfältet nedan.