آموزش ساخت بلوک های ویرایشگر بلوک، قسمت 4


در این مرحله، ما در نیمه راه از طریق یک پیشرفت بزرگ به بلوکی که روی آن کار می کردیم، هستیم. ما توانایی داریم ویرایش کنید محتوای موجود در ویرایشگر، اما نمی‌توانیم آن را ذخیره کنیم و چون نمی‌توانیم آن را ذخیره کنیم، نمی‌توانیم آن را در قسمت جلویی مشاهده کنیم.

با این حال، اکنون در جایی هستیم که می‌توانیم داده‌های خود را ذخیره کنیم، آن‌ها را در قسمت جلویی رندر کنیم و همچنان مطمئن شویم که آنچه نویسنده می‌بیند همان چیزی است که بازدیدکنندگان می‌بینند.


همانطور که با بقیه سریال ها انجام داده ام، خواندن این قسمت های اول را توصیه می کنم زیرا آنها به شما کمک می کنند تا همه کارهایی را که برای رسیدن به این مرحله انجام دهید، سریع تر انجام دهید:

  1. ابزارهای مورد نیاز، ساختار پلاگین، وابستگی ها، بلوک فراداده
  2. The Backend، The Frontend، عملکرد، سبک ها، نسخه ی نمایشی کاری
  3. بلوک ویژگی ها، محتوای قابل ویرایش، اجزا، سبک های ویرایشگر

توجه داشته باشید که من هنوز مخزن GitHub برای این افزونه راه اندازی نشده است. من یک بار به نقطه خاصی برسیم، اما هنوز نه. و این به این دلیل است که فکر می‌کنم خواندن مطالب و اجرای آن در مقابل شبیه‌سازی و تغییر چند چیز می‌تواند به شما کمک کند تا برخی از این مطالب را سریع‌تر یاد بگیرید.

به هر حال پست قبلی را با این جمله تمام کردم:

ما قصد داریم پوشش دهیم

  • چگونه محتوا را ذخیره کنیم،
  • آن را در قسمت جلویی رندر کنید

و این قسمت اولیه را به پایان می رساند.

پس این کاری است که ما می خواهیم انجام دهیم.

مسدود کردن بلوک های ویرایشگر: ذخیره محتوا

در این مرحله، شما باید در هر دو نظر من در مورد هدف از آن به خوبی آگاه باشید edit و save مواد و روش ها. در پست قبلی به موارد قبلی پرداختیم. در این پست، ما بر روی دومی تمرکز خواهیم کرد.

اما قبل از انجام این کار، چند مفهوم کلیدی برای درک قبل از اجرای ساده عملکرد save عملکرد.

💾 ذخیره داده ها

به یاد بیاورید از قبل در این سری که ما save تابع در حال حاضر به شکل زیر است:

save: () => {
    const blockProps = useBlockProps.save();
    return (
        <div {...blockProps}>
            This is content from the frontend.
        </div>
    );
}

و تمام کاری که انجام می دهد این است که به سادگی ویژگی های بلوک را بنویسد div Container به قسمت جلویی، و رشته مشخص شده را در بلوک رندر می کند. اما از آخرین پست، اکنون می‌توانیم محتوای بلوک را ویرایش کنیم. بنابراین کاری که اکنون می‌خواهیم انجام دهیم این است که نه تنها اطلاعات را سریالی کنیم، بلکه آن‌ها را نیز ارائه کنیم. و اگر چه save تابع هر دوی اینها را ممکن می‌سازد، اجازه دهید ابتدا با ساده شروع کنیم صرفه جویی در اطلاعات.

برای انجام این کار، ما نیاز به پاس کردن داریم attributes به save تابع تا بتوانیم در داخل تابع به آنها دسترسی داشته باشیم. به یاد داشته باشید که ویژگی هایی که در پست قبلی تعریف کردیم به این صورت است:

attributes: {
    content: {
        type: 'string',
        source: 'text',
        selector: 'input'
    },
}

و بنابراین save اکنون امضای تابع باید به شکل زیر باشد:

save: ({ attributes }) => {
    // TODO...
}

توجه داشته باشید از داده های JSON بالا، ما یک content ویژگی. پس بیایید ابتدا با جایگزین کردن رشته محتوا در شروع کنیم save عملکرد با attributes.content و ببینید چه اتفاقی می افتد کد باید به شکل زیر باشد:

save: ({ attributes }) => {
    const blockProps = useBlockProps.save();
    return (
        <div {...blockProps}>
            {attributes.content}
        </div>
    );
}

اجرا کن npm run build در ریشه پروژه خود قرار دهید و سپس ویرایشگری را که بلوک شما را دارد، رفرش کنید. احتمالاً پیامی در مورد اینکه چگونه به آن نیاز دارید خواهید دید تلاش برای بازیابی بلوک و این صرفاً به این دلیل است که ما دارایی ها را بازسازی کرده ایم. روی دکمه کلیک کنید و سپس بلوک دقیقاً مانند زمانی که ما آن را ترک کردیم ظاهر شود.

