PHP κώδικας
Καθώς εδώ δεν έχουμε κάτι πολύ διαφορετικό από τα αρχιτεκτονικά project, προσθέτουμε τις παρακάτω μεθόδους στην κλάση VisualizationProject, στο αρχείο src/VisualizationProject.php:
public static function RegisterProjectMeta() {
register_post_meta( 'dh_at_3dvizproj', 'dh_project_info', array(
'single' => true,
'type' => 'object',
'show_in_rest' => array(
'schema' => array(
'type' => 'object',
'properties' => array(
'location' => array(
'type' => 'string',
),
'year' => array(
'type' => 'string',
'minLength' => 4,
'maxLength' => 4,
'pattern' => '[0-9]{4}',
),
'client' => array(
'type' => 'string',
),
),
),
),
'auth_callback' => function() {
return current_user_can('edit_visualization_projects');
},
) );
}
public static function RegisterProjectMetaBlock() {
register_block_type(
__DIR__ . DIRECTORY_SEPARATOR . 'vizmeta-info-block',
array(
'render_callback' => function($attributes) {
return VisualizationProject::MetaBlockFrontEndTemplatePartHTML($attributes);
},
)
);
}
public static function MetaBlockFrontEndTemplatePartHTML($attributes) {
$wrapper_attributes = get_block_wrapper_attributes();
if ( ! empty($attributes['vizprojectId'])) {
$id = $attributes['vizprojectId'];
} else {
$id = get_the_ID();
}
$metadata = get_post_meta( $id, 'dh_project_info', true );
ob_start(); ?>
<div <?php echo esc_attr($wrapper_attributes); ?>>
<table style="border-collapse: collapse">
<thead>
<th style="padding:0 2em;border: 1px solid grey">Location</th>
<th style="padding:0 2em;border: 1px solid grey">Year</th>
<th style="padding:0 2em;border: 1px solid grey">Client</th>
</thead>
<tbody>
<td style="padding:0 2em;border: 1px solid grey"><?php echo esc_html( $metadata['location'] ); ?></td>
<td style="padding:0 2em;border: 1px solid grey"><?php echo esc_html( $metadata['year'] ); ?></td>
<td style="padding:0 2em;border: 1px solid grey"><?php echo esc_html( $metadata['client'] ); ?></td>
</table>
</div>
<?php return ob_get_clean();
}block.json
Δημιουργούμε το φάκελο src/vizmeta-info-block και το αρχείο src/vizmeta-info-block/block.json που περιέχει τα εξής:
{
"$schema": "https://json.schemastore.org/block.json",
"apiVersion": 2,
"name": "dh-architect-plugin/vizmeta-info-block",
"version": "1.0.0",
"title": "Visualization Project Information",
"category": "dh-architect",
"icon": "smiley",
"description": "An example block viewing and saving post meta",
"attributes": {
"vizprojectId": {
"type": "string"
}
},
"supports": {
"html": false,
"multiple": true,
"align": true
},
"textdomain": "dh-architect-plugin",
"editorScript": "file:../../build/editor.js",
"viewScript": "file:../../build/index.js"
}
JavaScript κώδικας
Δημιουργούμε το αρχείο src/vizmeta-info-block/editor.js με τον παρακάτω κώδικα:
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { TextControl } from '@wordpress/components';
registerBlockType('dh-architect-plugin/vizmeta-info-block', {
edit: ( props ) => {
const blockProps = useBlockProps();
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
if ( postType === 'dh_at_3dvizproj' ) {
const currentPost = useSelect(
( select ) => select( 'core/editor' ).getCurrentPost(),
[]
);
const currentPostId = currentPost['id'];
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta', currentPostId );
const myMeta = meta['dh_project_info'];
const updateMetaLocation = (newLocation) => {
const newMeta = Object.assign({...meta['dh_project_info']}, {location: newLocation.toString()});
setMeta( { ...meta, dh_project_info: newMeta } );
};
const updateMetaYear = (newYear) => {
const newMeta = Object.assign({...meta['dh_project_info']}, {year: newYear.toString()});
setMeta( { ...meta, dh_project_info: newMeta } );
};
const updateMetaClient = (newClient) => {
const newMeta = Object.assign({...meta['dh_project_info']}, {client: newClient.toString()});
setMeta( { ...meta, dh_project_info: newMeta } );
};
return (
<div { ...blockProps }>
<TextControl
label="Location"
value={ ( myMeta && myMeta.location ) ? myMeta.location : "" }
onChange={ updateMetaLocation }
/>
<TextControl
label="Year"
value={ ( myMeta && myMeta.year ) ? myMeta.year : "" }
onChange={ updateMetaYear }
/>
<TextControl
label="Client"
value={ ( myMeta && myMeta.client ) ? myMeta.client : "" }
onChange={ updateMetaClient }
/>
</div>
)
} else {
const allVisualizationProjects = useSelect( select => {
return select('core').getEntityRecords('postType', 'dh_at_3dvizproj', {per_page: -1})
})
if ( ! allVisualizationProjects ) {
return <div>Loading visualization projects... Please wait.</div>
} else {
return (
<div { ...blockProps }>
<select onChange = { event => props.setAttributes({vizprojectId: event.target.value}) }>
<option value="">Select a visualization project</option>
{ allVisualizationProjects.map( vizproj => {
return (
<option value={vizproj.id} selected = {props.attributes.vizprojectId == vizproj.id}>
{vizproj.title.rendered}
</option>
)
})}
</select>
</div>
)
}
}
},
save: () => {
return null;
}
});και προσθέτουμε την ακόλουθη γραμμή στο αρχείο src/editor.js για να συμπεριλάβουμε τον κώδικά του κατά την μεταγλώτιση του κώδικα του plugin.
import './vizmeta-info-block/editor.js';
Block registration
Πρέπει επίσης να προσθέσουμε τις ακόλουθες γραμμές κώδικα στο τέλος του αρχείου dh-architect-plugin.php για να καταχωρήσουμε τα metadata και τα block μέσω των οποίων χειριζόμαστε τα metadata για το VisualizationProject CPT:
/* Register the project_info metadata for VisualizationProject CPT */ add_action( 'init', ['DasodaHae\Architect\VisualizationProject', 'RegisterProjectMeta'] ); /* Register the Visualization Project Info Block */ add_action( 'init', ['DasodaHae\Architect\VisualizationProject', 'RegisterProjectMetaBlock'] );