Ülesannete loendi komponendi loomine WordPressi plokiredaktori jaoks – 1. osa

Selle praktiliste materjalide sarjaga soovin näidata, kui kaugele WordPressi arendus on jõudnud. 2024. aastal on WordPressi arendaja eelkõige frontend-arendaja, kellel peab olema põhjalik arusaam HTML-ist/CSS-ist, Reactist, WordPressi eripäradest ning ka PHP-st, et iseseisvalt kirjutada loodavate plokkide backend. Tunnistage, arvasite, et asi seisneb lihtsalt Elementoriga nuppude klõpsamises, eks? 🙂

WordPressi plokiredaktor (Gutenberg) on oluliselt muutnud WordPressi saitidel sisu loomise ja redigeerimise protsessi, pakkudes arendajatele võimsaid tööriistu kohandatavate ja funktsionaalsete plokkide loomiseks. Selles juhendis loome oma „Todo-Listi“ komponendi, mis võimaldab kasutajatel luua ülesannete loendeid ja saata andmeid serverisse, kui ülesannete olek muutub.

Ploki põhielemendid

Loodav plokk koosneb mitmest põhielemendist:

1. RichText: komponent, mis võimaldab kasutajatel ploki sees teksti sisestada ja redigeerida.
2. InspectorControls: paneel, mis pakub redaktoris ploki seadistusi ja juhtelemente.
3. CheckboxControl: juhtelement, mida kasutatakse ülesannete lõpetatuks märkimiseks.
4. useState: hook, mis haldab ploki sees ülesannete olekut.
5. fetch API: kasutatakse ülesannete andmete saatmiseks serverisse.

Iga plokk luuakse eraldi pluginana, mida saab teistes WordPressi projektides uuesti kasutada. See võimaldab loodud ploki hõlpsalt integreerida mis tahes teistele WordPressil töötavatele saitidele.

Arenduskeskkonna seadistamine

Enne komponendi loomise alustamist on oluline veenduda, et teie arenduskeskkond on õigesti seadistatud. Ploki arendamiseks vajate järgmisi tööriistu:

1. WordPress: veenduge, et teie WordPressi versioon on 5.0 või uuem, kuna plokiredaktor võeti kasutusele selles versioonis.
2. Node.js ja npm: vajalikud JavaScriptiga töötamiseks ja sõltuvuste haldamiseks.
3. WP-CLI (valikuline): WordPressiga töötamiseks mõeldud käsureatööriist, mis võib arendust lihtsustada.

Node.js-i ja npm-i installimine

Kui Node.js ja npm ei ole veel teie arvutisse installitud, laadige need alla ja installige need Node.js-i ametlikult veebisaidilt.

Pärast installimist käivitage järgmised käsud, et veenduda, kas kõik on õigesti installitud:

node -v
npm -v

Kui käsud tagastavad versiooninumbrid, töötab kõik õigesti.

Todo-Listi ploki loomine

Ploki loomise protsessi kiirendamiseks saate kasutada käsku, mis genereerib automaatselt kogu projektistruktuuri, sealhulgas konfiguratsioonid ja failid.

1. samm: ploki loomine käsuga

Avage terminal ja käivitage järgmine käsk, et luua automaatselt plokk „Todo-List“:

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

See käsk teeb teie eest järgmised toimingud:

1. Projekti lähtestamine: käsk loob uue kataloogi nimega todo-list, mis sisaldab kõiki ploki jaoks vajalikke faile ja struktuuri.
2. Sõltuvuste installimine: kõik vajalikud paketid, näiteks @wordpress/scripts, installitakse automaatselt.
3. Failistruktuuri loomine: struktuur hõlmab kaustu src ja build ning faili index.js, mis sisaldab ploki põhikoodi.
4. Seadistamine block.json: see fail luuakse põhikonfiguratsiooniga, mis määratleb ploki „Todo-List“.

Failistruktuur ja kirjeldus

Pärast käsu käivitamist luuakse järgmine projektistruktuur:

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

1. src/index.js

Kaustas src asuv fail index.js sisaldab kogu teie ploki lähtekoodi. Siin rakendatakse ploki loogika, sealhulgas selle välimus ja kasutajaga suhtlemine. Koodi põhiosad hõlmavad ploki registreerimist funktsiooni registerBlockType abil, atribuutide seadistamist ning ploki redigeerimise ja salvestamise funktsioonide määratlemist.

Faili index.js näidissisu:

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

Kaust build on mõeldud kompileeritud failide talletamiseks. Pärast projekti buildimist käsuga npm run build paigutatakse sellesse kausta kasutusvalmis fail index.js, mida WordPress kasutab ploki kuvamiseks ja käitamiseks.

3. block.json

Fail block.json sisaldab teie ploki metaandmeid. See määratleb ploki nime, kategooria, ikooni, skriptid ja selle tööks vajalikud stiilid. See fail on WordPressis ploki registreerimiseks hädavajalik.

Faili block.json näidissisu:

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

Fail package.json sisaldab teavet projekti ja selle sõltuvuste kohta. See haldab ploki arendamiseks ja buildimiseks vajalike pakettide installimist ja kasutamist. Fail luuakse projekti lähtestamisel automaatselt ning seda uuendatakse uute sõltuvuste lisamisel.

Faili package.json näidissisu:

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

Fail README.md sisaldab projekti kirjeldust, installimis- ja kasutusjuhiseid ning muud olulist teavet, mida arendajad või kasutajad võivad vajada. See fail on kasulik projekti dokumenteerimiseks.

Projekti buildimine

Pärast koodis muudatuste tegemist buildige projekt, et saada WordPressi jaoks kasutusvalmis fail:

npm run build

Käsk build kompileerib teie koodi ja paigutab selle kausta build.

Ploki registreerimine WordPressis

Nüüd, kui plokk on valmis, tuleb see WordPressis registreerida. Selleks lisage oma plugina- või teemafaili järgmine kood:

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

See kood registreerib teie ploki WordPressis ja lisab järjekorda kompileeritud JavaScripti faili.

Kokkuvõte

Käsu npx @wordpress/create-block@latest kasutamine kiirendab oluliselt uue ploki loomist WordPressi plokiredaktori jaoks. Selles juhendis uurisime, kuidas luua plokk „Todo-List“, mis võimaldab kasutajatel koostada ülesannete loendeid ja hallata nende lõpetamist ning saadab andmed serverisse. Seda komponenti saab laiendada, lisades uusi funktsioone ja parandades kasutajaga suhtlemist, mis avab laialdased võimalused teie WordPressi saidi kohandamiseks.