Todo-List komponenta izveide WordPress bloku redaktoram — 1. daļa

Ar šo praktisko materiālu sēriju vēlos jums parādīt, cik tālu ir attīstījusies WordPress izstrāde. 2024. gadā WordPress izstrādātājs galvenokārt ir frontend izstrādātājs, kuram ir jābūt labām HTML/CSS, React un WordPress specifikas zināšanām, kā arī jāprot PHP, lai patstāvīgi izstrādātu veidojamo bloku aizmugursistēmu. Atzīstiet, jūs domājāt, ka tas ir tikai par pogu spiešanu Elementor, vai ne? 🙂

WordPress bloku redaktors (Gutenberg) ir būtiski pārveidojis satura veidošanas un rediģēšanas procesu WordPress vietnēs, nodrošinot izstrādātājiem jaudīgus rīkus pielāgojamu un funkcionālu bloku izveidei. Šajā ceļvedī izveidosim savu “Todo-List” komponentu, kas lietotājiem ļauj veidot uzdevumu sarakstus un nosūtīt datus uz serveri, kad mainās uzdevumu statuss.

Bloka pamatelementi

Mūsu izveidotais bloks sastāvēs no vairākiem galvenajiem elementiem:

1. RichText: komponents, kas lietotājiem ļauj ievadīt un rediģēt tekstu blokā.
2. InspectorControls: panelis, kas redaktorā nodrošina bloka iestatījumus un vadīklas.
3. CheckboxControl: vadības elements, ko izmanto, lai atzīmētu uzdevumus kā izpildītus.
4. useState: āķis, kas pārvalda uzdevumu stāvokli blokā.
5. fetch API: tiek izmantots uzdevumu datu nosūtīšanai uz serveri.

Katrs bloks tiek izveidots kā atsevišķs spraudnis, ko var atkārtoti izmantot citos WordPress projektos. Tas ļauj viegli integrēt izveidoto bloku jebkurā citā vietnē, kas darbojas ar WordPress.

Izstrādes vides iestatīšana

Pirms sākam veidot komponentu, ir svarīgi pārliecināties, ka jūsu izstrādes vide ir pareizi iestatīta. Bloka izstrādei būs nepieciešami šādi rīki:

1. WordPress: pārliecinieties, ka jūsu WordPress versija ir 5.0 vai jaunāka, jo šajā versijā tika ieviests bloku redaktors.
2. Node.js un npm: nepieciešami darbam ar JavaScript un atkarību pārvaldībai.
3. WP-CLI (pēc izvēles): komandrindas rīks darbam ar WordPress, kas var vienkāršot izstrādi.

Node.js un npm instalēšana

Ja Node.js un npm vēl nav instalēti jūsu datorā, lejupielādējiet un instalējiet tos no oficiālās Node.js vietnes.

Pēc instalēšanas palaidiet šādas komandas, lai pārliecinātos, ka viss ir instalēts pareizi:

node -v
npm -v

Ja komandas atgriež versiju numurus, viss darbojas pareizi.

Todo-List bloka izveide

Lai paātrinātu bloka izveides procesu, varat izmantot komandu, kas automātiski ģenerēs visu projekta struktūru, tostarp konfigurācijas un failus.

1. solis: bloka izveide ar komandu

Atveriet termināli un palaidiet šādu komandu, lai automātiski izveidotu “Todo-List” bloku:

npx @wordpress/create-block@latest todo-list

Šī komanda jūsu vietā veiks šādas darbības:

1. Projekta inicializācija: komanda izveidos jaunu direktoriju ar nosaukumu todo-list, kurā būs visi blokam nepieciešamie faili un struktūra.
2. Atkarību instalēšana: visas nepieciešamās pakotnes, piemēram, @wordpress/scripts, tiks instalētas automātiski.
3. Failu struktūras izveide: struktūrā būs mapes src un build, kā arī index.js fails ar bloka pamatkodu.
4. Iestatīšana block.json: šis fails tiks izveidots ar pamatkonfigurāciju, kas definē “Todo-List” bloku.

Failu struktūra un apraksts

Pēc komandas palaišanas tiks izveidota šāda projekta struktūra:

todo-list/
│
├── src/
│   └── index.js
│
├── build/
│
├── block.json
├── package.json
└── README.md

1. src/index.js

Fails index.js mapē src satur visu jūsu bloka pirmkodu. Šeit tiek īstenota bloka loģika, tostarp tā izskats un mijiedarbība ar lietotāju. Galvenās koda daļas ietver bloka reģistrēšanu, izmantojot funkciju registerBlockType, atribūtu iestatīšanu un bloka rediģēšanas un saglabāšanas funkciju definēšanu.

 index.js satura paraugs:

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

Mape build ir paredzēta kompilēto failu glabāšanai. Pēc projekta būvēšanas ar komandu npm run build šajā mapē tiks ievietots lietošanai gatavs index.js fails, ko WordPress izmantos bloka attēlošanai un darbībai.

3. block.json

Fails block.json satur jūsu bloka metadatus. Tas definē bloka nosaukumu, kategoriju, ikonu, skriptus un tā darbībai nepieciešamos stilus. Šis fails ir būtisks bloka reģistrēšanai WordPress.

 block.json satura paraugs:

{
  "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

Fails package.json satur informāciju par projektu un tā atkarībām. Tas pārvalda bloka izstrādei un būvēšanai nepieciešamo pakotņu instalēšanu un izmantošanu. Šis fails tiek automātiski izveidots projekta inicializācijas laikā un tiek atjaunināts, pievienojot jaunas atkarības.

 package.json satura paraugs:

{
  "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

Fails README.md satur projekta aprakstu, instalēšanas un lietošanas norādījumus, kā arī citu svarīgu informāciju, kas var būt nepieciešama izstrādātājiem vai lietotājiem. Šis fails ir noderīgs projekta dokumentēšanai.

Projekta būvēšana

Pēc koda izmaiņu veikšanas uzbūvējiet projektu, lai iegūtu lietošanai gatavu failu WordPress:

npm run build

Komanda build kompilēs jūsu kodu un ievietos to mapē build.

Bloka reģistrēšana WordPress

Tagad, kad bloks ir gatavs, tas ir jāreģistrē WordPress. Lai to izdarītu, pievienojiet savam spraudņa vai motīva failam šādu kodu:

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' );

Šis kods reģistrēs jūsu bloku WordPress un iekļaus kompilēto JavaScript failu.

Secinājums

Komandas npx @wordpress/create-block@latest izmantošana būtiski paātrina jauna bloka izveides procesu WordPress bloku redaktoram. Šajā ceļvedī apskatījām, kā izveidot “Todo-List” bloku, kas lietotājiem ļauj veidot uzdevumu sarakstus un pārvaldīt to izpildi, nosūtot datus uz serveri. Šo komponentu var paplašināt, pievienojot jaunas funkcijas un uzlabojot mijiedarbību ar lietotāju, paverot plašas iespējas WordPress vietnes pielāgošanai.