HTML és CSS átalakítása Bricks-elemekké

Ha egy elrendezést webes elrendezéskönyvtár vagy AI által generált kód alapján építesz újra Bricksben, általában elemenként kell nulláról összerakni. Ez a funkció megváltoztatja a munkafolyamatot: a HTML-t vagy CSS-t közvetlenül beillesztheted a szerkesztőbe, és a Bricks azonnal natív elemeket és stílusokat hoz létre belőle.

Beállítás

A beillesztett kód kezelését a Bricks → Beállítások → Szerkesztő → HTML és CSS átalakítása Bricks-elemekké résznél szabályozod:

• Engedélyezés (megerősítéssel a beillesztéskor): egy párbeszédpanel kéri az engedélyedet a kód átalakítására.
• Engedélyezés (megerősítés nélkül): a Bricks a beillesztéskor automatikusan átalakítja a kódot.
• Letiltás: a beillesztett kódot nem alakítja át.

A beillesztés feltételei

A funkció a böngésző Clipboard API-ján keresztül olvassa a vágólapot, ezért a szerkesztőt biztonságos környezetben nyisd meg: HTTPS-en, vagy olyan helyi címen, amelyet a böngésző megbízhatónak tekint.

Ha LocalWP-t vagy más helyi domaint használsz, kapcsold be és bízd meg az SSL-tanúsítványát, és a beillesztés kipróbálása előtt HTTPS-en nyisd meg a szerkesztőt. Ha a beillesztésnek nincs látható hatása, engedélyezd a vágólaphoz való hozzáférést a webhelynek a böngésző beállításaiban, töltsd újra a szerkesztőt, és próbáld újra az alábbi HTML-példával.

Hogyan működik

Amikor HTML-t vagy CSS-t illesztesz be, a szerkesztő felismeri a tartalom típusát, és elindítja az átalakítást.

HTML-átalakítás

A Bricks értelmezi a HTML-t, és a szokásos címkéket natív elemekre képezi le:

• a <section> Szakasz elem lesz,
• a <div> Div,
• a <h1> és <h6> közötti címkék Címsor elemek,
• az <img> Kép.

Globális osztályok és változók

Az átalakító felismeri a kódban szereplő osztályokat, és létrehozza a megfelelő Bricks globális osztályokat és globális változókat.

• Leképezett stílusok: az olyan tulajdonságok, mint a margó, a belső térköz és a tipográfia, közvetlenül a Bricks felületi vezérlőibe kerülnek.
• Egyéni CSS: azok a tulajdonságok, amelyekhez nincs külön vezérlő, az elem egyéni CSS-területére kerülnek.
• Változók: a :root alatt megadott változókból Bricks globális változók lesznek.

Reszponzív osztálystílusok

Ha egy osztály egyszerű @media (max-width: ...) szabályt használ, amely pontosan egyezik egy beállított Bricks-törésponttal, a támogatott deklarációk natív vezérlőkké válhatnak az adott töréspontnál. Például egy .card belső térköz-szabálya a webhely mobil töréspontjánál az adott töréspont belső térköz-vezérlői között jelenhet meg. Azok a deklarációk, amelyekhez nincs megfelelő vezérlő, az egyéni CSS-ben maradnak. Az összetett vagy egymásba ágyazott médiafeltételek, az egyik töréspontnak sem megfelelő szélességek, és azok a szabályok, amelyek forrásbeli sorrendjét a Bricks töréspont-sorrendje nem tudja kifejezni, szintén az egyéni CSS-ben maradnak, nehogy rossz töréspontra kerüljenek.

Példa: HTML globális osztállyal

Másold ki a HTML-t és a CSS-t együtt, és illeszd be a szerkesztőbe:

<section class="feature">
  <h2>Built for client work</h2>
  <p>Start with a native Bricks structure, then refine it in the builder.</p>
</section>

<style>
  :root {
    --feature-space: 2rem;
  }

  .feature {
    padding: var(--feature-space);
    background-color: #f4f4f4;
  }
</style>

A Bricks natív Szakasz, Címsor és szövegelemeket hoz létre. Létrehozza a feature globális osztályt és a --feature-space globális változót is. A támogatott deklarációk a szerkesztő vezérlőibe kerülnek, a többi egyéni CSS-ben marad.

Példa: csak CSS beillesztése

Ha a szerkezet már megvan, és csak osztályokra vagy változókra van szükséged, illeszd be a CSS-t önmagában:

:root {
  --card-radius: 12px;
}

.card {
  border-radius: var(--card-radius);
  padding: 1.5rem;
}

A Bricks létrehozza a változót és a globális osztályt. A kapott card osztályt a szerkesztőben tudod egy elemhez rendelni.

Biztonság

A Bricks beillesztéskor nem futtat JavaScriptet, és nem tölt be külső stíluslapot automatikusan, amíg át nem nézted. Az észlelt szkriptek és külső hivatkozások egy Kód elembe kerülnek. Ezeket kézzel át kell nézned, alá kell írnod és el kell mentened, mielőtt lefutnak.

Ha például a <script>console.log('Ready')</script> kódot illeszted be, a Bricks Kód elemet hoz létre. A szkript inaktív marad, amíg egy jogosult felhasználó át nem nézi és alá nem írja (lásd Kódaláírások).

Importálás AI-képességeken keresztül

Ha egy AI-kliens a Bricks képességein keresztül importál HTML-t vagy CSS-t, a Bricks ellenőrzi a célt és a csatlakoztatott felhasználó jogosultságait. A nem engedélyezett tartalmat automatikusan kihagyja. Az egy hívásos importálás a megtartott tartalmat alkalmazza, és feltűnő részeredményt ad vissza minden kihagyott elemmel és a kihagyás okával. Külön előnézet is elérhető.

Ha a megtartott fa üres vagy érvénytelen, az importálást elutasítja. A nem üres csere is elutasításra kerül, ha a forrástartalom egy része kimaradt vagy érvénytelen, mert ez a meglévő tartalom hiányos eltávolításához vezethetne.

A HTML- és CSS-importálás nem ad PHP-hozzáférést. unfiltered_html jogosultság nélkül a HTML a WordPress biztonságos bejegyzés-HTML-jére (KSES) korlátozódik. A CSS a vonatkozó stílus- és erőforrás-jogosultságokat követi. A JavaScripthez a WordPress unfiltered_html jogosultsága és a cél szerkesztési joga kell. A Kód elemek megtartják a meglévő kódfuttatási jogosultságot, a globális kódfuttatási beállítást és az aláírási követelményeket, a képességek ezeket nem kerülik meg. A támogatott kódmezőkben lévő PHP külön, a PHP-képességekre vonatkozó bekapcsolást és az aláírási védelmet igényli (lásd AI-képességek és készségek).

Megjegyzések

• Finomhangolás: az átalakítás szerkezeti alapot ad. Mivel a webhelyednek vannak meglévő sablonstílusai, valamint sablon- vagy bővítménystílusai, a kimenetet kézzel is finomítani kell, hogy tökéletesen egyezzen a forrással.
• Jogosultság: az átalakítóhoz szükséged van a „Globális osztályok létrehozása” felhasználói jogosultságra (lásd Szerkesztői hozzáférés), különben nem tud megfelelően stílusokat generálni.
• Csak CSS: ha csak CSS-t illesztesz be, a Bricks globális osztályokat és változókat hoz létre.
• Hiányzó osztálystílusok: ellenőrizd, hogy a szerepköröd létrehozhat-e globális osztályokat. E jogosultság nélkül az átalakító nem tudja létrehozni az importált CSS által használt osztályrekordokat.