გამარჯობა, WordPress-ის ენთუზიასტებო! თუ გახსოვთ დრო, როცა კონტენტის შექმნა ერთ დიდ ტექსტურ ველში ხდებოდა, რომელიც Microsoft Word-ის დოკუმენტს წააგავდა, მაშინ თქვენ კლასიკური რედაქტორის ეპოქის მოწმე ხართ. ეს ეპოქა დასრულდა.

დღეს ჩვენ ვცხოვრობთ Gutenberg-ის, ანუ ბლოკ-რედაქტორის სამყაროში. ეს არ არის უბრალოდ ვიზუალური ცვლილება; ეს ფუნდამენტური ფილოსოფიური ძვრაა. WordPress-მა კონტენტს შეხედა არა როგორც ერთიან, მონოლითურ ტექსტს, არამედ როგორც სტრუქტურირებული “ბლოკების” ერთობლიობას. პარაგრაფი, სურათი, სათაური, ციტატა, ვიდეო — თითოეული მათგანი დამოუკიდებელი, მართვადი კომპონენტია.

ეს ცვლილება ჩვენ, დეველოპერებს, გვაძლევს ფანტასტიკურ ძალას. ჩვენ უკვე აღარ ვართ შეზღუდული ერთი კონტენტის ველით. ჩვენ შეგვიძლია შევქმნათ ჩვენი საკუთარი, უნიკალური ბლოკები, რომლებსაც ექნებათ საკუთარი ლოგიკა, პარამეტრები და დიზაინი. წარმოიდგინეთ: “ჩვენი გუნდის წევრის” ბლოკი, “ფასების ცხრილის” ბლოკი, “ინტერაქტიული რუკის” ბლოკი… შესაძლებლობები უსაზღვროა.

ამ სტატიაში, მე გაგიძღვებით პროცესში და ჩვენ ერთად, ნულიდან შევქმნით ჩვენს პირველ, მაგრამ სრულფასოვან Gutenberg ბლოკს. ჩვენი მიზანია, შევქმნათ “შეტყობინების ბლოკი” (Alert Box) — მარტივი, სტილიზებული ყუთი, რომელშიც შეგვეძლება მნიშვნელოვანი ინფორმაციის ან გაფრთხილების განთავსება.

ნუ შეშინდებით, თუ React-თან დიდი გამოცდილება არ გაქვთ. ჩვენ პროცესს მაქსიმალურად დავშლით და ავხსნით თითოეული კოდის ფრაგმენტის მნიშვნელობას. მზად ხართ? დავიწყოთ!

სანამ დავიწყებთ: საჭირო ინსტრუმენტები და ცოდნა

წარმატებული სტარტისთვის, დავრწმუნდეთ, რომ ყველაფერი მზად გვაქვს:

  1. ლოკალური WordPress გარემო: ეს არის WordPress-ის ვერსია, რომელიც თქვენს კომპიუტერზე მუშაობს და არა რეალურ სერვერზე. იდეალურია ექსპერიმენტებისთვის. თუ არ გაქვთ, გირჩევთ გამოიყენოთ LocalWP — ის ძალიან მარტივი და მოსახერხებელია.
  2. Node.js და npm: Node.js არის JavaScript-ის გაშვების გარემო სერვერზე, ხოლო npm (Node Package Manager) მისი პაკეტების მენეჯერია. მარტივად რომ ვთქვათ, ეს ინსტრუმენტები გვაძლევს წვდომას JavaScript-ის უზარმაზარ ეკოსისტემაზე და გვეხმარება პროექტის დამოკიდებულებების (dependencies) მართვაში. შეგიძლიათ გადმოწეროთ მათი ოფიციალური საიტიდან.
  3. ტერმინალი (Command Line): არ არის საჭირო ექსპერტობა, მაგრამ საბაზისო ბრძანებები, როგორიცაა cd (საქაღალდის შეცვლა) და ფაილური სისტემის ნავიგაცია, უნდა იცოდეთ.
  4. JavaScript (ES6) და React-ის საბაზისო ცოდნა: Gutenberg-ის ბლოკები React-ზეა აგებული. თუ გესმით, რა არის React კომპონენტი, რა არის props და state და გინახავთ JSX სინტაქსი (HTML-ის მსგავსი კოდი JavaScript-ში), ეს სრულიად საკმარისია დასაწყისისთვის.

