Adăugarea umbrelor de casetă la blocurile și elementele WordPress

Am dat peste cap acest tweet de la Ana Segota caută o modalitate de a adăuga un CSS box-shadow la starea de trecere a unui buton în WordPress în theme.json fișier.

Ea întreabă pentru că theme.json este locul în care WordPress dorește să începem să mutăm stilurile de bază pentru temele bloc. În mod tradițional, am face orice stil style.css când lucrezi într-o temă „clasică”. Dar cu tema implicită Twenty Twenty-Three (TT3), care a fost livrată recent cu WordPress 6.1, mută toate stilurile sale în theme.json, suntem din ce în ce mai aproape de a putea face același lucru cu propriile noastre teme. Am tratat acest lucru în detaliu într-un articol recent.

Spun „din ce în ce mai aproape” pentru că există încă o mulțime de proprietăți și selectoare CSS care nu sunt acceptate în theme.json. De exemplu, dacă speri să stilezi ceva cu like perspective-origin in theme.json, pur și simplu nu se va întâmpla - cel puțin așa cum scriu asta astăzi.

Ana se uită la box-shadow și, din fericire pentru ea, acea proprietate CSS este susținută de theme.json începând cu WordPress 6.1. Tweet-ul ei este datat 1 noiembrie exact în aceeași zi în care a fost lansat 6.1. Nu este ca și cum suportul pentru proprietate a fost o caracteristică principală în versiune. Titlurile mai mari erau mai mult legate de spațierea și tehnicile de aspect pentru blocuri și teme de bloc.

Iată cum putem aplica a box-shadow la un anumit bloc - să spunem blocul Imagine prezentată - în theme.json:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "blocks" :{
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

Mă întreb dacă noua sintaxă a culorii lucrări? Şi eu! Dar când am încercat... rgb(0 0 0 / 0.66) - Nu am nimic. Poate că este deja în lucru sau ar putea folosi o cerere de extragere.

Ușor, nu? Sigur, este mult diferit de a scrie CSS vanilla în style.css și este nevoie de ceva pentru a te obișnui. Dar este într-adevăr posibil începând cu cea mai recentă lansare WordPress.

Și, hei, putem face același lucru cu „elementele” individuale, cum ar fi un buton. Un buton este un bloc în sine, dar poate fi și un bloc imbricat într-un alt bloc. Deci, pentru a aplica a box-shadow la nivel global la toate butoanele, am face așa ceva în theme.json:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

Dar Ana vrea să adauge umbra la buton :hover stat. Din fericire, suport pentru stilarea stărilor interactive pentru anumite elemente, cum ar fi butoanele și linkurile, folosind pseudo-clase — inclusiv :hover, :focus, :active, și :visited — și câștigat theme.json suport în WordPress 6.1.

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

Dacă utilizați o temă părinte, cu siguranță puteți suprascrie stilurile unei teme într-o temă copil. Aici, anulez complet stilurile de butoane ale TT3.

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      }
    }
  }
}

Iată cum se redă:

O altă modalitate de a face acest lucru: stiluri personalizate

Recent lansat Pixl tema bloc oferă un alt exemplu de utilizare în lumea reală a box-shadow proprietate in theme.json folosind o metodă alternativă care definește valori personalizate. În temă, un obicei box-shadow proprietatea este definită ca .settings.custom.shadow:

{
  "version": 2,
  "settings": {
    // etc. 
    "custom": {
      // etc.
      "shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
    },
    // etc.
  }
}

Apoi, mai târziu în dosar, obiceiul shadow proprietatea este apelată pe un element buton:

{
  "version": 2,
  "settings": {
    // etc.
  },
  "styles": {
    "elements": {
      "button": {
        // etc.
        "shadow": "var(--wp--custom--shadow) !important",
        // etc.
        ":active": {
          // etc.
          "shadow": "2px 2px var(--wp--preset--color--primary) !important"
        }
      },
    // etc.
  }
}

Nu sunt complet sigur de utilizarea !important în acest context. Bănuiala mea este că este o încercare de a preveni înlocuirea acelor stiluri folosind interfața de utilizare pentru stiluri globale din Editorul site-ului, care are o specificitate ridicată decât stilurile definite în theme.json. Iată un link ancorat către mai multe informații din articolul meu anterior despre gestionarea stilurilor de teme bloc.

Actualizați: Se pare că a fost o întreagă discuție despre asta în Solicitare de tragere #34689, care notează că a fost abordat în WordPress 5.9.

Și mai sunt ...

Pe lângă umbre, CSS outline proprietatea castigata si theme.json suport în WordPress 6.1 și poate fi aplicat butoanelor și stărilor lor interactive. Acest GitHub PR arată un exemplu bun.

"elements": {
  "button": {
    "outline": {
      "offset": "3px",
      "width": "3px",
      "style": "dashed",
      "color": "red"
    },
    ":hover": {
      "outline": {
        "offset": "3px",
        "width": "3px",
        "style": "solid",
        "color": "blue"
      }
    }
  }
}

Puteți găsi, de asemenea, exemple reale despre cum outline lucrări de proprietate în alte teme, inclusiv intensitate, Block Canvas, și Blockbase.

La finalul

Cine știa că sunt atât de multe de vorbit cu o singură proprietate CSS când vine vorba de blocarea tematicii în WordPress 6.1? Am văzut metodele acceptate oficial pentru setarea a box-shadow pe blocuri și elemente individuale, inclusiv stările interactive ale unui element buton. De asemenea, am verificat cum am putea suprascrie umbrele într-o temă pentru copii. Și, în cele din urmă, am deschis un exemplu din lumea reală care definește și stabilește umbre într-o proprietate personalizată.

Puteți găsi discuții mai detaliate și aprofundate despre WordPress și despre acesta box-shadow implementare în aceasta GitHub PR. Există, de asemenea, o Propunerea GitHub pentru adăugarea unei interfețe de utilizare direct în WordPress pentru a seta valori de umbră pe blocuri - puteți sari direct la un GIF animat arătând cum ar funcționa asta.

Vorbind despre care, Justin Tadlock recent a dezvoltat un bloc care redă o bară de progres și comenzi integrate pentru umbra casetei. O arată în acest videoclip:

Mai multe informatii

Dacă doriți să sapă mai adânc în box-shadow și alte proprietăți CSS care sunt acceptate de theme.json fișier într-o temă bloc, iată câteva resurse pe care le puteți folosi: