O scufundare profundă în temele Twenty Twenty-Two și WordPress Block

Deși puțin mai târziu decât era planificat inițial, primim o nouă temă implicită WordPress. Numele lui este Twenty Twenty-Two!

Noua temă implicită WordPress vine odată cu viitoarea lansare WordPress 5.9. Am fost curioși să aflăm mai multe despre noua temă, așa că am instalat și testat Twenty Twenty-Two într-un mediu de dezvoltare locală care rulează WordPress 5.9.

Vă vom arăta rezultatele noastre înainte de a ne încheia gândurile pentru a vă oferi o privire de ansamblu aprofundată asupra dezavantajelor noii teme WordPress.

Twenty Twenty-Two a fost conceput pentru a fi cea mai flexibilă, ușoară și personalizabilă temă implicită de până acum. Oferă un loc de joacă excelent pentru testarea blocurilor, modelelor și șabloanelor.

Fiind o temă bloc, vă va ajuta să explorați mai bine Editarea completă a site-ului, Stilurile globale, Blocurile de navigare și noile galerii de imagini, care sunt cele mai așteptate funcții care vin cu WordPress 5.9.

Trebuie să spunem imediat că Twenty Twenty-Two este prima temă de blocare implicită !

Unul dintre cele mai ambițioase obiective ale noii teme este de a împuternici utilizatorii . Cu atât de multe modele și șabloane disponibile din cutie, utilizatorii pot crea machete complexe cu doar câteva clicuri. Restul este doar personalizarea stilului.

Din punct de vedere tehnic, a scrie despre Twenty Twenty-Two nu este mult diferit de a scrie despre cele mai recente și mai puternice funcții care vin cu WordPress 5.9. Dar Twenty Twenty-Two ne oferă o lupă pentru a aprecia mai bine noile funcții de editare a site-ului și pentru a ne face o idee mai bună despre viitorul platformei.

Așa că aici suntem să vă prezentăm noua temă.

În primul rând, vom explora noul flux de editare a site-ului pe care utilizatorii îl vor experimenta cu WordPress 5.9 și Twenty Twenty-Two.

După aceea, ne vom scufunda în principalele caracteristici ale temei bloc implementate în Twenty Twenty-Two. Veți cunoaște Stiluri globale , modele de bloc , șabloane și părți de șablon .

Dar sunt multe de spus despre temele Twenty Twenty-Two și WordPress. Deci, ca un capitol bonus, vom oferi o privire de ansamblu rapidă a modului de extindere a caracteristicilor lui Twenty Twenty-Two profitând de fișierul theme.json .

Iată o primă privire la următoarea temă implicită WordPress! Sunt încântat să îl conduc împreună cu @jffng și amândoi sperăm că veți contribui la el și/sau să vă bucurați să îl folosiți! https://t.co/covjrpgFIO

— kjellr (@kjellr) 6 octombrie 2021

Să trecem la treabă și să ne scufundăm în noua temă implicită WordPress Twenty Twenty-Two.

Twenty Twenty-Two aduce un nou flux de editare a site-ului

Mai multe funcții complete de editare a site-ului intră în nucleul WordPress 5.9. Proprietarii de site-uri care folosesc cea mai recentă versiune WordPress cu o temă bloc, cum ar fi Twenty Twenty-Two instalată, vor putea în curând:

• Creați și editați postări și pagini folosind mai multe blocuri și modele
• Personalizați setările și stilurile definite în fișierul theme.json prin interfața Global Styles
• Creați și editați șabloane pentru pagini și postări
• Creați și editați părți de șablon pentru antet, subsol și alte zone de șablon

Cu toate aceste caracteristici fuzionate la bază, contribuitorii de bază WordPress au discutat despre evoluția arhitecturii informaționale și au reproiectat întregul flux de editare a site-ului.

Primul lucru pe care l-ați putea observa după ce ați activat Twenty Twenty-Two este că punctul de intrare în editorul site-ului nu se mai află în meniul principal al tabloului de bord WordPress, ci a fost mutat în meniul Aspect .

Aducerea șablonului și a caracteristicilor de editare a stilului în același meniu Aspect ar trebui să eficientizeze experiența de editare. Ar trebui să vă fie mai ușor de înțeles că funcțiile pe care le accesați sunt legate de prezentarea paginilor dvs.

Elementul de meniu Editor deschide șablonul de pagină de pornire a site-ului. În funcție de setările dvs. de citire, aceasta poate fi fie cea mai recentă pagină de postări, fie o pagină statică.

