如何存储值并将值传递给服务器

Question

我正在创建一个需要渲染的服务器端块，以便从另一个CPT中获取数据，因此我需要将无法保存为post meta的post_id存储在该块中，因为上面没有随机的相同块页面

我猜我需要得到注释才能存储数据

<！ -wp：mvc / block-mvc-offer-details {“ className”：“ offer”，“ post_id”：1234} /->

因此它可用于页面渲染

我该怎么做？

非常感谢

这是我到目前为止的分组代码

/**
 * BLOCK: mvc-landing-pages
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './editor.scss';
import './style.scss';

const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks

const {Spinner, SelectControl} = wp.components;
const {withSelect} = wp.data;
const {Fragment} = wp.element;
const {serverSideRender: ServerSideRender} = wp;


/**
 * Register: a Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType('mvc/block-mvc-offer-details', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __('MVC Offer details - MVC Block'), // Block title.
	icon: 'tickets-alt', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: 'mvc-blocks', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__('mvc — CGB Block'),
		__('Attractions'),
	],
	attributes: {
		data_offer: {
			type: 'integer',
			source: 'attribute',
			selector: 'div.data-offer',
			attribute: 'data-offer',
		},
	},
	/**
	 * The edit function describes the structure of your block in the context of the editor.
	 * This represents what the editor will render when the block is used.
	 *
	 * The "edit" property must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 *
	 *
	 * @returns {Mixed} JSX Component.
	 */
	edit: withSelect(select => {
		return {
			offers: select('core').getEntityRecords('postType', 'offer-landing', {per_page: -1})
			//, fields: ['id', 'name', 'location']
		};
	})((props) => {
		const {
			attributes: {data_offer},
			className, isSelected, setAttributes, offers
		} = props;

		if (!offers) {
			return (
				<p className={className}>
					<Spinner/>
					{__('Loading Resorts', 'mvc')}
				</p>
			);
		}
		if (0 === offers.length) {
			return <p>{__('No Offers Selected', 'mvc')}</p>;
		}


		const options = offers.map(obj => {
			var options = {};
			options = {label: obj.title.rendered, value: obj.id};
			return options;
		});
		console.log(data_offer);
		// if (0 === data_offer) {
		options.unshift({label: 'Select Offer', value: null});
		// }

		// const data_offer = offers.filter(o => o.id === parseInt(data_offer));
		return (

			isSelected ? (
				<Fragment>
					<SelectControl
						id="mvc-offers"
						label={__('offers', 'mvc')}
						value={data_offer}
						onChange={data_offer => setAttributes({data_offer})}
						options={options}
					/>
				</Fragment>


			) : (
				//Put a user interface here.

				<div className={className}>
					<div className="data-offer" data-offer={data_offer}>
						<ServerSideRender block="mvc/block-mvc-offer-details"
										  attributes={{
											  data_offer: data_offer,
										  }}
						/>
					</div>
				</div>
			));
	}),


	/**
	 * The save function defines the way in which the different attributes should be combined
	 * into the final markup, which is then serialized by Gutenberg into post_content.
	 *
	 * The "save" property must be specified and must be a valid function.
	 *
	 * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
	 *
	 * @param {Object} props Props.
	 * @returns {Mixed} JSX Frontend HTML.
	 */
	save: (props) => {
		const {
			attributes: {data_offer},
			className
		} = props;
		return (
			<div className={className}>
				<div className="data-offer" data-offer={data_offer}>
				{/*<ServerSideRender block="mvc/block-mvc-offer-details"*/}
				{/*				  attributes={{*/}
				{/*					  data_offer: data_offer,*/}
				{/*				  }}*/}
				{/*/>*/}
				</div>
			</div>
		);
	},
});