Mniej więcej w grudniu zainstalowałem sobie bętę WP 5.9. Byłem bardzo ciekaw zmian jakie zostaną wprowadzone w tej wersji.
Pierwsze wrażenie mialem bardzo pozytywne – ulepszone przeglądanie bloków, nowe bloki, no i przede wszystkim Full Site Editing. Z panelu WP wszystko wyglądało świetnie, ale…
Bardzo cenię sobie Gutneberga, mocno śledzę jego rozwój. Swój pierwszy projekt komercyjny oparłem na Gutenbergu już w 2019 roku. No jestem fanem i zwolennikiem.
Po kilku dniach od premiery 5.9 usiadłem do własnego motywu blokowego. Plik index.php – ok, narzucona struktura katalogów dla szablonów i ich części – super, konfiguracja w theme.json – ekstra. Motywy blokowe zupełnie zmieniają podejście do tworzenia motywów dla WP. To też nie jest dla mnie problemem.
Bawiąc się z Twenty Twenty-Two i theme.json zauważyłem, że większość stylów jest generowana inline. Tu miałem pierwszy nie smak, ponieważ jestem zwolennikiem, aby użytkowników w panelu przypisywał klasy do odpowiednich elementów, a te klasy są odpowiednio ostylowane. Więc interfejs powinien być dla mnie jedynie udogodnieniem dla użytkownika, żeby ten nie musiał pamietać nazw klas. Aczkolwiek tutaj też widzę możliwość wyjścia z tego i bazowanie właśnie na klasach, a nie CSSach inline.
Najgorsze jednak okazało się tworzenie szablonów pod Gutenberga.
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:query {"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"layout":{"inherit":true},"tagName":"main"} -->
<main class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
<!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"align":"wide","fontSize":"var(--wp--custom--typography--font-size--huge, clamp(2.25rem, 4vw, 2.75rem))"} /-->
<!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"calc(1.75 * var(--wp--style--block-gap))"}}}} /-->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"650px"} -->
<div class="wp-block-column" style="flex-basis:650px"><!-- wp:post-excerpt /-->
<!-- wp:post-date {"isLink":true,"format":"F j, Y","style":{"typography":{"fontStyle":"italic","fontWeight":"400"}},"fontSize":"small"} /--></div>
<!-- /wp:column -->
<!-- wp:column {"width":""} -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->Tak wygląda fragment szablonu index z motywu Twenty Twenty-Two. Ani to HTML, ani JSX. IDE nie podpowiada składni, jeszcze te HTMLowe komentarze.
Czekam na rozwój tego narzędzia i uczę się go dalej.
Dodaj komentarz