web-dev-qa-db-fra.com

Comment ajouter un nouveau panneau sous "document" dans Gutenberg

J'essaie d'ajouter un nouveau panneau de composants sous l'onglet du document, comme les catégories, l'image sélectionnée, etc.

enter image description here

wordpresswordpress-gutenberg
16
daniyalahmad

add_meta_box fera l'affaire, mais seulement si vous ajoutez l'argument context- avec une valeur de 'side':

add_meta_box(
    'box-id-here',
    'Box Title Here',
    'createBoxHtml',
    'post',
    'side' ); // <-- this is important

Arrrh, deux jours pour rien!

Ancienne réponse

Selon ce tutoriel , nous pouvons ajouter notre barre latérale personnalisée et la remplir avec des entrées de formulaire personnalisées.

Voici un exemple de travail dans une version React JSX. Cela ajoute un méta-champ country:

const { registerPlugin } = wp.plugins;
const { PluginSidebar } = wp.editPost;
const { TextControl } = wp.components;
const { withSelect, withDispatch } = wp.data;

// Customized TextControl
const CustomMetaField = withDispatch( ( dispatch, props ) => {
    return {
        updateMetaValue: ( v ) => {
            dispatch( 'core/editor' ).editPost( {
                meta: {
                    [ props.metaFieldName ]: v
                }
            });
        }
    };
})( withSelect( ( select, props ) => {
    return {
        [ props.metaFieldName ]: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaFieldName ]
    };
} )( ( props ) => (
    <TextControl
        value={props[ props.metaFieldName ] }
        label="Country"
        onChange={( v ) => {
            props.updateMetaValue( v );
        }}
    /> )
) );


// Our custom sidebar
registerPlugin( 'custom-sidebar', {
    render() {
        return (
            <PluginSidebar
                name="project-meta-sidebar"
                title="Project Meta">
                <div className="plugin-sidebar-content">
                    <CustomMetaField metaFieldName="country" />
                </div>
            </PluginSidebar>
        );
    },
} );

Et en PHP, enregistrez le champ méta dans le crochet init-:

register_meta( 'post', 'country', [
    'show_in_rest' => TRUE,
    'single' => TRUE,
    'type' => 'string'
] );

Je sais:

Ce n'est toujours pas la solution requise, mais presque.

6
uruk

Ils ont ajouté PluginDocumentSettingPanel SlotFill maintenant.

const { registerPlugin } = wp.plugins
const { PluginDocumentSettingPanel } = wp.editPost

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel
        name="custom-panel"
        title="Custom Panel"
        className="custom-panel"
    >
        Custom Panel Contents
    </PluginDocumentSettingPanel>
)
registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
})

Ce n'est pas dans WordPress core pour le moment, vous pouvez donc attendre que le core soit mis à jour, ou si vous téléchargez le plugin Gutenberg, vous pouvez commencer à l'utiliser maintenant.

4
Rice_Crisp

Vous pouvez ajouter ce code à votre function.php. Ce code crée un nouvel onglet et ajoute un champ de texte à cet onglet. Le champ de texte est enregistré dans la base de données comme un champ personnalisé dans la table post_meta et vous pouvez le sortir comme par défaut WP post meta.
1. Créez l'onglet Настройки UTM.
2. Créez un champ de texte personnalisé utm_post_class
3. Pour sortir sur le site Web, utilisez $utm = get_post_meta( $post->ID, 'utm_post_class', true );

//Article UTM Link
add_action( 'load-post.php', 'utm_post_meta_boxes_setup' );
add_action( 'load-post-new.php', 'utm_post_meta_boxes_setup' );

function utm_post_meta_boxes_setup() {
    add_action( 'add_meta_boxes', 'utm_add_post_meta_boxes' );
    add_action( 'save_post', 'utm_save_post_class_meta', 10, 2 );
}

function utm_add_post_meta_boxes() {
    add_meta_box(
        'utm-post-class',
        'Настройки UTM',
        'utm_post_class_meta_box',
        'post',
        'side',
        'default'
    );
}

function utm_post_class_meta_box( $post ) {
    wp_nonce_field( basename( __FILE__ ), 'utm_post_class_nonce' );?>

    <div class="components-base-control editor-post-excerpt__textarea">
        <div class="components-base-control__field">
            <label class="components-base-control__label" for="utm-post-class">UTM ссылка (необязательно)</label>
            <input type="text" name="utm-post-class" id="utm-post-class" class="edit-post-post-schedule" value="<?php echo esc_attr( get_post_meta( $post->ID, 'utm_post_class', true ) ); ?>">
        </div>
    </div>
<?php }

function utm_save_post_class_meta( $post_id, $post ) {

    if ( !isset( $_POST['utm_post_class_nonce'] ) || !wp_verify_nonce( $_POST['utm_post_class_nonce'], basename( __FILE__ ) ) )
        return $post_id;

    $post_type = get_post_type_object( $post->post_type );
    if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
        return $post_id;

    $new_meta_value = ( isset( $_POST['utm-post-class'] ) ? $_POST['utm-post-class'] : '' );
    $meta_key = 'utm_post_class';
    $meta_value = get_post_meta( $post_id, $meta_key, true );

    if ( $new_meta_value && '' == $meta_value )
        add_post_meta( $post_id, $meta_key, $new_meta_value, true );
    elseif ( $new_meta_value && $new_meta_value != $meta_value )
        update_post_meta( $post_id, $meta_key, $new_meta_value );
    elseif ( '' == $new_meta_value && $meta_value )
        delete_post_meta( $post_id, $meta_key, $meta_value );
}
2
Кирилл Меркушев

add_meta_box y ajoute un nouveau panneau pour l'éditeur gutenberg

0
Swopnil Dangol