Gutenberg-blokker, mønstre og full site editing: den komplette WordPress-guiden (2026)

#Hvorfor blokker endret alt i WordPress

WordPress betjente nettet gjennom en enkelt rik-tekst-boks i over femten ar. Det endret seg i desember 2018 da versjon 5.0 ble levert med Gutenberg blokkeditor. I stedet for a lime inn ra HTML eller slite med shortcodes, ble hvert innholdselement en egen blokk: et avsnitt, et bilde, et galleri, en knapp, en tabell. Blokker kan flyttes, dupliseres, grupperes og styles uavhengig.

I 2026 er blokkeditoren ikke lenger valgfri. Den driver innleggsredigering, sidebygging og med full site editing hele temasjiktet. Enten du er en nettstedseier som publiserer artikler eller en utvikler som leverer kundeprosjekter, er forståelse av blokker, mønstre og Site Editor en kjernekompetanse.

Denne guiden går gjennom hvert lag i blokkøkosystemet, fra innsettingspanelet til a bygge et egendefinert blokktema fra bunnen av.

#Forstå blokkinnsettingspanelet

Blokkinnsettingspanelet er porten til hvert element du kan plassere på en side. Apne det ved a klikke på den bla +-knappen i verktøylinjen overst til venstre eller ved a skrive / i et tomt avsnitt.

Innsettingspanelet grupperer blokker i kategorier:

• Tekst - avsnitt, overskrift, liste, sitat, kode, forhåndsformatert, pullquote, vers
• Media - bilde, galleri, lyd, video, cover, fil
• Design - knapper, kolonner, gruppe, rad, stabel, skillelinje, mellomrom
• Widgeter - shortcode, arkiver, kategorier, siste innlegg, søk, sosiale ikoner
• Tema - navigasjon, nettstedslogo, nettstedstittel, query loop, maldel, innleggstittel, innleggsinnhold
• Innbygginger - YouTube, Twitter, Spotify, Vimeo og dusinvis mer via oEmbed

Hver blokk har sin egen verktøyrad (inline-formatering, justering, lenke) og et sidepanel med avanserte innstillinger (HTML-anker, ekstra CSS-klasser, farge, typografi). A mestre innsettingspanelet betyr at du sjelden trenger en page builder-plugin for standardoppsett.

#Tastatursnarveier som sparer tid

Produktiv blokkredigering er avhengig av snarveier:

• / etterfulgt av et blokknavn setter det inn umiddelbart
• Ctrl+Shift+D (Cmd på macOS) dupliserer den valgte blokken
• Ctrl+Alt+T setter inn en blokk for den gjeldende
• Ctrl+Alt+Y setter inn en blokk etter den gjeldende
• Shift+Alt+Z fjerner den valgte blokken
• Ctrl+Shift+K fjerner en lenke fra valgt tekst

Kombiner disse med drahandtaket på hver blokk, og du kan omorganisere komplekse oppsett uten a berore musen.

#Opprette og administrere synkroniserte mønstre (gjenbrukbare blokker)

WordPress 6.3 omdopte “gjenbrukbare blokker” til “synkroniserte mønstre”, men konseptet forblir det samme: lagre en blokk eller gruppe av blokker en gang og sett den inn hvor som helst på nettstedet ditt. Når du redigerer en instans, oppdateres alle plasseringer.

#Slik oppretter du et synkronisert monster

1. Velg en eller flere blokker i editoren.
2. Apne blokkverktøylinjen og klikk på trepunktsmenyen.
3. Velg Opprett monster.
4. Gi monsteret et navn og en kategori.
5. Sla på Synkronisert. (A la det sta av oppretter et standard, ikke-synkronisert monster.)
6. Klikk Opprett.

Monsteret vises na i innsettingspanelet under fanen Mønstre og i kategorien Synkronisert.

#Praktiske bruksområder

• Call-to-action-bannere - en enkelt CTA-blokkgruppe brukt på hver landingsside, oppdatert en gang når kampanjen endres.
• Anbefalingsseksjoner - en kolonneblokk med kundesitater som forblir konsistent på tjenestesider.
• Ansvarsfraskrivelser - juridisk tekst som ma forbli identisk på hele nettstedet.
• Nyhetsbrevpameldingsskjemaer - en skjemablokk synkronisert mellom blogg-sidefeltet og bunnteksten.

#Administrere mønstre fra administrasjonspanelet

Naviger til Utseende > Editor > Mønstre (eller den frittsaende Mønstre-skjermen på /wp-admin/edit.php?post_type=wp_block) for a vise, redigere, duplisere, eksportere eller slette mønstrene dine. Du kan ogsa konvertere et synkronisert monster til et vanlig (ikke-synkronisert) monster ved a apne det og sla av synkroniseringsstatusen.

