WordPress

edytor bloków – Jak edytować meta postów według identyfikatora postu w Gutenbergu

  • 27 września, 2022
  • 3 min read
edytor bloków – Jak edytować meta postów według identyfikatora postu w Gutenbergu


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,
} );


Źródło

Warto przeczytać!  wydajność — identyfikacja problemów w Pagespeed Insights: czas odpowiedzi serwera i długie zadania głównego wątku