Använda den nya begränsade layouten i WordPress-blockteman

Ett av huvudmålen för WordPress Site Editor (och, ja, det är nu "officiellt namn) är att flytta grundläggande blockstyling från CSS till strukturerad JSON. JSON-filer är maskinläsbara, vilket gör dem förbrukningsbara av den JavaScript-baserade Site Editor för att konfigurera ett temas globala stilar direkt i WordPress.

Det är inte ända dit än! Om vi ​​tittar på Twenty Twenty-Two (TT2) standardtema, fanns det två huvudsakliga olösta problem: stylinginteraktioner (tycka om :hover, :active, :focus), Och marginalerna och stoppning av layoutcontainrar. Du kan se hur de tillfälligt fixades i TT2 style.css fil istället för att göra den till theme.json fil.

WordPress 6.1 fixade de problemen och vad jag vill göra är att titta specifikt på det senare. Nu när vi har JSON-ifierade stilar för marginaler och utfyllnad av layoutbehållare, öppnar det oss för mer flexibla och robusta sätt att definiera avstånd i våra temalayouter.

Vilken typ av mellanrum pratar vi om?

För det första har vi redan stoppning på rotnivå vilket är ett fint sätt att beskriva vaddering på element. Det är trevligt eftersom det säkerställer konsekvent avstånd på ett element som delas på alla sidor och inlägg.

Men det finns mer i det för nu har vi ett sätt för block att kringgå den stoppningen och anpassa sig i full bredd. Det är tack vare stoppningsmedvetna justeringar vilket är en ny opt-in-funktion theme.json. Så även om du har utfyllnad på rotnivå kan du fortfarande tillåta, säg, en bild (eller något annat block) att bryta ut och gå i full bredd.

Det får oss till en annan sak vi får: begränsade layouter. Tanken här är att alla block som är kapslade i layouten respekterar layoutens innehållsbredd – vilket är en global inställning – och inte flödar utanför den. Vi kan åsidosätta det beteendet block för block med anpassningar, men vi kommer till det.

Låt oss börja med…

Vaddering på rotnivå

Återigen, detta är inte nytt. Vi har haft möjligheten att ställa in stoppning på element i theme.json sedan experimentet Gutenberg plugin introducerade den i version 11.7. Vi ställer in den på styles.spacing objekt, där vi har margin och padding objekt för att definiera det övre, högra, nedre och vänstra avståndet på kroppen:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

Detta är en global miljö. Så om vi skulle knäcka upp DevTools och inspektera element, skulle vi se dessa CSS-stilar:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

Häftigt. Men häri ligger frågan om hur i hela friden vi kan tillåta vissa block att bryta sig ur det avståndet för att fylla hela skärmen, kant till kant. Det är därför avståndet finns där, eller hur? Det hjälper till att förhindra att det händer!

Men det finns verkligen massor av fall där du kanske vill bryta det avståndet på en engångsinstans när du arbetar i Block Editor. Säg att vi ploppar ett bildblock på en sida och vi vill att det ska gå i full bredd medan resten av innehållet respekterar utfyllnaden på rotnivån?

Stiga på…

Utfyllnadsmedvetna justeringar

När du försöker skapa det första standard WordPress-temat som definierar alla stilar i theme.json fil, chefsdesigner Kjell Reigstad illustrerar de utmanande aspekterna av att bryta ut ur rotnivåstoppning i detta GitHub-problem.

Nya funktioner i WordPress 6.1 skapades för att lösa detta problem. Låt oss gräva i dem härnäst.

useRootPaddingAwareAlignments

En ny useRootPaddingAwareAlignments egendom skapades för att lösa problemet. Det introducerades faktiskt först i Gutenberg-plugin v13.8. De original pull-begäran är en trevlig primer på hur det fungerar.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

Lägg märke till att det här är en funktion som vi måste välja att använda. Egenskapen är inställd på false som standard och vi måste uttryckligen ställa in den till true för att aktivera det. Lägg också märke till att vi har appearanceTools satt till true också. Det gör att vi väljer UI-kontroller i webbplatsredigeraren för att utforma kanter, länkfärger, typografi och, ja, mellanrum som inkluderar marginal och utfyllnad.

Att lägga plattor appearanceTools satt till true väljer automatiskt block i marginal och stoppning utan att behöva ställa in heller settings.spacing.padding or setting.spacing.margin till true.

När vi aktiverar useRootPaddingAwareAlignments, förses vi med anpassade egenskaper med rotutfyllnadsvärden som är inställda på element på framsidan. Intressant nog tillämpar den också stoppningen på .editor-styles-wrapper klass så att avståndet visas när du arbetar i back-end Block Editor. Ganska cool!

Jag kunde bekräfta dessa anpassade CSS-egenskaper i DevTools medan jag grävde runt.

Möjliggör useRootPaddingAwareAlignments tillämpar även vänster och höger utfyllnad på alla block som stöder värdena för "innehålls" bredd och "bred" bredd i Global Styles-bilden ovan. Vi kan också definiera dessa värden i theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

Om inställningarna för Global Styles är annorlunda än vad som är definierat i theme.json, då har Global Styles företräde. Du kan lära dig allt om att hantera blocktemastilar i min senaste artikel.

• contentSize är standardbredden för block.
• wideSize ger ett "brett" layoutalternativ och skapar en bredare kolumn för block att sträcka ut.

Så det sista kodexemplet kommer att ge oss följande CSS:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] indikerar ett unikt nummer som automatiskt genereras av WordPress.