Acum, făcând clic pe pictograma WordPress din colțul din stânga sus, se afișează un nou meniu de navigare a editorului de site, care include trei elemente de meniu: Site , Șabloane și Șabloane .

Să aruncăm o privire mai atentă.

Opțiunea Site deschide șablonul de pagină de pornire (cele mai recente articole de blog sau pagină de pornire statică).

Din elementul de meniu Șabloane , veți obține o listă cu șabloanele disponibile. Puteți face clic pe orice șablon din listă pentru a-l lansa în editor.

În momentul scrierii acestui articol, Twenty Twenty-Two oferă 11 șabloane.

Făcând clic pe pictograma cu puncte de suspensie ( ︙ ) din dreapta, vă permite să vă ștergeți personalizările.

Spre deosebire de șabloanele de teme, șabloanele personalizate pot fi doar redenumite sau eliminate (dar puteți edita șabloanele personalizate în editorul de postări).

Elementul de meniu Piese șablon listează părțile șablon disponibile pe care le puteți deschide în editor pentru personalizările dvs.

Veți găsi patru părți de șablon adăugate implicit la Twenty Twenty-Two. Trecerea cursorului peste un șablon modificat afișează un sfat explicativ care vă informează că șablonul a fost personalizat.

Puteți șterge aceste personalizări făcând clic pe pictograma cu puncte de suspensie ( ︙ ) din dreapta.

Editarea șabloanelor și a părților de șabloane

Editorul oferă interfața pentru a personaliza structura șabloanelor și părților șablonului.

Aici puteți adăuga sau edita cu ușurință blocuri și modele, iar modificările dvs. vor fi aplicate automat fiecărei pagini care utilizează acel șablon.

Imaginea de mai jos arată șablonul de 404 pagini din editor. Este un șablon destul de simplu, care include doar un titlu, un paragraf și o casetă de căutare. Totuși, ne oferă o bună înțelegere a modului în care funcționează interfața de utilizare.

Aici, puteți face modificări și personaliza șabloanele pentru a se potrivi cel mai bine nevoilor dvs. De exemplu, poate doriți să adăugați un model Grilă de postări cu imagini pentru a crește implicarea vizitatorilor și a-i invita să răsfoiască conținutul site-ului dvs.

Meniul derulant al antetului din partea de sus a editorului de șabloane afișează o listă cu zonele de șabloane disponibile. Aceeași listă apare în fila Șablon din bara laterală Setări .

Făcând clic pe orice zonă de șablon (de exemplu, Antet), veți fi direct adus la partea de șablon pe care doriți să o editați.

Dacă faceți clic pe pictograma puncte suspensie din dreapta, veți accesa editorul de părți de șablon izolate .

Editorul de părți de șablon oferă, de asemenea, o pereche de mânere trasabile, permițându-vă să verificați cum se comportă șablonul la diferite rezoluții de ecran.

Odată ce sunteți mulțumit de modificările dvs., salvați modificările și reveniți la editorul principal de șabloane pentru a verifica rezultatul final.

Dacă doriți să vă aprofundați în noua arhitectură a informațiilor, vă recomandăm să consultați următoarele articole:

• Concepte IA de editare a site-ului: Cum să apară și să accesezi funcții noi
• Concepte iA de editare a site-ului – Partea 2

Twenty Twenty-Dou în esență: O scurtă prezentare generală a theme.json

Pentru a înțelege pe deplin cum funcționează Twenty Twenty-Two și temele bloc (cum ar fi Bricksy), să aruncăm o privire la noua configurație a temei și mecanismul de stilizare bazat pe fișierul theme.json .

Introdus cu WordPress 5.8, acest nou mecanism permite dezvoltatorilor de teme să configureze editorul și să adauge suport pentru funcții dintr-un punct central de configurare.

În Twenty Twenty-Two, fișierul theme.json are următoarea structură:

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

Să aruncăm o privire rapidă la fiecare secțiune.

Versiune

Câmpul version descrie versiunea specificației, care este în prezent 2 .

Setări

Secțiunea de settings definește setările la nivel global sau de bloc. Setările definite la nivel superior afectează toate blocurile, dar blocurile pot suprascrie individual setările globale. În Twenty Twenty-Two veți găsi următoarele setări:

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

Setările implicite se numesc presetări și sunt folosite pentru a genera proprietăți personalizate CSS și nume de clase pe baza unei convenții de denumire specifice:

• Proprietate personalizată CSS: --wp--preset--{preset-category}--{preset-slug}
• Numele clasei CSS: .has-{preset-slug}-{preset-category}

Odată ce o temă și-a definit presetările, proprietățile personalizate CSS corespunzătoare pot fi folosite pentru a stila blocurile și elementele din secțiunea de styles .

