پویاتر کردن 43 درصد وب با API تعاملی WordPress – WordPress.com News

ایجاد تجربیات وب سایت غنی، جذاب و تعاملی راهی ساده برای شگفت زده کردن، خوشحال کردن و جلب توجه خوانندگان و کاربران وب سایت است. تعامل پویا مانند جستجوی فوری، مدیریت فرم، و ناوبری “برنامه مانند” سمت مشتری که در آن عناصر می توانند در مسیرها باقی بمانند، همگی بدون بارگذاری مجدد کامل صفحه، می توانند وب را به مکانی کارآمدتر و جالب برای همه تبدیل کنند.

اما ایجاد این تجربیات در وردپرس همیشه ساده‌ترین یا ساده‌ترین راه نبوده است، و اغلب به راه‌اندازی و نگهداری چارچوب جاوا اسکریپت پیچیده نیاز دارد.

در حال حاضر، با Interactivity API، توسعه دهندگان وردپرس یک راه استاندارد برای انجام این کار دارند که همگی مستقیماً در هسته ساخته شده اند.

Interactivity API به عنوان یک افزونه آزمایشی در اوایل سال 2022 شروع شد، در مارس 2023 به یک پیشنهاد رسمی تبدیل شد و در نهایت با انتشار وردپرس 6.5 در 2 آوریل 2024 در هسته وردپرس ادغام شد. این یک راه ساده تر و استاندارد شده برای توسعه دهندگان وردپرس برای ایجاد تجربیات کاربری غنی و تعاملی با بلوک های خود در قسمت جلویی فراهم می کند.

ELI5: Interactivity API و Image Block

چندین بلوک اصلی وردپرس، از جمله بلوک‌های Query Loop، Image و Search قبلاً API تعاملی را پذیرفته‌اند. بلاک Image، به ویژه، یک راه عالی برای نشان دادن Interactivity API در عمل است.

در هسته خود، بلوک های تصویر به شما امکان می دهد یک تصویر را به یک پست یا صفحه اضافه کنید. هنگامی که کاربر روی یک تصویر در یک پست یا صفحه کلیک می کند، Interactivity API یک لایت باکس را راه اندازی می کند که یک نسخه با وضوح بالا از تصویر را نشان می دهد.

رندر بلوک Image سمت سرور انجام می شود. تعامل سمت مشتری، مدیریت تغییر اندازه و باز کردن لایت باکس، اکنون با API جدید همراه با وردپرس انجام می شود. شما می توانید تعامل سمت سرویس گیرنده را به سادگی با اضافه کردن آن متصل کنید wp-on--click directive به عنصر تصویر، ارجاع به showLightbox اقدام در view.js.

ممکن است بگویید، “اما من به راحتی می توانم این کار را با جاوا اسکریپت انجام دهم!” با Interactivity API، کد فشرده و اعلانی است، و شما زمینه (وضعیت محلی) را برای مدیریت لایت باکس، تغییر اندازه، عوارض جانبی و همه کارهای مورد نیاز در اینجا در شی فروشگاه دریافت می کنید.

