WordPress 5.4 ”Adderley” släpptes den 31 mars 2020, och finns att ladda ner.

Så nu är det dags för en djupdykning i de mest intressanta nya funktionerna och förändringarna som kommer med WordPress 5.4.

WordPress 5.4 innefattar många funktioner, förbättringar och buggfixar till blockredigeraren, med ett ansenligt antal versioner av Gutenberg-pluginet i kärnan. Dessa förändringar påverkar både funktionalitet och UI samt förbättrar redigerarens tillgänglighet / användbarhet. De bidrar även till en bättre redigerings-upplevelse.

Förutom en förbättrad redigerare, introducerar WordPress 5.4 intressanta förbättringar i Site Health Tool och REST API. Vissa förväntade funktioner i WordPress 5.4 har försenats och bör finnas i kärnan i samband med releasen av WordPress 5.5  (se Native Lazy Loading on images och Navigation block).

Du bör spara följande datum och länkar från WordPress 5.4 Development Cycle:

Så, vad är nytt i WordPress 5.4?

Vad är nytt i block-redigeraren

Ett ansenligt antal versioner av Gutenbergs plugin har slagits samman i kärnan, från 6,6 till 7,5. Så om du inte använder Plugin-programmet Gutenberg hittar du massor av nya funktioner, förbättringar och buggfixar i blockredigeraren vid uppgraderingen till WordPress 5.4.

Men det är inte bara block och funktioner i redigeraren som har förbättrats:

Teamet som har skapat block-redigeraren har uppnått en 14% tidsminskning i laddning och 51% time-to-type minskning, för en särskilt betydande post (~ 36.000 ord, ~ 1.000 block) sedan WordPress 5.3.

Det är en massa fantastiska saker, så låt oss köra igång.

Vad är nytt i WordPress 5.4? Få en djupgående bild av alla nya intressanta funktioner och förändringar som innefattas i denna senaste release! 💪🚀Click to Tweet

Nya funktioner och förbättringar i block-redigeraren

Block-redigeraren är fortfarande under utveckling, men WordPress 5.4 inkluderar massor av förändringar som förbättrar redigerarens användbarhet både på stationära och mobila enheter.

Några av dessa förändringar avser gränssnittet, exempelvis att fullskärmsläget är aktiverat som standard, block-valen har förbättrats, det finns en enkel växling mellan redigeringsläge och urvalsläge, fasta mobila verktygsfält, och brödsmulor för block-navigering. Två nya block och ytterligare alternativinställningar lägger till fler funktioner i redigeraren.

Här är en snabb lista över våra favorit-funktioner och förbättringar i block-redigeraren som har inkluderas i WordPress 5.4:

Nya block för sociala ikoner

Block för sociala ikoner tillåter författare att snabbt lägga till ikoner med länkar till  sociala profiler och erbjuder ett stort antal barn-block med sociala ikoner att välja mellan. Detta block har varit på experiment-stadiet ett tag och är stabilt sedan  Gutenberg 7,5.

Block för Sociala ikoner

Block för Sociala ikoner

Blocket för sociala ikoner levereras med tre fördefinierade stilar för dina visuella anpassningar: Standard, endast logotyper och Piller-form.

Stilar för sociala ikoner

Stilar för sociala ikoner

Sedan de först infördes som en experimentell funktion i Gutenberg 6,5 (och slogs samman i WordPress 5.3), har sociala ikoner lagts till Gutenberg 7,5. De kanske inte fungerar som förväntat om du kör en föråldrad version av Gutenberg-pluginet.

Enligt Jorge Costa, finns det två sätt att förhindra problem med sociala ikoner:

Block för nya knappar

Från och med Gutenberg 7.2, byter blockredigerarens block för knappar ut blocket för singel-knappar, och gör att WordPress-användare kan lägga till fler knappar till sitt innehåll inom samma blockbehållare.

Blocket för nya knappar

Blocket för nya knappar

Singel-knappar levereras med två förinställda stilar att välja mellan och flera ytterligare alternativ för att finjustera utseendet.

Knappinställningar i WordPress 5.4

Knappinställningar i WordPress 5.4

Med WordPress 5.4, får webbplatsägare djupare kontroll över utseendet och känslan av deras call-to-actions tack vare tillägg av tonade bakgrunder. Detta har även en handfull förinställningar som är tillgängliga för webbplatsens admins för ytterligare anpassningar.

Omarbetade färgfunktioner för knappar

