Gutenberg, ajouter un select pour styliser l’image à la une

Juin 14, 2019 | wordPress | 0 commentaire

Le nouvel éditeur de wordPress, appelé Gutenberg ou Block editor change totalement les metaboxes que l’on pouvait ajouter simplement en php avec des filtres. Cet article traite de la mise en place d’un select pour styliser l’image à la une d’un article, en ajoutant une meta que l’on pourra tester pour afficher l’image à la une d’un article.

Ajouter une metabox à l'éditeur Gutenberg
Ajouter une metabox à l’éditeur Gutenberg

Précédemment, on ajoutait une nouvelle entrée au niveau de l’image à la une dans l’éditeur classique (tinyMCE) avec le filtre admin_post_thumbnail_html, traité dans cet article.

Dans un premier temps, on ajoute le style et le javascript pour le nouvel éditeur, et l’on enregistre la nouvelle meta pour l’article :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class XBS_Gutenberg {
 
   public function __construct() {
      add_action( 'enqueue_block_editor_assets', [$this, 'enqueue_block_editor_assets'] );
      add_action( 'init', [$this, 'register_meta'] );
   }
 
   public function enqueue_block_editor_assets() {
      wp_enqueue_style( 'gsf-block-editor', Galaxies_SF::url( 'assets/css/gutenberg.css' ), false, Galaxies_SF::VERSION );
      wp_enqueue_script( 'gsf-block-editor', Galaxies_SF::url( 'assets/js/gutenberg.js' ), ['wp-hooks'], Galaxies_SF::VERSION, true );
 
   }
 
   public function register_meta() {
      register_meta(
         'post',
         '_style_featured_image',
         array(        
            'single' => true,          
            'type' => 'string',      
            'show_in_rest' => true,          
         )
      );      
   }
 
}

Le fichier js gutenberg.js se charge d’afficher un select avec plusieurs choix : stretch étendue, float left flottement à gauche, float right flottement à droite, hidden non affichée.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/**
* Script to handle new editor features
*/
"use strict"
 
const el = wp.element.createElement,
      withState = wp.compose.withState,
      withSelect = wp.data.withSelect,
      withDispatch = wp.data.withDispatch;
 
wp.hooks.addFilter(      
   'editor.PostFeaturedImage',      
   'style-featured-image/style-featured-image-control',      
   wrapPostFeaturedImage
);
 
function wrapPostFeaturedImage( OriginalComponent ) {    
   return function( props ) {          
      return (
         el( wp.element.Fragment,
            {},
            el( OriginalComponent,
                props
            ),
            el( featuredImageSelect )
         )          
      );
   }
}
 
class Featured_Image_Select extends React.Component {      
   render() {        
      const {              
         meta,            
         updateStyleFeaturedImage,
      } = this.props;
 
      return (
         el( wp.components.SelectControl, {  
            label: "Style featured image",
            help: "Style the featured image for the post.",
            className: "style-featured-image",
            value: meta._style_featured_image,
            options: [
                { label: 'Strech', value: 'strech' },
                { label: 'Center', value: 'center' },
                { label: 'Float left', value: 'left' },
                { label: 'Float right', value: 'right' },
                { label: 'Do not display', value: 'hidden' },
            ],
 
            onChange: ( value ) => {
               this.setState( { value } );                              
               updateStyleFeaturedImage( value, meta );
            }
         })
      )
   }
}
 
const featuredImageSelect = wp.compose.compose( [
    withState( ( value ) => { isSelected: value } ),
    withSelect( ( select ) => {
        const currentMeta = select( 'core/editor' ).getCurrentPostAttribute( 'meta' );
        const editedMeta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        return {
            meta: { ...currentMeta, ...editedMeta },
        };
    } ),
    withDispatch( ( dispatch ) => ( {
        updateStyleFeaturedImage( value, meta ) {
            meta = {
                ...meta,
                _style_featured_image: value,
            };
            dispatch( 'core/editor' ).editPost( { meta } );
        },
    } ) ),
] )( Featured_Image_Select );

Dans wrapPostFeaturedImage, on affiche le composant de départ et l’on ajoute notre select à la fin avec la fonction featuredImageSelect. Cette fonction est définie à la fin et appelle la classe Featured_Image_Select qui étend la classe des composants React de Gutenberg. Cette classe définie le select, et indique la fonction de sauvegarde de la meta : updateStyleFeaturedImage.

La feuille de style gutenberg.css ne sert qu’à laisser un espace entre le select et l’image à la une, mais pourra servir aux autres personnalisations de l’éditeur par blocs.

1
2
3
4
5
6
7
/**
* Custom block editor style
*/
 
.components-base-control.style-featured-image {
   padding-top: 1em;
}

Et hop, lors de l’affichage d’un article single.php, on pourra appeler la meta _style_featured_image pour styliser l’image à la une de l’article.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.