Stiluri

Secțiunea de styles este locul în care temele definesc stilurile implicite ale blocurilor și ale elementelor. Vedeți, de exemplu, următoarele douăzeci și douăzeci și două de stiluri pentru blocul principal Button:

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

Veți observa proprietățile personalizate CSS utilizate în declarațiile de proprietate.

Șabloane personalizate

Secțiunea customTemplates este locul în care o temă își declară șabloanele personalizate. Câmpurile pentru name și title sunt obligatorii. De asemenea, temele pot declara ce tip de postare poate folosi șablonul prin setarea proprietății postTypes .

Twenty Twenty-Two oferă patru șabloane personalizate:

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

Veți găsi fișierele .html corespunzătoare în folderul block-templates .

Piese de șablon

Secțiunea templateParts include definiții ale părților șablon:

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

Câmpurile pentru name și title sunt obligatorii. Temele pot declara, de asemenea, un termen de area , unde partea șablon va fi redată în editor.

Fișierele .html piese șablon se află în folderul părți șablon .

Acum că știți mai multe despre theme.json de la Twenty Twenty-Two, putem explora mai în detaliu funcțiile temei și noua interfață de editare.

Să ne scufundăm în stilurile globale ale lui Twenty Twenty-Two .

Stiluri globale în Twenty Twenty-Dou

Dacă te uiți la Twenty Twenty-Two' style.css, s-ar putea să fii surprins să observi că conține un număr minim de declarații CSS. Motivul este că stilurile sunt declarate în fișierul theme.json în temele bazate pe blocuri .

WordPress 5.9 va aduce lucrurile cu un pas mai departe, introducând o nouă caracteristică care le permite utilizatorilor de teme bloc să personalizeze aspectul elementelor site-ului dintr-o interfață de utilizator numită Stiluri globale.

Interfața Global Styles poate fi accesată din noua pictogramă Styles plasată în colțul din dreapta sus al Editorului (vezi și Interfața Global Styles).

Făcând clic pe pictograma respectivă, se afișează o nouă bară laterală Stiluri , care include trei panouri separate:

• Un panou de previzualizare , care arată o previzualizare a personalizărilor dvs
• Un panou Stiluri globale care oferă acces la grupuri specifice de comenzi pentru Tipografie , Culori și Aspect
• Un element Blocuri care oferă acces la setările de stil la nivel de bloc

Paleta de culori Twenty Twenty-Two

Panoul Culori vă poate ajuta să editați paletele disponibile și să atribuiți sau să schimbați culorile pentru Fundal , Text sau Legături .

În panoul Paletă , puteți personaliza paletele Tema sau implicit și chiar puteți crea paleta personalizată.

Ați găsit încă codul care generează controalele de culoare?

Dacă nu, deschideți theme.json de la Twenty Twenty-Two în editorul de cod preferat. Veți găsi următoarele declarații ale paletei de culori:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

Imaginea de mai jos arată cum codul de mai sus se potrivește cu paleta de culori a lui Twenty Twenty-Two.

Acum să presupunem că doriți să schimbați culoarea implicită de fundal pentru un anumit bloc. Alegerea unei culori diferite pentru fundalul blocului va atribui pur și simplu o variabilă CSS diferită proprietății background-color a elementului. Imaginea de mai jos oferă un exemplu în acest sens:

Și asta e tot! Nu va trebui să adăugați o singură linie de cod CSS personalizat la Personalizator sau să creați o temă secundară pentru asta.

Dar să continuăm să explorăm stilurile globale ale lui Twenty Twenty-Two cu câteva exemple suplimentare.

Setări tipografie

Panoul Tipografie este locul în care puteți personaliza stilurile de tipografie pentru elementele de text și linkuri ale site-ului dvs. web la nivel global.

Fiecare element oferă acces la un grup de comenzi pentru a personaliza familia de fonturi, dimensiunea și înălțimea liniei.

Vă întrebați ce cod generează aceste controale?

Deschideți theme.json de la Twenty Twenty-Two și găsiți secțiunea de typography . Veți vedea următoarele setări:

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

Vă puteți aștepta să vedeți două familii de fonturi și cinci dimensiuni de font din codul de mai sus. Și ai fi ghicit bine.

Iată cum se traduce codul de mai sus în setările Global Styles Typography :

Puteți ghici ce setare generează controlul înălțimii liniei . În Twenty Twenty-Two, nu veți găsi o setare specifică pentru asta, deoarece este activată de proprietatea appearanceTools , care este o comandă rapidă pentru mai multe declarații de setări (vezi secțiunea următoare).