actions: {
			showLightbox() {
				const ctx = getContext();

				// Bails out if the image has not loaded yet.
				if ( ! ctx.imageRef?.complete ) {
					return;
				}

				// Stores the positons of the scroll to fix it until the overlay is
				// closed.
				state.scrollTopReset = document.documentElement.scrollTop;
				state.scrollLeftReset = document.documentElement.scrollLeft;

				// Moves the information of the expaned image to the state.
				ctx.currentSrc = ctx.imageRef.currentSrc;
				imageRef = ctx.imageRef;
				buttonRef = ctx.buttonRef;
				state.currentImage = ctx;
				state.overlayEnabled = true;

				// Computes the styles of the overlay for the animation.
				callbacks.setOverlayStyles();
			},
...

جزئیات پیاده سازی سطح پایین تر، مانند همگام نگه داشتن سمت سرور و مشتری، فقط کار می کنند. توسعه دهندگان دیگر نیازی به حساب کاربری آنها ندارند.

این قابلیت با استفاده از جاوا اسکریپت وانیلی، با انتخاب عنصر از طریق انتخابگر پرس و جو، خواندن ویژگی های داده و دستکاری DOM امکان پذیر است. اما بسیار کمتر ظریف است، و تا به حال، روش استانداردی در وردپرس برای مدیریت رویدادهای تعاملی مانند این وجود نداشته است.

با Interactivity API، توسعه دهندگان یک راه قابل پیش بینی برای ارائه تعامل به کاربران در قسمت جلویی دارند. لازم نیست نگران کدهای سطح پایین برای افزودن تعامل باشید. در وردپرس وجود دارد تا بتوانید از امروز استفاده کنید. باتری ها هستند مشمول.

Interactivity API چه تفاوتی با Alpine، React یا Vue دارد؟

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

در هسته خود، Interactivity API یک کتابخانه سبک وزن جاوا اسکریپت است که روشی را که توسعه دهندگان می توانند عناصر HTML تعاملی را در سایت های وردپرس ایجاد کنند، استاندارد می کند.

ماریو سانتوس، یک توسعه‌دهنده در تیم اصلی وردپرس، در پیشنهاد Interactivity API نوشت: «با یک استاندارد، وردپرس می‌تواند حداکثر پیچیدگی را از توسعه‌دهنده جذب کند، زیرا بیشتر موارد مورد نیاز برای ایجاد یک بلوک تعاملی را انجام می‌دهد.»

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

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

پنج هدف تصمیمات تیم توسعه اصلی را هنگام ساخت API شکل دادند:

1. Block-first و PHP-first: اولویت بندی بلوک ها برای ساخت سایت و رندر سمت سرور برای سئو و عملکرد بهتر. ترکیب بهترین ها برای تجربه کاربر و توسعه دهنده.
2. سازگار با عقب: اطمینان از سازگاری با تم های کلاسیک و بلوک و به صورت اختیاری با سایر چارچوب های جاوا اسکریپت، اگرچه توصیه می شود از API به عنوان روش اصلی استفاده کنید. همچنین با قلاب ها و بین المللی سازی کار می کند.
3. اظهاری و واکنشی: استفاده از کد اعلامی برای تعریف تعاملات، گوش دادن به تغییرات در داده ها و به روز رسانی تنها بخش های مرتبط DOM بر این اساس.
4. مجری: بهینه سازی عملکرد زمان اجرا برای ارائه یک تجربه کاربری سریع و سبک.
5. جاوا اسکریپت کمتری ارسال کنید: با ارائه یک چارچوب مشترک که بلوک ها می توانند مجدداً از آن استفاده کنند، مقدار کلی جاوا اسکریپت ارسال شده در صفحه را کاهش دهید. بنابراین هرچه بیشتر بلوک ها از Interactivity API استفاده کنند، جاوا اسکریپت کمتری ارسال می شود.

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

Interactivity API در مقابل Alpine

Interactivity API چند شباهت به Alpine دارد—یک کتابخانه سبک وزن جاوا اسکریپت که به توسعه دهندگان اجازه می دهد تا تعاملاتی را در پروژه های وب خود ایجاد کنند که اغلب در پروژه های WordPress و Laravel استفاده می شود.

مشابه Alpine، Interactivity API مستقیماً از دستورالعمل ها در HTML استفاده می کند و هر دو به خوبی با PHP بازی می کنند. بر خلاف Alpine، Interactivity API برای ادغام یکپارچه با وردپرس طراحی شده است و پشتیبانی از رندر سمت سرور دستورالعمل های آن.

با استفاده از API تعاملی، می توانید به راحتی از سرور در PHP و سپس تعامل سمت مشتری را اضافه کنید. این باعث تکرار کمتر می شود و پشتیبانی آن در هسته وردپرس منجر به تصمیمات معماری کمتری در حال حاضر توسط توسعه دهندگان می شود.

بنابراین، در حالی که Alpine و Interactivity API اهداف تقریباً مشابهی دارند – که این کار را برای توسعه دهندگان وب آسان می کند تا عناصر تعاملی را به یک صفحه وب اضافه کنند – Interactivity API حتی برای توسعه دهندگان وردپرس کاربردی تر است.

Interactivity API در مقابل React و Vue

بسیاری از توسعه‌دهندگان هنگام افزودن تعامل به سایت‌های وردپرس، React را انتخاب کرده‌اند، زیرا در پشته توسعه وب مدرن، React راه‌حلی برای مدیریت شفاف تعامل DOM است. این قلمرو آشناست و ما عادت داریم از React و JSX هنگام اضافه کردن بلوک‌های سفارشی برای گوتنبرگ استفاده کنیم.

بارگیری React در سمت کلاینت می تواند انجام شود، اما تصمیمات زیادی برای شما باقی می گذارد: «چگونه باید مسیریابی را مدیریت کنم؟ چگونه با زمینه بین PHP و React کار کنم؟ در مورد رندر سمت سرور چطور؟

بخشی از هدف در توسعه Interactivity API نیاز به این بود تا حد امکان کمتر جاوا اسکریپت بنویسید، کار سنگین را به PHP واگذار می کنیم و جاوا اسکریپت را فقط در صورت لزوم ارسال می کنیم.

تیم اصلی همچنین مشکلاتی را در مورد نحوه عملکرد این چارچوب ها در ارتباط با وردپرس مشاهده کردند. توسعه‌دهندگان می‌توانند از چارچوب‌های جاوا اسکریپت مانند React و Vue برای رندر کردن بلوکی در فرانت‌اند که در PHP توسط سرور ارائه می‌کنند، استفاده کنند، اما این نیاز به تکرار منطقی دارد و خطر قرار گرفتن در معرض مشکلات مربوط به قلاب‌های وردپرس را به دنبال دارد.

به این دلایل، در میان سایر دلایل، تیم اصلی Preact را ترجیح می‌دهد – یک چارچوب رابط کاربری کوچک‌تر که برای دانلود و اجرا بدون به خطر انداختن عملکرد، به جاوا اسکریپت کمتری نیاز دارد. مانند React با کالری کمتر به آن فکر کنید.

Luis Herranz، یکی از مشارکت‌کنندگان هسته وردپرس از Automattic، جزئیات بیشتری را در مورد استفاده Alpine vs Interactivity API از Preact با لایه نازکی از دستورالعمل‌ها در بالای آن در این نظر در مورد پیشنهاد اصلی بیان می‌کند.

Preact فقط در صورتی بارگیری می شود که منبع صفحه دارای یک بلوک تعاملی باشد، به این معنی که تا زمانی که مورد نیاز نباشد بارگیری نمی شود و با ایده ارسال تا حد امکان جاوا اسکریپت کمتر (و حمل و نقل) مطابقت دارد نه جاوا اسکریپت به عنوان پیش فرض).