#Blokkmønstre og monsterkatalogen

Mens synkroniserte mønstre er dine egne gjenbrukbare komponenter, er blokkmønstre ferdigdesignede oppsett du setter inn og tilpasser fritt. WordPress leveres med innebygde mønstre (hero-seksjoner, anbefalingsrutenett, pristabeller, funksjonslister), og tusenvis flere er tilgjengelige i den offisielle monsterkatalogen på wordpress.org/patterns.

#Bruke mønstre fra katalogen

1. Apne innsettingspanelet og klikk på fanen Mønstre.
2. Bla gjennom kategorier eller søk etter nokkkelord.
3. Klikk på et monster for a sette det inn i editoren.
4. Endre tekst, bilder, farger og mellomrom for a matche merkevaren din.

Fordi mønstre blir uavhengige kopier etter innsetting, kan du endre hver detalj uten a påvirke originalen.

#Registrere et egendefinert blokkmonster i PHP

Temaer og pluginer kan registrere mønstre programmatisk. Her er et minimalt eksempel i functions.php:

<?php
declare(strict_types=1);

add_action('init', function (): void {
    register_block_pattern(
        'wppoland/hero-with-cta',
        [
            'title'       => __('Hero med CTA', 'wppoland'),
            'description' => __('En fullbredde hero-seksjon med overskrift, avsnitt og knapp.', 'wppoland'),
            'categories'  => ['featured', 'banner'],
            'keywords'    => ['hero', 'cta', 'banner'],
            'content'     => '
                <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":500,"align":"full"} -->
                <div class="wp-block-cover alignfull" style="min-height:500px">
                    <span class="wp-block-cover__background has-contrast-background-color"></span>
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center","level":1} -->
                        <h1 class="wp-block-heading has-text-align-center">Din overskrift her</h1>
                        <!-- /wp:heading -->
                        <!-- wp:paragraph {"align":"center"} -->
                        <p class="has-text-align-center">Stottetekst som forklarer verdiforslaget.</p>
                        <!-- /wp:paragraph -->
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons">
                            <!-- wp:button -->
                            <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Kom i gang</a></div>
                            <!-- /wp:button -->
                        </div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->
            ',
        ]
    );
});

Fra WordPress 6.0 kan du ogsa plassere monsterfiler i en patterns/-katalog i temaets rotkatalog. Hver fil bruker en headerkommentar for metadata og returnerer blokkmarkering, noe som muliggjor automatisk registrering uten register_block_pattern().

#Full site editing: hvordan Site Editor erstatter Customizer

Full site editing (FSE) er samlebetegnelsen for a bruke blokker til a kontrollere hver del av nettstedet ditt - ikke bare innleggsinnhold, men ogsa topptekster, bunntekster, sidefelt, arkivoppsett og 404-sider. Det ble levert trinnvis gjennom WordPress 5.9 til 6.5 og er na standardtilnærmingen for blokktemaer.

#Hva full site editing erstatter

#Tilgang til Site Editor

Med et blokktema aktivt, gå til Utseende > Editor. Grensesnittet apnes i en visuell forhandsvisning. Fra venstresidefelt kan du navigere til:

• Maler - index, single, side, arkiv, 404, søk, hjem og eventuelle egendefinerte maler
• Maldeler - topptekst, bunntekst, sidefelt og egendefinerte deler
• Mønstre - alle registrerte og brukeropprettede mønstre
• Stiler - global typografi, farger, mellomrom og blokkspesifikke stiloverstyringer
• Navigasjon - menybehandling drevet av Navigation-blokken

Hver endring forhandsvisses direkte og lagres i databasen. For temautviklere kan endringer eksporteres som temafiler for versjonskontroll.

#Opprette egendefinerte maler og maldeler

Maler definerer strukturen til en sidetype. Maldeler er gjenbrukbare fragmenter (topptekst, bunntekst) som deles på tvers av maler.

#Opprette en mål i Site Editor

1. Apne Utseende > Editor > Maler.
2. Klikk Legg til ny mål.
3. Velg en maltype (side, enkeltinnlegg, kategori, forfatter, egendefinert).
4. Bygg oppsettet med blokker: legg til en topptekst-maldel på toppen, en query loop for innlegg, en bunntekst-maldel på bunnen.
5. Lagre.

#Malmarkeringsformat