Instrumente de aspect și aspect

Ultimul element din bara laterală Stiluri globale este Aspectul . La momentul scrierii acestui articol, include doar un control de padding .

În Twenty Twenty-Two, panoul Layout este activat de proprietatea de setare appearanceTools , o valoare booleană care poate fi folosită pentru a activa mai multe setări simultan:

 { "settings": { "appearanceTools": true } }

"appearanceTools": true înlocuiește pur și simplu următorul bloc de declarații:

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

OK — acum sperăm că înțelegeți cum setările declarate în fișierul theme.json se potrivesc cu controalele Global Styles corespunzătoare.

Mai lipsește o piesă din puzzle-ul nostru pentru a obține o imagine completă a noii teme implicite WordPress: modele de bloc .

Douăzeci și douăzeci și două de modele de bloc

S-ar putea spune că Twenty Twenty-Two este în mare parte o colecție de modele - și cam așa este. În Twenty Twenty-Two, veți găsi tone de modele de blocuri gata de utilizat, dintre care puteți alege pentru a construi structuri uimitoare și imprevizibile de blocuri imbricate pentru paginile dvs. web.

Termenul cheie aici este împuternicirea utilizatorilor . Și asta se potrivește pentru că, cu modele de bloc, poți construi tot felul de lucruri, de la un portofoliu atrăgător la un site promoțional cu o singură pagină, chiar dacă nu ai cunoștințe de HTML sau CSS!

Și WordPress 5.9 aduce îmbunătățiri semnificative sistemului de modele cu noul Pattern Explorer, un instrument care vă permite să răsfoiți modele într-un mod modal pe ecran complet.

Noul instrument vă permite, de asemenea, să importați rapid și ușor modele de blocuri direct din Directorul de modele. Acest lucru deschide noi posibilități atât pentru utilizatorii WordPress, cât și pentru dezvoltatori, astfel încât utilizarea sa va crește considerabil în viitor.

Twenty Twenty-Two include o mulțime de modele (peste 65) în cinci categorii.

Acest set solid de modele se potrivește perfect cu șabloanele și părțile de șabloane care vin cu noua temă implicită, creând o experiență de editare cu adevărat uimitoare.

Dacă nu ați avut încă șansa să experimentați cu modele de blocuri, vă vom arăta de ce sunt considerate instrumente atât de puternice printr-un exemplu simplu.

Să presupunem că doriți să eliminați subsolul implicit din șabloanele Index și Postare unică și să îl înlocuiți cu un model diferit de bloc Twenty Twenty-Two.

Lansați Editorul site-ului din meniul Aspect sau din butonul din bara de instrumente frontală WordPress pentru a personaliza șablonul Index.

Faceți clic pe butonul Index pentru a afișa meniul derulant antet care arată lista de zone de șablon disponibile pe pagină. Faceți clic pe butonul cu punctele de suspensie de lângă Subsol și apoi pe Editați subsol .

După cum sa menționat mai sus, aceasta va lansa editorul de părți de șablon izolat.

Acum deschideți dispozitivul de inserare a blocurilor și faceți clic pe Modele .

Lansați noul instrument Explorator de modele , selectați categoria Douăzeci și două de subsoluri și alegeți subsolul dorit.

Acum adăugați și editați blocurile în funcție de nevoile dvs.

Salvați antetul și verificați din nou site-ul când sunteți mulțumit de modificările dvs.

Imaginea de mai jos compară trei șabloane (Index, Postare unică și Postare unică fără separatori) cu personalizări diferite pentru antet și subsol:

Extinderea douăzeci și douăzeci și doi cu o temă pentru copil

Crearea unei teme copil pentru o temă bloc este destul de diferită de crearea unei teme copil pentru o temă clasică.

Dar odată ce înțelegeți bine structura unei teme de bloc, nu vă va fi dificil să creați o temă copil pentru Twenty Twenty-Two sau orice altă temă bloc.

Deci, să ne dăm seama cum să personalizăm aspectul site-ului dvs. web bazat pe Twenty Twenty-Two.

1. Configurarea unei teme pentru copii pentru Twenty Twenty-Doi

În directorul dvs. /wp-content/themes , creați un folder nou și denumiți-l după cum doriți (conform standardelor de dezvoltare a temei). În acest exemplu, am numit folderul cu tema copil twentytwentytwo-child .

Acum aveți nevoie de un fișier style.css . Deschideți editorul de cod preferat și creați următoarea foaie de stil:

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

Ca întotdeauna, puteți edita câmpuri în funcție de nevoile dvs.