در پیشنهاد اولیه Interactivity API، می‌توانید خلاصه و مقایسه چندین فریم‌ورک و چرایی انتخاب Preact نسبت به سایرین را مشاهده کنید.

Interactivity API جدید چه چیزی را در اختیار توسعه دهندگان وردپرس قرار می دهد؟

علاوه بر ارائه یک روش استاندارد برای ارائه عناصر تعاملی در سمت مشتری، Interactivity API همچنین دستورالعمل‌ها و راه ساده‌تری را برای ایجاد یک شی فروشگاه برای مدیریت وضعیت، عوارض جانبی و اقدامات به توسعه‌دهندگان ارائه می‌دهد.

بخشنامه ها

دستورالعمل ها، مجموعه ای خاص از ویژگی های داده، به شما امکان می دهند نشانه گذاری HTML را گسترش دهید. می‌توانید داده‌ها را بین بلوک‌های ارائه‌شده در سمت سرور و سمت کلاینت به اشتراک بگذارید، مقادیر پیوند، رویدادهای کلیک را اضافه کنید، و موارد دیگر. مرجع Interactivity API تمام دستورالعمل های موجود را فهرست می کند.

این دستورالعمل ها معمولاً در بلوک ها اضافه می شوند render.php فایل، و از همه APIهای وردپرس، از جمله اقدامات، فیلترها و APIهای ترجمه اصلی پشتیبانی می کنند.