ნაბიჯი 1: სამუშაო გარემოს ავტომატური გენერაცია

წარსულში, დეველოპერს ხელით უწევდა JavaScript-ის თანამედროვე გარემოს აწყობა: Webpack-ის კონფიგურაცია, Babel-ის დაყენება კოდის ტრანსპილაციისთვის… ეს იყო რთული და დამღლელი პროცესი. საბედნიეროდ, WordPress-ის გუნდმა ეს პრობლემა გადაჭრა შესანიშნავი ხელსაწყოთი — @wordpress/create-block.

ეს არის ე.წ. “scaffolding” ინსტრუმენტი, რომელიც ერთი ბრძანებით გვიქმნის მზა, სრულად გამართულ გარემოს Gutenberg-ის ბლოკის შესაქმნელად.

  1. გახსენით ტერმინალი.
  2. გადადით თქვენი ლოკალური WordPress საიტის პლაგინების საქაღალდეში. როგორც წესი, ეს არის .../wp-content/plugins/.
  3. გაუშვით ჯადოსნური ბრძანება:Bashnpx @wordpress/create-block alert-block მოდით, დავშალოთ ეს ბრძანება: npx უშვებს npm პაკეტს მისი გლობალურად დაყენების გარეშე. @wordpress/create-block არის თავად ინსტრუმენტი. alert-block კი ჩვენი მომავალი პლაგინის საქაღალდის სახელია.ამ ბრძანების შესრულების შემდეგ, plugins საქაღალდეში შეიქმნება ახალი ფოლდერი alert-block, რომელიც სავსე იქნება ჩვენი პროექტისთვის საჭირო ფაილებით.
  4. შედით ახალ საქაღალდეში:Bashcd alert-block
  5. გაუშვით “Development” რეჟიმი:Bashnpm start ეს ბრძანება აკეთებს ორ რამეს: პირველი, ის ერთჯერადად კომპილაციას უკეთებს src საქაღალდეში არსებულ კოდს და ქმნის build საქაღალდეს, რომელშიც მოთავსდება ბრაუზერისთვის გასაგები JavaScript და CSS ფაილები. მეორე, ის რთავს “watch” რეჟიმს — ტერმინალი მუდმივად დააკვირდება src საქაღალდეში ნებისმიერ ცვლილებას და ავტომატურად, რეალურ დროში განაახლებს build ფაილებს. არ დახუროთ ეს ტერმინალის ფანჯარა მუშაობის პროცესში.
  6. გაააქტიურეთ პლაგინი: შედით თქვენი WordPress საიტის ადმინ-პანელში, გადადით “Plugins” გვერდზე და იპოვეთ ახალი პლაგინი სახელად “Alert Block”. დააჭირეთ “Activate”.

ყველაფერი მზადაა, რომ კოდის წერას შევუდგეთ!

ნაბიჯი 2: ფაილების სტრუქტურის დეტალური ანალიზი

