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

> HTML vagy CSS beillesztése a szerkesztőbe: a Bricks natív elemekké, globális osztályokká és változókká alakítja.

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:

```html
<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:

```css
: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](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-kodalairasok/)).

### 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](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-ai-kepessegek/)).

## 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](https://hub.hellowp.io/hu/plugins/bricks-child/szerkeszto-hozzaferes/)), 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.