Under panseret er hver mål en blokkmarkering-HTML-fil. Her er en forenklet templates/single.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-terms {"term":"category"} /-->
    <!-- wp:post-terms {"term":"post_tag"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

Maldeler ligger i parts/-katalogen. En parts/header.html kan se slik ut:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Denne strukturen eliminerer PHP-maltagger (get_header(), the_title(), the_content()) til fordel for deklarativ blokkmarkering. Resultatet er et tema som designere og innholdsredaktorer kan endre direkte i Site Editor.

#Grunnleggende theme.json-konfigurasjon

theme.json er den sentrale konfigurasjonsfilen som styrer hva editoren viser og hvordan frontenden ser ut. Den ligger i rotkatalogen til blokktemaet ditt.

#Minimalt theme.json-eksempel

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1e40af", "name": "Primary" },
        { "slug": "secondary", "color": "#9333ea", "name": "Secondary" },
        { "slug": "base", "color": "#ffffff", "name": "Base" },
        { "slug": "contrast", "color": "#1a1a1a", "name": "Contrast" }
      ],
      "gradients": [],
      "defaultPalette": false,
      "defaultGradients": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "body",
          "name": "Body"
        },
        {
          "fontFamily": "'Space Grotesk', sans-serif",
          "slug": "heading",
          "name": "Heading"
        }
      ],
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Small" },
        { "slug": "medium", "size": "1rem", "name": "Medium" },
        { "slug": "large", "size": "1.5rem", "name": "Large" },
        { "slug": "x-large", "size": "2.25rem", "name": "Extra Large" }
      ]
    },
    "spacing": {
      "units": ["rem", "vh", "vw", "%"],
      "spacingSizes": [
        { "slug": "10", "size": "0.5rem", "name": "Tiny" },
        { "slug": "20", "size": "1rem", "name": "Small" },
        { "slug": "30", "size": "1.5rem", "name": "Medium" },
        { "slug": "40", "size": "2.5rem", "name": "Large" },
        { "slug": "50", "size": "4rem", "name": "Extra Large" }
      ]
    },
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    },
    "appearanceTools": true
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--body)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--heading)",
          "fontWeight": "700"
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        }
      }
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "border": {
          "radius": "4px"
        }
      }
    }
  }
}

#Forklaring av viktige seksjoner

• version - bruk alltid 3 for WordPress 6.6 og nyere.
• settings - definerer hvilke kontroller som vises i editoren: fargepaletter, skriftfamilier, skriftstørrelser, mellomromsinnstillinger, layoutbredder og funksjonsbrytere.
• styles - anvender standard CSS-verdier på rotelementet, elementer (overskrifter, lenker, knapper, bildetekster) og individuelle blokker.
• appearanceTools - en snarvei som aktiverer kontroller for kantlinjer, mellomrom, typografi og dimensjoner i sidefeltet.

Motoren konverterer theme.json til egendefinerte CSS-egenskaper (som --wp--preset--color--primary) som kaskaderer gjennom hele nettstedet. Dette betyr at en fil styrer designtokenene for både editoren og frontenden.

#De beste blokkpluginene for WordPress i 2026

Kjerneeditoren dekker de fleste behov, men tredjeparts blokkpluginer fyller hullene med avanserte oppsett, designkontroller og spesialiserte blokker.

#Spectra (tidligere Ultimate Addons for Gutenberg)

Utviklet av Brainstorm Force (teamet bak Starter Templates-pluginen), legger Spectra til over 30 blokker: nedtellingstidtakere, stjernerangeringer, ikonlister, prislister, modaler, faner og en fullverdig skjemablokk. Den inkluderer en containerblokk med flex- og grid-layoutmodus, noe som gjor den egnet for komplekse sidedesign uten en tradisjonell page builder. Priser varierer og fastsettes individuelt basert på funksjonsniva.

#GenerateBlocks

Bygget av GeneratePress-teamet, tar GenerateBlocks en minimalistisk tilnærming: fire kjerneblokker (container, overskrift, knapper, bilde) som baserer seg på fleksible innstillinger i stedet for dusinvis av enkeltformalsblokker. Resultatet er lett utdata med minimalt CSS. Avanserte brukere setter pris på query loop-integrasjonen og det dynamiske datasystemet som henter innleggsmeta, egendefinerte felt og taksonomidata inn i blokkoppsett.

#Stackable

Stackable tilbyr over 40 blokker med et visuelt designbibliotek med over 200 ferdigbygde oppsett. Den fremste funksjonen er et enhetlig designsystem der global typografi, fargepaletter og mellomromsskalaer automatisk overforeres til hver Stackable-blokk. Gratisversjonen dekker de fleste bruksområder, mens premiumnivaet legger til dynamisk innhold, betinget visning og bevegelseseffekter.

