2

I have created a custom banner image block for Gutenberg, which works great, but I want to know if it is possible to use the page title as the current banner text placeholder until it has been edited?

enter image description here

My Edit function is

 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
        ];    

Thanks :)

0
3

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
]; 
2

Thanks to the answer in this post i have managed to add the title into the banner and it updates as the post title is being updated.

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
        ]; 
0

This worked for me

let title = typeof select("core/editor").getPostEdits().title !== 'undefined' ? select("core/editor").getPostEdits().title : select("core/editor").getCurrentPost().title;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.