Omarbetade färgfunktioner för knappar

En Välkomst-guide Modal

WordPress 5.4 lägger till ett helt nytt välkomstbildspel som ger grundläggande information om blockredigeraren och en länk till onlinedokumentationen (tillagd i Gutenberg 7.1).

Välkomst-guide Modal

Välkomst-guide Modal

Modalen är endast synlig direkt efter uppdateringen till 5.4. Om du vill utlösa den igen är det bara att öppna menyn Fler verktyg och alternativ från den övre högra knappen och hitta länken Välkomstguide.

Välkomst-guide

Välkomst-guide

Fullskärmsläge är aktiverat som standard

Från och med WordPress 5.4 öppnas redigeraren i fullskärmsläge som standard i nya installationer och enheter. Du kan växla fullskärmsläget av/på genom att klicka på menyn Fler verktyg och alternativ, som visas i bilden nedan.

Fullskärmsläget är aktiverat som standard i WordPress 5.4

Fullskärmsläget är aktiverat som standard i WordPress 5.4

I nuläget lagras denna preferens lokalt, vilket innebär att den kommer att skrivas över när preferenser förändras, som när du kommer åt din webbplats i inkognitoläge. I framtiden bör denna preferens lagras i databasen, vilket gör användarens val beständigt i varje sammanhang.

Observera att beslutet att ha redigeraren i fullskärmsläge som standard inte enbart uppskattas. Det anses vara potentiellt förvirrande för nybörjare och icke-avancerade användare. Kontrollera det här inlägget om du vill veta mer om människors oro för fullskärmsläget.

Utvecklare som jobbar med block-redigeraren kan styra fullskärmsläget programmatiskt med endast några rader av JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
	wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Block för infogat textfärg-stöd i RichText

Om du brukar skriva artiklar i långform bör du uppskatta stödet för infogad text- färg. Innan denna uppdatering, var vi tvungna att koda RichText-block i HTML-läge för att ändra färgen på enstaka ord och strängar.

Alternativet RichText-färg

Alternativet RichText-färg

Från och med WordPress 5.4 kan vi välja ord och under-strängar i RichText-block och snabbt ändra sina färger med hjälp av den inbyggda färgväljaren.

RichText färgväljare

RichText färgväljare

Ytterligare färgalternativ för flera block

WordPress 5.4 lägger till en lång lista med färgrelaterade funktioner och förbättringar i blockredigeraren. Som jag nyss nämnde, är vi inte begränsade till fasta färger längre. Flera block stöder nu tonade bakgrunder och fördefinierade uppsättningar av toningar.

Här är en snabb lista över några färgrelaterade förbättringar:

Omslags-block med förinställd toningsbakgrund

Omslags-block med förinställd toningsbakgrund

Ett annat bra tillägg till blockredigeraren är block för utvalda bilder i de senaste inläggen (Gutenberg 7.5).

Detta är bara den nyaste av flera förbättringar som har lagts till i blocket för de senaste inläggen och tar oss ytterligare ett steg mot ”mer komplexa och dynamiska eller globala block”.

Block för de senaste inläggen

Block för de senaste inläggen

Med WordPress 5.4, gör blocket för de senaste inläggen att du kan dra inlägg från en specifik kategori. Det tillåter dig däremot inte att bygga mer avancerade frågor efter kategori / tag / inläggstyp och / eller att inkludera / utesluta enstaka inlägg.

Vi hoppas att vi får se ytterligare förbättringar i detta block i framtiden.

En ny brödsmule-meny för block-navigering

Den nya brödsmule-menyn har till syfte att förenkla navigeringen med kapslade block. Den är tillgänglig för Gutenberg-användare sedan version 6.7, och nu sammanslagen i kärnan.

Bilden nedan visar flera kapslade block och den nya brödsmule-menyn längst ned.

Den nya brödsmule-menyn

Den nya brödsmule-menyn

Ändringar i blockredigeraren för tema och Block-utvecklare

Tema och block-utvecklare bör få kunskap om de förändringar som har tillförts till block-redigeraren i WordPress 5.4. Dessa ändringar omfattar:

Tangentbordsgenvägar för block-redigeraren

Block-utvecklare och avancerade användare kan nu lägga till anpassade genvägar till blockredigeraren.

Ett nytt paket som kallas @wordpress/keyboard-shortcuts har införts för att centralisera registrering, borttagning och dokumentation av redigerarens genvägar.

