كيفية جلب post meta في محرر المكونات في ووردبريس

لعرض Post Meta في محرر ووردبريس Gutenberg، يمكن أن نستخدم خاصية useEntityProp، في هذا المقتطف سأوضح كيفية القيام بذلك.

تفعيل الروابط الدائمة

تأكد أن تكون تركيبة الرابط الدائم عنوان المقالة أو أي تركيبة باستثناء تركيبة الرابط الدائم العادي.

المنشور يجب أن يدعم Custom Fields

تأكد أن نوع المنشور الذي تحاول أن تضيف له meta يدعم custom fields. وخصوصاً إذا كان هذا المنشور منشور مخصص وليس منشور افتراضي في ووردبريس مثل post.

add_action('init', 'lwn_recipe_init');
function lwn_recipe_init()
{

  $args = [
    'labels' => [
      'name' => esc_html__('LWN Recipes', 'lwn-recipe'),
    ],
    'public' => true,
    'supports' => [
      'custom-fields', /* <<<<< custom-fields supported */
      'title',
      'editor',
      'thumbnail',
      'comments',
      'excerpt',
    ],
    'taxonomies' => ['lwn_recipe_type'],
    'has_archive' => true,
    'show_in_rest' => true,
    'rewrite' => ['slug' => 'recipe'],
  ];
  register_post_type('lwn_recipe', $args);
}
PHP

فعّل show in rest

تأكد أن show_in_rest مفعلة في المنشور المخصص، هذا ضروري لعرض المنشور في محرر وردبريس الجديد أي يعني محرر المكونات Gutenberg.

add_action('init', 'lwn_recipe_init');
function lwn_recipe_init()
{

  $args = [
    'labels' => [
      'name' => esc_html__('LWN Recipes', 'lwn-recipe'),
    ],
    'public' => true,
    'supports' => [
      'custom-fields', /* <<<<< custom-fields supported */
      'title',
      'editor',
      'thumbnail',
      'comments',
      'excerpt',
    ],
    'taxonomies' => ['lwn_recipe_type'],
    'has_archive' => true,
    'show_in_rest' => true, /* <<<<< show_in_rest enabled*/
    'rewrite' => ['slug' => 'recipe'],
  ];
  register_post_type('lwn_recipe', $args);
}
PHP

كيفية استخدام useEntityProp

الآن يمكنك استخدام useEntityProp في المكون الخاص بك.

// edit.js in the block
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import { InspectorControls } from '@wordpress/block-editor';;
import { Panel, PanelBody } from '@wordpress/components';
import { RangeControl } from '@wordpress/components';
import { SelectControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';

import './editor.scss';

export default function Edit({ attributes, setAttributes, context }) {
	// Get postId & postType from context
	const { postId } = context;
	const { postType } = context;


	// Get meta value from database
	const [meta, setMeta] = useEntityProp('postType', postType, 'meta', postId);
	
	const metaKey = 'prep_time';
	const metaValue = meta[metaKey];

	return (
		<>
			<InspectorControls>
				<Panel header={__('Recipe Settings', 'lwn-recipe')}>
					<PanelBody
						title={__('Recipe Time', 'lwn-recipe')}
						initialOpen={false}
					>
						<RangeControl
							label={__('Preparation Time (Minutes)', 'lwn-recipe')}
							value={meta[metaKey]}
							onChange={(value) =>
								setMeta({ ...meta, [metaKey] : value })
							}
							min={1}
							max={60 * 24}
						/>
	
					</PanelBody>

				</Panel>
			</InspectorControls>
			<div {...blockProps}>
				<div className="wp-block-lwn-recipe-lwn-recipe-meta__boxes">
					<div
						className="wp-block-lwn-recipe-lwn-recipe-meta__box"
						style={{ background: attributes.boxBackground }}
					>
						<p style={{ color: attributes.boxTitleColor }}>
							{__('Preparation Time', 'lwn-recipe')}
						</p>
						<p style={{ color: attributes.boxValueColor }}>
							{meta[metaKey]]}
						</p>
					</div>
				</div>
			</div>
		</>
	);
}
JavaScript

تعديل ملف save.js

ملف save.js بداخل المكون يجب أن يعيد null، ويمكنك أن تظهر الميتا التي اضفتها وحفظتها من خلال render_callback.

//save.js in the block

export default function Save() {

      return null;
}
JavaScript
function lwn_recipe_lwn_recipe_meta_block_init()
{
  register_block_type(__DIR__ . '/blocks/lwn-recipe-meta/build', [
    'render_callback' => 'lwn_recipe_lwn_recipe_meta_render_callback',
  ]);
}
add_action('init', 'lwn_recipe_lwn_recipe_meta_block_init');

// Lwn Recipe Render Callback
function lwn_recipe_lwn_recipe_meta_render_callback(
  $block_attributes,
  $content,
  $block
) {
  // Get the post type from context
  $post_type = isset($block->context['postType'])
    ? $block->context['postType']
    : null;
  // get the post id
  $post_id = isset($block->context['postId'])
    ? $block->context['postId']
    : null;

  // If post id not defined, return nothing
  if (!$post_id) {
    return;
  }

  // Get Color attributes
  $box_title_color = isset($block_attributes['boxTitleColor'])
    ? esc_attr($block_attributes['boxTitleColor'])
    : '#2d2c39';
  $box_value_color = isset($block_attributes['boxValueColor'])
    ? esc_attr($block_attributes['boxValueColor'])
    : '#8fb257';
  $box_background = isset($block_attributes['boxBackground'])
    ? esc_attr($block_attributes['boxBackground'])
    : '#8fb257';

  $metafieldMap = [
    'prep_time' => '_lwn_recipe_meta_prep_time',
  ];

  ob_start();
  ?>
		<div class="wp-block-lwn-recipe-lwn-recipe-meta <?php echo is_post_type_archive(
    $post_type
  )
    ? 'archive-page'
    : ''; ?> " >
			<div class="wp-block-lwn-recipe-lwn-recipe-meta__boxes">
				<div
					class="wp-block-lwn-recipe-lwn-recipe-meta__box"
					 style="background: <?php echo esc_attr($box_background); ?>"
				>
					<p style="color: <?php echo esc_attr($box_title_color); ?>">
						<?php echo __('Preparation Time', 'lwn-recipe'); ?>
					</p>
					<p style="color: <?php echo esc_attr($box_value_color); ?>">
							<?php echo esc_html(
         get_post_meta($post_id, $metafieldMap['prep_time'], true)
       ); ?>
					</p>
				</div>

				</div>
			</div>
<?php return ob_get_clean();
}
PHP

ملاحظة

الكود المستخدم في هذا المقتطف تم استخدامه باضافة lwn recipe المرفوعة على مستودع ووردبريس.

يمكنك أيضاً عرض الكود كاملاً في مستودع Github.