حالا ادامه دهید و مقداری محتوا را در بلوک تایپ کنید. کلیک ذخیره پیش نویس و سپس بر روی آن کلیک کنید پیش نمایش در یک برگه جدید. این پنجره را در یک برگه جدید باز می کند و شما باید محتوایی را که تایپ کرده اید مشاهده کنید (اگرچه ممکن است سبک آن به همان صورت نباشد – که بعداً ارائه می شود).

توجه داشته باشید که داده ها ذخیره شده است. آسان است، درست است؟ ما می‌توانیم با نگاه کردن به پایگاه داده یک قدم جلوتر برویم تا ببینیم واقعاً چه چیزی نوشته شده است.

  1. جلوی دیتابیس خود را باز کنید
  2. حرکت به posts جدول
  3. سپس یک پرس و جو را بر اساس شناسه پست یا عنوان پست انجام دهید تا بتوانید محتوا را بررسی کنید.

چیزی که باید ببینید داده های پست به همراه متن نوشته شده در بلوک سفارشی است که روی آن کار کرده ایم:

و اینجاست که وردپرس تمام قابلیت های داخلی برای ذخیره محتوا در پایگاه داده را دارد.

🎨 به فرانت اند استایل بدهید

اکنون کاری که ما باید انجام دهیم این است که مطمئن شویم فرانت اند شبیه به باطن است که تا حدودی ناخوشایند است زیرا تغییر بک اند همان چیزی است که وجود دارد. باعث می شود ما این کار را انجام دهیم (از پست قبلی به یاد بیاورید که دلیل اینکه ما مجبور شدیم استایل ها را تغییر دهیم به دلیل این است TextControl).

به طور خلاصه، ما باید آن را تغییر دهیم font-family، font-size، و padding. همچنین باید a را اضافه کنیم div در اطراف محتوا در قسمت جلویی ما می‌توانیم، و بعداً این را تغییر خواهیم داد، اما در حال حاضر این ماهیت تکراری توسعه بلوک را نشان می‌دهد.

در این مرحله، راه‌هایی وجود دارد که می‌توانید از طریق آن‌ها تغییرات خود را اجرا کنید. برای من، من طرفدار این هستم که ابزارهای توسعه دهنده را در هر مرورگری که استفاده می‌کنم راه‌اندازی کنم (من طرفدار Brave یا Firefox هستم) و سپس عناصر مورد نیاز برای استایل را بررسی کنم.

بنابراین اولین کاری که می خواهم انجام دهم این است که the را تغییر دهم aave عملکرد یک بار دیگر برای اضافه کردن یک لفاف در اطراف {attributes.content} به طوری که برخی از سبک های موضوع مورد استفاده من را به ارث می برد.

save: ({ attributes }) => {
    const blockProps = useBlockProps.save();
    return (
        <div {...blockProps}>
            <div>{attributes.content}</div>
        </div>
    );
}

بعد، من قصد دارم سبک های زیر را به سبک خود اضافه کنم index.scss فایل:

.entry-content .wp-block-tm-tm-block-demo div {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    font-size: 13px;
    padding: 0 0 1em;
}

به دلیل اینکه مطمئن می شوم بلوک را در داخل هدف قرار می دهم، توجه کنید entry-content انتخابگر به این دلیل است که من می خواهم فقط در قسمت جلویی اعمال شود. مطمئناً، با توجه به برخی از کارهایی که API ارائه می‌کند، راه‌هایی وجود دارد که می‌توانیم این کار را پاکسازی کنیم یا این کار را به روشی متفاوت انجام دهیم، اما در حال حاضر، این ما را یک قدم به آنچه در backend می‌بینیم نزدیک‌تر می‌کند:

به آنچه در قسمت جلویی می بینیم:

برای ما خوش شانس است، اگر بخواهیم ویژگی هایی را معرفی کنیم که به کاربران امکان می دهد تنها رنگ های خود را از داخل ویرایشگر انتخاب کنند، کارهای بیشتری می توانیم انجام دهیم.

⏭️ TODO

مکان‌های مختلفی وجود دارد که می‌توانیم از اینجا برویم، مخصوصاً زیرا مربوط به استایل کردن بلوک ما و معرفی ویژگی‌هایی برای کاربران است تا آنچه را که می‌بینند سفارشی کنند.

بنابراین با شروع مقاله بعدی، دقیقاً به آن خواهیم پرداخت. احتمالاً نیازمند حذف برخی از کارهایی است که انجام داده‌ایم، اما همچنین ویژگی‌های جدیدی را در ویرایشگر بلاک و همچنین کار با ویژگی‌های وردپرس که ما را ملزم می‌کند گزینه‌هایی را که داده‌ها را در جدول ابرداده‌های پست ذخیره می‌کنند در معرض نمایش بگذاریم، معرفی کنیم.

اما با توجه به API هایی که وردپرس در اختیار ما قرار می دهد، همه اینها ممکن است.

📚 مراجع


– تهیه و ترجمه توسط wordpress-templates.ir

سفارش طراحی سایت به وی تی!