Utvecklare kan lägga till sina anpassade genvägar genom att anropa åtgärden för registerShortcut på detta sätt:

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

	// Shortcut identifier
	name: 'plugin/shortcut-test',

	// Shortcut category (possible values global, block, selection)
	category: 'global',

	// Shortcut description
	description: 'My first shortcut',

	// The key combination that triggers the shortcut
	keyCombination: {

		// Available modifiers:
		// primary, primaryShift, primaryAlt,
		// secondary, access, ctrl, alt,
		// ctrlShift, shift, shiftAlt
		modifier: 'alt',
		character: 'w',
	},

	// An alias for the key combination
	aliases: [
		{
			modifier: 'primary',
			character: 'q',
		},
	],
} );

Detta kommer automatiskt att lägga till den anpassade genvägen till genvägs- modalen som finns under knappen för Fler verktyg & alternativ i övre högra hörnet av redigeraren.

En anpassad genväg för global blockredigerare har lagts till

En anpassad genväg för global blockredigerare har lagts till

Vi kan sedan bifoga en hanterare för tangentbords-kortkommandon med hjälp av useShortcut funktionen:

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
	useShortcut(

		'plugin/shortcut-test',

		useCallback(
			( event ) => {
				// Do something
			},
			[]
		)
	);
}

Du kan läsa mer om kortkommandon på Make WordPress Core blog.

API:s för toningstema

WordPress 5.4 introducerar toningsbakgrunder med en handfull förinställningar för knapp-block och omslags-block. Detta sker tack vare den nya API:n för toningstema.

Den nya API:n erbjuder editor-gradient-presets temastöds-alternativet som gör att tema-utvecklare kan åsidosätta standard-förinställningar och definiera sina egna:

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
		),
		array(
			'name'		=> __( 'Chocolate to Coral', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
			'slug'		=>  'chocolate-to-coral',
		),
		array(
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
		),
		array(
			'name'		=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
			'slug'		=> 'deepskyblue-to-dodgerblue',
		),
	)
);
Anpassade förinställningar för toning i WordPress 5.4

Anpassade förinställningar för toning i WordPress 5.4

 

Anpassade förinställningar för toning

Anpassade förinställningar för toning

Du kan inaktivera anpassade toningar med hjälp av disable-custom-gradients temastöds-alternativet:

add_theme_support( 'disable-custom-gradients' );

toningsfunktionen kan tas bort helt med hjälp av både disable-custom-gradients och  editor-gradients-presets:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

Ändringar av markering och format på blockredigeraren

WordPress 5.4 introducerar flera förändringar i DOM-strukturen som tema-utvecklare bör vara medvetna om.

För en detaljerad beskrivning om DOM- och CSS-ändringar kan man läsa Markup and style-related changes i WordPress 5.4

Block Byggnadsställningar

Med det nya paketet @wordpress/create-block för Block Byggnadsställningar, har exploatörerna ett nytt sätt att generera katalogstrukturen för ett blockredigerar-plugin. Den här strukturen omfattar vanligtvis index.php, index.js och style.css.

Blockutvecklare kan nu helt enkelt köra följande kommando:

$ npm init @wordpress/block block-name

Block Collection

Block Collection skapar ett sätt att visuellt gruppera samlingar av block i insättaren för blockredigeraren. Collections skiljer sig från kategorier och skapar ännu ett sätt att gruppera block.

Det nya API:et ger en ny funktion:

registerBlockCollection( namespace, { title, icon } );

Det introducerades med Gutenberg 7.3  och är nu  sammanslaget i kärnan. Den nya API:n gör att tema och block-utvecklare kan organisera blocken bättre vilket gör det enklare för användarna att upptäcka och lägga till block till innehåll.

Block Variations

Block Variations API ger en uppsättning av funktioner som gör att block-utvecklare kan lägga till / hantera / ta bort varianter som användare kan välja från när de lägger till block till innehåll. Det är ganska enkelt att registrera en ny variant (JS-kod):

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	}, 
	icon: 'palmtree', 
	scope: [ 'inserter' ] 
} );
Variationer för rubrikblock

Variationer för rubrikblock

En närmare titt på API:et för blockvariationer finns i PR-#20068.

Ytterligare funktioner för blockredigeraren som kommer med WordPress 5,4

Ytterligare anmärkningsvärda funktioner som buntas in i kärnan  i och med WordPress 5.4 inkluderar:

Växla mellan lägena Redigera och välj

Växla mellan lägena Redigera och välj