მოდით, ახლა ჩავუღრმავდეთ ჩვენს ახალ alert-block საქაღალდეს და გავიგოთ, რომელი ფაილი რაზეა პასუხისმგებელი.

  • alert-block.php: ეს არის ჩვენი პლაგინის გული PHP-ის მხარეს. მისი მთავარი ამოცანაა, უთხრას WordPress-ს, რომ არსებობს ასეთი ბლოკი. ის იყენებს register_block_type_from_metadata ფუნქციას, რომელიც კითხულობს block.json ფაილს და არეგისტრირებს ბლოკს. ის ასევე პასუხისმგებელია საჭირო სკრიპტებისა და სტილების ჩატვირთვაზე.
  • block.json: ეს არის ბლოკის “პასპორტი”. WordPress-ი ამ ფაილიდან იგებს ყველაფერს ბლოკის შესახებ: მის სახელს, სათაურს, კატეგორიას, ხატულას და რაც მთავარია, მის ატრიბუტებს (ამაზე ცოტა ქვემოთ). ეს ფაილი არის “ერთადერთი ჭეშმარიტების წყარო” (Single Source of Truth) ბლოკის კონფიგურაციისთვის.
  • src/index.js: ეს არის JavaScript-ის სამყაროს საწყისი წერტილი. მისი მთავარი დანიშნულებაა ბლოკის რეგისტრაცია JavaScript-ის მხარეს registerBlockType ფუნქციის საშუალებით. ის აერთიანებს edit და save კომპონენტებს და გადასცემს მათ რეგისტრაციის ფუნქციას.
  • src/edit.js: აქ ხდება ნამდვილი მაგია. ეს არის React კომპონენტი, რომელიც განსაზღვრავს, თუ როგორ გამოიყურება და იმუშავებს ჩვენი ბლოკი რედაქტორში (ადმინ-პანელში). ყველაფერი, რასაც მომხმარებელი ხედავს და რასთანაც ინტერაქციაში შედის ბლოკის რედაქტირებისას, ამ ფაილში იწერება.
  • src/save.js: ესეც React კომპონენტია, მაგრამ მისი ამოცანა უფრო მარტივია: განსაზღვროს ის საბოლოო HTML სტრუქტურა, რომელიც შეინახება მონაცემთა ბაზაში და გამოჩნდება საიტის “front-end”-ზე. ის იღებს ბლოკის მონაცემებს და უბრალოდ “ახატავს” მათ HTML-ში.
  • src/editor.scss და src/style.scss: ეს არის SCSS (CSS-ის სუპერსეტი) ფაილები სტილებისთვის. editor.scss-ში დაწერილი სტილები ჩაიტვირთება მხოლოდ Gutenberg-ის რედაქტორში, ხოლო style.scss-ში დაწერილი სტილები ჩაიტვირთება როგორც რედაქტორში, ასევე საიტის “front-end”-ზე.

ნაბიჯი 3: ბლოკის “პასპორტის” შევსება (block.json)

დავიწყოთ ყველაზე მარტივით და სასიამოვნოთი — ჩვენი ბლოკის იდენტობის განსაზღვრით. გახსენით block.json ფაილი.

