web-dev-qa-db-fra.com

Utiliser le titre de la page dans le bloc de bannières personnalisées Gutenberg

J'ai créé un bloc d'image de bannière personnalisé pour Gutenberg, ce qui fonctionne très bien, mais je souhaite savoir s'il est possible d'utiliser le titre de la page en tant qu'emplacement fictif de bannière jusqu'à ce qu'il soit modifié.

 enter image description here 

Ma fonction d'édition est

 return [
            el('div', {className:'header-banner'},
                el(
                    element.Fragment,
                    null,
                    controls,
                    el( "div",{
                        className: 'banner-image',
                        style: { backgroundImage: 'url('+attributes.mediaURL+')' }
                    },
                    attributes.title || isSelected ?  el(RichText, {
                            key: 'editable',
                            tagName: "h1",
                            className: "banner-title",
                            //Can i add the page title in here if it is avaiable??
                            //placeholder: i18n.__('Write title…'),
                            value: attributes.title,
                            onChange: function onChange(value) {
                                return props.setAttributes({ title: value });
                            },
                            inlineToolbar: true
                        }) : null 

                    )
                )
            )//header-banner
        ];

Merci :)

block-editor
1
Jim-miraidev

Comme le sélecteur getDocumentTitle est obsolète, comme indiqué ici https://stackoverflow.com/questions/51674293/use-page-title-in-gutenberg-custom-banner-block/51792096#comment92130728_51792096

J'ai réussi à le faire fonctionner avec un léger Tweak au code par Jim-miraidev

var GetTitle = function GetTitle(props) {
    return el("h1", {className: "jab-banner-title"}, props.title);
};

var selectTitle = withSelect(function (select) {
    var title;

    if (typeof select("core/editor").getPostEdits().title !== 'undefined') {
        title = select("core/editor").getPostEdits().title;
    } else {
        title = select("core/editor").getCurrentPost().title;
    }

    return {
        title: title
    };
});
var PostTitle = selectTitle(GetTitle);

.....

return [
    el('div', {className:'jab-header-banner '+classes+''},
        el(
            element.Fragment,
            null,
            controls,
            el( "div",{
                className: 'jab-banner-image',
                style: { backgroundImage: 'url('+attributes.mediaURL+')' }
            },
            el(PostTitle,{className: "jab-banner-title"})
            )
        )
    )//header-banner
];
1
codekipple

Merci à la réponse dans ce post, j'ai réussi à ajouter le titre dans la bannière et il met à jour que le titre du post est mis à jour.

https://stackoverflow.com/questions/51674293/use-page-title-in-gutenberg-custom-banner-block/51792096#51792096

var withSelect  = wp.data.withSelect;

var GetTitle = function GetTitle(props) {
      return el("h1",{className: "jab-banner-title"},props.title);
};

var selectTitle = withSelect(function (select) {
     return {
            title: select("core/editor").getDocumentTitle()
     };
});
var PostTitle = selectTitle(GetTitle);

.....

 return [
            el('div', {className:'jab-header-banner '+classes+''},
                el(
                    element.Fragment,
                    null,
                    controls,
                    el( "div",{
                        className: 'jab-banner-image',
                        style: { backgroundImage: 'url('+attributes.mediaURL+')' }
                    },
                    el(PostTitle,{className: "jab-banner-title"})
                    )
                )
            )//header-banner
        ];
2
Jim-miraidev