En tabell med en bildtext i WordPress 5.4

En tabell med en bildtext i WordPress 5.4

Bild med funktionen Dra och släpp

Bild med funktionen Dra och släpp

Fast verktygsfälts-block på mobilen

Fast verktygsfälts-block på mobilen

Inställningar för galleri-block

Inställningar för galleri-block

Lägg till länkar till bilder i Media & Text-block

Lägg till länkar till bilder i Media & Text-block

Funktioner och förbättringar för WordPress-utvecklare

Utvecklare bör kunna dra nytta av flera nya tillägg som kommer med WordPress 5.4.

Trött på problem med WordPress och en slö hosting? Vi erbjuder förstaklass-support från WordPress experter som är tillgängliga 24/7 och blixtsnabba servrar. Kolla in våra planer här

Våra favoritändringar inkluderar följande:

En semantiskt korrekt Kalender-widget och nya CSS-klasser

HTML 5.1 spec har förändrat hur  tfoot-element måste användas i tabeller. Innan HTML 5.1 kunde tfoot -element föregå tbody-element. Den nya specifikationen har ändrat på detta och nu måste tfoot följa tbody.

Widget för gammal kalender

Widget för gammal kalender

WordPress kalender-widget har ändrats därefter. Från och med WordPress 5.4 flyttas navigeringslänkarna till ett nav-element utanför kalendertabellen.

Detta är en efterlängtad förändring med tanke på att nav är det  lämpligaste HTML-elementet för navigeringslänkar, och kan även bidra till att förbättra tillgängligheten på skärmläsare. Enligt Mozilla-dokumentation:

Ett dokument kan ha flera <nav>-element, exempelvis ett för  webbplatsnavigering  och ett för navigering inom sidan. aria-labelled by kan i ett sådant fall användas för att främja tillgänglighet…

Användaragenter, exempelvis skärmläsare som är inriktade på inaktiverade användare, kan använda det här elementet för att avgöra om den första renderingen av endast navigering-innehåll ska utelämnas.

Dessutom har följande  CSS-klasser införts i get_calendar()för enklare inriktning:

Kodavsnittet nedan visar den nya kalenderns HTML-struktur:

<div class="widget widget_calendar">
	<div class="widget-content">
		<div id="calendar_wrap" class="calendar_wrap">
			<table id="wp-calendar" class="wp-calendar-table">
				<caption>February 2020</caption>
				<thead>
					<tr><!-- Day names --></tr>
				</thead>
				<tbody>
					<!-- Calendar cells -->
				</tbody>
			</table>
			<nav aria-label="Previous and next months" class="wp-calendar-nav">
				<span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">« Dec</a></span>
				<span class="pad"> </span>
				<span class="wp-calendar-nav-next"> </span>
			</nav>
		</div>
	</div>
</div>

Temautvecklare kanske vill ändra sina stylesheets därefter.

Ny kalenderwidget

Ny kalenderwidget

Kortkoder i PHP-skript

WordPress 5.4 introducerar  apply_shortcodes()-funktionen som ett alias för  do_shortcode(), som tillåter oss att använda använda en kortkod i en PHP-fil.

Ur en semantisk synvinkel kan vi förvänta oss att se resultatet av do_* -funktionerna genom att helt enkelt anropa själva funktionen. Men så är inte fallet med  do_shortcode. Om du vill skriva ut utdata från den angivna kortkoden måste do_shortcode bli echoed:

// Displays the result of the shortcode
echo do_shortcode( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4 ändrar saker och ting lite med införandet av apply_shortcodes(), som fungerar på samma sätt som do_shortcode(), men tillåter utvecklare att bygga en mer lättläst och semantiskt korrekt kod:

// Displays the result of the shortcode
echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

Från och med WordPress 5.4 RC 5, är do_shortcode() inte planerat att fasas ut eftersom det ofta används i tredje parts plugins.

Förbättringar av Faviconhantering i WordPress 5.4

Med WordPress 5.4 kan temautvecklare hantera favicon-begäranden med mycket större flexibilitet. Flera nya funktioner gör det möjligt att hantera favicons på samma sätt som robotar.txt relaterade funktioner. Sergey Biryukov förklarar:

En begäran till favicon.ico bör hanteras på samma sätt som vi hanterar robots.txt med do_robots():

Så, om det inte tillhandahålls en fysisk favicon.ico-fil, hanterar WordPress detta så här:

En handfull nya funktioner och krokar kompletterar motsvarande funktioner och krokar hos robots.txt:

Läs mer om faviconhantering.

Nya krokar för att lägga till anpassade fält i meny-objekt

Med WordPress 5.4 kan utvecklare använda två nya åtgärdskrokar för att lägga till anpassade fält i meny-objekt.

wp_nav_menu_item_custom_fields blir utlöst precis innan ett navmeny-objekt läggs till i admin-menyns redigerare. Se exemplet nedan:

function kinsta_add_menu_item_custom_field() {
	echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
}
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );
Anpassade fält i navmeny-objekten

