WordPress 6.1 “Misha” er blevet udgivet den 1. november 2022. Den tredje store udgivelse i år følger WordPress 6.0 Arturo, der blev udgivet den 24. maj, og WordPress 5.9 Josephine, der blev udgivet den 25. januar.
Som det altid sker, bringer nye WordPress-udgivelser nye funktioner, forbedringer og fejlrettelser fra de seneste versioner af Gutenberg-plugin’et ind i kernen. Og WordPress 6.1 er ingen undtagelse, da 11 versioner af Gutenberg-plugin’et er blevet fusioneret ind i kernen, fra 13.1 til 14.1.
I dette indlæg vil vi tage et kig ind bag bag kulissen og præsentere de nye spændende funktioner, der kommer med den nye store version af WordPress.
Matias Ventura gav os et indblik i køreplanen til 6.1, hvor han sagde, at målet med 6.1 er at forfine de oplevelser, der blev introduceret med 5.9 og 6.0, og rette nogle ting, da vi nærmer os fase 3 af Gutenberg-køreplanen.
1. Forbedringer af skabeloneditor: En af de vigtigste nye funktioner er Template Editor. WordPress 6.1 skulle introducere muligheden for at gennemse, visualisere og redigere strukturen af webstedet.
2. Skabelonmønstre: Målet er at give blokmønstre en central rolle i skabelon- og sideoprettelse, tilpasse dem til brugerdefinerede posttyper og bloktyper, forbedre låsfunktionaliteten, forbedre håndteringen af gemte mønstre osv.
3. Globale stilarter og blokke og designværktøjer: WordPress 6.1 vil gøre det muligt at administrere webfonts, implementere responsiv typografi og udvide det værktøjssæt, der er tilgængeligt for blokke.
Når det er sagt, så lad os se nærmere på nogle af de mest kraftfulde funktioner, der kommer med WordPress 6.1.
Fluid typography og spacing
WordPress 6.1 tilføjer understøttelse af Fluid Typography via calc/clamp CSS-funktioner.
Udtrykket Fluid typography beskriver tekstens evne til at tilpasse sig visningsbredden, idet den jævnt skaleres fra en minimal til maksimal bredde.
Det er noget andet end det, du kan opnå med media queries, da media queries giver temaer mulighed for at ændre tekststørrelsen afhængigt af specifikke visningsportstørrelser, men ikke gør noget mellem forskellige værdier.
Nogle temaer understøtter allerede fluid typography. Twenty Twenty-Two bruger f.eks. CSS-funktionen clamp() til flere skriftstørrelser. For eksempel:
"settings": {
...
"custom": {
"spacing": {
"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"
},
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
}
}
}
}Som du kan se i koden ovenfor, bruges flydende skriftstørrelsesværdier for hver enkelt skriftstørrelse.
Fra WordPress 6.1 kan temaer nu automatisk generere flydende skriftstørrelser ved at deklarere den nye egenskab typography.fluid på følgende måde:
"settings": {
....
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "2rem",
"fluid": {
"min": "2rem",
"max": "2.5rem"
},
"slug": "medium",
"name": "Medium"
}
]
}Ved hjælp af typography.fluid og typography.fontSizes[].fluid beregnes værdien af hver skriftstørrelse automatisk ved hjælp af følgende formel:
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});Eksempelvis:
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});Bemærk, at i skrivende stund er Fluid Typography en eksperimentel funktion. Du kan dykke ned i de tekniske detaljer i Block supports: add fluid typography.
Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi
— Brian Gardner (@bgardner) August 8, 2022
Se også Sådan tilføjer du fluid typography til WordPress Block-temaer af Rich Tabor og fluid typography med Gutenberg af Carolina Nymark.
På samme måde som Fluid Typography introducerer WordPress 6.1 også understøttelse for Fluid Spacing.
Før WordPress 6.1 var det kun muligt at indstille brugerdefinerede afstandsværdier i editoren, og temaforfattere kunne ikke angive faste værdier for padding, margin og gap. Så det var ikke muligt at overføre afstandsindstillinger fra et tema til et andet eller at bevare afstandsværdierne, når man kopierer og indsætter indhold mellem forskellige websteder.
Nu kan temaudviklere erklære understøttelse af Fluid Spacing ved hjælp af indstillingerne spacing.spacingScale og spacing.spacingSizes[] (se også Theme.json: Tilføj forindstillinger for afstandsstørrelser og Udvid theme.json til at give forindstillinger for afstandsstørrelser).
"settings": {
"spacing": {
"spacingScale":
{
"steps": 0
},
"spacingSizes": [
{
"size": "clamp(1.5rem, 5vw, 2rem)",
"slug": "30",
"name": "1"
},
{
"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
"slug": "40",
"name": "2"
},
{
"size": "clamp(2.5rem, 8vw, 6.5rem)",
"slug": "50",
"name": "3"
},
{
"size": "clamp(3.75rem, 10vw, 7rem)",
"slug": "60",
"name": "4"
},
{
"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
"slug": "70",
"name": "5"
},
{
"size": "clamp(7rem, 14vw, 11rem)",
"slug": "80",
"name": "6"
}
],
...
}
}Du kan finde egenskaber for fluid typography og afstandsforhold dokumenteret i Global Settings & Styles Presets og i den levende reference til theme.json API V2.
Redigering af blokke kun med indhold
WordPress 6.1 introducerer indholdsbaseret redigering for blokke, mønstre og skabeloner. Når redigering kun af indhold er aktiveret, kan brugerne kun ændre indholdet af en blok eller et mønster, hvilket forhindrer dem i ved et uheld at ødelægge layoutet eller ændre stilarter.
I øjeblikket er det ikke muligt at aktivere redigering kun af indhold fra grænsefladen Visual editor. For at aktivere denne funktion skal attributten templateLock være indstillet til contentOnly, og du kan bruge kodeeditoren til det.
Følgende billede viser et simpelt eksempel.
Når redigering kun af indhold er aktiveret for en blok eller et mønster, ændres sidebaren med indstillinger. Du vil ikke se de sædvanlige indstillingskontroller, men en liste over blokke, der er inkluderet i gruppen. Du kan vælge en af disse blokke ved at klikke på blokken i editorens lærred eller på det tilsvarende listeelement i sidebar.
Du kan deaktivere redigering kun af indhold ved at klikke på knappen Ændre i gruppens værktøjslinje.
Når du er færdig med dine redigeringer, kan du igen aktivere redigering kun af indhold ved at klikke på knappen Udført.
Desuden er blokke, der ikke har noget indhold, skjult fra listevisningen og kan ikke få fokus i bloklisten.
Du kan læse mere om redigering kun med indhold i udviklingsnoten og i dette blogindlæg af Rich Tabor.
Forbedrede bloktyper
Med så mange Gutenberg-versioner, der er fusioneret ind i kernen, vil WordPress 6.1 medføre tonsvis af ændringer og forbedringer af eksisterende bloktyper.
Tilføjet Border Support for Columns-blokken
Columns-blokken udnytter nu den nye BorderBoxControl-komponent, der gør det muligt for WordPress-brugere at angive tilpassede grænser for kolonner og også indstille helt forskellige stilarter for hver grænse (se også Column: Add border support to column blocks pull request).
Individuelle grænser kan også indstilles i filen theme.json på følgende måde:
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}Udviklere kan læse mere om den nye kontrol i Component Reference – BorderBoxControl.
Grænsekontrolelementer til billedblokke
Med Gutenberg 13.8 blev der indført understøttelse af alle grænsekontroller for billedblokken. Ændringen vil blive tilføjet til kernen med WordPress 6.1, hvilket åbner døren for nye og store muligheder for webkreative.
Forbedringer af Comments block
WordPress 6.1 bringer os også en forbedret Comments block. Fra og med den næste version af WordPress vil brugerne kunne bruge mere avancerede redigeringsfunktioner på Comments block.
På billedet nedenfor kan du se kommentarblokkens indstillingssidebar og de ændringer, der er anvendt på Comments Title.
Variationer i blokken for indlægstermer for brugerdefinerede taksonomitermer
Post Terms-blokken er blevet forbedret med en ny brugerdefineret taxonomi-variation. Du kan nu registrere en ny brugerdefineret taksonomi, f.eks. indlægstypen “Skuespillere i en film”, og du vil kunne tilføje en liste over taksonomitermer til det aktuelle indlæg eller den brugerdefinerede indlægstype.
Billedet nedenfor viser en liste over skuespillere i en indlægstype Film.
Et nyt parent filter til forespørgselsblokken
Der er nu et nyt Parent-filter til rådighed for forespørgselsblokken for at vise hierarkiske indlæg og sider med samme overordnede.
Kontrol af skriftfamilier i overskriftsblokken
Overskriftsblokken understøtter nu kontrolelementer for skrifttypefamilier.
Vandret og lodret afstand i galleriblokken
Fra og med WordPress 6.1 giver en ny aksial afstandskontrol dig mulighed for at indstille forskellige horisontale og vertikale mellemrum for billeder i galleriblokken.
Denne ændring resulterer i større fleksibilitet, når du opretter layoutet af billedgallerier.
Featured images i omslagsblok
Featured images får stadig en masse opmærksomhed, og i WordPress 6.1 er anvendelsesområdet for deres brug udvidet yderligere. Fra og med 6.1 kan det fremhævede billede vælges direkte fra pladsholderen i Cover-blokken, som vist på følgende billeder.
Denne ændring skulle være med til at skabe en mere ensartet brugeroplevelse og gøre det mere tydeligt for brugeren, hvad de tilpasser.
Der er også blevet tilføjet en omskifter til et featured image til media replace flowet.
Udseendeværktøjer til indlægsnavigationslinks
Indstillingsegenskaben appearanceTools giver dig mulighed for at tilvælge flere indstillinger, der er deaktiveret som standard.
Siden WordPress 6.1 kan du for temaer, der understøtter indstillingsegenskaben appearanceTools, tilpasse linkfarve og font families i Post Navigation Link.
Du kan læse mere om appearanceTools -egenskaben i vores introduktion til Twenty Twenty-Two-temaet.
Lås inde i containerblokken med et enkelt klik
En ny toggle gør det nu muligt for brugere at låse blokke i en container af blokke med et enkelt klik. Dette gælder for blokke af typen Group, Cover og Column.
Forbedret listeblok
List-blokken er blevet forbedret og udnytter nu indre blokke.
Denne ændring gør det nemmere at sortere og indrykke listeelementer og fører helt sikkert til en forbedret brugeroplevelse.
Understøttelse af pseudoelementer i blok-temaer
Nu kan bloktemaer tilpasse elementers og blokkers udseende afhængigt af deres tilstand (aktiv/fokus/hover).
Dette er et eksempel på brug af pseudo-selektorer med links, som defineret i Twenty Twenty-Three’s theme.json:
"styles": {
...
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"typography": {
"textDecoration": "none"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"color": {
"text": "var(--wp--preset--color--secondary)"
},
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "underline"
}
}
}
}Den følgende kode knapstilarter:
"styles": {
...
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--contrast)"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}Du kan se resultatet på følgende billeder.
Men du kan også style elementer på blokniveau. Den eneste forskel er, at du skal definere stilarter inden for en blok. Som et eksempel anvender følgende kode fra Twenty Twenty-Threes theme.json stilarter på links i kerneblokken Navigation:
"styles": {
"blocks": {
"core/navigation": {
"elements": {
"link": {
":hover": {
"typography": {
"textDecoration": "underline"
}
},
":focus": {
"typography": {
"textDecoration": "underline dashed"
}
},
":active": {
"typography": {
"textDecoration": "none"
}
},
"typography": {
"textDecoration": "none"
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--small)"
}
}
}
}Yderligere funktioner og forbedringer til blokeditoren
Selv om det er en konsolideringsversion, vil WordPress 6.1 bringe så mange ændringer og forbedringer, at det ville være umuligt at opremse dem alle i én artikel (men tjek denne artikel fra Anne McCarty for en omfattende liste over designværktøjer pr. blok).
Her vil vi dykke ned i følgende ændringer:
Variationer af skabelondele i blokindsætningsværktøjet
Variationer af skabelondele er nu tilgængelige i blokindsatsen, hvilket gør det nemmere at tilføje skabelondele til dit websted.
Denne ændring gør redigeringsprocessen mere ligetil og hurtigere, så brugerne hurtigt kan se variationer af en skabelondel på én gang med få klik.
Visualiser margen og padding
En lille, men nyttig forbedring er fremhævelsen af marginer og padding, mens brugeren justerer dem. Dette skulle gøre det meget tydeligere, hvor meget plads der tilføjes inden for eller uden for elementerne.
Forbedringer af sidebar Indstillinger
WordPress 6.1 vil også vise flere grænsefladeforbedringer til Settings sidebar.
Sidebaren med indlægsindstillinger er blevet lidt omdesignet. Nu er felterne for indlægsformat, slug, skabelon og forfattere justeret og har samme bredde. Desuden er indlægsplanlæggeren blevet forenklet for at gøre oplevelsen mere forståelig. Skabelonafsnittet er også blevet flyttet ind i en popover for at spare plads og rydde op i grænsefladen.
Derudover er skabelonpanelet blevet erstattet af et skabelonlink. Når der klikkes på skabelonlinket, viser skabelonen Standardskabelon i en popover.
Udgiv popover-designopdateringer
Datovælgeren i Publish-popoveren er blevet redesignet og bruger nu “eksisterende WordPress-komponenter og Emotion-styling”
Der er mere teknisk indsigt i Designopdateringer til popoveren Publish (DateTimePicker).
Tid til at læse i infopanelet
Informationspanelet, der er tilgængeligt i den øverste værktøjslinje, er blevet forbedret og viser nu Tid til læsning ud over Ord, Tegn, Overskrifter, Afsnit og Blokke.
Den anslåede læsetid er beregnet på et gennemsnit på 189 ord pr. minut. Læs mere i @wordpress/editor: Tilføj estimeret tid til at læse til indholdsfortegnelsen i editor.
Kontrol af blokafstand tilføjet til Styles UI
Nu kan brugere justere lodret og vandret afstand fra Styles UI for blokke, der understøtter denne funktion.
Nye og forbedrede byggeværktøjer
WordPress 6.1 vil også udvide funktionaliteten af Site Builder. Blokmønstre vil være tilgængelige flere steder, og et bredere udvalg af skabelontyper vil forbedre redigeringsoplevelsen i skabeloneditoren.
Oprettelsesmønstre for indlægstyper
WordPress 6.0 introducerede Page Creation Patterns, som er en måde at give et udvalg af mønstre, hver gang en bruger opretter en ny side. På denne måde behøver du ikke at bygge siden op fra bunden, men kan vælge et mønster fra en modal og udfylde indholdet, og så er du klar til at gå i gang.
For at aktivere denne funktion skal mindst ét blokmønster erklære understøttelse af bloktyperne core/post-content.
Nu, fra WordPress 6.1, udvides denne funktion til at omfatte alle indlægstyper. Det eneste du skal gøre er at inkludere core/post-content i dit mønsters blockTypes og indstille den relevante postTypes.
Lad os nu finde ud af, hvordan du kan drage fordel af denne nye funktion med et praktisk eksempel. Antag, at du har en indlægstype Movie. Først skal du registrere et blokmønster som beskrevet her.
Eller du kan gå den nemme vej og bruge den implicitte mønsterregistrering (for enkelhedens skyld bruger vi i dette eksempel implicit mønsterregistrering).
Opret en PHP-fil til dit block pattern i en /patterns-mappe i dit temas mappe (i dette eksempel har vi brugt Twenty Twenty-Two). Tilføj derefter følgende overskrift:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->Og det er det. Hver gang du opretter en ny Movie post type, vises der nu en Vælg et mønster-modal på skærmen, hver gang du opretter en ny Movie post type.
Hvis du ønsker, at modalen skal vises på flere indlægstyper, skal du blot tilføje de tilsvarende slugs adskilt af kommaer:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie, book
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->Du kan få et nærmere overblik over oprettelsesmønstre under Mulighed for at bruge oprettelsesmønstre til andre indlægstyper end side.
Flere skabelontyper i webstedsredigeringsprogrammet
Med WordPress 6.0 kan der kun oprettes et begrænset antal skabeloner i Site Editor:
Fra og med WordPress 6.1 vil det være muligt at oprette en anden skabelon for hver enkelt indlægstype.
Og du kan også tilføje og redigere skabeloner for kerne- og brugerdefinerede taksonomier, selv for enkelte kategorier eller tags.
Hvis du registrerer brugerdefinerede indlægstyper eller en brugerdefineret taksonomi, vil de automatisk blive opført i feltet til valg af skabelon i Site Editor.
Men ikke kun det. Når du har valgt skabelonposttypen, beder en modal brugeren om at oprette en skabelon for alle indlæg af den pågældende type eller at oprette en ny skabelon for et specifikt indlæg af den valgte posttype.
Derefter giver en ny modal en liste over de indlæg, der er tilgængelige for den pågældende posttype.
Twenty Twenty-Three og andre temaforbedringer
WordPress 6.1 leverer også et helt nyt standardtema: Twenty Twenty-Three. Det er et minimalistisk tema uden billeder eller ekstra funktionalitet.
Det nye standardtema samler alle de nyeste funktioner til redigering af webstedet på ét sted og er en perfekt sandkasse til at teste skabeloner og skabelondele, stilvariationer, fleksibel typografi og afstand og alle de funktioner, der er indført med de nyeste versioner af WordPress.
Og derfor er det også et fantastisk værktøj til at lære, hvordan man udvikler temaer, skabeloner og blokmønstre med arbejdseksempler.
Du kan dykke dybere ned i det nye WordPress-standardtema i vores dybdegående oversigt.
Udover det nye standardtema introducerer WordPress 6.1 også flere temaforbedringer.
Opdater URI-header i temaer
Før WordPress 6.1 blev der vist en meddelelse om tilgængelig opdatering til brugeren, hvis et tema havde samme navn som et tema, der var tilgængeligt i WordPress-temaer-mappen, hvis et tema havde samme navn som et tema, der var tilgængeligt i WordPress-temaer-mappen.
Med WordPress 6.1 forhindrer en ny Update URI-header, at man ved et uheld overskriver temafiler fra tredjepart. Denne funktion er især nyttig, hvis du har et internt udviklet tema med samme navn som et tema i WordPress-temakataloget, men ikke ønsker at dele det med fællesskabet.
Nu vil WordPress ikke forsøge at opdatere det, hvis værdien af Update URI temahovedfeltet ikke passer til https://wordpress.org/themes/{$slug}/ eller w.org/theme/{$slug}, hvis værdien af ikke passer til eller.
Hvis Update URI er indstillet, skal være en URI med et unikt værtsnavn, f.eks. https://wordpress.org/themes/my-theme/ eller https://example.com/my-theme/.
Temaudviklere kan finde en mere dybdegående oversigt over den nye Update URI temaoverskrift i den officielle dev note.
Filter til blokering af temaer under skærmen “Tilføj temaer”
En ny genvej gør det nu muligt at filtrere blokeringstemaer, når du tilføjer et nyt tema til din WordPress-installation.
Der er også blevet tilføjet en ny hjælpefane for blokeringstemaer på samme skærm.
Ændringer for udviklere
WordPress 6.1 tilføjer også et nyt API og mange funktioner og ændringer for udviklere.
Ny API til persistens af præferencer
WordPress 6.1 introducerer et helt nyt API til fastholdelse af præferencer, der gemmer redaktørpræferencer i WordPress-databasen i stedet for lokalt lager.
På denne måde kan brugerpræferencerne gemmes på tværs af alle browsere og enheder.
Til dette formål er det tidligere persistenssystem i pakken @wordpress/data blevet forældet, og en ny pakke preferences-persistence er blevet introduceret. Den nye pakke gemmer data til brugermeta via Rest API‘en. Dataene vil også blive gemt i det lokale lager som en fallback, hvis brugeren går offline eller en anmodning afbrydes (se også pull #39795).
Understøttelse af knapstilarter i theme.json
Med WordPress 6.1 kan du tilføje knapstilarter til dine temaer ved hjælp af theme.json. Dette giver temaudviklere mulighed for at tilføje konsistens til knapper på tværs af blokke. Et eksempel er søgeblokken, men også blokke fra tredjeparter vil drage fordel af denne ændring.
For at gøre det muligt vil der blive tilføjet en ny wp-element-button -klasse til knapelementer, så de kan dele den samme stil.
Du kan teste denne ændring ved at tilføje følgende kode til din theme.json i et udviklingsmiljø:
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}Variationer af søgeblokke understøtter nu Query Vars
WordPress 6.1 vil understøtte variationer af søgeblokvariationer baseret på forespørgselsvarier. Det betyder, at du vil være i stand til at give dine brugere søgefelter, der kan bruges til at søge granulært efter enhver type indhold.
I det følgende eksempel registrerer vi en blokvariation for en movies posttype. Eksemplet er baseret på Carolina Nymars vejledning om blokvariationer.
Tilføj følgende kode i dit (under)tema’s funktionsfil:
function movies_editor_assets() {
wp_enqueue_script(
'movies-block-variations',
get_template_directory_uri() . '/assets/block-variations.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );Opret nu følgende block-variations.js-fil i dit (under)temas mappe med aktiver:
wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);Genindlæs nu dit WordPress-dashboard, og søg efter en Movie Search Block-variant i blokindsatsen.
Du kan læse mere om blokvariationer i den officielle dokumentation.
Et nyt knapper-element i globale stilarter
WordPress 5.9 introducerede en Global Styles-grænseflade, så brugerne kan tilpasse stilforindstillinger for deres websteder, enten globalt eller på blokniveau.
Med den første implementering kunne du tilpasse farverne for baggrund, tekst og links. Nu er der fra og med WordPress 6.1 blevet tilføjet et nyt element Buttons til panelet Colors, så brugerne kan styre udseendet af knapper på hele deres websteder.
Dette ville påvirke knapstilen i alt på hele webstedet, fra blokken Knapper til blokken Søgning og blokke fra tredjeparter, der gør brug af knapper.
Udseendeværktøjer, der er tilgængelige for alle temaer
Før WordPress 6.1 var Appearance Tools kun tilgængelige i blok-temaer. Med 6.1 kan alle temaer inkludere denne funktion ved blot at tilføje understøttelse i deres funktionsfil:
add_theme_support( 'appearance-tools' );Dette vil aktivere alle følgende indstillinger på én gang:
- border: farve, radius, stil, width
- farve: link
- spacing: blockGap, margin, padding
- typografi: lineHeight
Ny is_login_screen() Funktion
En ny is_login_screen() -funktion giver dig nu mulighed for at bestemme, om den aktuelle side er login-skærmen. Brugerdefinerede login-placeringer understøttes også.
Du kan bruge det nye betingede tag på følgende måde:
function add_text_to_login() {
if ( is_login_screen() ) {
echo( "<h1>Welcome to Kinsta!</h1>" );
}
}
add_action( 'init', 'add_text_to_login' );Resultatet på skærmen ville være følgende:
Nye sundhedskontroller af webstedet for Persistent Object Cache og Full Page Cache
WordPress 6.1 introducerer to Site Health-kontroller for Persistent Object Cache og Page Cache. Begge kontroller kører kun på produktionsmiljøer.
Du kan se resultaterne af disse nye tests i fanen Status på skærmen Site Health.
Testen Persistent Object Cache fastslår, om webstedet bruger en vedvarende objektcache, og hvis ikke, anbefales det at bruge den, hvis det giver mening for webstedet.
Ud over den nye test introducerer WordPress 6.1 flere nye filtre, som hostingudbydere kan bruge i deres respektive miljøer.
Med site_status_persistent_object_cache_url kan host erstatte standardlinket Learn more for persistent object cache med et brugerdefineret link. For eksempel:
add_filter( 'site_status_persistent_object_cache_url', function() {
return 'https://example.com/persistent-object-cache';
} );Med site_status_persistent_object_cache_notes kan værter erstatte standardnoterne for at anbefale deres foretrukne objektcacheløsning. Her er et eksempel på brug:
add_filter( 'site_status_persistent_object_cache_notes', function( $notes ) {
$notes = __( 'Custom notes.', 'text-domain' );
return $notes;
} );site_status_persistent_object_cache_thresholds filter de tærskelværdier, der bruges til at afgøre, om der skal foreslås brug af en vedvarende objektcache. Standardværdierne er:
$thresholds = apply_filters(
'site_status_persistent_object_cache_thresholds',
array(
'alloptions_count' => 500,
'alloptions_bytes' => 100000,
'comments_count' => 1000,
'options_count' => 1000,
'posts_count' => 1000,
'terms_count' => 1000,
'users_count' => 1000,
)
);Du kan bruge filteret på følgende måde:
add_filter( 'site_status_persistent_object_cache_thresholds', function( $thresholds ) {
$thresholds = array(
'alloptions_count' => 700,
'alloptions_bytes' => 150000,
'comments_count' => 1500,
'options_count' => 1500,
'posts_count' => 2000,
'terms_count' => 1000,
'users_count' => 2000,
);
return $thresholds;
} );site_status_should_suggest_persistent_object_cache er et kortslutningsfilter, der filtrerer, om der skal foreslås brug af en vedvarende objektcache og omgå standardtærskelkontrol. Du kan bruge det på følgende måde:
add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_true' );Testen Full Page Cache kontrollerer, om webstedet bruger full page cache, og om svartiden er OK:
To nye filtre gør det også muligt for værter at tilpasse svarstærsklen og tilføje brugerdefinerede cache-headere, der skal registreres.
site_status_good_response_time_threshold filtrerer den tærskel, under hvilken en svartid betragtes som god. Standardværdien er 600 ms (se også: Langsomme serverresponstider påvirker ydeevnen).
site_status_page_cache_supported_cache_headers gør det muligt for hostingudbydere at tilføje brugerdefinerede cache-headers og de tilsvarende kontrol-callbacks. Udviklingsnoten indeholder følgende eksempel på brug:
add_filter( 'site_status_page_cache_supported_cache_headers', function( $cache_headers ) {
// Add new header to the existing list.
$cache_headers['cf-cache-status'] = static function ( $header_value ) {
return false !== strpos( strtolower( $header_value ), 'hit' );
};
return $cache_headers;
});Udviklere kan dykke dybere ned i de nye Site Health-kontroller i:
- Forslag: Persistent Object Cache og Full Page Cache – kontrol af webstedets tilstand
- Nye cachelagringskontroller af webstedstilstand i WordPress 6.1
- Port Audit Full Page Cache fra performance plugin til core
- class-wp-site-health.php
Opdateringer af værktøjet Create-block Scaffolding
WordPress 6.1 introducerer også nye funktioner og opdateringer til @wordpress/create-block-pakken, som udviklere kan bruge til at skabe nye blokke.
Et blok-scaffolding er den understøttende mappestruktur, der gør det muligt for WordPress at genkende en blok.
Et par nye funktioner og flere forbedringer er indført med WordPress 6.1.
Et nyt –variant -flag gør det muligt for blokudviklere at vælge en blokvariant, der skal stilladseres. De interne skabeloner, der leveres af værktøjet create-block, understøtter dynamic – og static -varianter, hvilket betyder, at du kan stilladsere henholdsvis en dynamisk eller statisk blok. Standardværdien er static.
Du kan bruge det nye flag på følgende måde:
npx @wordpress/create-block my-first-block -variant=dynamicUdviklere kan definere brugerdefinerede varianter ved at tilføje et variants -objekt til skabelondefinitionen.
En yderligere funktion gør det nu muligt for blokudviklere at tilføje nye blokke til et eksisterende plugin takket være --no-plugin -flaget.
npx @wordpress/create-block custom-block --no-pluginVed at køre kommandoen ovenfor oprettes et nyt sæt blokfiler i en undermappe til den aktuelle mappe.
Bemærk, at scriptet ikke er opmærksom på dets placering:
Ved at kalde
npx @wordpress/create-block block-name --no-pluginoprettes en ny blok inde ifolderNamedirectory.
Du kan læse mere om opdateringer af værktøjet create-block scaffolding.
Caching af forespørgselsresultater i WP_Query
WordPress 6.1 ændrer den måde, hvorpå databaseforespørgsler udføres i klassen WP_Query. Fra 6.1 vil forespørgsler blive cachet med det resultat, at hvis en forespørgsel udføres mere end én gang, vil resultaterne blive indlæst fra cachen.
Både websteder, der anvender persistent object caching, og websteder, der anvender in-memory-caching, vil drage fordel af denne ændring, selv om fordelene for sidstnævnte vil være mindre.
Som standard vil alle kald til WP_Query blive cachet, men udviklere kan fravælge caching af forespørgsler ved hjælp af parameteren cache_results:
$args = array(
'posts_per_page' => 20,
'cache_results' => false
);
$query = new WP_Query( $args );Du kan også deaktivere caching af forespørgsler globalt ved hjælp af disable_caching hook’en, men det anbefales ikke.
Det er værd at bemærke, at nogle forespørgselsparametre ikke tages i betragtning i forbindelse med query caching. Den mest almindeligt anvendte af disse parametre er fields -parameteren. Årsagen er, at hvis fields blev taget i betragtning, ville det have givet flere caches for flere delmængder af de samme data, hvilket ville have ført til en forringelse af ydeevnen.
For en dybere oversigt over WP_Query caching, se Forbedringer af WP_Query-ydelsen i 6.1 dev note.
Skabelondele i klassiske temaer
Fra og med WordPress 6.1 understøtter klassiske temaer blokbaserede skabelondele. For at tilføje denne funktion skal temaer tilføje understøttelse for block-template-parts som vist nedenfor:
function add_block_template_part_support() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'add_block_template_part_support' );Klassiske temaer kan inkludere skabelondele i PHP-skabeloner ved hjælp af funktionen block_template_part. Du kan læse mere om denne funktion i Blokbaserede “skabelondele” i udviklernotat til traditionelle temaer.
En bemærkning om JPEG til WebP-billedkonvertering
Oprindeligt så det ud til, at WordPress 6.1 også ville have indført understøttelse af automatisk JPEG til WebP-billedkonvertering.
Men mange bidragydere rapporterede om flere problemer. Specifikt blev det bemærket, at:
Ressourcer til generering af billeder, når du uploader et billede, vil stige dramatisk, men ressourcerne til at servere et billede vil blive sænket. Da upload af billeder er meget sjældent sammenlignet med servering af billeder, burde den ekstra indsats for at komprimere og lagre billeder være det værd.
Og:
Faktisk er den dramatiske stigning i ressourceforbruget, når der uploades et billede, en meget dårlig bivirkning her. Det betyder, at mange uploads vil mislykkes og efterlade brugerne strandet. Det vil også øge supportforespørgsler til både WordPress og hostingfirmaerne dramatisk. Synes ikke, at dette er acceptabelt. På grund af dette, selv om der er behov for understøttelse af billedmultimime i WordPress, virker den nuværende fremgangsmåde ikke som en god løsning.
Endelig er den automatiske konvertering fra JPEG til WEBP efter et indlæg af Matt Mullenweg på WordPress.org blevet fjernet fra WordPress 6.1.
Jeg er interesseret i at understøtte nye formater og forbedre ydeevnen, men jeg synes, at denne ændring, der skubbes som standard til brugerne, når de opgraderer til 6.1, er meget for meget for lige nu, herunder med nogle af de kluntede interaktioner OS’er stadig har omkring webp (og HEIC!) filer.
Jeg er glad for, at understøttelsen af arbejdet med webp- og HEIC-filer forbliver i kernen, da vi bør være liberale med hensyn til, hvad vi accepterer og arbejder med, men ikke med ændringen om at konvertere alt til webp, når JPEG-filer uploades.
Dette er et glimrende område for et canonical plugin, et koncept, som jeg synes, at alle Make-hold bør udforske meget mere som et sted at eksperimentere og skubbe funktionalitet…
Anyway, WordPress-brugere og -udviklere kan teste automatisk JPEG til WebP-billedkonvertering ved at installere Performance Lab-plugin fra WordPress Performance Group.
Yderligere ændringer for udviklere
Ud over de funktioner og forbedringer, som vi har diskuteret ovenfor, introducerer WordPress 6.1 flere yderligere ændringer for udviklere. Du vil måske grave dybere ned i disse ændringer i dev-noterne:
- Forbedret PHP-ydelse til registrering af kerneblokke
- Navigation Block Fallback Behavior i WP 6.1
- Spacing Size Presets i theme.json
- Escaping Tabel og feltnavne med wpdb::prepare() i WordPress 6.1
- WP_List_Table::get_views_links() i WordPress 6.1
- Funktioner og kroge til obligatoriske felter i WordPress 6.1
- Flytning af send_headers-aktionen til senere i indlæsningen
- Forbedringer af ydeevnen i REST API’et
- Opdateringer af editor-komponenter i WordPress 6.1
- Multisite-forbedringer i WordPress 6.1
- Diverse ændringer af kernen i WordPress 6.1
- Feltguide om ydeevne til WordPress 6.1
- Diverse forbedringer af REST API i WordPress 6.1
- Blok-API-ændringer i WordPress 6.1
- Diverse ændringer i editoren i WordPress 6.1
- Opdateret understøttelse af editorlayout i 6.1 efter refaktorering
- Ændringer af præferencerne for blokeditoren i WordPress 6.1
- Generering af blokstilarter (Style Engine)
- Reference Styles-værdier i theme.json
Opsummering
Med WordPress 6.1 ser vi en konsolidering af mulighederne for WordPress-webstedsredigering. Vi er stadig i fase to af Gutenbergs langsigtede køreplan, men de værktøjer og funktioner, der er tilgængelige for os, bliver mere pålidelige og robuste med tiden. WordPress 6.1 bringer Fluid Typography, nye værktøjer til opbygning af websteder og tonsvis af forbedringer af eksisterende blokke.
Men ikke kun det. WordPress 6.1 bringer også betydelige forbedringer i CMS-ydelsen. To nye Site Health checks registrerer brugen af Full Page Cache og Persistent Object Cache, query caching forbedrer WP_Query ydeevne, og der er også forbedringer af PHP-ydelsen for registrering af kerneblokke.
Kort sagt er 6.1 en version, som WordPress-brugere og -designere vil elske, og som udviklere vil nyde godt af mange forbedringer på flere områder af CMS’et.
Nu er det op til dig. Hvad kan du bedst lide i WordPress 6.1? Har du allerede testet ny version i dit udviklingsmiljø? Del dine tanker om WordPress 6.1 med os i kommentarfeltet nedenfor.
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.
Skriv et svar