#Kadence Blocks

Kadence Blocks tilbyr et rad-/kolonneoppsettsystem, avansert overskriftsblokk, infobokser, ikonlister, innholdsfortegnelse og en skjemablokk. Designbiblioteket inkluderer helsides- og seksjonsmønstre. Kadence passer spesielt godt sammen med Kadence-temaet og deler et designtokensystem. Priser for pro-nivaet fastsettes individuelt og varierer basert på antall nettsteder.

#Velge riktig plugin

Velg GenerateBlocks for ytelseskritiske prosjekter, Spectra eller Stackable for designtunge sider, og Kadence Blocks når du trenger en sterk skjemabygger ved siden av layoutverktøy.

#Bygge et enkelt blokktema fra bunnen av

Ved a kombinere alt ovenfor, her er en trinn-for-trinn-gjennomgang for a opprette et minimalt blokktema.

#Trinn 1: mappestruktur

my-block-theme/
  style.css
  theme.json
  functions.php
  templates/
    index.html
    single.html
    page.html
    404.html
  parts/
    header.html
    footer.html
  patterns/
    hero-banner.php

#Trinn 2: style.css-header

/*
Theme Name: My Block Theme
Theme URI: https://wppoland.com
Author: wppoland.com
Author URI: https://wppoland.com
Description: Et minimalt blokktema for a laere full site editing.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-block-theme
*/

Ingen ekstra CSS er nødvendig her. All styling flyter gjennom theme.json og det globale stilsystemet.

#Trinn 3: theme.json

Bruk eksemplet fra den tidligere seksjonen. Juster fargepaletten og typografien for a matche merkevaren din.

#Trinn 4: maler

templates/index.html (reservemalen):

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
            <!-- wp:post-date /-->
        <!-- /wp:post-template -->
        <!-- wp:query-pagination -->
            <!-- wp:query-pagination-previous /-->
            <!-- wp:query-pagination-numbers /-->
            <!-- wp:query-pagination-next /-->
        <!-- /wp:query-pagination -->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

templates/404.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:heading {"level":1} -->
    <h1 class="wp-block-heading">Siden ble ikke funnet</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph -->
    <p>Siden du leter etter eksisterer ikke. Prov a soke eller ga tilbake til startsiden.</p>
    <!-- /wp:paragraph -->
    <!-- wp:search {"label":"Søk","buttonText":"Søk"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

#Trinn 5: maldeler

parts/header.html:

<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<header class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        <!-- wp:site-title /-->
        <!-- wp:navigation {"layout":{"type":"flex"}} /-->
    </div>
    <!-- /wp:group -->
</header>
<!-- /wp:group -->

parts/footer.html:

<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<footer class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
    <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size">Bygget med WordPress og blokker.</p>
    <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

#Trinn 6: automatisk registrert monster

patterns/hero-banner.php:

<?php
/**
 * Title: Hero-banner
 * Slug: my-block-theme/hero-banner
 * Categories: featured, banner
 * Keywords: hero, cta, landing
 */
?>

<!-- wp:cover {"overlayColor":"primary","isUserOverlayColor":true,"minHeight":480,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:480px">
    <span class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"textColor":"base"} -->
        <h1 class="wp-block-heading has-text-align-center has-base-color has-text-color">Velkommen til My Block Theme</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"base"} -->
        <p class="has-text-align-center has-base-color has-text-color">Et lett, blokkforst WordPress-tema.</p>
        <!-- /wp:paragraph -->
        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <!-- wp:button {"backgroundColor":"base","textColor":"primary"} -->
            <div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button">Laer mer</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
</div>
<!-- /wp:cover -->

#Trinn 7: functions.php (valgfrie forbedringer)

<?php
declare(strict_types=1);

add_action('after_setup_theme', function (): void {
    add_theme_support('wp-block-styles');
    add_theme_support('editor-styles');
    add_editor_style('style.css');
});

