edytor bloków – Jak edytować meta postów według identyfikatora postu w Gutenbergu
![edytor bloków – Jak edytować meta postów według identyfikatora postu w Gutenbergu](https://oen.pl/wp-content/uploads/2023/06/apple-touch-icon@2.png)
Jaka jest najlepsza praktyka, aby to zrobić w Gutenberg/JavaScript:
update_post_meta( $page_id, '_custom_post_meta', 'Some data to be saved' );
- Muszę to zrobić z pola paska bocznego
- Niestandardowa meta jest zarejestrowana i mogę ją zaktualizować dla aktualnie edytowanego posta
- Muszę to zrobić w innym poście, a nie w tym, który aktualnie edytowałem
Oto przypadek użycia:
const UpdateMeta = () => {
const { editPost } = useDispatch( 'core/editor' );
const onChange = ( value ) => {
editPost( { // I am updating currently edited post here, and that's fine
meta: { _custom_meta : JSON.stringify( value ) },
} );
// But, I would like to change some other post meta, selected by thID
};
return (
<FormTokenField
value={ selectedContinents }
suggestions={ suggestionsList }
__experimentalShowHowTo={false}
onChange={ onChange }
displayTransform={ prepare }
/>
);
}
const Component = () => (
<PluginDocumentSettingPanel
title={ 'My Sidebar Box' }>
<UpdateMeta/>
</PluginDocumentSettingPanel>
);
registerPlugin( 'my-plugin-name', {
icon: '',
render: Component,
} );
Wykluczyłem nieistotne części kodu.
Aktualizacja:
Udostępniam tutaj pełny kod (kod to WIP, proszę zignorować ewentualne błędy i braki:
const { registerPlugin } = wp.plugins;
const { FormTokenField } = wp.components;
const { PluginDocumentSettingPanel } = wp.editPost;
const { useSelect, useDispatch } = wp.data;
const { useState } = wp.element;
let targetType="";
const RelatedDifferentTypePosts = () => {
const postType = wp.data.select( 'core/editor' ).getCurrentPostType();
switch ( postType ) {
case 'display':
targetType="event";
break;
case 'event':
targetType="display";
break;
}
const postMetaField = `_assigned_${ targetType }s`;
const isLoading = useSelect( ( select ) => {
return select( 'core/data' ).isResolving( 'core', 'getEntityRecords', [
'postType', targetType
] );
} );
const assignedPosts = useSelect(
( select ) => select( 'core/editor' ).getEditedPostAttribute( 'meta' )[postMetaField], []
);
const targetPostsRaw = useSelect(
( select ) => select( 'core' ).getEntityRecords( 'postType', targetType ), []
);
let valueTitlePair = [];
if ( targetPostsRaw ) {
valueTitlePair = targetPostsRaw.map( ( postItem ) => {
const tempObj = {};
tempObj.id = postItem.id;
tempObj.slug = postItem.slug;
return tempObj;
} );
}
const slugs = assignedPosts ? Array.from( JSON.parse( assignedPosts ), ( item ) => { return item.slug; } ) : [];
const [ selectedPosts, setSelectedPosts ] = useState( slugs );
let suggestionsList;
if ( targetPostsRaw ) {
suggestionsList = Array.from( targetPostsRaw, ( postItem ) => {
return postItem.slug;
} );
}
const { editPost } = useDispatch( 'core/editor' );
const onChange = ( value ) => {
/* Prevent entering non existing Events */
value = value.filter( ( entry ) => suggestionsList.includes( entry ) );
setSelectedPosts( value );
value = valueTitlePair.filter( pair => value.includes( pair.slug ) );
editPost( {
meta: { [ postMetaField ] : JSON.stringify( value ) },
} );
};
const prepare = ( token ) => {
return token.replaceAll( '-', ' ' ).replace( /(^\w|\s\w)/g, m => m.toUpperCase() );
};
if ( isLoading ) {
return <h3>Loading...</h3>;
}
return (
<FormTokenField
value={ selectedPosts }
suggestions={ suggestionsList }
__experimentalShowHowTo={false}
onChange={ onChange }
displayTransform={ prepare }
/>
);
};
/**
* Component
*/
const Component = () => (
<PluginDocumentSettingPanel
title={ `Related ${ targetType.charAt( 0 ).toUpperCase() + targetType.slice( 1 ) }s` }>
<RelatedDifferentTypePosts/>
</PluginDocumentSettingPanel>
);
registerPlugin( 'related-posts-of-different-type', {
icon: '',
render: Component,
} );