Anpassade fält i navmeny-objekten

Den nya åtgärdskroken stöder fem parametrar som du kan använda för att finjustera det anpassade fältbeteendet:

wp_nav_menu_item_custom_fields_customize_template fungerar på samma sätt som wp_nav_menu_item_custom_fields, men utlöses i slutet av formulärfältsmallen för navmeny-objekten i anpassaren. Bilden nedan visar sektionen för anpassar-menyn i WordPress 5.4.

Anpassade fält i navmeny-objekten

Anpassade fält i navmeny-objekten

Ytterligare ändringar för utvecklare

Ytterligare ändringar för utvecklare och avancerade användare i WordPress 5.4 inkluderar:

Hur man installerar en WordPress utvecklar-version

Vill du se till att dina teman och plugins är helt kompatibla med WordPress 5.4 eller är du bara nyfiken på nya funktioner som kommer med den senaste WordPress-utgåvan? I så fall kan du installera den aktuella utvecklingsversionen med några få klick.

Det finns två sätt att installera en WordPress Beta / RC version:

Om du bestämmer dig för att installera pluginet Beta Tester måste du först konfigurera en vanlig WordPress-installation, antingen på din lokala maskin eller i din iscensättningsmiljö.

När din WordPress-webbplats är igång, ska du bläddra till Plugins → Lägg till nytt och söka efter pluginet WordPress Beta Tester.

Pluginet ger ett snabbt och enkelt sätt att betatesta WordPress, och gör det möjligt att installera och / eller uppdatera den nuvarande Beta eller Release-kanditaten med ett klick på en knapp.

Installera pluginet WordPress Beta Tester

Installera pluginet WordPress Beta Tester

Så, installera och aktivera pluginet som vanligt.

Bläddra till Verktyg → Beta Testing och kontrollera alternativet bleeding edge nightlies och spara ändringarna.

Därefter navigerar du till skärmen Instrumentpanel → Uppdateringar och klickar på knappen Uppdatera nu.

Skärmen för WordPress-uppdateringar

Skärmen för WordPress-uppdateringar

Nu kommer WordPress att hämta och installera följande paket:

https://wordpress.org/nightly-builds/wordpress-latest.zip

När installationen är klar omdirigeras du till den tillfälliga Om-sidan.

WordPress uppdateringsförlopp

WordPress uppdateringsförlopp

Och det är allt. Nu är du redo att köra dina tester på WordPress Beta och RC- versioner.

Kontrollera den officiella dokumentationen för ytterligare information om WordPress Beta testing.

Utvecklingsversioner är inte avsedda att användas i produktionen. Känn dig fri att installera dem i antingen din iscensättningsmiljö eller på din lokala maskin, men använd dem aldrig på din live-webbplats

Sammanfattning

Med tio versioner av Gutenberg-pluginet i kärnan, är WordPress 5.4 mest inriktat på blockredigeraren. Vi får två nya block, anpassade genvägar, förbättrad användbarhet och tillgänglighet, och vi kan förvänta oss ytterligare utveckling inom en snar framtid.

Men det finns ännu mer:

Den nya widgeten för hälsostatus för Webbplatser

Den nya widgeten för hälsostatus för Webbplatser

Nu är det din tur. Hur känner du för WordPress 5.4? Vilka förändringar och funktioner tycker du mest om? Låt oss veta i kommentarerna!


Spara tid, kostnad och maximera webbplatsens prestanda med:

  • Omedelbar hjälp från WordPress -hostingexperter, 24/7.
  • Cloudflare Enterprise-integration.
  • Global publik räckvidd med 28 datacenter över hela världen.
  • Optimering med vår inbyggda Application Performance Monitoring.

Allt detta och mer, i en plan utan långsiktiga kontrakt, assisterad migration och en 30-dagars pengarna-tillbaka-garanti. Kolla in våra paket, eller prata med säljteamet för att hitta den plan som fungerar för dig.