WordPress 5.0 er lige rundt om hjørnet, og mange af os føler sig begejstrede og bekymrede på samme tid. Gutenberg bringer en stor ændring i, hvordan vi bruger WordPress, og der er helt sikkert en vis bekymring for, hvad der sker med vores hjemmesider, hvis vi skal opdatere vores installationer uden tidligere at teste det. Men bare rolig, vi har et indlæg om, hvordan du kan deaktivere Gutenberg WordPress Editor (selvom det kun er midlertidigt) for at forhindre, at ikke understøttede temaer og plugins bryder vores websites.
Du kan blive overrasket over at vide, at vi allerede bruger WordPress 5.0. Faktisk er vi! Som Matt sagde det på Make WordPress blog:
Hvis vi holder 5,0-udgivelsen til strengt 4.9.8 + Gutenberg, vil vi få en udgivelse, der er både større og en ikke-begivenhed i form af ny kode. Det er alle testet. På nogle måder er 5.0 allerede i virkeligheden ude at køre, med nogle fremadrettede værter, der allerede installerer og aktiverer Gutenberg til nye installationer.
Det betyder, at vi allerede har WordPress 5.0, der kører på vores servere: det er bare WordPress 4.9.8, med Gutenberg i kernen. Faktisk er det ikke alt, fordi WordPress 5.0 kommer med en ekstra post, som er det helt nye Twenty Nineteen standard tema.
Så lad os dykke ind og se, hvad der er nyt.
- Om Gutenberg og Twenty Nineteen
- Installation af Twenty Nineteen
- The Look and Feel of Twenty Nineteen
- Theming for Gutenberg: En udviklerens tilgang
Om Gutenberg og Twenty Nineteen
Nogle af jer kan ikke lide Gutenberg. Desuden er debatten over den nye editor langt fra at være forbi, men overvej det erklærede omfang af Gutenberg:
Disse brugerdefinerede blokke ændrer hvordan brugere, udviklere og værter interagerer med WordPress, for at opbygge rigeligt webindhold, som er lettere og mere intuitivt, demokratiserende udgivelse og arbejde for alle, uanset teknisk evne.
Dette er, hvad Gutenberg har til formål, og Twenty Nineteen bringer ting et skridt fremad, der bliver bygget med Gutenberg. Det er et minimalt typografi-drevet bloggtema med et enkeltkolonne layout, og kan bruges til at opbygge en bred vifte af hjemmesider, fra personlige blogs til små virksomheder.
Skrivning om Twenty Nineteen betyder stort set, at vi skriver om Gutenberg. I Twenty Nineteen Gutenberg tillader brugerne ikke blot at skabe rigeligt indhold, men endda at bygge hele deres hjemmeside i editoren. Ifølge Allan Cole på Make WordPress blog,
Gutenberg giver brugerne en hidtil uset frihed til at tilpasse deres hjemmeside layout og design. For fuldt ud at opnå deres vision, vil brugerne have brug for en ny generation af fleksible temaer, bygget for at udnytte den kreative frihed, Gutenberg tilbyder.
Med det i tankerne vil WordPress 5.0 lancere med et helt nyt standardtema: Twenty Nineteen
I Twenty Nineteen-temaet er Gutenberg mere end en indholdsbygger, det er en sidebygger, og WordPress-brugere får lov til at bygge alle deres hjemmesider ved hjælp af udnyttelse af blokke. Og hvis Gutenberg ikke er din ting endnu, tilføjer de fleste af de populære sidebygger plugins også støtte til Gutenberg.
(Forslag til læsning: En introduktion til temaet Twenty Twenty)
Installation af Twenty Nineteen
Twenty Nineteen bør følge udgivelsesplanen for den nye WordPress store udgivelse. Imidlertid skal WordPress 5.0 udgives den 19. november, og det er muligt, at en arbejdsversion af Twenty Nineteen ikke er klar til den dato. Se alle mulige udgivelsesdatoer for WordPress 5.0. Anyway, temaet er tilgængeligt til download på Github, og vil forblive der, indtil det er fusioneret i kernen.
Twenty Nineteen er baseret på både _s go gutenberg-starter-temaet og kommer med Sass inde. Når du har fået. Zip-pakken, skal du udpakke temaet og uploade/flytte temapappen til /wp-content/themes i din udviklingsinstallation. Du kan også uploade det fra dit WordPress dashboard.
Kinsta-klienter kan installere det på deres staging-miljøer. Hvis du ikke er med Kinsta, kan du stadig installere den på din lokale maskine.
Udseendet og Følelsen med Twenty Nineteen
Layoutet med enkeltsøjlerne fremhæver indholdet og passer bedst til blokeringer i fuld og bred bredde. Temaet understøtter nu en sidebjælke med sidebar og leveres med tre navigeringsmenuer: Primærmenuen og menuen Social Links, begge placeret i sidens overskrift og undermenuen, der ligger i sidebladet.
Blog-siden ligner en almindelig blogside, med aktiverede billeder aktiveret. Enkle indlæg og sider viser bedst potentialet i den nuværende version af Gutenberg som byggemester.
Da det er helt baseret på Gutenberg, afhænger Twenty Nineteen sine funktioner hovedsageligt af Gutenbergs udviklingscyklus og om tilgængeligheden af blokke. Vi kan tilføje widget blokke, shortcode blokke, gallerier, HTML kode, og så videre. Men alle disse blokke er langt fra at dække alle vores behov. Men heldigvis har vi flere plugins, der giver os mulighed for at tilføje nye blokke til Gutenberg, som Atomic Blocks, Advanced Gutenberg og Stackable. Der er endda projekter som Gutenberg Cloud, der har spiret op.
Hvis du tror, at temaet ser for lavt ud, skal du overveje, at Twenty Nineteen stadig er et igangværende arbejde. Vi er ikke sikre på, om det vil blive slået sammen i kernen, når WordPress 5.0 bliver frigivet, og vi kan forvente flere tilføjelser og fejlopløsninger i den kommende fremtid. Derudover er der mange problemer, der stadig ikke er løst, og funktioner, der skal implementeres. Nu understøtter Twenty Nineteen undermenuer, men ikke brugerdefinerede overskrifter og videohoveder. Under alle omstændigheder kan vi forvente, at yderligere funktioner tilføjes inden for rimelig tid.
Hvis du er interesseret i temaets tilstand, så tjek den fulde liste over problemer på Github.
Themaer for Gutenberg: En Udviklers Tilgang
Ud af boksen giver Gutenberg grundlæggende support til blokformater i temaer, og temaudviklere kan frit tilsidesætte Gutenbergs standardstil med deres tilpassede stilarter. Men udviklere kan også helt undlade tilpassede stilarter og beslutte at stole udelukkende på Gutenberg til stilblokke på forsiden af webstedet.
At have en redaktør, der ser ud og føles som det resulterende indhold, forbedrer forfatterens skriveoplevelse og giver alle mulighed for at føle sig godt tilpas med brugergrænsefladen.
I nogle tilfælde kræver nogle Gutenbergs stilarter og præsentationsfunktioner temaer til udtrykkeligt at tilføje støtte til dem, og dette kan gøres ved at kalde add_theme_support i functions.php filen, når action after_setup_theme udløses. Her er et eksempel på en funktion implementering:
function mytheme_setup() {
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );Nedenfor er anført et udvalg af disse Gutenberg-funktioner, hvoraf nogle også understøttes af Twenty Nineteen. Du finder den fulde liste over funktioner i Gutenberg-håndbogen.
Tilføjelse af Support til Gutenberg Block Presentation Styles
Et af målene bag holdet bag Gutenberg, var at opbygge et fleksibelt system til styling inden for temaer og at komme så tæt som muligt “til visuel paritet mellem front-end og editor”. Formålet er at give brugeren en præcis forhåndsvisning af indholdet, som det vil se ud på forsiden.
For at nå det mål måtte holdet adskille præsentationsformer og strukturelle stilarter. Som standard er præsentationsformater ikke indlæst på fronten, for at undgå at påvirke udseendet på webstedet. I hvert fald kan nye temaer udnytte Gutenbergs præsentationsformer ved blot at give dem følgende registrering (se håndbogen for yderligere detaljer):
// Add support for Block Styles
add_theme_support( 'wp-block-styles' );Som du måske forventer, støtter Twenty Nineteen Gutenbergs blok-stilarter. Den enkelte indlægsside virker på fronten meget ligesom redigeringspostsiden, med den eneste forskel på det viste billede, der vises på et skrivebord som et baggrundsbilde, der dækker hele visningsporten. Billedet nedenfor viser Gutenberg i aktion på bagsiden.
Og her er det samme indlæg på forsiden.
Brede og Fyldte Justeringer
Gutenberg giver også to yderligere justeringsmuligheder: bred og fuld breddejustering, men du kan kun vælge bred eller fuld breddejustering, hvis dit tema understøtter dem. Hvis det gør det, viser Gutenberg to yderligere justeringsikoner.
Billedet nedenfor viser Juster center, bred bredde og fuld bredde billeder i Twenty Nineteen.
Temaudviklere kan tilføje understøttelse til bred og fuld breddejusteringer ved at aktivere dem i funktionsfilen med en enkelt sætning:
// Add support for full and wide align images
add_theme_support( 'align-wide' );Når vi har tilføjet understøttelse af bredde og breddejusteringer, skal vi give CSS-erklæringerne til to yderligere CSS-klasser: alignfull og alignwide. Twenty Nineteen giver følgende stilarter:
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: auto;
margin-right: auto;
}
@media only screen and (min-width: 768px) {
.entry-content > *.alignwide,
.entry-summary > *.alignwide {
margin-left: calc(1 * (100vw / 12));
margin-right: calc(1 * (100vw / 12));
max-width: calc(10 * (100vw / 12));
}
}
.entry-content > *.alignfull,
.entry-summary > *.alignfull {
margin-top: calc(2 * 1rem);
margin-right: 0;
margin-bottom: calc(2 * 1rem);
margin-left: 0;
max-width: 100%;
}
.entry-content .wp-block-image.alignfull img {
width: 100vw;
margin-left: auto;
margin-right: auto;
}Bemærk! Vær forsigtig, når du bruger denne indstilling, fordi det kan forårsage problemer, hvis du skifter tema (læs mere om dette emne på Github).
Editor Style
Editor Style er en funktion introduceret med WordPress 3.0, der gør det muligt for temaudviklere at tilføje brugerdefinerede stilarter til TinyMCE-editoren. Gutenberg understøtter også denne funktion, men den fungerer anderledes end Classic Editor, som indlæser stilarter direkte i editorens iframe. Gutenberg tilføjer specifikke CSS-selektorer, da det ikke bruger en iframe.
Vi kan tilføje support til editor stilarter som følger:
// Add support for editor styles
add_theme_support( 'editor-styles' );
// Enqueue editor styles
add_editor_style( 'style-editor.css' );Denne funktion understøttes også af Twenty Nineteen. Du kan dykke dybere ind i dette emne i Editor Style i Gutenberg.
Bloker farvepaletter
Gutenberg giver en generisk farvevælger i editorens farveindstillinger-panel. Temaudviklere kan forbedre dette værktøj ved at tilføje brugerdefinerede farvepaletter, så brugerne hurtigt kan hente den rigtige farve til blok baggrund og tekst. Dette er en to-trins proces:
For det første skal vi tilbyde en række farver:
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'hot pink', 'themeLangDomain' ),
'slug' => 'hot-pink',
'color' => '#f865b0',
),
array(
'name' => __( 'classic rose', 'themeLangDomain' ),
'slug' => 'classic-rose',
'color' => '#fbcaef',
),
) );Så er vi nødt til at erklære de tilsvarende stilarter i temaets stilark:
.has-hot-pink-background-color {
background-color: #f865b0;
}
.has-hot-pink-color {
color: #f865b0;
}Klassenavne begynder med has-, efterfulgt af farveslibningen i kebab-tilfælde og slutter med konteksten, som kan være color eller background-color. I øjeblikket understøtter Twenty Nineteen ikke blokfarvepaletter, men vi kan nemt ændre dette med et child theme.
I stedet, hvis du vil deaktivere en brugerdefineret farvepalet, skal du tilføje følgende linje til dit tema eller child temaets funktionsfil:
add_theme_support( 'disable-custom-colors' );Blok skriftstørrelser
Et tema kan også tilsidesætte Gutenbergs standard sæt-skriftstørrelser. Her er et eksempel på den kode, du skal tilføje til funktionsfilen:
add_theme_support( 'editor-font-sizes', array(
array(
'name' => __( 'extra-small', 'themeLangDomain' ),
'shortName' => __( 'XS', 'themeLangDomain' ),
'size' => 10,
'slug' => 'extra-small'
),
array(
'name' => __( 'small', 'themeLangDomain' ),
'shortName' => __( 'S', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => __( 'regular', 'themeLangDomain' ),
'shortName' => __( 'M', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => __( 'large', 'themeLangDomain' ),
'shortName' => __( 'L', 'themeLangDomain' ),
'size' => 26,
'slug' => 'large'
),
array(
'name' => __( 'larger', 'themeLangDomain' ),
'shortName' => __( 'XL', 'themeLangDomain' ),
'size' => 36,
'slug' => 'larger'
),
array(
'name' => __( 'huge', 'themeLangDomain' ),
'shortName' => __( 'XXL', 'themeLangDomain' ),
'size' => 56,
'slug' => 'huge'
)
) );De nye skrifttypestørrelser tilføjes til skrifttypestørrelsen i Gutenbergs tekstindstillinger.
Herefter skal vi deklarere de tilsvarende stilarter i temaets stilark. Klassenavnet skal begynde med has-, efterfulgt af skriftstørrelsesnavnet i kebab-tilfælde og slutter med -font-size.
.has-huge-font-size {
font-size: 56px;
}Twenty Nineteen giver ikke bestemte skriftstørrelser og er afhængige af Gutenbergs standardindstillinger.
Bemærk: Husk at for at gøre alt dette kode arbejde, skal du koble den gennem action after_setup_theme.
Resumé
Twenty Nineteen kunne fungere godt til personlige blogs, og du kunne tænke på det mere som et hvidt lærred end et fuldt funktionelt WordPress tema. En så minimal tilgang kan være lidt begrænsende, når det kommer til at opbygge hjemmesider til erhvervslivet og e-handel, men du skal ikke bekymre dig: Nye funktioner skal implementeres inden for kort tid, og vi kunne snart se en mere kraftfuld version af Twenty Nineteen.
I mellemtiden kan du også kigge på nogle temaer, der allerede støtter Gutenberg. Atomic Blocks, GeneratePress, Gutentype og Divi for at nævne nogle få, men mange andre kommer snart. Med WordPress 5.0’s hurtige ankomst, er Gutenberg understøttelse ikke en mulighed, og temaudviklere bør omhyggeliggøre den nye WordPress-editor så hurtigt som muligt for at fortsætte konkurrencen.
Har du installeret Twenty Nineteen eller et hvilket som helst tema, der støtter Gutenberg? Vi vil gerne høre dine tanker i kommentarerne 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