Devblog: Kelverse Precious 3.0 – One to Rule Them All

Acrux odchodzi na zasłużoną emeryturę. Jego miejsce zajmuje Kelverse Precious 3.0. Zakończyliśmy rebranding naszego motywu WordPress, ale przy okazji podjęliśmy decyzję, która będzie miała znacznie większy wpływ na jego przyszłość niż sama zmiana nazwy.

Nie zamierzamy tworzyć kolejnych motywów do różnych zastosowań. Chcemy rozwijać jeden, który będzie można dostosować do niemal każdego rodzaju witryny.

Stąd nowe hasło:

Kelverse Precious – One to Rule Them All.

Żegnaj Acrux, witaj Precious!

Acrux przeszedł z nami kawał drogi. Kolejne wersje przynosiły poprawki, nowe możliwości konfiguracji i usprawnienia, które stopniowo rozwijały go w coraz bardziej rozbudowany motyw WordPress.

Przygotowując wersję 3.0, zaczęliśmy jednak zastanawiać się nad jego docelową rolą w ekosystemie Kelverse.

Czy potrzebujemy osobnego motywu dla bloga, strony firmowej, portalu informacyjnego i dokumentacji? Czy za każdym razem powinniśmy zaczynać od nowa, tworząc podobne nagłówki, stopki, układy, komponenty i mechanizmy konfiguracji?

Uznaliśmy, że nie.

Znacznie rozsądniejsze wydaje nam się rozwijanie jednej solidnej podstawy, którą można wykorzystywać na wiele sposobów.

Tak narodził się Precious.

Jeden motyw, wiele możliwości

Precious 3.0 to nowa tożsamość rozwijanego dotychczas motywu Acrux. Zachowujemy dotychczasowy dorobek projektu, a jednocześnie wyznaczamy mu nowy kierunek.

Chcemy, żeby z Precious można było stworzyć zarówno niewielki blog, jak i rozbudowany portal informacyjny czy profesjonalną stronę firmową – bez konieczności instalowania kolejnego motywu.

Podstawą tego podejścia są trzy elementy:

  • Komponenty – wielokrotnego użytku elementy, z których budujemy strony i ich poszczególne sekcje.
  • Konfiguracje – możliwość dostosowywania wyglądu, układów i zachowania motywu do potrzeb konkretnej witryny.
  • Presety – gotowe zestawy ustawień i układów, które pozwolą szybko rozpocząć pracę nad określonym rodzajem strony.

To podejście pozwala nam rozwijać wspólne rozwiązania zamiast powielać je w kilku osobnych produktach.

Co zmienia Precious 3.0?

Najważniejszą zmianą w wydaniu 3.0 jest zakończenie rebrandingu z Kelverse Acrux na Kelverse Precious.

To jednak nie oznacza, że wyrzuciliśmy dotychczasowy motyw i napisaliśmy wszystko od zera. Wręcz przeciwnie – Precious kontynuuje rozwój Acrux, wykorzystując fundamenty wypracowane w poprzednich wersjach.

Zmieniła się natomiast nasza filozofia projektowania.

Nie chcemy już patrzeć na motyw jak na gotowy wygląd strony, który prędzej czy później trzeba będzie zastąpić innym. Chcemy traktować go jako elastyczne środowisko, w którym można zmieniać niemal wszystko: od identyfikacji wizualnej, przez układy poszczególnych sekcji, aż po sposób prezentacji treści.

Istotną rolę w tym systemie będzie odgrywać również istniejąca wtyczka Companion, rozwijająca możliwości motywu. Z punktu widzenia użytkownika oba elementy powinny jednak tworzyć jeden spójny produkt.

Precious ma być motywem, którego nie trzeba wymieniać, kiedy zmieniają się potrzeby witryny.

Co dalej? Presety, klocki i Precious Studio

Rebranding jest zakończony, ale praca nad nową wizją produktu dopiero się zaczyna.

W kolejnych etapach chcemy rozwijać bibliotekę komponentów oraz gotowych konfiguracji. Wyobrażamy sobie sytuację, w której użytkownik wybiera preset dla portalu informacyjnego, dostosowuje jego wygląd, zmienia układy i dodaje własne sekcje – wszystko w ramach jednego motywu.