JSON

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "create-block/alert-block",
  "version": "0.1.0",
  "title": "შეტყობინების ბლოკი",
  "category": "text",
  "icon": "warning",
  "description": "მარტივი, სტილიზებული ბლოკი მნიშვნელოვანი შეტყობინების ან გაფრთხილების საჩვენებლად.",
  "keywords": ["alert", "notice", "message", "შეტყობინება", "გაფრთხილება"],
  "attributes": {
    "message": {
      "type": "string",
      "source": "html",
      "selector": "p"
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "alert-block",
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/index.css",
  "style": "file:./build/style-index.css"
}

რა გავაკეთეთ და რატომ:

  • "title", "description", "icon": ეს ვიზუალური ნაწილია. შევცვალეთ, რომ ბლოკი უფრო ცნობადი და ინფორმაციული იყოს რედაქტორში.
  • "keywords": დავამატეთ საკვანძო სიტყვები. როდესაც მომხმარებელი ბლოკის ძებნას დაიწყებს, ამ სიტყვების აკრეფისას ჩვენი ბლოკიც გამოჩნდება.
  • "attributes": ეს ყველაზე მნიშვნელოვანი სექციაა. ატრიბუტები არის ბლოკის “მეხსიერება”. ისინი განსაზღვრავენ, თუ რა ტიპის მონაცემებს ინახავს ბლოკი. ჩვენს შემთხვევაში, ჩვენ გვჭირდება ერთი მონაცემი: ტექსტური შეტყობინება.
    • შევქმენით ატრიბუტი სახელად message.
    • "type": "string": ვუთითებთ, რომ ამ ატრიბუტში შეინახება ტექსტი.
    • "source": "html" და "selector": "p": ეს ძალიან მნიშვნელოვანია. ჩვენ ვეუბნებით WordPress-ს, რომ ამ ატრიბუტის მნიშვნელობა უნდა “ამოიკითხოს” შენახული HTML-დან, კონკრეტულად კი <p> თეგის შიგთავსიდან.

ნაბიჯი 4: რედაქტორის ინტერფეისის აწყობა (src/edit.js)

აქ იწყება React-ის მაგია. ჩვენ ვქმნით ინტერაქტიულ კომპონენტს, რომელსაც მომხმარებელი რედაქტორში გამოიყენებს. გახსენით src/edit.js და შეცვალეთ მისი შიგთავსი სრულად:

JavaScript

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';

// Edit კომპონენტი იღებს რამდენიმე props-ს, ჩვენთვის მთავარია attributes და setAttributes
export default function Edit({ attributes, setAttributes }) {
  // useBlockProps არის ჰუკი, რომელიც ამატებს საჭირო კლასებს და ატრიბუტებს ჩვენი ბლოკის მთავარ ელემენტს
  const blockProps = useBlockProps();
  
  // ამოვიღოთ ჩვენი "message" ატრიბუტი attributes ობიექტიდან
  const { message } = attributes;

  // ეს ფუნქცია გამოიძახება ყოველ ჯერზე, როცა მომხმარებელი ტექსტს შეცვლის
  const onChangeMessage = (newMessage) => {
    // setAttributes არის ფუნქცია, რომელიც ანახლებს ჩვენი ბლოკის მონაცემებს
    setAttributes({ message: newMessage });
  };

  return (
    // {...blockProps} - ეს სინტაქსი ავტომატურად ამატებს ყველა საჭირო props-ს div-ზე
    <div {...blockProps}>
      <RichText
        tagName="p" // ვუთითებთ, რომ ეს ველი საბოლოოდ <p> თეგი უნდა იყოს
        value={message} // ველის ამჟამინდელი მნიშვნელობა
        onChange={onChangeMessage} // ფუნქცია, რომელიც გამოიძახება ცვლილებისას
        placeholder={__('დაწერეთ თქვენი შეტყობინება...', 'alert-block')}
      />
    </div>
  );
}

კოდის დეტალური ახსნა: React-ის კომპონენტები მუშაობენ props-ებზე (მონაცემები, რომლებიც გარედან შემოდის) და state-ზე (შიდა მონაცემები). Gutenberg-ის შემთხვევაში, ბლოკის მონაცემები (ჩვენი ატრიბუტები) props-ების სახით მოგვეწოდება.

  • attributes: ობიექტი, რომელიც შეიცავს ჩვენს ყველა ატრიბუტს ({ message: 'რაღაც ტექსტი' }). ჩვენ მას ვიყენებთ მონაცემების წასაკითხად.
  • setAttributes: ფუნქცია, რომელსაც ვიყენებთ ამ მონაცემების შესაცვლელად. როდესაც setAttributes-ს ვიძახებთ, ჩვენ ვეუბნებით WordPress-ს: “გთხოვ, შეინახე ეს ახალი მონაცემები და განაახლე ბლოკის ჩვენება”.
  • RichText: ეს არის მზა React კომპონენტი WordPress-ის ბიბლიოთეკიდან, რომელიც გვაძლევს ტექსტური რედაქტორის ფუნქციონალს. ის ბევრად უკეთესია, ვიდრე უბრალო <textarea>, რადგან მომხმარებელს შეუძლია ტექსტის გასქელება, დახრა და სხვა. მონაცემთა ცვლილებისას onChange ივენთი მუშაობს, რომელიც ჩვენს onChangeMessage ფუნქციას იძახებს, ის კი თავის მხრივ setAttributes-ს. ასე იკვრება წრე: მომხმარებლის მოქმედება -> onChange -> setAttributes -> მონაცემების განახლება -> კომპონენტის ხელახლა “დახატვა” ახალი მონაცემებით.

ნაბიჯი 5: ფრონტენდზე გამოსატანი HTML-ის განსაზღვრა (src/save.js)

ეს კომპონენტი ბევრად მარტივია. მისი ერთადერთი ამოცანაა, აიღოს შენახული ატრიბუტები და დააბრუნოს სუფთა, საბოლოო HTML. მას არ სჭირდება ინტერაქტიულობა. გახსენით src/save.js და შეცვალეთ კოდი:

JavaScript

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

// save კომპონენტი იღებს მხოლოდ attributes-ს, რადგან მას მონაცემების შეცვლა არ სჭირდება
export default function save({ attributes }) {
  const blockProps = useBlockProps.save();
  const { message } = attributes;

  return (
    // აქაც ვიყენებთ blockProps-ს, რომ WordPress-მა საჭირო კლასები დაამატოს
    <div {...blockProps}>
      <RichText.Content
        tagName="p"
        value={message}
      />
    </div>
  );
}

რატომ არის ეს ფაილი მნიშვნელოვანი? Gutenberg-ი იმახსოვრებს ამ ფუნქციის მიერ დაგენერირებულ HTML-ს. როდესაც თქვენ რედაქტორში ხსნით პოსტს, WordPress-ი ადარებს მონაცემთა ბაზაში შენახულ HTML-ს იმას, რასაც save ფუნქცია ამჟამად აგენერირებს. თუ ისინი არ ემთხვევა, მიიღებთ “Block validation failed” შეცდომას. ამიტომ, save ფუნქციაში ცვლილებების შეტანას სიფრთხილით უნდა მოვეკიდოთ.

ნაბიჯი 6: ვიზუალური სტილის დამატება

ჩვენი ბლოკი ფუნქციონალურია, მაგრამ არც ისე ლამაზი. მოდით, მივცეთ მას შეტყობინების ყუთის ვიზუალი.

  1. გახსენით src/editor.scss (მხოლოდ რედაქტორისთვის) და დაამატეთ:SCSS.wp-block-create-block-alert-block { border: 1px solid #f0b849; background-color: #fff8e1; padding: 1.2em; border-radius: 4px; }
  2. გახსენით src/style.scss (რედაქტორისთვის და საიტისთვის) და დაამატეთ იგივე კოდი:SCSS.wp-block-create-block-alert-block { border: 1px solid #f0b849; background-color: #fff8e1; padding: 1.2em; border-radius: 4px; margin-bottom: 1.5em; // დავამატოთ დაშორება სხვა ბლოკებისგან }

npm start პროცესი ავტომატურად გადააქცევს ამ SCSS კოდს CSS-ად და ჩატვირთავს საჭირო ადგილას.

ფინალი: შედეგის შემოწმება

დროა, ვნახოთ ჩვენი შრომის ნაყოფი.

  1. გადადით WordPress-ის რედაქტორში.
  2. დააჭირეთ “+” ღილაკს და ძებნაში ჩაწერეთ “შეტყობინება”. ჩვენი ბლოკი უნდა გამოჩნდეს თავისი ყვითელი “warning” ხატულით და აღწერით.
  3. დაამატეთ ბლოკი გვერდზე. თქვენ დაინახავთ ჩვენს მიერ შექმნილ სტილიზებულ ყუთს.
  4. დააჭირეთ და ჩაწერეთ ნებისმიერი ტექსტი, მაგალითად: “Gutenberg-ის ბლოკების შექმნა საინტერესო აღმოჩნდა!”.
  5. განაახლეთ პოსტი და ნახეთ ის საიტზე. თქვენი ბლოკი ზუსტად ისე უნდა გამოიყურებოდეს, როგორც რედაქტორში.

გილოცავთ! თქვენ ახლახან შექმენით არა უბრალოდ კოდის ნაწილი, არამედ WordPress-ის რედაქტორის სრულფასოვანი ბლოკი. თქვენ გაიგეთ, როგორ მუშაობს თანამედროვე WordPress-ის დეველოპმენტის პროცესი, როგორ უკავშირდება PHP და React ერთმანეთს და როგორ ინახება სტრუქტურირებული მონაცემები.

ეს მხოლოდ დასაწყისია. აქედან შეგიძლიათ დაიწყოთ ექსპერიმენტები:

  • დაამატეთ პარამეტრები: გამოიკვლიეთ <InspectorControls> კომპონენტი, რათა ბლოკის მარჯვენა პანელში დაამატოთ პარამეტრები, მაგალითად, ფონის ფერის ამრჩევი (<PanelColorSettings>).
  • დაამატეთ ტექსტის სწორების ფუნქცია: გამოიყენეთ <BlockControls> და <AlignmentToolbar> კომპონენტები, რათა მომხმარებელმა შეძლოს ტექსტის გასწორება მარცხნივ, მარჯვნივ ან ცენტრში.
  • შექმენით უფრო რთული ბლოკები: სცადეთ შექმნათ ბლოკი, რომელსაც ექნება სათაური, ტექსტი და ღილაკი — თითოეული მათგანი საკუთარი ატრიბუტით.

Gutenberg-ი და Full Site Editing-ი WordPress-ის მომავალია. ამ უნარების დაუფლება გაგიხსნით კარს ბევრად უფრო საინტერესო და მოთხოვნადი პროექტებისკენ. წარმატებებს გისურვებთ!

კატეგორია:

საფუძვლები,

ბოლო განახლება: აგვისტო 30, 2025

Banner