Tema copilului dvs. este acum disponibilă pentru previzualizare. Îl puteți activa în ecranul de administrare Aspect > Teme .

2. Personalizarea setărilor globale

Începând cu WordPress 5.9, temele secundare cu un fișier theme.json moștenesc setările temei părinte. Dacă theme.json al copilului definește un set de stiluri, atunci acele stiluri se aplică peste stilurile părintelui său.

Astfel, putem crea un fișier theme.json care include doar un mic bloc personalizat de definiții de setări și stil, mai degrabă decât să redefinim toate alegerile noastre originale.

Cum să declarați o paletă de culori personalizată

Când construiți o temă copil pentru Twenty Twenty-Two, cea mai ușoară sarcină este înlocuirea paletei de culori. Tot ce trebuie să faceți este să definiți o nouă paletă de culori în theme.json al copilului dvs., așa cum se arată mai jos:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

Salvați fișierul și reveniți la editorul site-ului. Paleta de culori definită mai sus ar fi trebuit să înlocuiască paleta de culori implicită a lui Twenty Twenty-Two.

Culorile vor fi afișate în ordine pe paleta în sine, iar numele lor ar trebui să respecte cele mai bune practici și convențiile de denumire discutate pe Github.

Puteți citi mult mai multe despre opțiunile de culoare theme.json în această prezentare generală aprofundată de Carolina Nymark.

Cum să declarați filtre personalizate Duoton

De asemenea, puteți înlocui culorile biton implicite cu setul personalizat de filtre.

Pentru a face acest lucru, pur și simplu adăugați următorul cod la setările theme.json ale copilului dvs. la același nivel cu proprietatea palette :

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

Salvați fișierul și verificați rezultatul în editorul de blocuri. Ar trebui să vedeți doar un singur filtru duoton.

3. Personalizarea stilurilor de bloc

După cum am menționat mai devreme, cu WordPress 5.9, acum puteți personaliza setările și stilurile theme.json din interfața Global Styles.

Stilurile de bloc pot fi personalizate din interfața Stiluri globale numai dacă blocul declară suport pentru funcționalități specifice în fișierul block.json corespunzător. Dar puteți suprascrie setările de blocare implicite din tema copilului dvs. theme.json .

Acum să presupunem că doriți să înlocuiți stilurile de blocare a titlului postării și a grupului. Tot ce trebuie să faceți este să definiți stilurile pe care doriți să le adăugați sau să le înlocuiți, după cum se arată mai jos:

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

În exemplul de mai sus, am schimbat familia de fonturi, culoarea de fundal și valorile de completare pentru core/post-title , precum și marginile de sus și de jos pentru core/group .

Imaginea de mai jos arată rezultatul așa cum ar arăta pe site-ul public:

Și atât pentru recenzie!

Nu ne vom aprofunda mai mult în temele pentru copii deocamdată, deoarece ar depăși scopul acestei postări. Între timp, veți găsi mai multe exemple de teme pentru copii Twenty Twenty-Two pe Github.

rezumat

În timp ce aruncăm o privire mai atentă asupra noii teme implicite WordPress Twenty Twenty-Two și a caracteristicilor sale (care o fac cea mai flexibilă temă implicită lansată vreodată), am dezvăluit noua arhitectură de informații introdusă cu WordPress 5.9. Am primit chiar și o scurtă privire asupra noii interfețe Global Styles.

Există multe funcții noi interesante și pare clar că noul mediu de editare devine mai robust, fiabil și funcțional în timp.

În timp ce multe funcții WordPress noi sunt pe drum, altele dispar sau scad în importanță. Mulți utilizatori rămân să se întrebe ce se va întâmpla cu Customizer și cum să mențină cel mai bine compatibilitatea cu temele existente.

Cu toate acestea, nu ar trebui să vă așteptați să treceți brusc de la temele tradiționale pentru a bloca teme într-o singură legătură. În prezent avem patru tipuri diferite de teme din care să alegem:

• Teme bloc : teme concepute pentru FSE
• Teme universale : teme care funcționează atât cu Personalizatorul, cât și cu Editorul site-ului
• Teme hibride : teme clasice care acceptă funcții FSE precum theme.json
• Teme clasice : Teme cu șabloane PHP, functions.php etc.

Deci, nu vă temeți deocamdată - există încă o mulțime de soluții din care să alegeți dacă nu vă simțiți pregătiți să treceți la temele blocate.

Și acum depinde de tine! Ești gata să faci un salt mare și să începi să folosești teme de bloc chiar acum? Împărtășiți-vă gândurile cu noi în comentariile de mai jos.