Rozważamy również rozwój Precious Studio, czyli spójnego interfejsu służącego do zarządzania komponentami, stylami, presetami i konfiguracją witryny.

Nie zamierzamy przy tym pisać własnego edytora stron od podstaw. WordPress oferuje już rozbudowany edytor blokowy, dlatego chcemy wykorzystywać jego możliwości i rozszerzać je tam, gdzie rzeczywiście przyniesie to wartość.

Docelowo zależy nam również na wygodnym przenoszeniu konfiguracji pomiędzy instalacjami. Raz przygotowany zestaw ustawień czy układów powinien móc posłużyć jako punkt startowy dla kolejnego projektu.

To kierunek dalszego rozwoju, a nie lista funkcji, które ogłaszamy jako ukończone w wersji 3.0.

One to Rule Them All

Nazwa Precious nie jest przypadkowa. Podobnie jak hasło, które wybraliśmy dla nowego etapu rozwoju.

One to Rule Them All brzmi trochę przewrotnie, ale bardzo dobrze oddaje nasze ambicje.

Nie chcemy katalogu kilkudziesięciu podobnych motywów, z których każdy rozwiązuje trochę inny problem. Chcemy jednego produktu, który będzie można rozwijać, konfigurować i wykorzystywać w kolejnych projektach bez konieczności zaczynania wszystkiego od początku.

Czy uda nam się stworzyć motyw odpowiedni do absolutnie każdego zastosowania? Prawdopodobnie nie. I nie zamierzamy udawać, że istnieje rozwiązanie idealne dla wszystkich.

Ale wierzymy, że zdecydowaną większość typowych potrzeb można obsłużyć w ramach jednego, dobrze zaprojektowanego systemu.

Acrux był początkiem. Precious to kolejny etap.

Kelverse Precious 3.0 – One to Rule Them All

Acrux oficjalnie przechodzi do historii. W jego miejsce wchodzi Kelverse Precious 3.0 – nasz najbardziej rozbudowany motyw WordPress, będący efektem wielu miesięcy pracy nad jednym pomysłem: stworzeniem uniwersalnego narzędzia do budowania stron internetowych.

Ostatnie tygodnie były dla nas wyjątkowo intensywne. Rozwijaliśmy kolejne komponenty, przebudowywaliśmy mechanizmy konfiguracji, dodawaliśmy narzędzia do projektowania stron i stopniowo rozszerzaliśmy możliwości naszego motywu.

Po drodze pojawiło się jednak pytanie: po co właściwie tworzyć wiele różnych motywów WordPress, skoro możemy zbudować jeden, który pozwoli przygotować niemal dowolny rodzaj witryny?

Odpowiedź stała się fundamentem nowej filozofii produktu.

Kelverse Precious – One to Rule Them All.

Żegnaj Acrux, witaj Precious!

Zacznijmy od najważniejszej zmiany. Kelverse Acrux zmienia nazwę na Kelverse Precious, a wersja 3.0.0 oficjalnie rozpoczyna nowy etap jego rozwoju.

