Use page Title in Gutenberg custom banner block

Due to the getDocumentTitle selector being deprecated as mentioned here https://stackoverflow.com/questions/51674293/use-page-title-in-gutenberg-custom-banner-block/51792096#comment92130728_51792096

I managed to get it working with a slight tweak to the code by 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
]; 

Leave a Comment