add_action('wp_enqueue_scripts', function (): void {
    wp_enqueue_style(
        'my-block-theme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
});

Last opp mappen til wp-content/themes/, aktiver det og apne Utseende > Editor. Du har na et fullt funksjonelt blokktema der hver mål, monster og stil kan redigeres fra nettleseren.

#Avanserte tips for blokkforst utvikling

#Las blokker for a forhindre utilsiktede redigeringer

Når du bygger maler for kunder, las blokker for a begrense flytting og fjerning:

<!-- wp:group {"lock":{"move":true,"remove":true}} -->
<div class="wp-block-group">
    <!-- wp:paragraph -->
    <p>Denne blokken kan ikke flyttes eller slettes av redaktorer.</p>
    <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

Innhold innenfor laste blokker forblir redigerbart, men den strukturelle integriteten opprettholdes.

#Bruk blokkvarianter for konsistens

Registrer blokkvarianter for a gi forhåndskonfigurerte instanser av kjerneblokker. For eksempel en “teammedlem”-variant av media-and-text-blokken:

<?php
add_action('enqueue_block_editor_assets', function (): void {
    wp_add_inline_script(
        'wp-blocks',
        "wp.blocks.registerBlockVariation('core/media-text', {
            name: 'team-member',
            title: 'Team Member',
            attributes: {
                mediaPosition: 'left',
                verticalAlignment: 'center',
            },
            scope: ['inserter'],
        });"
    );
});

Varianter vises som distinkte blokker i innsettingspanelet mens de deler foreldereblokkens kode.

#Utnytt create-block-pakken

For egendefinerte blokker utover det mønstre og varianter dekker, bruk det offisielle scaffoldingverktøyat @wordpress/create-block:

npx @wordpress/create-block my-custom-block --variant dynamic

Dette genererer en plugin med byggeverktøy (webpack, Babel, ESLint), en React-basert edit-funksjon og en PHP render_callback for dynamisk serversiderendering. Det er den anbefalte veien for enhver blokk som ma hente data, kjore sporringer eller vise dynamisk innhold.

#Vanlige feil og hvordan unngå dem

Blande klassiske og blokkmaler. Et tema er enten et blokktema eller et klassisk tema. A plassere index.php ved siden av templates/index.html skaper uforutsigbar reserveoppforsel. Forplikt deg til en tilnærming per tema.

Overstyre theme.json med inline CSS. Inline-stiler omgar den globale stilkaskaden og bryter Site Editors stilkontroller. Bruk alltid theme.json-innstillinger og egendefinerte CSS-egenskaper i stedet.

Ignorere patterns-katalogen. Mange utviklere registrerer fortsatt mønstre utelukkende gjennom PHP. patterns/-katalogen med filhoder er enklere, krever ingen hook-registrering og holder monstermarkering atskilt fra logikk.

Glemme a teste med forskjellige brukerroller. Redaktorer og forfattere ser en filtrert versjon av blokkeditoren. Malredigering, globale stiler og visse blokker kan være skjult basert på tillatelser. Verifiser alltid redigeringsopplevelsen for hver rolle som skal bruke den.

Ikke eksportere Site Editor-endringer. Endringer gjort i nettleseren lagres i databasen. Hvis du redistribuerer temaet uten a eksportere disse endringene til filer, forsvinner de. Bruk Site Editors eksportfunksjon eller WP-CLI-kommandoen wp theme export for a synkronisere endringer tilbake til versjonskontroll.

#Fremtiden for blokker i WordPress

Gutenberg-prosjektet er organisert i fire faser: enklere redigering (levert), tilpasning (gjeldende, FSE), samarbeid (pagar) og flerspraklighet (planlagt). Fase 3, sanntidssamarbeid, vil bringe Google Docs-lignende samtidig redigering til blokkeditoren. Fase 4 sikter mot a gjore WordPress innfodt flerspraaklig uten pluginer.

Blokktemaer er allerede standard for nye WordPress-installasjoner. Klassiske temaer forblir stottet, men ny API-utvikling og designverktøy fokuserer på blokkparadigmet. A investere i blokkforst ferdigheter na posisjonerer teamet ditt for hver større WordPress-utgivelse gjennom 2028 og utover.

#Hvordan wppoland.com tilnærmer seg blokkutvikling

Hos wppoland.com bygger vi hvert kundeprosjekt på blokkforst arkitektur. Arbeidsflyten var starter med theme.json designtokens, går videre til egendefinerte blokkmønstre for gjentakende seksjoner, og avsluttes med laste maler som gir innholdsredaktorer frihet uten strukturell risiko.

For prosjekter som trenger blokker utover det kjerne og eksisterende pluginer tilbyr, utvikler vi egendefinerte blokker ved hjelp av @wordpress/create-block-verktøysettet, med serversiderendering for dynamisk innhold og full integrasjon med Site Editors globale stiler.

Hvis du trenger et egendefinert blokktema, en migrering fra et klassisk tema til full site editing, eller skreddersydd blokkutvikling for din innholdsarbeidsflyt, ta kontakt med wppoland.com-teamet. Vi leverer blokkløsninger tilpasset dine redaksjonelle og forretningsmessige krav, med priser fastsatt individuelt basert på prosjektomfang.