در اینجا فایل رندر یک بلوک نمونه است. به رویداد کلیک توجه کنید (data-wp-on--click="actions.toggle") و اینکه چگونه ارزش صفات گسترش یافته با آریا را از طریق دستورات متصل می کنیم.

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive="create-block"
	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'my-interactive-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'My Interactive Block - hello from an interactive block!', 'my-interactive-block' );
		?>
	</p>
</div>

آیا نیاز به به روز رسانی پویا متن داخلی یک عنصر دارید؟ Interactivity API به شما امکان استفاده را می دهد data-wp-text روی یک عنصر، درست مثل اینکه می توانید از v-text در Vue استفاده کنید.

شما می توانید با استفاده از یک مقدار به یک بولی یا رشته ای متصل شوید wp-bind– یا با استفاده از یک رویداد کلیکی را متصل کنید data-wp-on–click روی عنصر این بدان معنی است که می توانید PHP و HTML بنویسید و دستورالعمل ها را برای افزودن تعامل به روشی اعلامی بپاشید.

وضعیت رسیدگی، عوارض جانبی و اقدامات

مرحله دوم افزودن تعاملی ایجاد یک فروشگاه است که معمولاً در شما انجام می شود view.js فایل. در فروشگاه، به همان زمینه‌ای که در سایت خود دارید دسترسی خواهید داشت render.php فایل.

در شی فروشگاه، اقداماتی را تعریف می کنید که به تعاملات کاربر پاسخ می دهند. این کنش‌ها می‌توانند زمینه محلی یا وضعیت جهانی را به‌روزرسانی کنند، که سپس عنصر HTML متصل را دوباره ارائه و به‌روزرسانی می‌کند. شما همچنین می توانید عوارض جانبی / تماس های تلفنی را تعریف کنید، که شبیه به اقدامات هستند، اما به جای اقدامات مستقیم کاربر، به تغییرات حالت پاسخ می دهند.

import { store, getContext } from '@wordpress/interactivity';

store( 'create-block', {
	actions: {
		toggle: () => {
			const context = getContext();
			context.isOpen = ! context.isOpen;
		},
	},
	callbacks: {
		logIsOpen: () => {
			const { isOpen } = getContext();
			// Log the value of `isOpen` each time it changes.
			console.log( `Is open: ${ isOpen }` );
		},
	},
} );

خودت انرا امتحان کن

Interactivity API آماده تولید است و در حال حاضر در WordPress.com در حال اجرا است! با هر طرح WordPress.com، به بلوک های اصلی ساخته شده در بالای Interactivity API دسترسی خواهید داشت.

اگر می‌خواهید بلوک‌های تعاملی خود را بسازید، می‌توانید با اجرای کد زیر در ترمینال خود، یک بلوک تعاملی ایجاد کنید:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template 

این به شما یک بلوک تعاملی مثال می‌دهد، با دستورالعمل‌ها و مدیریت وضعیت.

سپس می توانید با استفاده از این به صورت محلی بازی کنید wp-env، با استفاده از یک سایت استیجینگ، یا با آپلود افزونه مستقیماً در سایت خود با اجرای طرح WordPress.com واجد شرایط افزونه.

اگر می خواهید یک تجربه یکپارچه بین راه اندازی برنامه نویس محلی خود و سایت WordPress.com خود داشته باشید، سعی کنید از آن با ویژگی جدید GitHub Deployments استفاده کنید! توسعه بلوک های سفارشی بهترین مورد استفاده برای این ابزار جدید است.

بهترین راه برای یادگیری چیزهای جدید، شروع ساختن است. برای شروع کار، ممکن است منابع زیر را نقطه شروع خوبی بیابید: