Gutenberg-ის რედაქტორი.

🚀 Gutenberg არის WordPress-ის თანამედროვე რედაქტორი, რომელიც ბლოკებზე დაფუძნებულ რედაქტირებას გვთავაზობს. ის ცვლის კონტენტის შექმნის გზას, ხდის მას უფრო ვიზუალურს და მოქნილს.

💡 საინტერესო ფაქტი: Gutenberg-ი დასახელებულია იოჰანეს გუტენბერგის პატივსაცემად, რომელმაც გამოიგონა საბეჭდი დაზგა.

🎯 ძირითადი კონცეფციები

1. 📦 რა არის ბლოკი?

ბლოკი არის კონტენტის დამოუკიდებელი ელემენტი, რომელსაც აქვს:

• საკუთარი სტილი
• ქცევა
• კონფიგურაცია

2. 🔧 ბლოკების ტიპები:

სტანდარტული ბლოკები:

• 📝 პარაგრაფი
• 🖼️ სურათი
• 📊 გალერეა
• 📹 ვიდეო
• 📋 სია

რთული ბლოკები:

• 🎯 ღილაკები
• 🌅 მედია და ტექსტი
• 🎨 სვეტები
• 📱 ჯგუფი

💻 ბლოკების შექმნა

1. 🛠️ საბაზისო ბლოკის შექმნა

registerBlockType('namespace/block-name', {
    title: 'ბლოკის სახელი',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: function(props) {
        // რედაქტირების ინტერფეისი
    },
    save: function(props) {
        // შენახვის ლოგიკა
    },
});

2. 🎨 სტილიზაცია

CSS კლასები:

.wp-block-namespace-block-name {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 5px;
}

3. ⚙️ ატრიბუტები

attributes: {
    backgroundColor: {
        type: 'string',
        default: '#ffffff'
    },
    textColor: {
        type: 'string',
        default: '#000000'
    },
    content: {
        type: 'string',
        source: 'html',
        selector: 'p'
    }
}

🎨 კასტომიზაცია

1. 🎯 ინსპექტორის კონტროლები

ფერის არჩევა:

<PanelBody title="ფერის პარამეტრები">
    <ColorPalette
        value={backgroundColor}
        onChange={(color) => setBackgroundColor(color)}
    />
</PanelBody>

2. 📐 ზომის კონტროლები

<RangeControl
    label="სიგანე"
    value={width}
    onChange={(value) => setWidth(value)}
    min={0}
    max={100}
/>

3. 🔤 ტიპოგრაფია

<FontSizePicker
    fontSizes={[
        { name: 'პატარა', size: 12 },
        { name: 'საშუალო', size: 16 },
        { name: 'დიდი', size: 24 }
    ]}
    value={fontSize}
    onChange={(newFontSize) => setFontSize(newFontSize)}
/>

💡 საუკეთესო პრაქტიკები

1. 🎯 ბლოკების ორგანიზება

რეკომენდებული სტრუქტურა:

blocks/
  ├── my-block/
  │   ├── index.js
  │   ├── editor.scss
  │   ├── style.scss
  │   └── components/
  └── another-block/

2. 📱 რესპონსიული დიზაინი

.wp-block-namespace-block-name {
    @media (max-width: 768px) {
        padding: 10px;
    }
    @media (max-width: 480px) {
        padding: 5px;
    }
}

3. ⚡ პერფორმანსი

ოპტიმიზაციის რჩევები:

• გამოიყენეთ ლეიზი ლოადინგი
• დააოპტიმიზეთ სურათები
• მინიმიზებული CSS/JS

🎓 რჩევები ეფექტური გამოყენებისთვის

1. 🎯 კლავიატურის მალსახმობები

• / – ახალი ბლოკის ჩამატება
• ⌘+A – ყველა ბლოკის მონიშვნა
• ⌘+Z – უკან დაბრუნება
• ⌘+C – კოპირება
• ⌘+V – ჩასმა

2. 🔄 რეიუზაბელური ბლოკები

შექმნის პროცესი:

1. შექმენით ბლოკი
2. დააჭირეთ სამ წერტილს
3. აირჩიეთ “Add to Reusable blocks”
4. მიანიჭეთ სახელი

3. 📱 მობილური ადაპტაცია

• გამოიყენეთ ფლექსიბელური ზომები
• ტესტირება სხვადასხვა ეკრანზე
• მობილური პრევიუ რეჟიმი

🛠️ ხშირი პრობლემების გადაჭრა

1. ბლოკი არ ჩნდება

✅ გადასამოწმებელი:

• სკრიპტები სწორად არის ჩართული
• namespace უნიკალურია
• კონსოლში შეცდომები

2. სტილები არ მუშაობს

🔍 შესამოწმებელი:

• CSS ფაილები სწორად არის ჩართული
• სელექტორები სწორია
• კეში გასუფთავებულია

📈 Gutenberg-ის მომავალი

მოსალოდნელი სიახლეები:

• 🎯 ნავიგაციის ბლოკების გაუმჯობესება
• 🎨 მეტი დიზაინის ინსტრუმენტი
• 📱 უკეთესი მობილური გამოცდილება

📌

Gutenberg არის WordPress-ის მომავალი. მისი ეფექტური გამოყენება მნიშვნელოვნად აუმჯობესებს კონტენტის შექმნის პროცესს და საიტის ვიზუალურ მხარეს.

💡 მთავარი რჩევა: დაიწყეთ მარტივი ბლოკებით და თანდათანობით გადადით უფრო რთულ ფუნქციონალზე.

🎯 სამოქმედო გეგმა:

1. შეისწავლეთ ძირითადი ბლოკები
2. შექმენით საკუთარი ბლოკები
3. გამოიყენეთ კასტომიზაციის შესაძლებლობები
4. რეგულარულად გაეცანით სიახლეებს