Zmiana nie ogranicza się do logo i nazwy wyświetlanej w panelu WordPress. Przebudowaliśmy również techniczną identyfikację produktu. Motyw działa teraz jako kelverse-precious, towarzysząca mu wtyczka jako kelverse-precious-companion, a nasze własne bloki korzystają z przestrzeni nazw precious/*.

Od tej wersji motyw i Companion mają również wspólną numerację wydań, co ułatwi ich dalszy rozwój i utrzymanie zgodności.

Jest to zmiana łamiąca kompatybilność na poziomie identyfikacji pakietów. WordPress rozpoznaje Precious jako nowy motyw i nową wtyczkę, dlatego dotychczasowej instalacji Acrux nie można zaktualizować zwykłym kliknięciem przycisku.

Nie zostawiliśmy jednak dotychczasowych użytkowników bez rozwiązania.

Przygotowaliśmy migrator, który pomaga przenieść dane z Acrux 2.x do Precious 3.0. Narzędzie umożliwia przeprowadzenie symulacji przed zapisaniem zmian, wykonuje migrację partiami i pokazuje postęp operacji. Oferuje także kopię zapasową w formacie JSON wraz z możliwością przywrócenia danych.

Dla bardziej zaawansowanych użytkowników dostępne jest również polecenie WP-CLI:

wp precious upgrade

Proces przetestowaliśmy na rzeczywistej instalacji korzystającej wcześniej z Acrux 2.20.0. Zweryfikowaliśmy też zgodność w 16 kombinacjach środowisk: WordPress 6.6–7.1 oraz PHP 8.1–8.4.

Rebranding był więc znacznie większym przedsięwzięciem niż proste wyszukanie i zamienienie słowa „Acrux” w kodzie.

Jeden motyw zamiast kilkunastu

Zmiana nazwy jest ważna, ale to nie ona stanowi najciekawszą część tej historii.

Podczas rozwoju Acrux doszliśmy do wniosku, że tradycyjne podejście do tworzenia osobnych motywów dla blogów, stron firmowych, portali czy portfolio niekoniecznie ma sens.

W wielu przypadkach takie produkty wykorzystują podobne rozwiązania. Różnią się przede wszystkim kompozycją, kolorystyką, typografią i sposobem prezentowania treści.

Postanowiliśmy więc pójść w inną stronę.

Precious ma być jednym motywem, który można dostosować do wielu zastosowań bez konieczności wymieniania go na inny.

Nie chcemy przy tym budować kolejnego edytora stron od podstaw. Wolimy rozwijać narzędzia wykorzystujące możliwości WordPressa i jego edytora blokowego.

Efektem jest coraz bardziej rozbudowany system komponentów, szablonów, stylów i gotowych konfiguracji, które można łączyć według własnych potrzeb.

I właśnie tutaj zaczyna się najciekawsza część.

Co potrafi już Kelverse Precious?

Chociaż numer 3.0.0 oznacza przede wszystkim rebranding, nie sposób opowiadać o Precious bez wspomnienia funkcjonalności, które trafiły do niego w ostatnich kilkunastu wydaniach Acrux.

To one sprawiają, że nowa filozofia produktu ma solidne podstawy.

Budowanie całych witryn bez pisania kodu

Jednym z najważniejszych elementów Precious jest Template Builder, który pozwala tworzyć przy użyciu bloków własne szablony wpisów, stron, archiwów, wyników wyszukiwania czy stron błędu 404.

Można również budować nagłówki i stopki, a następnie określać warunki i priorytety ich wyświetlania.

Uzupełnieniem jest Loop Builder, umożliwiający projektowanie sposobu prezentacji powtarzalnych treści. Każdy element listy wpisów może mieć własny układ, a całość można przedstawić w formie siatki, listy lub karuzeli. Nawet komunikat o braku wyników można przygotować za pomocą bloków.

Dzięki temu budowa bardziej zaawansowanego bloga czy portalu informacyjnego nie wymaga już tworzenia osobnych plików szablonów PHP dla każdego układu.

Gotowe strony i biblioteka komponentów

Nie każdy chce zaczynać projektowanie od pustej strony.

Dlatego rozwinęliśmy Site Kits – system instalowania gotowych konfiguracji witryn. Aktualnie dostępne są cztery zestawy:

  • Business Pro,
  • Blog Magazine,
  • SaaS,
  • Portfolio.

Instalator oferuje podgląd, raport zmian oraz możliwość ich cofnięcia, z uwzględnieniem ochrony późniejszych edycji użytkownika.

Do tego dochodzi Design Library, w której przygotowaliśmy 50 wariantów projektowych obejmujących między innymi sekcje Hero, Features, CTA, Pricing, Testimonials, Blog i Content.

Biblioteka zawiera wyszukiwarkę, filtry oraz podgląd na żywo w trzech szerokościach ekranu. Dostępne elementy wykorzystują istniejące bloki i tokeny systemu projektowego, dzięki czemu zachowują spójność z resztą witryny.

To jeden z fundamentów naszej koncepcji: zamiast tworzyć kolejne motywy, rozwijamy bibliotekę elementów, z których można budować coraz więcej różnych stron.

Własny system projektowy

Precious posiada rozbudowany Design System, obejmujący semantyczne kolory, skalę odstępów, promienie narożników, cienie, kontenery oraz style przycisków i formularzy.

Dodaliśmy także system globalnych klas stylów, którym można zarządzać z jednego miejsca, sprawdzać ich użycie i zmieniać nazwy.

Całość uzupełnia tryb ciemny, który może być aktywowany ręcznie, zgodnie z preferencjami systemowymi albo pozostać wyłączony.

Co istotne, tryb ciemny opiera się na tokenach projektowych, a nie na niezależnym zestawie przypadkowych nadpisań CSS.

Dzięki temu zmiana charakteru strony może sprowadzać się do modyfikacji jej konfiguracji, zamiast przebudowy całego projektu.

Dynamiczne treści i zaawansowane zapytania

Kolejnym dużym obszarem rozwoju był Query Builder.

Pozwala wizualnie konstruować zapytania do WordPressa, filtrować treści według taksonomii, pól własnych i dat, a następnie zapisywać konfiguracje do ponownego wykorzystania.

Co ważne, modyfikacja zapisanego zapytania aktualizuje wszystkie miejsca, które z niego korzystają.

Dodaliśmy również obsługę danych dynamicznych: informacji o wpisach, autorach, użytkownikach, polach własnych oraz parametrów adresu URL. Dostępne są integracje z ACF, Meta Box i Pods.

Dodatkowo komponenty mogą korzystać z warunków widoczności zależnych między innymi od uprawnień użytkownika, daty, dnia tygodnia czy parametrów adresu.

W praktyce oznacza to, że jeden szablon może wyświetlać różne treści i elementy w zależności od kontekstu, bez konieczności tworzenia osobnych wersji strony.

WooCommerce Builder

Nie zapomnieliśmy o sklepach internetowych.

W wersji 2.19.0 wprowadziliśmy WooCommerce Builder, umożliwiający tworzenie szablonów stron produktów oraz archiwów produktowych.

Dostępne są komponenty pętli produktów, obsługa przycisku „Dodaj do koszyka” i dynamiczne dane, takie jak cena, promocja, dostępność magazynowa, SKU czy ocena.

Przygotowaliśmy również gotowe zapytania dla produktów promocyjnych, wyróżnionych, bestsellerów, nowości i produktów powiązanych.

WooCommerce staje się dzięki temu kolejnym zastosowaniem Precious, zamiast powodem do tworzenia osobnego motywu sklepowego.

Wydajność, prywatność i jakość

Rozbudowany motyw nie powinien oznaczać niepotrzebnego obciążenia witryny.

Dlatego stworzyliśmy Performance Center, z którego można zarządzać wybranymi optymalizacjami, takimi jak lazy loading, cache zapytań, wyłączanie zbędnych elementów WordPressa czy warunkowe ładowanie zasobów CSS i JavaScript.

Dodaliśmy diagnostykę kosztownych zapytań oraz wskaźnik Performance Score w skali 0-100.

Warto zaznaczyć, że nie jest to odpowiednik Lighthouse ani pomiar rzeczywistej szybkości strony. Wskaźnik ocenia konfigurację mechanizmów dostępnych w Precious.

Kolejną nowością był Consent Manager, oferujący baner zgód, zarządzanie kategoriami preferencji oraz warunkowe ładowanie skryptów po wyrażeniu zgody. Dostępne jest również API dla deweloperów.

To techniczna pomoc w zarządzaniu zgodami, a nie automatyczna gwarancja zgodności z przepisami dotyczącymi prywatności.

Równolegle pracowaliśmy nad dostępnością, bezpieczeństwem mechanizmów REST i stabilnością całego rozwiązania. Poprawialiśmy między innymi obsługę karuzel, strukturę stron, elementy interaktywne i błędy zgłaszane podczas rozwoju poprzednich wersji.

Łatwiejszy start z Precious

Ostatnim dużym elementem przed rebrandingiem był nowy system onboardingu, wprowadzony w wersji 2.20.0.

Przygotowaliśmy kreator powitalny oferujący trzy ścieżki rozpoczęcia pracy z motywem.

Nowi użytkownicy otrzymują również propozycję zalecanej konfiguracji, z podglądem zmian i możliwością ich cofnięcia, oraz listę „Szybki start” dostępną na Pulpicie WordPressa.

W bardziej zaawansowanych panelach pojawiły się kontekstowe podpowiedzi objaśniające działanie zapytań, warunków i danych dynamicznych.

Zależy nam, żeby wraz ze wzrostem liczby możliwości Precious nie stawał się narzędziem zrozumiałym wyłącznie dla jego autorów.

Co dalej? Precious 3.0.1

Nie zamierzamy zwalniać tempa.

W najbliższej aktualizacji 3.0.1 skupimy się przede wszystkim na dopracowaniu istniejących mechanizmów oraz rozwiązaniu problemów zauważonych podczas pracy z bardziej rozbudowanymi witrynami.

Jednym z priorytetów jest poprawa Menedżera fontów, który obecnie nieprawidłowo obsługuje niektóre warianty czcionek pobieranych z Google Fonts. Po zmianach mechanizm będzie uwzględniać poszczególne podzbiory znaków oraz grubości fontów, co pozwoli uniknąć problemów między innymi z polskimi znakami.

Rozbudujemy również narzędzia do tworzenia archiwów. Planujemy możliwość automatycznego wyróżniania pierwszego wpisu, wyświetlania podkategorii bieżącego archiwum oraz paginację typu „Załaduj więcej” działającą na głównym zapytaniu.

Poprawimy obsługę rozmiarów obrazków wyróżniających w danych dynamicznych, aby projektowane karty mogły wykorzystywać zdjęcia o rozdzielczości odpowiedniej również dla ekranów HiDPI.

W planach są także usprawnienia statystyk popularności wpisów, w tym wybór okresu analizy, ograniczenie zliczania ruchu botów i wielokrotnych odświeżeń strony.

Blok Tabs otrzyma możliwość umieszczania wewnątrz zakładek również obrazów i innych bloków, a motyw zyska opcjonalny mechanizm obsługi meta description i Open Graph, uwzględniający obecność wtyczek SEO.

To nie są zmiany, które mają dobrze wyglądać wyłącznie na liście nowości. Wynikają z konkretnych problemów i potrzeb pojawiających się podczas korzystania z Precious.

Precious Studio i przyszłość produktu

W dłuższej perspektywie chcemy jeszcze mocniej zintegrować wszystkie elementy naszego systemu.

Rozwijamy koncepcję Precious Studio – spójnego środowiska zarządzania stylami, komponentami, presetami i konfiguracjami.

Chcielibyśmy, aby użytkownik mógł rozpocząć pracę od gotowego Site Kita, dostosować go przy użyciu biblioteki komponentów, zmodyfikować system wizualny, a następnie zapisać własną konfigurację do wykorzystania w kolejnym projekcie.

W tym modelu Companion pozostaje technicznym rozszerzeniem możliwości motywu, ale z perspektywy użytkownika oba elementy tworzą jeden produkt.

Nie zamierzamy wprowadzać nowych motywów Kelverse tylko dlatego, że kolejny projekt potrzebuje innego wyglądu.

Wolimy dodać brakujące komponenty i konfiguracje do Precious, tak aby mogli skorzystać z nich również pozostali użytkownicy.

One to Rule Them All

To hasło dobrze podsumowuje kierunek, który obraliśmy.

Nie twierdzimy, że Precious jest już rozwiązaniem idealnym ani że obsługuje wszystkie możliwe scenariusze. Przed nami wciąż sporo pracy, szczególnie w obszarze wygody konfiguracji, rozwoju biblioteki komponentów i dalszego porządkowania architektury.

Ale fundamenty są już na miejscu.

Mamy narzędzia do budowania szablonów, projektowania pętli treści, tworzenia dynamicznych układów, zarządzania wyglądem, przygotowywania sklepów WooCommerce i uruchamiania witryn na podstawie gotowych zestawów.

Mamy też coraz wyraźniejszą wizję tego, jak powinno wyglądać dalsze rozwijanie produktu.

Kelverse Acrux był początkiem tej drogi. Kelverse Precious 3.0 to moment, w którym wszystkie te elementy zaczynają tworzyć jedną całość.

Jeden motyw. Wiele zastosowań. Coraz więcej możliwości.

Kelverse Precious – One to Rule Them All.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *