Na szczęście zespół programistów WordPressa ma przydatny npm skrypt do stworzenia wtyczki blokującej, która tworzy blok startowy, dzięki czemu możesz szybko rozpocząć pracę.

Domyślnie rodzaj tworzonej wtyczki WordPress to „blok", ale daje nam również dobry punkt wyjścia dla innych rodzajów wtyczek Gutenberga.

Warunki wstępne

Node musi być zainstalowany na twoim komputerze, aby można było użyć npmpolecenia (co oznacza Node Package Manager)
Instalacja WordPress
Edytor kodu
Dostęp do Terminala

Stwórz swoją wtyczkę

Po zainstalowaniu węzła na swoim komputerze powinieneś mieć dostęp do npmpolecenia w swoim terminalu.

Otwórz terminal i upewnij się, że cdwpisałeś (Zmieniony katalog) do folderu wtyczek w instalacji WordPressa (np cd wp-content/plugins. ).

Tam uruchom następujące polecenie:

npm init @wordpress/block

Spowoduje to pobranie wszystkiego, czego skrypt potrzebuje do rozpoczęcia kompilacji. Po zakończeniu skrypt zada Ci serię pytań potrzebnych do skonfigurowania wtyczki.

Używanie terminala do uruchamiania skryptu tworzenia

Pytania dotyczące konfiguracji

Skrypt zada następujące pytania, oto moje przykładowe odpowiedzi:

Ślimak bloku używany do identyfikacji (także nazwa wtyczki i folderu wyjściowego) — chcę, aby mój blok nazywał się Wholesome Plugin, więc wprowadziłem wholesome-plugin.
Wewnętrzna przestrzeń nazw dla nazwy bloku (coś unikalnego dla Twoich produktów) — ponieważ powinna być unikalna dla wszystkich moich produktów, które wprowadziłem wholesomecode, ponieważ jest to nazwa mojej firmy.
Wyświetlany tytuł Twojego bloku — wpisałem tytuł wtyczki, Wholesome Plugin.
Krótki opis Twojego bloku (opcjonalnie) — wpisałem „ An example plugin to demonstrate the create-block-script„.
Dashicon ułatwiający identyfikację twojego bloku (opcjonalnie) — Szybko przywołując zasób WordPress Dashicons, wybrałem admin-plugins, ponieważ ma ikonę wtyczki. Pamiętaj, aby pominąć dashicon- z prefiksu dashicon podczas robienia tego.
Nazwa kategorii ułatwiająca użytkownikom przeglądanie i odkrywanie Twojego bloku (użyj klawiszy strzałek) — wybrałem design. Chociaż niestandardowa kategoria prawdopodobnie byłaby lepiej dopasowana.
Imię i nazwisko autora wtyczki (opcjonalnie). Wielu autorów może być wymienionych przy użyciu przecinków — wpisałem wholesomecode.
Krótka nazwa licencji wtyczki (opcjonalna) — nacisnąłem enter, aby zaakceptować GPL v2.0 lub nowszą.
Link do pełnego tekstu licencji (opcjonalnie) — nacisnąłem enter, aby wstawić adres URL licencji GPL v2.0.
Aktualny numer wersji wtyczki — nacisnąłem enter, aby wstawić 0.1.0.

Pytania dotyczące konfiguracji skryptu

Skrypt zakończy działanie.

Co się stało?

Kilka rzeczy dzieje się podczas działania skryptu, są to:

Tworzy folder wtyczki,
Generuje wszystkie pliki wtyczek (zobacz przeglądanie wtyczki, aby dowiedzieć się, co one robią )
Instaluje potrzebne zależności, w tym @wordpress/scriptspakiet (to nie lada wyzwanie, jeśli chodzi o budowanie wtyczki)
Kompiluje kod
Wyświetla listę poleceń, których możesz użyć

Komendy budowania

Omówimy je bardziej w sekcji eksploracji wtyczek.

Korzystanie z wtyczki

Zanim będziesz mógł korzystać z wtyczki, musisz ją aktywować. Możesz to zrobić, wybierając Pluginsz menu administracyjnego WordPressa, a następnie wybierając activatepod nazwą wtyczki.

Aktywuj wtyczkę

Teraz musisz edytować post w WordPressie i wstawić wtyczkę za pomocą edytora Gutenberg.

Wstawianie bloku do słupka

Zauważ, że wtyczka nie jest zbyt domyślna, po prostu tworzy blok. Zapewnia jednak strukturę, której możesz użyć do zbudowania własnej wtyczki.

Oglądanie bloku na interfejsie

Domyślnie blok wygląda tak z przodu. Zauważ, że ma nieco inny wygląd, jest to celowe, abyś mógł zapoznać się z CSS z przodu i z tyłu WordPressa.

Blok na froncie

Eksploracja wtyczki

Cały cel tworzenia skryptu blokowego polega na stworzeniu własnej wtyczki. Przyjrzyjmy się bardziej szczegółowo wygenerowanym plikom:

Wygenerowane pliki

wholesome-plugin— To jest folder główny wtyczki, ma on taką samą nazwę jak ta, którą wpisałem dla „ślimaka” w pytaniach konfiguracyjnych.

**/build**— To jest folder kompilacji. Zawiera wszystkie zasoby JavaScript i PHP wygenerowane z /srcfolderu. Są one umieszczane w kolejce poprzez główny wholesome-notes.phpplik programu ładującego.

**/build/index.assets.php**— Ten plik PHP jest generowany automatycznie podczas /srckompilacji folderu. Zawiera tablicę wszystkich przyzwoitości JavaScript edytora WordPress (Gutenberg) używanych przez twoją wtyczkę. Jest umieszczany w kolejce poprzez główny wholesome-plugin.phpplik programu ładującego.

**/build/index.css**— To jest plik CSS edytora i jest umieszczany w kolejce przez główny wholesome-plugin.phpplik ładujący.

**/build/index.js**— Jest to główny skompilowany plik JavaScript, który jest umieszczany w kolejce przez główny wholesome-plugin.phpplik ładujący.

**/build/style-index.css**— To jest frontowy plik CSS, który jest umieszczany w kolejce przez główny wholesome-plugin.phpplik ładujący.

**/build/index.js.map**— Ten plik jest generowany tylko podczas kompilowania zasobów do trybu programistycznego (tzn. uruchamiany, npm starta nie npm buildpodczas kompilowania zasobów. Jest to plik pomocny dla debugerów JavaScript, który pomaga zidentyfikować nazwy plików i numery wierszy w przypadku wystąpienia błędów.

**/node_modules**— Jest to folder, w którym zainstalowane są wszystkie zależności JavaScript dla Twojej wtyczki.
**/src**— To jest folder zawierający wszystkie nieskompilowane zasoby wtyczki.
**/src/edit.js**— Jest to funkcja edycji bloku i kontroluje sposób wyświetlania bloku w edytorze bloku, gdy jest on w trybie edycji.
**/src/editor.scss**— To jest nieskompilowany SCSS dla edytora, zostanie skompilowany do /build/index.css.
**/src/index.js**— To jest główny nieskompilowany plik JavaScript dla bloku edytora WordPress (Gutenberg). Rejestruje blok i zawiera ustawienia domyślne.
**/src/save.js**— Jest to funkcja zapisywania bloku i kontroluje znaczniki bloku podczas jego zapisywania.
**/src/style.scss**— To jest nieskompilowany SCSS dla interfejsu, zostanie skompilowany do /build/style-index.css.
**/.editorconfig**— Ten plik zawiera przydatne ustawienia wstępne dla IDE (zintegrowanego środowiska programistycznego), takie jak Visual Studio Code.
**/.gitignore**— Ten plik mówi git, aby ignorował określone pliki, gdy zatwierdzasz do repozytorium git (takiego jak GitHub).
**/editor.css**— Style w tym pliku są wyprowadzane tylko w edytorze, są umieszczane w kolejce przez główny wholesome-notes.phpplik ładujący.
**/block.json**— Ten plik definiuje wtyczkę, dzięki czemu może zostać wykryta przez bibliotekę bloków WordPress. Jeśli wprowadzisz zmiany we wtyczce, upewnij się, że ten plik jest zaktualizowany. W nowszych wersjach skryptu NPM ten plik jest używany zamiast /src/index.jsrejestrowania twojego bloku.
**/package.json**— Ten plik zawiera wszystkie zależności npm dla wtyczki oraz polecenia, które można uruchomić. Zauważ, że wtyczka wykorzystuje wp-scripts( @wordpress/scripts) jako swoją podstawę, więc początkowo ładowane zależności dotyczą tego pakietu.
**/readme.txt**— Ten plik jest plikiem readme repozytorium wtyczek WordPress, który jest wymagany, jeśli chcesz, aby blok był wyświetlany w repozytorium wtyczek.
**/wholesome-plugin.php**— To jest główny plik ładujący wtyczki. Jego nazwa została ustawiona poprzez „slug”, który wprowadziliśmy w początkowym skrypcie instalacyjnym. Umieszcza w kolejce wszystkie zasoby JavaScript potrzebne do wtyczki.

Poznawanie poleceń budowania

Zanim będziemy mogli uruchomić nasze polecenia budowania, musimy upewnić się, że znajdujemy się w folderze wtyczek. W tym przykładzie uruchomimy cd wholesome-pluginterminal, aby zmienić katalog na nasz folder wtyczek.

Możemy wtedy uruchomić następujące polecenia:

**npm start**— Rozpoczyna kompilację do rozwoju. Jeśli wprowadzisz zmianę we wtyczce, musisz to zrobić, aby zmiany się pojawiły (prawdopodobnie będziesz również musiał odświeżyć przeglądarkę).
**npm run build**— Buduje kod do produkcji. Zrób to, jeśli tworzysz wydaną wersję wtyczki.
**npm run format:js**— Automatycznie formatuje pliki JavaScript, stosując najlepsze praktyki.
**npm run lint:css**— Lints (szuka błędów w) plikach CSS.
**npm run lint:js**— Lints (szuka błędów w) plikach JavaScript.
**npm run packages-update**— Aktualizuje pakiety WordPress do najnowszej wersji.

Podczas modyfikowania wtyczki użyjemy jednego lub więcej z nich.

Modyfikowanie wtyczki

Zacznijmy od udostępnienia naszego bloku do edycji.

Dodaj atrybuty do`/src/index.js`

Otwórz /src/index.jsw swoim edytorze i dodaj następujące elementy wewnątrz registerBlockTypefunkcji, pod apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

To da nam miejsce do przechowywania danych w naszej wtyczce o nazwie blockTextdostępne za pośrednictwem attributeswłaściwości (prop). Zauważ, że nadaliśmy mu domyślny oryginalny tekst wygenerowany przez skrypt tworzenia wtyczki.

Dodaj tekst sformatowany do`/src/edit.js`

Otwórz /src/edit.jsw edytorze i zastąp importowanie useBlockPropsnastępującym:

import { RichText, useBlockProps } from '@wordpress/block-editor';

Umożliwi nam to użycie komponentu RichText w naszej metodzie renderowania edycji.

Następnie zmień całą funkcję Edytuj na następującą:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Ustawia to wartość RichTextkomponentu na taką samą jak ta przechowywana w blockTextatrybucie, a onChangewłaściwość ustawia blockTextatrybut na to, co kiedykolwiek zostało wprowadzone do RichTextkomponentu.

Wypisz atrybuty w`/src/save.js`

Otwórz /src/save.jsw swoim edytorze i zastąp savefunkcję następującą:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

To po prostu wyświetla wartość blockTextw akapicie.

Kompilacja wtyczki

Otwórz terminal, upewnij się, że jesteś w katalogu głównym swojej wtyczki i uruchom następujące polecenie:

Skrypt się skompiluje. Jeśli masz jakieś błędy, terminal powinien cię poinformować o tym, czym one są.

Budowanie wtyczki

Wstawianie wtyczki

Upewnij się, że odświeżyłeś swój post. Poprzednia wersja bloku może być teraz zepsuta, jest to w porządku, po prostu ją usuń i wstaw nową.

Wstaw blok za pomocą symbolu plusa w lewym górnym rogu edytora, a kiedy zostanie wstawiony, kliknij jego tekst. Powinieneś. teraz móc edytować tekst.

Wstawianie edytowalnego bloku

Przeglądanie wtyczki

Zapisz post i wyświetl go w interfejsie witryny, zmieniony tekst powinien być wyświetlany zamiast oryginalnego tekstu.

Edytowalny blok na froncie strony internetowej

Jeśli chcesz, aby Twoje bloki pojawiały się w niestandardowej kategorii bloków, po prostu dodaj następujący kod do katalogu głównego wtyczki (w tym przypadku wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Spowoduje to zarejestrowanie niestandardowej kategorii bloków w twoim wstawiaczu bloków.

Następnie wszystko, co musisz zrobić, to dostosować categoryargument registerBlockTypefunkcji in /src/index.js, aby odwoływał się do kategorii bloku i ponownie skompilować:


category: 'wholesome-blocks',

Teraz, kiedy wstawisz swój blok, znajdziesz go w nowo utworzonej kategorii bloków:

Niestandardowa kategoria bloku w module wstawiania bloków

Zobacz, jak używać PHP do renderowania swojego bloku za pomocą bloków dynamicznych
Spójrz na użycie meta pól postu jako atrybutów w swoim bloku
Dodaj blokowy pasek boczny za pomocą InspectorControls
Rozszerz swoją wtyczkę, dodając dodatkowe punkty wejścia do pliku webpack.config

Źródło nagrywania: wholesomecode.ltd