Men gissa vad vi mer får? Full anpassning också!

.wp-container-[id] .alignfull {
  max-width: none;
}

Se det? Genom att aktivera useRootPaddingAwareAlignments och definierande contentSize och wideSize, får vi också en fullständig CSS-klass för totalt tre containerkonfigurationer för att kontrollera bredden på block som läggs till på sidor och inlägg.

Detta gäller för följande layoutspecifika block: kolumner, grupp, inläggsinnehåll och frågeloop.

Blockera layoutkontroller

Låt oss säga att vi lägger till något av de tidigare nämnda layoutspecifika blocken på en sida. När vi väljer blocket erbjuder blockinställningar UI oss nya layoutinställningar baserat på settings.layout värden vi definierade i theme.json (eller Global Styles UI).

Vi har att göra med mycket specifika block här - sådana som kan ha andra block kapslade inuti. Så, dessa layoutinställningar handlar egentligen om att kontrollera bredden och justeringen av de kapslade blocken. Inställningen "Inre block använder innehållsbredd" är aktiverad som standard. Om vi ​​stänger av det har vi nej max-width på behållaren och blocken inuti den går kant i kant.

Om vi ​​lämnar växeln på, kommer kapslade block att hålla sig till antingen contentWidth or wideWidth värden (mer om det om lite). Eller så kan vi använda de numeriska ingångarna för att definiera anpassade contentWidth och wideWidth värden i det här engångsfallet. Det är stor flexibilitet!

Breda block

Inställningarna vi just tittade på är inställda på föräldrablocket. När vi har kapslat ett block inuti och markerat det, har vi ytterligare alternativ i det blocket att använda contentWidth, wideWidth, eller gå i full bredd.

Lägg märke till hur WordPress multiplicerar de anpassade CSS-egenskaperna för utfyllnad på rotnivå med -1 för att skapa negativa marginaler när du väljer alternativet "Full bredd".

Använda en begränsad layout

Vi har precis täckt de nya avstånden och anpassningarna vi får med WordPress 6.1. De är specifika för block och eventuella kapslade block inom block. Men WordPress 6.1 introducerar också nya layoutfunktioner för ännu mer flexibilitet och konsekvens i ett temas mallar.

Exempel: WordPress har helt omstrukturerat sina Flex- och Flow-layouttyper och gett oss en tvungen Layouten typ som gör det enklare att justera blocklayouter i teman med hjälp av inställningarna för innehållsbredd i Site Editor's Global Styles UI.

