W tej serii praktycznych materiałów chcę pokazać, jak daleko zaszedł rozwój WordPressa. W 2024 roku programista WordPressa jest przede wszystkim frontend developerem, który musi dobrze znać HTML/CSS, React, specyfikę WordPressa, a także PHP, aby samodzielnie pisać backend dla tworzonych bloków. Przyznajcie, myśleliście, że chodzi tylko o klikanie przycisków w Elementorze, prawda? 🙂
Edytor blokowy WordPressa (Gutenberg) znacząco zmienił proces tworzenia i edytowania treści na stronach WordPress, zapewniając programistom zaawansowane narzędzia do tworzenia konfigurowalnych i funkcjonalnych bloków. W tym poradniku stworzymy własny komponent „Todo-List”, który pozwoli użytkownikom tworzyć listy zadań i wysyłać dane na serwer po zmianie statusu zadań.
Podstawowe elementy bloku
Tworzony przez nas blok będzie składał się z kilku kluczowych elementów:
- RichText: Komponent umożliwiający użytkownikom wprowadzanie i edytowanie tekstu w obrębie bloku.
- InspectorControls: Panel udostępniający ustawienia i kontrolki bloku w edytorze.
- CheckboxControl: Element kontrolny używany do oznaczania zadań jako ukończonych.
- useState: Hook zarządzający stanem zadań w obrębie bloku.
- fetch API: Służy do wysyłania danych zadań na serwer.
Każdy blok jest tworzony jako osobna wtyczka, którą można ponownie wykorzystać w innych projektach WordPress. Dzięki temu można łatwo zintegrować utworzony blok z dowolnymi innymi stronami działającymi na WordPressie.
Konfiguracja środowiska programistycznego
Zanim zaczniemy budować komponent, ważne jest upewnienie się, że środowisko programistyczne zostało prawidłowo skonfigurowane. Do tworzenia bloku będą potrzebne następujące narzędzia:
- WordPress: Upewnij się, że używasz WordPressa w wersji 5.0 lub nowszej, ponieważ edytor blokowy został wprowadzony w tej wersji.
- Node.js and npm: Wymagane do pracy z JavaScriptem i zarządzania zależnościami.
- WP-CLI (opcjonalnie): Narzędzie wiersza poleceń do pracy z WordPressem, które może uprościć proces tworzenia.
Instalowanie Node.js i npm
Jeśli Node.js i npm nie są jeszcze zainstalowane na Twoim komputerze, pobierz je i zainstaluj z oficjalnej strony Node.js.
Po instalacji uruchom następujące polecenia, aby upewnić się, że wszystko zostało poprawnie zainstalowane:
node -v
npm -vJeśli polecenia zwrócą numery wersji, wszystko działa poprawnie.
Tworzenie bloku Todo-List
Aby przyspieszyć proces tworzenia bloku, możesz użyć polecenia, które automatycznie wygeneruje całą strukturę projektu, w tym konfiguracje i pliki.
Krok 1: tworzenie bloku za pomocą polecenia
Otwórz terminal i uruchom następujące polecenie, aby automatycznie utworzyć blok „Todo-List”:
npx @wordpress/create-block@latest todo-listTo polecenie wykona za Ciebie następujące kroki:
- Inicjalizacja projektu: Polecenie utworzy nowy katalog o nazwie todo-list, zawierający wszystkie niezbędne pliki i strukturę bloku.
- Instalowanie zależności: Wszystkie niezbędne pakiety, takie jak @wordpress/scripts, zostaną automatycznie zainstalowane.
- Tworzenie struktury plików: Struktura będzie obejmować foldery src i build, a także plik index.js z podstawowym kodem bloku.
- Konfiguracja block.json: Ten plik zostanie utworzony z podstawową konfiguracją definiującą blok „Todo-List”.
Struktura plików i opis
Po uruchomieniu polecenia zostanie utworzona następująca struktura projektu:
todo-list/
│
├── src/
│ └── index.js
│
├── build/
│
├── block.json
├── package.json
└── README.md1. src/index.js
Plik index.js w folderze src zawiera cały kod źródłowy bloku. To właśnie tutaj implementowana jest logika bloku, w tym jego wygląd i interakcja z użytkownikiem. Główne części kodu obejmują rejestrowanie bloku za pomocą funkcji registerBlockType , konfigurację atrybutów oraz definiowanie funkcji edycji i zapisywania bloku.
Przykładowa zawartość pliku index.js:
import { registerBlockType } from '@wordpress/blocks';
import { useState } from '@wordpress/element';
import { RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, CheckboxControl } from '@wordpress/components';
registerBlockType('todo-plugin/todo-list', {
title: 'Todo List',
icon: 'list-view',
category: 'widgets',
attributes: {
tasks: {
type: 'array',
default: [],
},
},
edit({ attributes, setAttributes }) {
const { tasks } = attributes;
const [taskText, setTaskText] = useState('');
const addTask = () => {
if (taskText) {
const newTasks = [...tasks, { text: taskText, done: false }];
setAttributes({ tasks: newTasks });
setTaskText('');
sendTasksToServer(newTasks);
}
};
const toggleTaskDone = (index) => {
const newTasks = tasks.map((task, i) =>
i === index ? { ...task, done: !task.done } : task
);
setAttributes({ tasks: newTasks });
sendTasksToServer(newTasks);
};
const sendTasksToServer = (tasks) => {
// Example of sending data to the server
fetch('/wp-json/todo/v1/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ tasks }),
});
};
return (
<div>
<InspectorControls>
<PanelBody title="Tasks">
{tasks.map((task, index) => (
<CheckboxControl
key={index}
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
))}
</PanelBody>
</InspectorControls>
<div>
<RichText
tagName="p"
value={taskText}
onChange={(text) => setTaskText(text)}
placeholder="Enter new task"
/>
<button onClick={addTask}>Add Task</button>
</div>
<ul>
{tasks.map((task, index) => (
<li key={index}>
<CheckboxControl
label={task.text}
checked={task.done}
onChange={() => toggleTaskDone(index)}
/>
</li>
))}
</ul>
</div>
);
},
save({ attributes }) {
const { tasks } = attributes;
return (
<ul>
{tasks.map((task, index) => (
<li key={index}>
<RichText.Content
tagName="span"
value={task.text}
style={{ textDecoration: task.done ? 'line-through' : 'none' }}
/>
</li>
))}
</ul>
);
},
});2. build
Folder build służy do przechowywania skompilowanych plików. Po zbudowaniu projektu za pomocą polecenia npm run build w tym folderze zostanie umieszczony gotowy do użycia plik index.js, który będzie wykorzystywany przez WordPress do wyświetlania i obsługi bloku.
3. block.json
Plik block.json zawiera metadane bloku. Definiuje nazwę bloku, kategorię, ikonę, skrypty i style niezbędne do jego działania. Plik ten jest niezbędny do zarejestrowania bloku w WordPressie.
Przykładowa zawartość pliku block.json:
{
"apiVersion": 2,
"name": "todo-plugin/todo-list",
"title": "Todo List",
"category": "widgets",
"icon": "list-view",
"description": "A customizable todo list block.",
"keywords": [ "todo", "tasks", "list" ],
"version": "1.0.0",
"textdomain": "todo-list",
"editorScript": "file:./build/index.js"
}4. package.json
Plik package.json zawiera informacje o projekcie i jego zależnościach. Zarządza instalacją i używaniem pakietów wymaganych do tworzenia i budowania bloku. Plik ten jest automatycznie tworzony podczas inicjalizacji projektu i aktualizowany w miarę dodawania nowych zależności.
Przykładowa zawartość pliku package.json:
{
"name": "todo-list",
"version": "1.0.0",
"description": "A custom block for todo list",
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"devDependencies": {
"@wordpress/scripts": "^24.0.0"
}
}5. README.md
Plik README.md zawiera opis projektu, instrukcje instalacji i użytkowania oraz inne ważne informacje, które mogą być potrzebne programistom lub użytkownikom. Plik ten jest przydatny do dokumentowania projektu.
Budowanie projektu
Po wprowadzeniu zmian w kodzie zbuduj projekt, aby uzyskać gotowy do użycia plik dla WordPressa:
npm run build
Polecenie build skompiluje kod i umieści go w folderze build.
Rejestrowanie bloku w WordPressie
Teraz, gdy blok jest gotowy, należy zarejestrować go w WordPressie. Aby to zrobić, dodaj następujący kod do pliku wtyczki lub motywu:
function todo_plugin_register_block() {
wp_register_script(
'todo-list-editor-script',
plugins_url( 'build/index.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' ),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);
register_block_type( 'todo-plugin/todo-list', array(
'editor_script' => 'todo-list-editor-script',
) );
}
add_action( 'init', 'todo_plugin_register_block' );Ten kod zarejestruje blok w WordPressie i doda do kolejki skompilowany plik JavaScript.
Podsumowanie
Użycie polecenia npx @wordpress/create-block@latest znacząco przyspiesza proces tworzenia nowego bloku dla edytora blokowego WordPressa. W tym poradniku omówiliśmy tworzenie bloku „Todo-List”, który umożliwia użytkownikom tworzenie list zadań i zarządzanie ich realizacją, a dane są wysyłane na serwer. Komponent ten można rozbudować o nowe funkcje i ulepszyć interakcję z użytkownikiem, co otwiera szerokie możliwości dostosowania witryny WordPress.