إضافة أقسام إلى الشريط الجانبي للمحرر

يوفر ووردبريس واجهة برمجية من خلال JavaScript لتمكين إضافة اللوحات إلى الشريط الجانبي. يعد تسجيل مكون إضافي للشريط الجانبي سهلاً عن طريق استخدام الدالة registerPlugin المضمنة داخل ووردبريس كما يلي:

import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { registerPlugin } from '@wordpress/plugins';
import { more } from '@wordpress/icons';

const Component = () => (
	<>
		<PluginSidebarMoreMenuItem
			target="sidebar-name"
		>My Sidebar</PluginSidebarMoreMenuItem>
		<PluginSidebar
			name="sidebar-name"
			title="My Sidebar"
		>Content of the sidebar</PluginSidebar>
	</>
);

registerPlugin( 'plugin-name', {
	icon: more,
	render: Component,
	scope: 'my-page',
} );

ستلاحظ أننا نستخدم صيغة JSX. هذا لأن حزم ووردبريس عبارة عن غلاف حول React.

قبل التشغيل، نحتاج إلى تثبيت الحزم المطلوبة باستخدام:

npm install @wordpress/plugins --save

يمكنك الآن إنشاء الكود الخاص بك على غرار إنشاء تطبيق React باستخدام:

npm run build

سيكون الرمز المترجم جاهزًا. انقله إلى مجلد الأصول في مجلد WordPress الخاص بك. في الخطوة الأخيرة، نحتاج إلى تضمين هذا الرمز في صفحة المحرر. استخدم الإجراء "enqueue_block_editor_assets" هكذا:

<?php

add_action( 'enqueue_block_editor_assets', 'x_editor_assets' );
function x_editor_assets() {
	wp_enqueue_script( 'x-editor-script', plugins_url( '/assets/js/build.js', __FILE__ ) );
}

الآن لديك لوحة الشريط الجانبي المخصصة الخاصة بك. يمكنك إضافة ما تريد داخل اللوحة. في حالتك، أضف حقل إدخال للون داخل مكون "PluginSidebar" بالشكل التالي:

<PluginSidebar>
	<PanelBody>
		<TextControl label="First Color" />
		<TextControl label="Second Color" />
	</PanelBody>
</PluginSidebar>

الآن لديك القدرة على تحديد لونين للتدرج اللوني الخاص بك. باستخدام خدمات WordPress REST، يمكنك إرسال هذه القيم إلى قاعدة البيانات الخاصة بك كقيم Meta للصورة. وبعد ذلك يمكنك تحميل هذه الألوان على الواجهة الأمامية وتطبيق اللونين باستخدام CSS. يتضمن WordPress أيضًا على حزمة لطلبات AJAX للتواصل باستخدام REST:

npm install @wordpress/data --save
npm install @wordpress/compose --save

import { withDispatch, withSelect } from '@wordpress/data';

const SidebarMeta = compose(
	// نستخدم "withSelect" لقراءة القيم من قاعدة البيانات
	withSelect(select => ({
		// قيمة اللون هنا
		value: select('core/editor').getEditedPostAttribute('meta')['color_meta_key']
	})),
	// نستخدم "withDispatch" لكتابة القيم إلى قاعدة البيانات
	withDispatch(dispatch => ({
		write: color => {
			dispatch('core/editor').editPost({ meta: { 'color_meta_key': color } });
		}
	}))
);