Flex-, Flow- och Constrained-layouter

Skillnaden mellan dessa tre layouttyper är stilarna som de matar ut. Isabel Brison har en utmärkt text som på ett snyggt sätt beskriver skillnaderna, men låt oss parafrasera dem här för referens:

• Flödeslayout: Lägger till vertikalt avstånd mellan kapslade block i margin-block riktning. Dessa kapslade block kan också justeras till vänster, höger eller mitten.
• Begränsad layout: Samma exakta affär som en Flow-layout, men med breddbegränsningar på kapslade block som är baserade på contentWidth och wideWidth inställningar (antingen i theme.json eller Global Styles).
• Flex layout: Detta var oförändrat i WordPress 6.1. Det använder CSS Flexbox för att skapa en layout som flyter horisontellt (i rad) som standard, men som också kan flyta vertikalt så att block staplas ovanpå varandra. Avstånd tillämpas med hjälp av CSS gap fast egendom.

Denna nya lista med layouttyper skapar semantiska klassnamn för varje layout:

Semantisk layout klass	Layout typ	Block som stöds
.is-layout-flow	Flödeslayout	Kolumner, grupp, inläggsinnehåll och frågeloop.
.is-layout-constrained	Begränsad layout	Kolumner, grupp, inläggsinnehåll och frågeloop.
.is-layout-flex	Flex-layout	Kolumner, knappar, sociala ikoner

Justin Tadlock har en omfattande text om de olika layouttyperna och semantiska klasserna, inklusive användningsfall och exempel.

Uppdaterar ditt tema för att stödja begränsade layouter

Om du redan använder ett eget blocktema kommer du att vilja det uppdatera den för att stödja begränsade layouter. Allt som krävs är att byta ut ett par saker theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

Dessa är nyligen släppta blockteman som har aktiverat avståndsinställningar med useRootPaddingAwareAlignments och har en uppdaterad theme.json fil som definierar en begränsad layout:

Inaktivera layoutstilar

Baslayoutstilarna är standardfunktioner som levereras i WordPress 6.1 Core. Med andra ord, de är aktiverade direkt ur lådan. Men vi kan inaktivera dem om vi behöver med det här lilla utdraget functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

Stor varning här: inaktiverar stöd för standardlayouttyperna också tar bort all grundstil för dessa layouter. Det betyder att du måste skapa dina egna stilar för avstånd, justeringar och allt annat som behövs för att visa innehåll i olika mall- och blocksammanhang.

Inslagning upp

Som ett stort fan av bilder i full bredd är den nya WordPress 6.1-layouten och utfyllnadsmedvetna justeringsfunktioner två av mina mest favoriter hittills. Sammantaget med andra verktyg inklusive bättre marginal- och stoppningskontroll, flytande typografi, och uppdaterade list- och citatblock, bland annat, är ett solidt bevis på att WordPress går mot en bättre innehållsskapande upplevelse.

Nu måste vi vänta och titta på hur fantasin och kreativiteten hos vanliga designers och innehållsskapare använder dessa otroliga verktyg och tar det till en ny nivå.

På grund av pågående utvecklingsiterationer för webbplatsredigerare bör vi alltid förutse en svår väg framåt. Som optimist är jag dock angelägen om att se vad som kommer att hända i den kommande versionen av WordPress 6.2. Några av de saker som jag håller stenkoll på är saker som funktioner som övervägs för inkludering, stöd för klibbig positionering, nya layoutklassnamn för inre blockomslag, uppdaterade sidfotsjusteringsalternativoch lägga till begränsade och flödeslayoutalternativ till Cover-block.

Denna GitHub problem #44720 listar layoutrelaterade diskussioner planerad för WordPress 6.2.

Ytterligare resurser

Jag konsulterade och hänvisade till många källor medan jag grävde i allt detta. Här är en stor lista över saker som jag tyckte var hjälpsamma och som jag tror att du också kan gilla.

Handledning

WordPress-inlägg

GitHub pull-förfrågningar och problem